Move dark mode toggle from sidebar to Settings > Display

web/src/layout/AppShell.tsx

@@ -18,11 +18,8 @@ import {
   IconStethoscope,
   IconSettings,
   IconMenu2,
-  IconSun,
-  IconMoon,
 } from "@tabler/icons-react";
 import type { CurrentUser } from "../api/client";
-import { getTheme, setTheme, type Theme } from "../utils/theme";
 
 interface NavItem {
   to: string;
@@ -54,17 +51,10 @@ const roleRank: Record<CurrentUser["role"], number> = { viewer: 0, operator: 1,
 
 export default function AppShell({ user, children }: { user: CurrentUser; children: ReactNode }) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [theme, setThemeState] = useState<Theme>(() => getTheme());
   const visibleItems = NAV_ITEMS.filter(
     (item) => !item.minRole || roleRank[user.role] >= roleRank[item.minRole],
   );
 
-  function toggleTheme() {
-    const next: Theme = theme === "dark" ? "light" : "dark";
-    setTheme(next);
-    setThemeState(next);
-  }
-
   return (
     <div className="page">
       <aside className="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
@@ -97,14 +87,6 @@ export default function AppShell({ user, children }: { user: CurrentUser; childr
               ))}
             </ul>
             <div className="navbar-footer px-3">
-              <button
-                type="button"
-                className="btn btn-outline-secondary btn-sm w-100 mb-2 d-flex align-items-center justify-content-center gap-2"
-                onClick={toggleTheme}
-              >
-                {theme === "dark" ? <IconSun size={16} /> : <IconMoon size={16} />}
-                {theme === "dark" ? "Light mode" : "Dark mode"}
-              </button>
               <div className="text-secondary small mb-2">
                 Signed in as {user.name ?? user.email ?? user.sub} · {user.role}
               </div>