feat(web): collapsible left sidebar, remove top nav bar

- Replace top header with left sidebar navigation
- Sidebar shows module-aware nav items filtered by /api/modules
- Collapsible: expanded shows icon+label, collapsed shows icon only
- Toggle with Ctrl+J or collapse button, state persisted in localStorage
- Keyboard navigable: Arrow Up/Down, Enter to navigate, Escape to collapse
- Bottom section: density toggle, user info with role badge, logout
- Add useModules hook for fetching module state
- Add sidebar density variables to theme.css

Closes #113, closes #114

web/src/components/AppShell.tsx

@@ -1,24 +1,38 @@
-import { NavLink, Outlet } from "react-router-dom";
+import { useCallback, useEffect, useState } from "react";
+import { Outlet } from "react-router-dom";
 import { useAuth } from "../hooks/useAuth";
 import { useDensity } from "../hooks/useDensity";
-
+import { useModules } from "../hooks/useModules";
-const navLinks = [
+import { Sidebar } from "./Sidebar";
-  { to: "/", label: "Items" },
-  { to: "/projects", label: "Projects" },
-  { to: "/schemas", label: "Schemas" },
-  { to: "/audit", label: "Audit" },
-  { to: "/settings", label: "Settings" },
-];
-
-const roleBadgeStyle: Record<string, React.CSSProperties> = {
-  admin: { background: "rgba(203,166,247,0.2)", color: "var(--ctp-mauve)" },
-  editor: { background: "rgba(137,180,250,0.2)", color: "var(--ctp-blue)" },
-  viewer: { background: "rgba(148,226,213,0.2)", color: "var(--ctp-teal)" },
-};
 
 export function AppShell() {
   const { user, loading, logout } = useAuth();
   const [density, toggleDensity] = useDensity();
+  const { modules } = useModules();
+
+  const [sidebarOpen, setSidebarOpen] = useState(() => {
+    return localStorage.getItem("silo-sidebar") !== "closed";
+  });
+
+  const toggleSidebar = useCallback(() => {
+    setSidebarOpen((prev) => {
+      const next = !prev;
+      localStorage.setItem("silo-sidebar", next ? "open" : "closed");
+      return next;
+    });
+  }, []);
+
+  // Ctrl+J to toggle sidebar
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === "j") {
+        e.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [toggleSidebar]);
 
   if (loading) {
     return (
@@ -36,115 +50,17 @@ export function AppShell() {
   }
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
+    <div style={{ display: "flex", height: "100vh" }}>
-      <header
+      <Sidebar
-        style={{
+        open={sidebarOpen}
-          backgroundColor: "var(--ctp-mantle)",
+        onToggle={toggleSidebar}
-          borderBottom: "1px solid var(--ctp-surface0)",
+        modules={modules}
-          padding: "var(--d-header-py) var(--d-header-px)",
+        user={user}
-          display: "flex",
+        density={density}
-          alignItems: "center",
+        onToggleDensity={toggleDensity}
-          justifyContent: "space-between",
+        onLogout={logout}
-          flexShrink: 0,
+      />
-        }}
+      <main style={{ flex: 1, overflow: "auto", padding: "1rem" }}>
-      >
-        <h1
-          style={{
-            fontSize: "var(--d-header-logo)",
-            fontWeight: 600,
-            color: "var(--ctp-mauve)",
-          }}
-        >
-          Silo
-        </h1>
-
-        <nav style={{ display: "flex", gap: "var(--d-nav-gap)" }}>
-          {navLinks.map((link) => (
-            <NavLink
-              key={link.to}
-              to={link.to}
-              end={link.to === "/"}
-              style={({ isActive }) => ({
-                color: isActive ? "var(--ctp-mauve)" : "var(--ctp-subtext1)",
-                backgroundColor: isActive
-                  ? "var(--ctp-surface1)"
-                  : "transparent",
-                fontWeight: 500,
-                padding: "var(--d-nav-py) var(--d-nav-px)",
-                borderRadius: "var(--d-nav-radius)",
-                textDecoration: "none",
-                transition: "all 0.15s ease",
-              })}
-            >
-              {link.label}
-            </NavLink>
-          ))}
-        </nav>
-
-        {user && (
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: "var(--d-user-gap)",
-            }}
-          >
-            <span
-              style={{
-                color: "var(--ctp-subtext1)",
-                fontSize: "var(--d-user-font)",
-              }}
-            >
-              {user.display_name}
-            </span>
-            <span
-              style={{
-                display: "inline-block",
-                padding: "0.25rem 0.5rem",
-                borderRadius: "1rem",
-                fontSize: "0.75rem",
-                fontWeight: 600,
-                ...roleBadgeStyle[user.role],
-              }}
-            >
-              {user.role}
-            </span>
-            <button
-              onClick={toggleDensity}
-              title={`Switch to ${density === "comfortable" ? "compact" : "comfortable"} view`}
-              style={{
-                padding: "0.25rem 0.5rem",
-                fontSize: "var(--font-sm)",
-                borderRadius: "0.25rem",
-                cursor: "pointer",
-                border: "1px solid var(--ctp-surface1)",
-                background: "var(--ctp-surface0)",
-                color: "var(--ctp-subtext1)",
-                fontFamily: "'JetBrains Mono', monospace",
-                letterSpacing: "0.05em",
-              }}
-            >
-              {density === "comfortable" ? "COM" : "CMP"}
-            </button>
-            <button
-              onClick={logout}
-              style={{
-                padding: "0.25rem 0.75rem",
-                fontSize: "var(--font-table)",
-                borderRadius: "0.5rem",
-                cursor: "pointer",
-                border: "none",
-                background: "var(--ctp-surface1)",
-                color: "var(--ctp-subtext1)",
-              }}
-            >
-              Logout
-            </button>
-          </div>
-        )}
-      </header>
-
-      <main style={{ flex: 1, padding: "1rem 1rem 0 1rem", overflow: "auto" }}>
         <Outlet />
       </main>
     </div>

