// shell.jsx — OpenDicta app shell. // Each page HTML sets window.__VN_PAGE before this script runs. // Navigation between pages is real links; prefs persist via localStorage. const PREFS_KEY = 'voicenote.prefs.v1'; const PREFS_DEFAULTS = { accent: '#dbef6a', density: 'regular', sidebar: 'icons', userName: 'Alex', aiEnabled: true, }; const THEMES = [ { id:'chartreuse', name:'Chartreuse', sub:'The default — energetic', accent:'#dbef6a' }, { id:'sand', name:'Warm sand', sub:'Soft, document-like', accent:'#e9c894' }, { id:'rose', name:'Dusty rose', sub:'Playful and warm', accent:'#d8a8b5' }, { id:'slate', name:'Cool slate', sub:'Quiet, professional', accent:'#a8c2db' }, ]; function loadPrefs() { try { const v = JSON.parse(localStorage.getItem(PREFS_KEY) || '{}'); return { ...PREFS_DEFAULTS, ...v }; } catch (e) { return { ...PREFS_DEFAULTS }; } } function savePrefs(p) { try { localStorage.setItem(PREFS_KEY, JSON.stringify(p)); } catch (e) {} } function usePrefs() { const [prefs, setPrefsState] = React.useState(loadPrefs); const setPrefs = React.useCallback((k, v) => { setPrefsState((prev) => { const next = (typeof k === 'object' && k !== null) ? { ...prev, ...k } : { ...prev, [k]: v }; savePrefs(next); return next; }); }, []); // listen to changes in other tabs / windows React.useEffect(() => { const onStorage = (e) => { if (e.key === PREFS_KEY) setPrefsState(loadPrefs()); }; window.addEventListener('storage', onStorage); return () => window.removeEventListener('storage', onStorage); }, []); return [prefs, setPrefs]; } window.usePrefs = usePrefs; window.THEMES = THEMES; const NAV = [ { id: 'dashboard', label: 'Dashboard', icon: 'Dashboard', href: 'Dashboard.html' }, { id: 'insights', label: 'Insights', icon: 'Insights', href: 'Insights.html' }, { id: 'models', label: 'Models', icon: 'Models', href: 'Models.html' }, { id: 'style', label: 'Style', icon: 'Style', href: 'Style.html' }, { id: 'ai', label: 'AI', icon: 'AI', href: 'AI.html' }, { id: 'settings', label: 'Settings', icon: 'Settings', href: 'Settings.html' }, ]; function Shell() { const [prefs, setPrefs] = usePrefs(); const page = window.__VN_PAGE || 'dashboard'; const current = NAV.find(n => n.id === page) || NAV[0]; // Apply prefs to on mount + when they change React.useEffect(() => { const root = document.documentElement; root.style.setProperty('--accent', prefs.accent); root.style.setProperty('--accent-ink', '#1a1a1a'); root.dataset.density = prefs.density; root.dataset.sidebar = prefs.sidebar; document.title = `OpenDicta — ${current.label}`; }, [prefs.accent, prefs.density, prefs.sidebar, current.label]); return (
{/* Title bar */}
OpenDicta — {current.label}
{/* Body */}
{page === 'dashboard' && } {page === 'insights' && } {page === 'models' && } {page === 'style' &&