/* Sidebar — ported from prototype dashboard-parts.jsx. Nav items match the Heron platform spec. Items without real routes yet show "Coming soon" placeholders until they're built in subsequent migration groups. */ /* Per-role nav allow-lists — direct port of the original CMS reorderSidebar() function (cms-original L13087–13136). Each role gets an explicit list of which nav ids appear, in which section. This replaces the previous capability-gate scheme because the original was role-list-based, not capability-based, and the two models produced different results for site_manager (who should NOT see audit) and aquaos_admin (who should NOT see operational org surfaces at the top level). marketing_admin + designer were never wired in the original CMS; we give them sensible defaults based on their authorize() coverage in the backend and flag them in the comments below. */ const ROLE_NAV = { /* Bug feedback batch (May 2026): - 'settings' removed from sidebar — only the topbar gear popup (b8c85386). - 'templates' removed entirely — feature parked (a0a149cc). - 'notifications' removed from sidebar — bell popover in the topbar already covers it (30480d6a). - 'bulk' + 'audit' moved into Settings popup as tabs (30480d6a). Platform admin gets 'users' (ca16fd3a). */ aquaos_admin: { top: ['dashboard'], /* video-backgrounds — TEMP dev surface, aquaos_admin only. Remove this id from BOTH this allow-list and NAV_PLATFORM below when the surface is productised or retired. */ platform: ['orgs', 'global-species', 'users', 'analytics', 'video-backgrounds'], insights: ['alerts', 'dashboards'], tools: [], }, org_admin: { /* Per Oli: org_admin doesn't need Displays/Zones in the top nav (those are site_manager day-to-day surfaces; org_admin reaches them via dashboard cards or sites detail). Billing moves out of the platform section and lives inside Settings instead. Analytics is critical for org_admin — they oversee every site in the org, so a cross-site rollup belongs in their nav. The backend auto-scopes /api/analytics by organisation_id so the same page renders different data per role. Alerts (Phase 2) added — org_admin can manage alert rules across the whole org. */ top: ['dashboard', 'campaigns', 'library'], platform: ['sites', 'analytics', 'users'], insights: ['approvals', 'alerts', 'dashboards'], tools: ['media'], }, site_manager: { /* 'zones' removed — merged into the Displays page per Option A. */ top: ['dashboard', 'campaigns', 'library', 'displays'], /* Analytics added for site_manager — backend scopes to their assigned sites via siteScope() so the cross-site widgets get hidden naturally. Page-level cap check uses analytics.view_site. Alerts: site_manager owns analytics.manage_alerts so they need the nav entry to author + ack rules. */ platform: ['users', 'analytics'], insights: ['approvals', 'alerts', 'dashboards'], tools: ['media'], }, marketing_admin: { /* Cross-site campaigns + assets. Backend authorize includes them on /api/campaigns, /api/assets, /api/approvals. Analytics added — campaign-centric view appropriate for marketing leads. Alerts: marketing_admin has view_alerts (read-only) — they want to see when campaigns underperform but don't author rules. */ top: ['dashboard', 'campaigns', 'library'], platform: ['analytics'], insights: ['approvals', 'alerts', 'dashboards'], tools: ['media'], }, designer: { /* Asset upload + AI copy gen — narrow scope. */ top: ['campaigns', 'library'], platform: [], insights: [], tools: ['media'], }, operator: { /* Original L13130-13134 — Screens + Species library only. */ top: ['displays', 'library'], platform: [], insights: [], tools: [], }, /* Legacy 'admin' role from the pre-multi-tenant era — kept in lockstep with org_admin. */ admin: { top: ['dashboard', 'campaigns', 'library'], platform: ['analytics', 'users'], insights: ['approvals', 'alerts', 'dashboards'], tools: ['media'], }, }; const NAV_TOP = [ { id: 'dashboard', label: 'Dashboard', icon: 'home' }, { id: 'campaigns', label: 'Marketing', icon: 'spark' }, { id: 'library', label: 'Species Library', icon: 'library' }, /* Zones merged into Displays per Option A of the merge UX decision — screens now render grouped under collapsible zone headers on the Displays page, with a page-level "Add zone" button. The standalone Zones entry was redundant. */ { id: 'displays', label: 'Displays', icon: 'monitor' }, ]; const NAV_PLATFORM = [ { id: 'orgs', label: 'Organisations', icon: 'building' }, /* Per-org sites management — visible to org_admin (and aquaos_admin if you ever add it to their allow-list). Restores the affordance Sarah flagged as missing in bug 85ae5e93: org admins need a way to add and manage their aquarium locations. */ { id: 'sites', label: 'Sites', icon: 'building' }, { id: 'global-species', label: 'Global Species', icon: 'fish' }, { id: 'users', label: 'Users', icon: 'users' }, /* Label adjusts per role at render time — aquaos_admin sees "Platform Analytics" (cross-org), org_admin sees just "Analytics" (their org rollup). The backend scopes the data either way. */ { id: 'analytics', label: 'Analytics', icon: 'chart' }, /* Billing removed from sidebar — now lives as a tab in the Settings popup (see settings.jsx L42, gated by Auth.canSeeBilling). The billing.jsx screen still exists and is rendered by SettingsScreen. */ /* TEMP — Video Backgrounds dev surface (Kling 2.5 etc.). Visible to aquaos_admin only via ROLE_NAV. Remove this entry from BOTH ROLE_NAV.aquaos_admin.platform AND this NAV_PLATFORM array when the feature is productised or retired. */ { id: 'video-backgrounds', label: 'Video Backgrounds', icon: 'monitor' }, ]; const NAV_INSIGHTS = [ /* Notifications removed — topbar bell popover (sidebar.jsx ~line 780) already surfaces them; a dedicated page was redundant. Audit log moved into Settings → Audit tab. */ /* Approvals nav HIDDEN (2026-06-03, Oli): the campaign review workflow is paused — campaigns now publish directly without an approval step, so the Approvals page is no longer linked. The entry is left in each ROLE_NAV[role].insights allow-list (harmless orphan) so re-enabling is a one-line uncomment here. The /api/approvals + /:id/submit + /:id/review endpoints are untouched. */ // { id: 'approvals', label: 'Approvals', icon: 'check' }, /* Alerts (Phase 2) — alert rules + recent fires + anomalies. Page-level gate uses Auth.canViewAnalyticsAlerts(); manage-actions hidden when canManageAnalyticsAlerts() returns false. */ { id: 'alerts', label: 'Alerts', icon: 'alert' }, /* Custom dashboards (Phase M) — user-authored panel layouts. Same view-cap as the rest of analytics; manage actions hidden without manage_alerts (close-enough cap for "operator-author tooling"). */ { id: 'dashboards', label: 'Dashboards', icon: 'chart' }, ]; const NAV_TOOLS = [ /* Templates feature parked. Settings now lives only in the topbar gear popup. Bulk Operations moved into Settings → Bulk tab. */ { id: 'media', label: 'Media library', icon: 'library' }, ]; /* Visibility resolver — pulls the current user's role allow-list from ROLE_NAV and tests each item's id against it. Direct port of the original CMS reorderSidebar() pattern. Roles not in ROLE_NAV (which shouldn't happen given backend validation) fall back to the legacy admin layout. */ function navAllowed(section) { const u = Auth && Auth.getUser ? Auth.getUser() : null; const role = (u && u.role) || 'operator'; const map = ROLE_NAV[role] || ROLE_NAV.admin; return new Set(map[section] || []); } function visibleNav(section, items) { const allowed = navAllowed(section); return items.filter((it) => allowed.has(it.id)); } function NavRow({ item, active, onPick, badgeCount, compact }) { return (
onPick(item.id)} role="button" tabIndex={0} title={compact ? item.label : undefined} style={compact ? { justifyContent: 'center', paddingLeft: 0, paddingRight: 0 } : undefined} > {!compact && {item.label}} {item.dot && } {!compact && badgeCount != null && ( {badgeCount} )}
); } function Sidebar({ active, onPick, badges = {}, user }) { const isAdmin = user && user.role === 'admin'; const initials = user && user.name ? user.name.split(' ').map((p) => p[0]).slice(0, 2).join('').toUpperCase() : 'AQ'; /* Collapse state — persists in localStorage so the user's choice survives reloads and role swaps. Compact mode shrinks the sidebar to icon-only at ~64px. */ const [collapsed, setCollapsed] = useState(() => { try { return localStorage.getItem('aquaos.sidebar.collapsed') === '1'; } catch (_) { return false; } }); function toggleCollapsed() { setCollapsed((v) => { const next = !v; try { localStorage.setItem('aquaos.sidebar.collapsed', next ? '1' : '0'); } catch (_) {} document.body.dataset.sidebar = next ? 'compact' : 'full'; return next; }); } useEffect(() => { document.body.dataset.sidebar = collapsed ? 'compact' : 'full'; }, [collapsed]); return ( ); } /* Bug / feature-request button — small popover anchored to the bug icon in the topbar. Captures the current URL + page title alongside the text so admins reading the log have context. Submits to /api/feedback which writes a row in feedback_items. Esc / outside-click close. Popover is portalled to document.body + positioned `fixed` so it escapes any stacking context the topbar creates (otherwise it gets trapped behind page content). Screenshot attachments — the popover accepts up to 4 images via three parallel input methods so submitters use whichever is closest to hand: 1. Click the upload chip → native file picker 2. Drag a screenshot from Finder/desktop onto the popover 3. Paste from clipboard (Cmd+V) while the popover has focus Files stage client-side as object URLs (no upload happens until Send), so a misclick has zero cost and the user can preview before sending. */ const FB_MAX_FILES = 4; const FB_MAX_BYTES = 5 * 1024 * 1024; const FB_ACCEPT = ['image/jpeg', 'image/png', 'image/webp', 'image/gif']; function FeedbackButton() { const [open, setOpen] = useState(false); const [kind, setKind] = useState('bug'); const [text, setText] = useState(''); const [busy, setBusy] = useState(false); const [done, setDone] = useState(false); const [anchor, setAnchor] = useState(null); // { top, right } from button rect const [files, setFiles] = useState([]); // [{ id, file, previewUrl }] const [dragOver, setDragOver] = useState(false); const [error, setError] = useState(''); const btnRef = useRef(null); const popRef = useRef(null); const fileInputRef = useRef(null); function reposition() { if (!btnRef.current) return; const r = btnRef.current.getBoundingClientRect(); setAnchor({ top: r.bottom + 6, right: window.innerWidth - r.right, }); } // Add staged files — handles File objects from picker/drop/paste alike. // Validates type + size + count and surfaces a single inline error so the // user knows why a file didn't take. function addFiles(incoming) { if (!incoming || !incoming.length) return; setError(''); setFiles((prev) => { const next = prev.slice(); for (const f of incoming) { if (!f) continue; if (next.length >= FB_MAX_FILES) { setError(`Maximum ${FB_MAX_FILES} screenshots per report.`); break; } if (!FB_ACCEPT.includes(f.type)) { setError('Only JPG, PNG, WebP, or GIF screenshots are supported.'); continue; } if (f.size > FB_MAX_BYTES) { setError('Each screenshot must be 5MB or less.'); continue; } next.push({ id: Math.random().toString(36).slice(2), file: f, previewUrl: URL.createObjectURL(f), }); } return next; }); } function removeFile(id) { setFiles((prev) => { const target = prev.find((x) => x.id === id); if (target) { try { URL.revokeObjectURL(target.previewUrl); } catch (_) {} } return prev.filter((x) => x.id !== id); }); } // Clean up any unsent object URLs when the popover unmounts so we // don't leak blob refs from sessions where the user closed without sending. useEffect(() => () => { files.forEach((f) => { try { URL.revokeObjectURL(f.previewUrl); } catch (_) {} }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { if (!open) return; reposition(); const onClick = (e) => { if (popRef.current && popRef.current.contains(e.target)) return; if (btnRef.current && btnRef.current.contains(e.target)) return; setOpen(false); }; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; const onResize = () => reposition(); // Paste handler — only fires while the popover is open. Captures images // pasted from the OS clipboard (e.g. macOS Cmd+Shift+Ctrl+4 → Cmd+V). const onPaste = (e) => { if (!popRef.current || !popRef.current.contains(document.activeElement)) { // Restrict paste to when focus is inside the popover so we don't // hijack pastes meant for the page underneath. return; } const items = (e.clipboardData && e.clipboardData.items) || []; const imgs = []; for (const it of items) { if (it.kind === 'file' && it.type && it.type.startsWith('image/')) { const f = it.getAsFile(); if (f) imgs.push(f); } } if (imgs.length) { e.preventDefault(); // prevent the screenshot path string from also pasting into the textarea addFiles(imgs); } }; document.addEventListener('mousedown', onClick); document.addEventListener('keydown', onKey); document.addEventListener('paste', onPaste); window.addEventListener('resize', onResize); window.addEventListener('scroll', onResize, true); return () => { document.removeEventListener('mousedown', onClick); document.removeEventListener('keydown', onKey); document.removeEventListener('paste', onPaste); window.removeEventListener('resize', onResize); window.removeEventListener('scroll', onResize, true); }; }, [open]); // Reset transient "Sent ✓" state shortly after closing. // Also clears staged files so reopening the popover starts fresh. useEffect(() => { if (!open && done) { const t = setTimeout(() => { setDone(false); setText(''); setError(''); setFiles((prev) => { prev.forEach((f) => { try { URL.revokeObjectURL(f.previewUrl); } catch (_) {} }); return []; }); }, 300); return () => clearTimeout(t); } }, [open, done]); async function submit() { if (busy || !text.trim()) return; setBusy(true); setError(''); try { // Always use FormData so the same code path handles 0-file and N-file // submissions; the backend transparently accepts both shapes. const fd = new FormData(); fd.append('text', text.trim()); fd.append('kind', kind); fd.append('page_url', window.location.href); fd.append('page_title', document.title); files.forEach((f) => fd.append('screenshots', f.file, f.file.name || 'screenshot')); const r = await fetch('/api/feedback', { method: 'POST', credentials: 'include', body: fd, }); if (!r.ok) { let msg = 'Submit failed'; try { const d = await r.json(); if (d && d.error) msg = d.error; } catch (_) {} throw new Error(msg); } setDone(true); setTimeout(() => setOpen(false), 900); } catch (e) { setError(e.message || 'Couldn\'t send feedback. Please try again.'); } finally { setBusy(false); } } // Drop-zone handlers — toggle the highlight + accept the dropped files. // Wraps the whole popover so users can drop anywhere on it (more forgiving // than a tiny 60px target) without losing the textarea drop fallback. function onDragEnter(e) { e.preventDefault(); setDragOver(true); } function onDragOver(e) { e.preventDefault(); setDragOver(true); } function onDragLeave(e) { // Only clear when leaving the popover itself, not its children. if (popRef.current && popRef.current.contains(e.relatedTarget)) return; setDragOver(false); } function onDrop(e) { e.preventDefault(); setDragOver(false); const dropped = (e.dataTransfer && e.dataTransfer.files) ? Array.from(e.dataTransfer.files) : []; addFiles(dropped); } return ( <> {open && anchor && ReactDOM.createPortal((
{done ? (
Sent — thanks! Logged in Settings → Feedback
) : ( <>