From 7514a46d366ce0fd6f419d3c3f0c39108bb8e709 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Wed, 21 Jan 2026 12:19:29 +0000
Subject: [PATCH] moved ThemeToggle to account settings

---
 .../src/components/account-dialog.tsx         | 72 ++++++++++---------
 .../frontend/src/components/theme-toggle.tsx  | 21 +++---
 packages/frontend/src/pages/App.tsx           |  2 -
 3 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/packages/frontend/src/components/account-dialog.tsx b/packages/frontend/src/components/account-dialog.tsx
index e66d7d6..3cd5b46 100644
--- a/packages/frontend/src/components/account-dialog.tsx
+++ b/packages/frontend/src/components/account-dialog.tsx
@@ -12,6 +12,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { UploadAvatar } from "@/components/upload-avatar";
 import { useUpdateUser } from "@/lib/query/hooks";
 import { parseError } from "@/lib/server";
+import { cn } from "@/lib/utils";
+import ThemeToggle from "./theme-toggle";
 
 function AccountDialog({ trigger }: { trigger?: ReactNode }) {
     const { user: currentUser, setUser } = useAuthenticatedSession();
@@ -82,7 +84,7 @@ function AccountDialog({ trigger }: { trigger?: ReactNode }) {
                 )}
             </DialogTrigger>
 
-            <DialogContent className="sm:max-w-sm">
+            <DialogContent className={cn("sm:max-w-sm", error !== "" && "border border-destructive")}>
                 <DialogHeader>
                     <DialogTitle>Account</DialogTitle>
                 </DialogHeader>
@@ -122,41 +124,47 @@ function AccountDialog({ trigger }: { trigger?: ReactNode }) {
                     />
                     <Label className="text-lg -mt-2">Preferences</Label>
 
-                    <div className="flex flex-col gap-1 w-min">
-                        <Label className="text-sm">Icon Style</Label>
-                        <Select
-                            value={iconPreference}
-                            onValueChange={(v) => setIconPreference(v as IconStyle)}
-                        >
-                            <SelectTrigger className="w-full">
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent position="popper" side="bottom" align="start">
-                                <SelectItem value="lucide">
-                                    <div className="flex items-center gap-2">
-                                        <Icon icon="sun" iconStyle="lucide" size={16} />
-                                        Lucide
-                                    </div>
-                                </SelectItem>
-                                <SelectItem value="pixel">
-                                    <div className="flex items-center gap-2">
-                                        <Icon icon="sun" iconStyle="pixel" size={16} />
-                                        Pixel
-                                    </div>
-                                </SelectItem>
-                                <SelectItem value="phosphor">
-                                    <div className="flex items-center gap-2">
-                                        <Icon icon="sun" iconStyle="phosphor" size={16} />
-                                        Phosphor
-                                    </div>
-                                </SelectItem>
-                            </SelectContent>
-                        </Select>
+                    <div className="flex gap-8 justify w-full">
+                        <div className="flex flex-col items-start gap-1">
+                            <Label className="text-sm">Light/Dark Mode</Label>
+                            <ThemeToggle withText />
+                        </div>
+                        <div className="flex flex-col items-start gap-1">
+                            <Label className="text-sm">Icon Style</Label>
+                            <Select
+                                value={iconPreference}
+                                onValueChange={(v) => setIconPreference(v as IconStyle)}
+                            >
+                                <SelectTrigger className="w-full">
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent position="popper" side="bottom" align="start">
+                                    <SelectItem value="lucide">
+                                        <div className="flex items-center gap-2">
+                                            <Icon icon="sun" iconStyle="lucide" size={16} />
+                                            Lucide
+                                        </div>
+                                    </SelectItem>
+                                    <SelectItem value="pixel">
+                                        <div className="flex items-center gap-2">
+                                            <Icon icon="sun" iconStyle="pixel" size={16} />
+                                            Pixel
+                                        </div>
+                                    </SelectItem>
+                                    <SelectItem value="phosphor">
+                                        <div className="flex items-center gap-2">
+                                            <Icon icon="sun" iconStyle="phosphor" size={16} />
+                                            Phosphor
+                                        </div>
+                                    </SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
                     </div>
 
                     {error !== "" && <Label className="text-destructive text-sm">{error}</Label>}
 
-                    <div className="flex justify-end">
+                    <div className="flex justify-end mt-4">
                         <Button variant={"outline"} type={"submit"} className="px-12">
                             Save
                         </Button>
diff --git a/packages/frontend/src/components/theme-toggle.tsx b/packages/frontend/src/components/theme-toggle.tsx
index 9847db7..f365d0b 100644
--- a/packages/frontend/src/components/theme-toggle.tsx
+++ b/packages/frontend/src/components/theme-toggle.tsx
@@ -3,7 +3,7 @@ import Icon from "@/components/ui/icon";
 import { IconButton } from "@/components/ui/icon-button";
 import { cn } from "@/lib/utils";
 
-function ThemeToggle({ className }: { className?: string }) {
+function ThemeToggle({ withText, className }: { withText?: boolean; className?: string }) {
     const { theme, setTheme } = useTheme();
     const resolvedTheme =
         theme === "system"
@@ -14,14 +14,17 @@ function ThemeToggle({ className }: { className?: string }) {
     const isDark = resolvedTheme === "dark";
 
     return (
-        <IconButton
-            size="md"
-            className={cn("hover:text-muted-foreground", className)}
-            onClick={() => setTheme(isDark ? "light" : "dark")}
-            title={isDark ? "Switch to light mode" : "Switch to dark mode"}
-        >
-            {isDark ? <Icon icon="sun" className="size-5" /> : <Icon icon="moon" className="size-5" />}
-        </IconButton>
+        <div className={cn("flex items-center gap-2", className)}>
+            <IconButton
+                size="md"
+                className={cn("hover:text-muted-foreground", className)}
+                onClick={() => setTheme(isDark ? "light" : "dark")}
+                title={isDark ? "Switch to light mode" : "Switch to dark mode"}
+            >
+                {isDark ? <Icon icon="sun" className="size-5" /> : <Icon icon="moon" className="size-5" />}
+            </IconButton>
+            {withText && (isDark ? "Dark Mode" : "Light Mode")}
+        </div>
     );
 }
 
diff --git a/packages/frontend/src/pages/App.tsx b/packages/frontend/src/pages/App.tsx
index 55198c2..7a7ec65 100644
--- a/packages/frontend/src/pages/App.tsx
+++ b/packages/frontend/src/pages/App.tsx
@@ -15,7 +15,6 @@ import { useSelection } from "@/components/selection-provider";
 import { ServerConfigurationDialog } from "@/components/server-configuration-dialog";
 import { useAuthenticatedSession } from "@/components/session-provider";
 import SmallUserDisplay from "@/components/small-user-display";
-import ThemeToggle from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
 import {
     DropdownMenu,
@@ -217,7 +216,6 @@ export default function App() {
                     )}
                 </div>
                 <div className={`flex gap-${BREATHING_ROOM} items-center`}>
-                    <ThemeToggle />
                     <DropdownMenu>
                         <DropdownMenuTrigger className="text-sm">
                             <SmallUserDisplay user={user} />