feat(operator): command palette, impersonation, incident, tweaks (O.8)

- CommandPalette + useCommandPalette: ⌘K opens a search-and-jump panel over real tenants/partners + fixture flags + nav + actions. Arrow keys + Enter navigate, Escape/backdrop close. Recents are intentionally omitted for now; add when there's something to recent over. - Impersonation stub: useImpersonation + ImpersonationModal + ImpersonationBanner. Modal opens from tenant detail and from the palette. Banner stays at the top of the shell until exited. No real OBO token is minted — wiring OAuth Token Exchange is tracked as a follow-up. - IncidentModal + useIncidentModal: opened from the Overview and Infrastructure incident banners, renders the mock INCIDENT data with metrics, timeline and draft composer. - TweaksPanel + useTweaks: floating bottom-right panel for theme (dark/light), density (comfy/compact), env badge (prod/staging/dev). Saved to localStorage. - Theme/density apply via [data-theme] + [data-density] overrides in tokens.css. Topbar env badge now reads from useTweaks instead of a prop. - Layout wires ⌘K + ⌘[ at the document level and mounts the palette + modals + banner + tweaks panel once for all pages.
2026-05-24 08:34:34 +02:00
parent e0ac643e80
commit c71e782dc0
16 changed files with 1162 additions and 30 deletions
@@ -0,0 +1,69 @@
+// Cosmetic tweaks for the operator shell — theme (dark/light), density
+// (comfy/compact), env badge (prod/staging/dev). Persisted in localStorage so
+// the choices survive page reloads. The values are applied to <html> as
+// data-* attributes; tokens.css picks them up via selector overrides.
+
+export type ThemeMode = 'dark' | 'light'
+export type Density = 'comfy' | 'compact'
+export type Env = 'prod' | 'staging' | 'dev'
+
+interface TweakState {
+  theme: ThemeMode
+  density: Density
+  env: Env
+}
+
+const STORAGE_KEY = 'dezky-operator-tweaks'
+
+const DEFAULTS: TweakState = { theme: 'dark', density: 'comfy', env: 'dev' }
+
+const state = ref<TweakState>({ ...DEFAULTS })
+const hydrated = ref(false)
+
+function apply() {
+  if (!import.meta.client) return
+  const root = document.documentElement
+  root.setAttribute('data-theme', state.value.theme)
+  root.setAttribute('data-density', state.value.density)
+}
+
+function persist() {
+  if (!import.meta.client) return
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state.value))
+  } catch {
+    // localStorage can throw in private mode; tweaks are cosmetic so swallow.
+  }
+}
+
+function hydrate() {
+  if (!import.meta.client || hydrated.value) return
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (raw) {
+      const parsed = JSON.parse(raw) as Partial<TweakState>
+      state.value = { ...DEFAULTS, ...parsed }
+    }
+  } catch {
+    // ignore corrupt JSON
+  }
+  apply()
+  hydrated.value = true
+}
+
+export const useTweaks = () => {
+  if (import.meta.client) hydrate()
+
+  function set<K extends keyof TweakState>(key: K, value: TweakState[K]) {
+    state.value = { ...state.value, [key]: value }
+    apply()
+    persist()
+  }
+
+  return {
+    state,
+    setTheme: (v: ThemeMode) => set('theme', v),
+    setDensity: (v: Density) => set('density', v),
+    setEnv: (v: Env) => set('env', v),
+  }
+}