From bc7ef2dd51fb2628c394920a48e758130b9efd4a Mon Sep 17 00:00:00 2001
From: Jon Saad-Falcon <41205309+jonsaadfalcon@users.noreply.github.com>
Date: Sat, 14 Mar 2026 12:46:52 -0700
Subject: [PATCH] feat: add theme toggle icon in sidebar header

---
 frontend/src/components/Sidebar/Sidebar.tsx | 41 ++++++++++++++++-----
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
index 46f4bd64..77cfae8f 100644
--- a/frontend/src/components/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -11,6 +11,9 @@ import {
   Cpu,
   Rocket,
   Bot,
+  Sun,
+  Moon,
+  Monitor,
 } from 'lucide-react';
 import { ConversationList } from './ConversationList';
 import { useAppStore } from '../../lib/store';
@@ -27,6 +30,12 @@ export function Sidebar() {
   const serverInfo = useAppStore((s) => s.serverInfo);
   const setCommandPaletteOpen = useAppStore((s) => s.setCommandPaletteOpen);
 
+  const settings = useAppStore((s) => s.settings);
+  const updateSettings = useAppStore((s) => s.updateSettings);
+
+  const ThemeIcon = settings.theme === 'light' ? Sun : settings.theme === 'dark' ? Moon : Monitor;
+  const nextTheme = settings.theme === 'light' ? 'dark' : settings.theme === 'dark' ? 'system' : 'light';
+
   const handleNewChat = () => {
     createConversation(selectedModel);
     navigate('/');
@@ -75,16 +84,28 @@ export function Sidebar() {
             >
               <PanelLeftClose size={18} />
             </button>
-            <button
-              onClick={handleNewChat}
-              className="p-2 rounded-lg transition-colors cursor-pointer"
-              style={{ color: 'var(--color-text-secondary)' }}
-              onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--color-bg-tertiary)')}
-              onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
-              title="New chat"
-            >
-              <Plus size={18} />
-            </button>
+            <div className="flex items-center gap-1">
+              <button
+                onClick={() => updateSettings({ theme: nextTheme })}
+                className="p-2 rounded-lg transition-colors cursor-pointer"
+                style={{ color: 'var(--color-text-secondary)' }}
+                onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--color-bg-tertiary)')}
+                onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
+                title={`Theme: ${settings.theme} (click for ${nextTheme})`}
+              >
+                <ThemeIcon size={16} />
+              </button>
+              <button
+                onClick={handleNewChat}
+                className="p-2 rounded-lg transition-colors cursor-pointer"
+                style={{ color: 'var(--color-text-secondary)' }}
+                onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--color-bg-tertiary)')}
+                onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
+                title="New chat"
+              >
+                <Plus size={18} />
+              </button>
+            </div>
           </div>
 
           {/* Model badge */}