// App Shell V2 (Phase 22) — collapsible sidebar + refined top bar + profile popover.
//
// Behavior contract:
// • Default sidebar state: collapsed (72px wide, icon-only). Persisted in
// localStorage as 'mygeni:sidebar' = 'collapsed' | 'expanded'.
// • Two toggle affordances (upper — next to the workspace mark; lower —
// the bottom user tile). Both flip the same state.
// • Route change does NOT touch sidebar state.
// • Hover on collapsed items shows a CSS tooltip (label + optional badge).
// • Layout uses a CSS custom prop `--shell-nav-w` on the shell root so the
// sidebar column and main column animate together; no layout jump.
//
// useHashRoute is UNCHANGED — the routing contract from Phase 21 must not
// move. Only the visual chrome around it is upgraded.
function _navPrimary() {
const inboxNeeds = (window.MYGENI_DATA?.inboxItems || [])
.filter(i => i.state === 'needs-action').length;
const overdueWork = (window.MYGENI_DATA?.workItems || [])
.filter(w => w.dueBucket === 'overdue' && w.status !== 'done').length;
const items = [
{ key: 'home', route: '#/home', label: 'Home', icon: 'home' },
{ key: 'projects', route: '#/projects', label: 'Projects', icon: 'projects' },
{ key: 'my-work', route: '#/my-work', label: 'My Work', icon: 'work' },
{ key: 'decisions', route: '#/decisions', label: 'Decisions', icon: 'decisions' },
{ key: 'inbox', route: '#/inbox', label: 'Inbox', icon: 'inbox' },
];
if (overdueWork > 0) {
const mw = items.find(i => i.key === 'my-work');
mw.badge = String(overdueWork); mw.badgeTone = 'orange';
}
if (inboxNeeds > 0) {
const ib = items.find(i => i.key === 'inbox');
ib.badge = String(inboxNeeds); ib.badgeTone = 'red';
}
return items;
}
const NAV_SECONDARY = [
{ key: 'clients', route: '#/clients', label: 'Clients', icon: 'building' },
];
const NAV_UTIL = [
{ key: 'settings', route: '#/settings', label: 'Settings', icon: 'settings' },
];
function useHashRoute(defaultRoute = 'home') {
const parse = (h) => {
const m = (h || '').match(/^#\/(.+)$/);
if (!m) return { full: defaultRoute, top: defaultRoute, sub1: null, sub2: null, sub3: null, sub4: null };
const full = m[1];
const parts = full.split('/');
return { full, top: parts[0], sub1: parts[1] || null, sub2: parts[2] || null, sub3: parts[3] || null, sub4: parts[4] || null };
};
const [route, setRoute] = React.useState(() => {
const initial = (typeof location !== 'undefined' && location.hash) || '';
if (initial) return parse(initial);
const stored = localStorage.getItem('mygeni:route');
if (stored) return parse('#/' + stored);
return { full: defaultRoute, top: defaultRoute, sub1: null, sub2: null };
});
React.useEffect(() => {
const onHash = () => {
const r = parse(location.hash);
setRoute(r);
localStorage.setItem('mygeni:route', r.full);
};
window.addEventListener('hashchange', onHash);
if (!location.hash) location.hash = '#/' + route.full;
return () => window.removeEventListener('hashchange', onHash);
}, [defaultRoute]);
return route;
}
// Global sidebar state hook. Persisted; default = collapsed.
function useSidebarState() {
const [state, setState] = React.useState(() => {
if (typeof localStorage === 'undefined') return 'collapsed';
const v = localStorage.getItem('mygeni:sidebar');
return (v === 'expanded' || v === 'collapsed') ? v : 'collapsed';
});
React.useEffect(() => {
try { localStorage.setItem('mygeni:sidebar', state); } catch (e) {}
// Reflect on shell root as a CSS var so both columns transition.
const root = document.querySelector('.shell');
if (root) {
root.setAttribute('data-sidebar', state);
root.style.setProperty('--shell-nav-w', state === 'expanded' ? '232px' : '72px');
}
}, [state]);
return [state, setState];
}
function SidebarItem({ item, active, collapsed }) {
return (
{item.label}
{item.badge && (
{item.badge}
)}
);
}
function SidebarToggle({ collapsed, onToggle, position }) {
// "position" is 'top' or 'bottom' — two identical affordances so it's
// obvious how to collapse/expand from either end of the sidebar.
const label = collapsed ? 'Expand sidebar' : 'Collapse sidebar';
return (
);
}
function Sidebar({ active, workspace, user }) {
const [sidebarState, setSidebarState] = useSidebarState();
const collapsed = sidebarState === 'collapsed';
const toggle = () => setSidebarState(collapsed ? 'expanded' : 'collapsed');
return (
);
}
// Breadcrumb per route (top-level only; project chrome handles nested wayfinding).
const CRUMBS = {
home: ['Home'],
projects: ['Projects'],
'my-work': ['My Work'],
decisions: ['Decisions'],
inbox: ['Inbox'],
clients: ['Clients'],
settings: ['Settings'],
'design-system': ['Design system'],
};
// --- Top-right profile popover (Phase 22).
function ProfileMenu({ user }) {
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
const popRef = React.useRef(null);
React.useEffect(() => {
function onDown(e) {
if (!open) return;
if (popRef.current && popRef.current.contains(e.target)) return;
if (anchorRef.current && anchorRef.current.contains(e.target)) return;
setOpen(false);
}
function onKey(e) { if (e.key === 'Escape') setOpen(false); }
document.addEventListener('mousedown', onDown);
document.addEventListener('keydown', onKey);
return () => {
document.removeEventListener('mousedown', onDown);
document.removeEventListener('keydown', onKey);
};
}, [open]);
// Close on route change
React.useEffect(() => {
function onHash() { setOpen(false); }
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
const R = window.MYGENI_PEOPLE;
const entry = R && R.get(user.name);
return (
{open && (
)}
);
}
function Header({ workspace, route, user }) {
const crumbs = CRUMBS[route] || [route.replace(/-/g, ' ')];
const inboxNeeds = (window.MYGENI_DATA?.inboxItems || [])
.filter(i => i.state === 'needs-action').length;
return (
);
}
Object.assign(window, { Sidebar, Header, useHashRoute });