/** * useDensity — global UI density toggle (comfortable | compact). * * Persists in a cookie so the server can pick the right value during SSR * and avoid a comfortable→compact flash for users on compact mode. * Applies as a class on . * Forced to 'comfortable' on viewports < 1024 px to keep tap targets ≥ 44 px. * * docs/technical/design-system.md §5 */ import { STORAGE_KEYS } from '~/constants/storage' export type Density = 'comfortable' | 'compact' export function useDensity() { const cookie = useCookie(STORAGE_KEYS.DENSITY, { default: () => 'comfortable', sameSite: 'lax', maxAge: 60 * 60 * 24 * 365 }) const density = useState('ui:density', () => cookie.value ?? 'comfortable') // Bind the class to on both server and client so SSR ships the // right density and there is no FOUC for compact-mode users. useHead({ htmlAttrs: { class: () => `density-${density.value}` } }) function applyToHtml(value: Density) { if (!import.meta.client) return const html = document.documentElement html.classList.remove('density-comfortable', 'density-compact') html.classList.add(`density-${value}`) } function setDensity(value: Density) { density.value = value cookie.value = value if (import.meta.client) applyToHtml(value) } function toggle() { setDensity(density.value === 'comfortable' ? 'compact' : 'comfortable') } // Narrow viewports get forced to comfortable so tap targets stay ≥ 44 px. // SSR cannot know viewport width, so this only runs on the client; the // cookie still seeds the initial render so no flash happens for desktop users. function init() { if (!import.meta.client) return const narrow = window.matchMedia('(max-width: 1023px)').matches const initial: Density = narrow ? 'comfortable' : density.value if (initial !== density.value) density.value = initial applyToHtml(initial) } return { density, setDensity, toggle, init } }