feat(web): collapsible icon sidebar (persisted, auto-collapse on narrow) (#44, #58)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/shell/app-shell.tsx

@@ -1,9 +1,10 @@
-import { NavLink, Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { useLogout } from "../api/queries";
 import { Button } from "@/components/ui/button";
 import { LangSwitch } from "./lang-switch";
+import { Sidebar } from "./sidebar";
 
 export function AppShell() {
   const { t } = useTranslation();
@@ -17,51 +18,7 @@ export function AppShell() {
 
   return (
     <div className="flex min-h-screen">
-      <aside className="w-44 shrink-0 border-r bg-neutral-50 p-3">
-        <div className="mb-4 font-semibold">{t("app.name")}</div>
-        <nav className="space-y-1 text-sm">
-          <NavLink
-            to="/objects"
-            className={({ isActive }) =>
-              `block rounded px-2 py-1 ${isActive ? "bg-neutral-200 font-medium" : ""}`
-            }
-          >
-            {t("nav.objects")}
-          </NavLink>
-          <NavLink
-            to="/vocabularies"
-            className={({ isActive }) =>
-              `block rounded px-2 py-1 ${isActive ? "bg-neutral-200 font-medium" : ""}`
-            }
-          >
-            {t("nav.vocabularies")}
-          </NavLink>
-          <NavLink
-            to="/authorities"
-            className={({ isActive }) =>
-              `block rounded px-2 py-1 ${isActive ? "bg-neutral-200 font-medium" : ""}`
-            }
-          >
-            {t("nav.authorities")}
-          </NavLink>
-          <NavLink
-            to="/search"
-            className={({ isActive }) =>
-              `block rounded px-2 py-1 ${isActive ? "bg-neutral-200 font-medium" : ""}`
-            }
-          >
-            {t("nav.search")}
-          </NavLink>
-          <NavLink
-            to="/fields"
-            className={({ isActive }) =>
-              `block rounded px-2 py-1 ${isActive ? "bg-neutral-200 font-medium" : ""}`
-            }
-          >
-            {t("nav.fields")}
-          </NavLink>
-        </nav>
-      </aside>
+      <Sidebar />
       <div className="flex flex-1 flex-col">
         <header className="flex items-center gap-4 border-b px-4 py-2">
           <div className="flex-1" />