import { defineStore } from 'pinia' import { ref } from 'vue' // v2 shell UI state ONLY (RFC-WS-GUI-REDESIGN AD-G4). No tenant/org // state — that stays in useAuthStore/useOrganisationStore. Owns the // writes to /.dark; v2 bypasses Vuexy useSkins.ts. // // AD-2.5-D1 (RFC-WS-PRIMEVUE-PLAN-2-5 §4): dark mode is the single // class `.dark` on document.documentElement. Tailwind v4's // @custom-variant dark (in assets/styles/tailwind.css) and PrimeVue's // darkModeSelector (in plugins/primevue/index.ts:31) both react to // that class — one toggle, both ecosystems. The historic // mechanism is superseded and removed. export type ShellTheme = 'light' | 'dark' export type ShellDensity = 'comfortable' | 'compact' export interface ShellDrawerState { isOpen: boolean component: string | null props: Record } export const useShellUiStore = defineStore('shellUi', () => { const sidebarCollapsed = ref(false) const mobileOpen = ref(false) const density = ref('comfortable') const theme = ref('light') const drawer = ref({ isOpen: false, component: null, props: {} }) function toggleSidebar(): void { sidebarCollapsed.value = !sidebarCollapsed.value } function setMobileOpen(v: boolean): void { mobileOpen.value = v } function setTheme(next: ShellTheme): void { theme.value = next } function setDensity(next: ShellDensity): void { density.value = next } /** * Plan 2.5 P6 Fix 10: binary UI toggle between the two density extremes * the topbar exposes. Pure state mutation — the write * is owned by AppShellV2's `watch([theme, density])`, the single * applyDomAttributes() authority. Mirrors setTheme(), which has always * relied on that same watcher. * * Plan 2.5 P8 dedupe: this previously also called applyDomAttributes() * directly, so a density toggle fired it twice (idempotent but redundant — * once here, once via the watch). The direct call was removed; the watch * still covers the change. */ function toggleDensity(): void { density.value = density.value === 'compact' ? 'comfortable' : 'compact' } function applyDomAttributes(): void { const el = document.documentElement // AD-2.5-D1: dark mode is `.dark` on . PrimeVue // darkModeSelector and Tailwind v4 @custom-variant dark both // resolve to this class — see file header. if (theme.value === 'dark') el.classList.add('dark') else el.classList.remove('dark') // Density continues to use data-attribute (orthogonal axis to // colour scheme; coexists with the .dark class on the same root). // Density toggle UI lands in P6 Fix 10. el.setAttribute('data-density', density.value) } function openDrawer(component: string, props: Record = {}): void { drawer.value = { isOpen: true, component, props } } function closeDrawer(): void { drawer.value = { isOpen: false, component: null, props: {} } } return { sidebarCollapsed, mobileOpen, density, theme, drawer, toggleSidebar, setMobileOpen, setTheme, setDensity, toggleDensity, applyDomAttributes, openDrawer, closeDrawer, } })