/* Voyage Fleet — app shell. * Hash router, collapsible grouped sidebar, topbar (breadcrumbs + search + AI toggle), * and the AppShell layout that docks the AI rail on the right. * Exports: useRoute, navigate, setParam, Sidebar, Topbar, AppShell. */ const { useState: useState_s, useEffect: useEffect_s, useRef: useRef_s } = React; /* ─── Hash router with query params ────────────────────────────────────── */ function parseHash() { let h = window.location.hash || "#/"; if (!h.startsWith("#")) h = "#/" + h; h = h.slice(1) || "/"; const [pathRaw, query] = h.split("?"); const path = pathRaw || "/"; const params = Object.fromEntries(new URLSearchParams(query || "")); return { path, params }; } function useRoute() { const [route, setRoute] = useState_s(parseHash()); useEffect_s(() => { const fn = () => setRoute(parseHash()); window.addEventListener("hashchange", fn); return () => window.removeEventListener("hashchange", fn); }, []); return route; } function navigate(path, params) { let target = path.startsWith("/") ? path : "/" + path; if (params && Object.keys(params).length) { const clean = {}; Object.entries(params).forEach(([k, v]) => { if (v != null && v !== "" && v !== false) clean[k] = v; }); const qs = new URLSearchParams(clean).toString(); if (qs) target += "?" + qs; } window.location.hash = "#" + target; } /* Merge/replace params on the current route (preserves URL state). */ function setParam(updates) { const { path, params } = parseHash(); navigate(path, { ...params, ...updates }); } Object.assign(window, { useRoute, navigate, setParam }); /* ─── Sidebar ──────────────────────────────────────────────────────────── */ const NAV_GROUPS = [ { label: "Fleet", items: [ { id: "overview", path: "/", label: "Fleet Overview", icon: }, { id: "drift", path: "/drift", label: "Drift Report", icon: }, ]}, { label: "Tenants", items: [ { id: "tenants", path: "/tenants", label: "All Tenants", icon: }, { id: "new", path: "/new", label: "New Tenant", icon: , accent: true }, ]}, { label: "Catalog", items: [ { id: "modules", path: "/modules", label: "Components", icon: }, ]}, { label: "Operations", items: [ { id: "audit", path: "/audit", label: "Audit Log", icon: }, ]}, { label: "Settings", items: [ { id: "settings", path: "/settings", label: "Settings", icon: }, ]}, ]; function Sidebar({ active, collapsed, onToggle }) { const W = collapsed ? 60 : 224; return ( ); } /* ─── Breadcrumbs ──────────────────────────────────────────────────────── */ function Breadcrumbs({ trail }) { return ( ); } /* ─── Topbar ───────────────────────────────────────────────────────────── */ function Topbar({ trail, onOpenSearch, role, onSetRole }) { const [profileOpen, setProfileOpen] = useState_s(false); const ref = useRef_s(null); useOutsideClick(ref, () => setProfileOpen(false)); const roleMeta = { cs: "Customer Success", pe: "Platform Engineer", rm: "Voyage Release Manager" }; const roleLabel = roleMeta[role] || "Platform Engineer"; return (
{profileOpen ? (
Lori Owens
lori@voyage.dev
{roleLabel}
View as role · demo
{[["cs", "Customer Success"], ["pe", "Platform Engineer"], ["rm", "Release Manager"]].map(r => ( : } onClick={() => { onSetRole && onSetRole(r[0]); setProfileOpen(false); }}>{r[1]} ))}
} onClick={() => { setProfileOpen(false); navigate("/settings"); }}>Settings }>Sign out
) : null}
); } /* ─── AppShell ─────────────────────────────────────────────────────────── */ function AppShell({ active, trail, children, onOpenSearch, role, onSetRole }) { const [collapsed, setCollapsed] = useState_s(false); return (
setCollapsed(c => !c)} />
{children}
); } Object.assign(window, { Sidebar, Topbar, AppShell, Breadcrumbs });