refactor(operator): derive env badge from hostname, not from user choice
A toggle-able env badge is a sticker, not a safety signal. Move env to
useEnv() which reads window.location.hostname:
*.local / localhost → 'dev'
*staging* → 'staging'
everything else → 'prod' (safest default)
- New composable: apps/operator/composables/useEnv.ts
- Topbar reads useEnv() instead of useTweaks().env
- useTweaks loses the env field; hydrate strips it from stale
localStorage payloads so old entries don't break
- TweaksPanel: env section removed (theme + density remain)
- Settings: env section removed from Appearance; added a read-only
Environment row to the Profile card showing the detected env +
hostname source ("auto-detected from operator.dezky.local")
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
// Floating cosmetic-tweaks panel. Lives in the bottom-right corner. Lets the
|
||||
// operator flip theme/density/env without touching settings pages. All three
|
||||
// are pure-cosmetic — env in particular is just a colored chip in the topbar,
|
||||
// not a real environment switch.
|
||||
// Floating cosmetic-tweaks panel. Lives in the bottom-right corner. Quick
|
||||
// theme + density toggle without leaving the page. The env badge is NOT
|
||||
// here — it's derived from the hostname (see useEnv) so the operator can
|
||||
// trust it as a real environment signal, not a sticker they flipped.
|
||||
|
||||
const { state, setTheme, setDensity, setEnv } = useTweaks()
|
||||
const { state, setTheme, setDensity } = useTweaks()
|
||||
const open = ref(false)
|
||||
</script>
|
||||
|
||||
@@ -39,15 +39,6 @@ const open = ref(false)
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<label class="row-label">Env badge</label>
|
||||
<div class="seg three">
|
||||
<button :class="{ on: state.env === 'prod' }" type="button" @click="setEnv('prod')">PROD</button>
|
||||
<button :class="{ on: state.env === 'staging' }" type="button" @click="setEnv('staging')">STAGING</button>
|
||||
<button :class="{ on: state.env === 'dev' }" type="button" @click="setEnv('dev')">DEV</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<Mono dim>// cosmetic only — saved to localStorage</Mono>
|
||||
</footer>
|
||||
@@ -129,7 +120,6 @@ section { display: flex; flex-direction: column; gap: 6px; }
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 7px;
|
||||
}
|
||||
.seg.three { grid-template-columns: 1fr 1fr 1fr; }
|
||||
.seg button {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
|
||||
Reference in New Issue
Block a user