// shell.jsx — Sidebar + Topbar (access-filtered + acting-as) function Sidebar({ activeProject, onProjectChange, currentUserId = "ay", access = (typeof PROJECT_ACCESS !== "undefined" ? PROJECT_ACCESS : {}), onOpenHome, homeActive, onOpenAdmin, adminActive, onOpenOwnerDash, ownerDashActive, onOpenReviews, reviewsActive, onOpenTickets, ticketsActive, ticketsCount, onOpenTimeline, timelineActive, onAddProject, onAddWorkspace, onOpenMyWork, myWorkActive, onOpenCRM, crmActive, crmBadge, onOpenBin, binActive, binCount, onOpenNotes, notesActive, onOpenApiTester, apiTesterActive, onOpenVault, vaultActive, onOpenAutomations, automationsActive, onOpenAnnouncements, announcementsActive, onOpenSupport, supportActive, supportTab, onSupportTabChange, onOpenBugs, bugsActive, onOpenPeople, peopleActive, peopleTab, onPeopleTabChange, peopleIsManager = false, onOpenWhatsNew, onOpenServerMonitor, serverMonitorActive }) { const [expanded, setExpanded] = React.useState({ mobile: true }); // Per-workspace collapsed state, persisted to localStorage so a user's // sidebar preferences survive a reload. Map { [wsId]: true } means the // workspace's project list is hidden. Default = empty map (everything // expanded), matching pre-fix behavior for users who never collapse. // Bug BG_217E37C360 — the workspace header had a chevron icon but no // onClick wired up, so users (Swathi K K, 2026-05-11) saw a dropdown // indicator that did nothing. Fix: track collapsed state here and // toggle on header click. const [wsCollapsed, setWsCollapsed] = React.useState(() => { try { const raw = localStorage.getItem("zp.sidebar.wsCollapsed"); return raw ? (JSON.parse(raw) || {}) : {}; } catch { return {}; } }); function toggleWs(wsId) { setWsCollapsed(prev => { const next = { ...prev, [wsId]: !prev[wsId] }; if (!next[wsId]) delete next[wsId]; try { localStorage.setItem("zp.sidebar.wsCollapsed", JSON.stringify(next)); } catch {} return next; }); } const me = PEOPLE.find(p => p.id === currentUserId) || PEOPLE[0]; // External collaborators only need task-related surfaces. We hide // Inbox / Timeline / Reviews / Personal / Support / Bug reports / // Workspace switcher etc. and leave just My Work + their assigned // projects. The backend already restricts data to those projects. const isGuest = me && me.wsRole === "guest"; // Strict-membership policy (May 2026): only the workspace OWNER // sees every project. Admins/members/guests see only projects // they're explicitly in. The Admin section in this sidebar still // checks wsRole === "admin" separately so admins keep their // people-management entry — they just don't get the "see every // project" pass anymore. const canSeeAll = me.wsRole === "owner"; // Per-user module access. NULL or missing key = allowed. The admin panel // writes this back to the user record. Owners always have full access. const moduleAccess = me.moduleAccess || null; function canModule(key) { if (me.wsRole === "owner") return true; if (!moduleAccess) return true; return moduleAccess[key] !== false; } function canAccess(projectId) { const a = access[projectId]; if (!a) return true; // projects not in access map: treat as workspace-wide if (canSeeAll) return true; return a.members.some(m => m.id === currentUserId); } // Per-project tally — open (status !== "done") + overdue (open + past due_date). // The badge next to each project shows OPEN tasks instead of total. const projectTally = React.useMemo(() => { const tasks = (typeof ALL_TASKS !== "undefined" ? ALL_TASKS : []) || []; const today = new Date(); today.setHours(0, 0, 0, 0); const out = {}; for (const t of tasks) { if (!t.projectId) continue; if (t.status === "done") continue; const row = (out[t.projectId] = out[t.projectId] || { open: 0, overdue: 0 }); row.open++; if (t.due && t.due !== "—") { // Strip optional " @ H:MM AM/PM" suffix; Date() can't parse that shape. const head = String(t.due).split(" @ ")[0].trim(); const d = new Date(head); if (!isNaN(d) && d < today) row.overdue++; } } return out; }, [activeProject, currentUserId]); return ( ); } function Topbar({ crumbs, searchValue, onSearch, onOpenPalette, currentUserId, onActingAsChange, people, onAvatarPeek, onBellClick, bellCount, onMobileNavToggle }) { const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform); const me = (people || PEOPLE).find(p => p.id === currentUserId) || PEOPLE[0]; // Acting As is owner-only — admins and members never see the impersonation // dropdown. Mirrors a sensible "only the workspace owner can pretend to be // someone else for support / debugging" rule. Backend already restricts // /api/auth/impersonate to owners + admins, so this is purely cosmetic. const canActAs = me && me.wsRole === "owner"; return (
{/* Mobile hamburger — visible only at <=760px (CSS handles display:none on desktop). Toggles the off-canvas sidebar drawer via the parent's body-class effect. */} {onMobileNavToggle && ( )}
{crumbs.map((c, i) => ( {i > 0 && } {i === crumbs.length - 1 ? {c} : {c}} ))}
onOpenPalette && onOpenPalette()} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onOpenPalette && onOpenPalette(); } }}>
{/* Online / Reconnecting / Offline indicator with pending-writes popover. Auto-hides when everything's healthy so it doesn't clutter the topbar. */} {typeof ConnectionChip !== "undefined" && } {onActingAsChange && canActAs && }
); } // TopbarUserMenu — the avatar in the topbar with a dropdown for // "Change profile picture", "Stop impersonating", and "Sign out". // // Wires actions through window CustomEvents (flowboard:user:menu:*) so // the menu doesn't have to thread three callbacks down through // FlowboardApp. Root in index.html listens for these and calls the // existing handlers it already has in scope. function TopbarUserMenu({ me }) { const [open, setOpen] = React.useState(false); const wrapRef = React.useRef(null); React.useEffect(() => { if (!open) return; function onDocClick(e) { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); } function onEsc(e) { if (e.key === "Escape") setOpen(false); } document.addEventListener("mousedown", onDocClick); document.addEventListener("keydown", onEsc); return () => { document.removeEventListener("mousedown", onDocClick); document.removeEventListener("keydown", onEsc); }; }, [open]); if (!me) return null; const isActing = !!me.isImpersonating; function fire(name) { setOpen(false); try { window.dispatchEvent(new CustomEvent("flowboard:user:menu:" + name)); } catch {} } return ( setOpen(o => !o)} title={me.name || me.email || ""}> {open && (
e.stopPropagation()}>
{isActing ? "Acting as " : "Signed in as "} {me.name || me.email} {me.email && {me.email}}
{!isActing && ( )} {!isActing && ( )} {!isActing && ( )} {isActing && ( )} {/* PWA install entry — visible only when: (a) the browser fired beforeinstallprompt and we have a deferred prompt to call (Chrome/Edge/Android), OR (b) it's iOS Safari and we're not already standalone (we show a tooltip pointing the user at Share → Add to Home Screen since iOS exposes no programmatic API). The body class zp-installable is toggled by pwa.js. */} fire("toast", msg)}/> {/* Push notifications toggle — gated by Notification.permission and serviceWorker support; shows current state and lets the user opt in/out. */} fire("toast", msg)}/>
)} ); } // ── PwaInstallMenuItem ──────────────────────────────────────── // Small dropdown entry that hides itself unless the browser is in a // state where install is meaningful. Watches the zp:installable + // matchMedia('display-mode: standalone') signals from pwa.js. function PwaInstallMenuItem({ onTip }) { const [installable, setInstallable] = React.useState(() => typeof document !== "undefined" && document.body.classList.contains("zp-installable")); const [iosHint, setIosHint] = React.useState(() => typeof window !== "undefined" && typeof window.zpIosInstallHint === "function" && window.zpIosInstallHint()); const [installed, setInstalled] = React.useState(() => typeof document !== "undefined" && document.body.classList.contains("zp-standalone")); React.useEffect(() => { function onAvail(e) { setInstallable(!!(e.detail && e.detail.available)); } function onMode() { setInstalled(document.body.classList.contains("zp-standalone")); } window.addEventListener("zp:installable", onAvail); window.addEventListener("appinstalled", onMode); if (window.matchMedia) { try { window.matchMedia("(display-mode: standalone)").addEventListener("change", onMode); } catch { try { window.matchMedia("(display-mode: standalone)").addListener(onMode); } catch {} } } return () => { window.removeEventListener("zp:installable", onAvail); window.removeEventListener("appinstalled", onMode); }; }, []); // Already running as installed PWA — no need to show the entry. if (installed) return null; // Neither programmatic install nor iOS — nothing to offer. if (!installable && !iosHint) return null; if (installable) { return ( ); } // iOS hint — open a small persistent tooltip the first time it's // clicked. Native iOS Add-to-Home-Screen has no programmatic API. return ( ); } // ── PushSubscribeMenuItem ───────────────────────────────────── // Toggle for browser push notifications. Disabled if the browser // can't push at all. Otherwise shows the current state and toggles. function PushSubscribeMenuItem({ onTip }) { const supported = typeof window !== "undefined" && "serviceWorker" in window.navigator && "PushManager" in window && "Notification" in window; const [perm, setPerm] = React.useState(() => supported ? Notification.permission : "denied"); const [busy, setBusy] = React.useState(false); const [subscribed, setSubscribed] = React.useState(null); // null = unknown React.useEffect(() => { if (!supported) return; let cancelled = false; (async () => { try { const reg = await navigator.serviceWorker.ready; const sub = await reg.pushManager.getSubscription(); if (!cancelled) setSubscribed(!!sub); } catch { if (!cancelled) setSubscribed(false); } })(); return () => { cancelled = true; }; }, [supported]); if (!supported) return null; async function enable() { if (busy) return; setBusy(true); try { let p = perm; if (p === "default") { p = await Notification.requestPermission(); setPerm(p); } if (p !== "granted") { if (onTip) onTip("Notification permission denied. Enable in browser settings."); return; } // Fetch the VAPID public key from the server and subscribe. const reg = await navigator.serviceWorker.ready; const r = await window.api.push.vapidPublic(); if (!r || !r.key) throw new Error("Server has no VAPID key set"); const applicationServerKey = urlBase64ToUint8Array(r.key); const sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey }); await window.api.push.subscribe(sub.toJSON()); setSubscribed(true); if (onTip) onTip("Notifications on — you’ll get pings even when ZeroProject’s closed."); } catch (e) { console.warn("[push] enable failed:", e); if (onTip) onTip("Couldn’t enable push: " + ((e && e.message) || "unknown")); } finally { setBusy(false); } } async function disable() { if (busy) return; setBusy(true); try { const reg = await navigator.serviceWorker.ready; const sub = await reg.pushManager.getSubscription(); if (sub) { await window.api.push.unsubscribe({ endpoint: sub.endpoint }); await sub.unsubscribe(); } setSubscribed(false); if (onTip) onTip("Push notifications off."); } catch (e) { console.warn("[push] disable failed:", e); } finally { setBusy(false); } } if (perm === "denied") { return ( ); } return ( ); } function urlBase64ToUint8Array(base64String) { const padding = "=".repeat((4 - base64String.length % 4) % 4); const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/"); const rawData = window.atob(base64); const out = new Uint8Array(rawData.length); for (let i = 0; i < rawData.length; ++i) out[i] = rawData.charCodeAt(i); return out; } // ── ★ Favorites section — sidebar component ───────────────────────── // Renders a collapsible "Favorites" group at the top of the project // list. Subscribes to `flowboard:favorites:changed` so star/unstar // from anywhere (project header click, SSE from another tab) flips // the list without a refresh. Hidden when empty. function FavoritesSection({ activeProject, canAccess, onProjectChange, projectTally }) { // Local state for the id list — mirrors window.MY_FAVORITES so a // re-render is triggered when the underlying global flips. const [favIds, setFavIds] = React.useState(() => (typeof window !== "undefined" && Array.isArray(window.MY_FAVORITES)) ? window.MY_FAVORITES : [] ); const [collapsed, setCollapsed] = React.useState(() => { try { return localStorage.getItem("fb.sidebar.favCollapsed") === "1"; } catch { return false; } }); React.useEffect(() => { function sync() { const ids = (typeof window !== "undefined" && Array.isArray(window.MY_FAVORITES)) ? window.MY_FAVORITES : []; setFavIds(ids.slice()); } sync(); window.addEventListener("flowboard:favorites:changed", sync); return () => window.removeEventListener("flowboard:favorites:changed", sync); }, []); React.useEffect(() => { try { localStorage.setItem("fb.sidebar.favCollapsed", collapsed ? "1" : "0"); } catch {} }, [collapsed]); // Resolve the ids → live project rows. Filter out projects the // current user can't access (e.g. they were removed after starring) // so the sidebar doesn't show locked rows for ghosts. The project // is still in user_favorite_projects on the server — once they // regain access the row reappears automatically. const projects = (PROJECTS || []).filter(p => p && p.id); const byId = new Map(projects.map(p => [p.id, p])); const favProjects = favIds .map(id => byId.get(id)) .filter(p => p && canAccess(p.id)); if (favProjects.length === 0) return null; return (
setCollapsed(c => !c)} title={collapsed ? "Expand Favorites" : "Collapse Favorites"} style={{ cursor: "pointer" }}> ★ Favorites
{!collapsed && (
{favProjects.map(p => { const tally = projectTally[p.id] || { open: 0, overdue: 0 }; const open = tally.open || 0; const overdue = tally.overdue || 0; const badgeTitle = overdue > 0 ? `${open} open · ${overdue} overdue` : `${open} open task${open === 1 ? "" : "s"}`; return (
onProjectChange?.(p.id)} title={badgeTitle}> {p.name} {open > 0 && ( 0 ? "has-overdue" : ""}`}> {open} )}
); })}
)}
); } Object.assign(window, { Sidebar, Topbar, TopbarUserMenu, FavoritesSection });