83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
export type DisplayMode = 'classic' | 'studio'
|
|
|
|
const STORAGE_KEY = 'aigen.displayMode'
|
|
|
|
function parseMode(raw: unknown): DisplayMode | null {
|
|
const value = String(raw || '').trim().toLowerCase()
|
|
return value === 'classic' || value === 'studio' ? value : null
|
|
}
|
|
|
|
function readStored(): DisplayMode {
|
|
if (!import.meta.client) return 'studio'
|
|
try {
|
|
return parseMode(localStorage.getItem(STORAGE_KEY)) || 'studio'
|
|
} catch {
|
|
return 'studio'
|
|
}
|
|
}
|
|
|
|
function writeStored(mode: DisplayMode) {
|
|
if (!import.meta.client) return
|
|
try {
|
|
localStorage.setItem(STORAGE_KEY, mode)
|
|
} catch { /* ignore quota / private mode */ }
|
|
}
|
|
|
|
/** Classic | Studio chrome skin. One Bench tree; layout only. */
|
|
export function useDisplayMode() {
|
|
const route = useRoute()
|
|
const displayMode = useState<DisplayMode>('aigen.displayMode', () => 'studio')
|
|
const sessionOverride = useState<DisplayMode | null>('aigen.displayMode.session', () => null)
|
|
const hydrated = useState('aigen.displayMode.hydrated', () => false)
|
|
|
|
const resolved = computed<DisplayMode>(() => {
|
|
const fromQuery = parseMode(route.query.display)
|
|
if (fromQuery) return fromQuery
|
|
if (sessionOverride.value) return sessionOverride.value
|
|
return displayMode.value
|
|
})
|
|
|
|
function setDisplayMode(mode: DisplayMode, opts?: { persist?: boolean; session?: boolean }) {
|
|
const persist = opts?.persist !== false
|
|
if (opts?.session) sessionOverride.value = mode
|
|
else sessionOverride.value = null
|
|
displayMode.value = mode
|
|
if (persist) writeStored(mode)
|
|
}
|
|
|
|
function hydrate() {
|
|
if (hydrated.value) return
|
|
hydrated.value = true
|
|
const fromQuery = parseMode(route.query.display)
|
|
if (fromQuery) {
|
|
sessionOverride.value = fromQuery
|
|
return
|
|
}
|
|
displayMode.value = readStored()
|
|
}
|
|
|
|
if (import.meta.client) {
|
|
onMounted(hydrate)
|
|
watch(
|
|
() => route.query.display,
|
|
(raw) => {
|
|
const fromQuery = parseMode(raw)
|
|
if (fromQuery) sessionOverride.value = fromQuery
|
|
else if (sessionOverride.value && !parseMode(route.query.display)) {
|
|
// Drop session override when query cleared; keep stored preference.
|
|
sessionOverride.value = null
|
|
displayMode.value = readStored()
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
return {
|
|
displayMode: resolved,
|
|
storedDisplayMode: displayMode,
|
|
setDisplayMode,
|
|
isStudio: computed(() => resolved.value === 'studio'),
|
|
isClassic: computed(() => resolved.value === 'classic')
|
|
}
|
|
}
|