From 19f84838cc18bded150d98c7d03b2a714053ace9 Mon Sep 17 00:00:00 2001
From: Bobban Rydh <bobban@tooweb.se>
Date: Sat, 19 Sep 2026 01:58:18 +0200
Subject: [PATCH] Revert "Move dark mode toggle from sidebar to Settings >
 Display"

This reverts commit 4ba86429d5184b80282a1779e8d9632e93c07d35.
---
 web/src/layout/AppShell.tsx                | 18 +++++++++++++
 web/src/pages/settings/DisplaySettings.tsx | 31 ----------------------
 2 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/web/src/layout/AppShell.tsx b/web/src/layout/AppShell.tsx
index 4d36ae2..39eddd1 100644
--- a/web/src/layout/AppShell.tsx
+++ b/web/src/layout/AppShell.tsx
@@ -18,8 +18,11 @@ 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;
@@ -51,10 +54,17 @@ 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">
@@ -87,6 +97,14 @@ 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>
diff --git a/web/src/pages/settings/DisplaySettings.tsx b/web/src/pages/settings/DisplaySettings.tsx
index b3c25e9..934d52e 100644
--- a/web/src/pages/settings/DisplaySettings.tsx
+++ b/web/src/pages/settings/DisplaySettings.tsx
@@ -1,9 +1,7 @@
 import { useEffect, useState } from "react";
-import { IconMoon, IconSun } from "@tabler/icons-react";
 import { api, type AppSettings, type DateFormat, type TimeFormat } from "../../api/client";
 import { setDateTimeSettings } from "../../utils/date";
 import { setPageSize } from "../../utils/pageSize";
-import { getTheme, setTheme, type Theme } from "../../utils/theme";
 
 const DATE_FORMAT_OPTIONS: { value: DateFormat; label: string; example: string }[] = [
   { value: "ymd", label: "Year-Month-Day", example: "2026-09-15" },
@@ -21,17 +19,10 @@ export default function DisplaySettings() {
   const [dateFormat, setDateFormatState] = useState<DateFormat>("ymd");
   const [timeFormat, setTimeFormatState] = useState<TimeFormat>("24h");
   const [pageSize, setPageSizeState] = useState(20);
-  const [theme, setThemeState] = useState<Theme>(() => getTheme());
   const [saving, setSaving] = useState(false);
   const [saved, setSaved] = useState(false);
   const [saveError, setSaveError] = useState<string | null>(null);
 
-  function toggleTheme() {
-    const next: Theme = theme === "dark" ? "light" : "dark";
-    setTheme(next);
-    setThemeState(next);
-  }
-
   useEffect(() => {
     api.settings
       .get()
@@ -145,28 +136,6 @@ export default function DisplaySettings() {
             </div>
           </div>
         </div>
-
-        <div className="col-md-5">
-          <div className="card h-100">
-            <div className="card-header">
-              <h3 className="card-title">Theme</h3>
-            </div>
-            <div className="card-body">
-              <p className="text-secondary">
-                A personal preference remembered on this browser only — it doesn't affect other signed-in
-                users.
-              </p>
-              <button
-                type="button"
-                className="btn btn-outline-secondary d-flex align-items-center gap-2"
-                onClick={toggleTheme}
-              >
-                {theme === "dark" ? <IconSun size={16} /> : <IconMoon size={16} />}
-                Switch to {theme === "dark" ? "light" : "dark"} mode
-              </button>
-            </div>
-          </div>
-        </div>
       </div>
     </>
   );