);
}
/* ---------------- Project sidebar ---------------- */
export function ProjectSidebar({ project, active, onNav, onBack, refreshKey }: { project: any; active: string; onNav: (id: string) => void; onBack: () => void; refreshKey?: any }) {
const [counts, setCounts] = useState>({});
// api.ts fires this after any create/delete of a counted resource, so the badges
// refresh immediately instead of waiting for a page reload.
const [countsBump, setCountsBump] = useState(0);
useEffect(() => {
const onChange = () => setCountsBump((n) => n + 1);
window.addEventListener("forge:counts-changed", onChange);
return () => window.removeEventListener("forge:counts-changed", onChange);
}, []);
useEffect(() => {
const pid = project?.id;
if (!pid) return;
let live = true;
const refresh = async () => {
// One cheap counts call (COUNT(*) per resource) instead of fetching six full lists
// just to read their `.length`. Re-runs on create/delete via countsBump so badges
// stay in sync. A short poll also keeps the agent-inbox badge current when a workflow
// opens a handoff while the operator is on another screen.
const { api } = await import("@/lib/api");
try {
const c = await api.projectCounts(pid);
if (live) setCounts(c as unknown as Record);
} catch {
if (live) setCounts({});
}
};
refresh();
const timer = window.setInterval(refresh, 15_000);
return () => { live = false; window.clearInterval(timer); };
}, [project?.id, refreshKey, countsBump]);
const renderLeaf = (n: NavLeaf) => {
const on = active === n.id;
const count = n.countKey ? counts[n.countKey] : undefined;
return (
);
};
// Settings is pinned to the bottom (rendered in the footer below), so drop it from the scroll list.
const settingsLeaf = PROJECT_NAV.find((e): e is NavLeaf => "id" in e && e.id === "settings");
return (
{/* Settings pinned to the bottom: sits above the scrolling nav (z-index + solid bg + top
shadow) so nav items scroll behind it on short viewports. */}
{settingsLeaf && (