web/src/components/Sidebar.tsx

@@ -0,0 +1,335 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import { NavLink, useNavigate } from "react-router-dom";
+import {
+  Package,
+  FolderKanban,
+  FileCode2,
+  ClipboardCheck,
+  Settings2,
+  ChevronLeft,
+  ChevronRight,
+  LogOut,
+} from "lucide-react";
+import type { ModuleInfo } from "../api/types";
+
+interface NavItem {
+  moduleId: string | null;
+  path: string;
+  label: string;
+  icon: React.ComponentType<{ size?: number }>;
+}
+
+const allNavItems: NavItem[] = [
+  { moduleId: "core", path: "/", label: "Items", icon: Package },
+  {
+    moduleId: "projects",
+    path: "/projects",
+    label: "Projects",
+    icon: FolderKanban,
+  },
+  { moduleId: "schemas", path: "/schemas", label: "Schemas", icon: FileCode2 },
+  { moduleId: "audit", path: "/audit", label: "Audit", icon: ClipboardCheck },
+  { moduleId: null, path: "/settings", label: "Settings", icon: Settings2 },
+];
+
+interface SidebarProps {
+  open: boolean;
+  onToggle: () => void;
+  modules: Record<string, ModuleInfo>;
+  user: { display_name: string; role: string } | null;
+  density: string;
+  onToggleDensity: () => void;
+  onLogout: () => void;
+}
+
+const roleBadgeStyle: Record<string, React.CSSProperties> = {
+  admin: { background: "rgba(203,166,247,0.2)", color: "var(--ctp-mauve)" },
+  editor: { background: "rgba(137,180,250,0.2)", color: "var(--ctp-blue)" },
+  viewer: { background: "rgba(148,226,213,0.2)", color: "var(--ctp-teal)" },
+};
+
+export function Sidebar({
+  open,
+  onToggle,
+  modules,
+  user,
+  density,
+  onToggleDensity,
+  onLogout,
+}: SidebarProps) {
+  const navigate = useNavigate();
+  const [focusIndex, setFocusIndex] = useState(-1);
+  const navRefs = useRef<(HTMLAnchorElement | null)[]>([]);
+
+  const visibleItems = allNavItems.filter(
+    (item) => item.moduleId === null || modules[item.moduleId]?.enabled,
+  );
+
+  // Focus the item at focusIndex when it changes
+  useEffect(() => {
+    if (focusIndex >= 0 && focusIndex < navRefs.current.length) {
+      navRefs.current[focusIndex]?.focus();
+    }
+  }, [focusIndex]);
+
+  // Reset focus when sidebar closes
+  useEffect(() => {
+    if (!open) setFocusIndex(-1);
+  }, [open]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (!open) return;
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setFocusIndex((i) => (i + 1) % visibleItems.length);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setFocusIndex(
+            (i) => (i - 1 + visibleItems.length) % visibleItems.length,
+          );
+          break;
+        case "Enter": {
+          const target = visibleItems[focusIndex];
+          if (focusIndex >= 0 && target) {
+            e.preventDefault();
+            navigate(target.path);
+          }
+          break;
+        }
+        case "Escape":
+          e.preventDefault();
+          onToggle();
+          break;
+      }
+    },
+    [open, focusIndex, visibleItems, navigate, onToggle],
+  );
+
+  return (
+    <nav
+      onKeyDown={handleKeyDown}
+      style={{
+        width: open ? "var(--d-sidebar-w)" : "var(--d-sidebar-collapsed)",
+        minWidth: open ? "var(--d-sidebar-w)" : "var(--d-sidebar-collapsed)",
+        height: "100vh",
+        backgroundColor: "var(--ctp-mantle)",
+        borderRight: "1px solid var(--ctp-surface0)",
+        display: "flex",
+        flexDirection: "column",
+        transition: "width 0.2s ease, min-width 0.2s ease",
+        overflow: "hidden",
+        flexShrink: 0,
+      }}
+    >
+      {/* Logo */}
+      <div
+        style={{
+          padding: open ? "0.75rem 1rem" : "0.75rem 0",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: open ? "flex-start" : "center",
+          borderBottom: "1px solid var(--ctp-surface0)",
+          minHeight: 44,
+        }}
+      >
+        <span
+          style={{
+            fontSize: "1.25rem",
+            fontWeight: 700,
+            color: "var(--ctp-mauve)",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {open ? "Silo" : "S"}
+        </span>
+      </div>
+
+      {/* Nav items */}
+      <div
+        style={{
+          flex: 1,
+          padding: "0.5rem 0.5rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "2px",
+        }}
+      >
+        {visibleItems.map((item, i) => (
+          <NavLink
+            key={item.path}
+            to={item.path}
+            end={item.path === "/"}
+            ref={(el) => {
+              navRefs.current[i] = el;
+            }}
+            title={open ? undefined : item.label}
+            style={({ isActive }) => ({
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem",
+              padding: "var(--d-nav-py) var(--d-nav-px)",
+              borderRadius: "var(--d-nav-radius)",
+              textDecoration: "none",
+              color: isActive ? "var(--ctp-mauve)" : "var(--ctp-subtext1)",
+              backgroundColor: isActive ? "var(--ctp-surface1)" : "transparent",
+              fontWeight: 500,
+              fontSize: "var(--font-body)",
+              whiteSpace: "nowrap",
+              transition: "background-color 0.15s ease, color 0.15s ease",
+              outline: focusIndex === i ? "1px solid var(--ctp-mauve)" : "none",
+              outlineOffset: -1,
+              justifyContent: open ? "flex-start" : "center",
+            })}
+            onMouseEnter={(e) => {
+              const target = e.currentTarget;
+              if (
+                !target.style.backgroundColor ||
+                target.style.backgroundColor === "transparent"
+              ) {
+                target.style.backgroundColor = "var(--ctp-surface0)";
+              }
+            }}
+            onMouseLeave={(e) => {
+              const target = e.currentTarget;
+              // Let NavLink's isActive styling handle active items
+              const isActive = target.getAttribute("aria-current") === "page";
+              if (!isActive) {
+                target.style.backgroundColor = "transparent";
+              }
+            }}
+          >
+            <item.icon size={16} />
+            {open && <span>{item.label}</span>}
+          </NavLink>
+        ))}
+      </div>
+
+      {/* Bottom section */}
+      <div
+        style={{
+          borderTop: "1px solid var(--ctp-surface0)",
+          padding: "0.5rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+        }}
+      >
+        {/* Toggle sidebar */}
+        <button
+          onClick={onToggle}
+          title={open ? "Collapse sidebar (Ctrl+J)" : "Expand sidebar (Ctrl+J)"}
+          style={{
+            ...btnStyle,
+            justifyContent: open ? "flex-start" : "center",
+          }}
+        >
+          {open ? <ChevronLeft size={16} /> : <ChevronRight size={16} />}
+          {open && <span>Collapse</span>}
+        </button>
+
+        {/* Density toggle */}
+        <button
+          onClick={onToggleDensity}
+          title={`Switch to ${density === "comfortable" ? "compact" : "comfortable"} view`}
+          style={{
+            ...btnStyle,
+            justifyContent: open ? "flex-start" : "center",
+            fontFamily: "'JetBrains Mono', monospace",
+            letterSpacing: "0.05em",
+          }}
+        >
+          <span
+            style={{
+              width: 16,
+              textAlign: "center",
+              fontSize: "var(--font-sm)",
+            }}
+          >
+            {density === "comfortable" ? "CO" : "CP"}
+          </span>
+          {open && (
+            <span>{density === "comfortable" ? "Comfortable" : "Compact"}</span>
+          )}
+        </button>
+
+        {/* User */}
+        {user && (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              padding: "0.375rem var(--d-nav-px)",
+              justifyContent: open ? "flex-start" : "center",
+            }}
+          >
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 20,
+                height: 20,
+                borderRadius: "50%",
+                fontSize: "var(--font-xs)",
+                fontWeight: 600,
+                flexShrink: 0,
+                ...roleBadgeStyle[user.role],
+              }}
+            >
+              {user.role.charAt(0).toUpperCase()}
+            </span>
+            {open && (
+              <span
+                style={{
+                  color: "var(--ctp-subtext1)",
+                  fontSize: "var(--font-body)",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {user.display_name}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Logout */}
+        <button
+          onClick={onLogout}
+          title="Logout"
+          style={{
+            ...btnStyle,
+            justifyContent: open ? "flex-start" : "center",
+            color: "var(--ctp-overlay1)",
+          }}
+        >
+          <LogOut size={16} />
+          {open && <span>Logout</span>}
+        </button>
+      </div>
+    </nav>
+  );
+}
+
+const btnStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.75rem",
+  padding: "var(--d-nav-py) var(--d-nav-px)",
+  borderRadius: "var(--d-nav-radius)",
+  border: "none",
+  background: "transparent",
+  color: "var(--ctp-subtext1)",
+  fontSize: "var(--font-body)",
+  fontWeight: 500,
+  cursor: "pointer",
+  whiteSpace: "nowrap",
+  width: "100%",
+  textAlign: "left",
+};

web/src/hooks/useModules.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+import { get } from "../api/client";
+import type { ModuleInfo, ModulesResponse } from "../api/types";
+
+export function useModules() {
+  const [modules, setModules] = useState<Record<string, ModuleInfo>>({});
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    get<ModulesResponse>("/api/modules")
+      .then((res) => setModules(res.modules))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  return { modules, loading };
+}

web/src/styles/theme.css

@@ -67,6 +67,9 @@
     --d-footer-h: 28px;
     --d-footer-font: var(--font-table);
     --d-footer-px: 2rem;
+
+    --d-sidebar-w: 220px;
+    --d-sidebar-collapsed: 48px;
 }
 
 /* ── Density: compact ── */
@@ -98,4 +101,7 @@
     --d-footer-h: 24px;
     --d-footer-font: var(--font-sm);
     --d-footer-px: 1.25rem;
+
+    --d-sidebar-w: 180px;
+    --d-sidebar-collapsed: 40px;
 }