admin/OpenJarvis
1
0
Fork 0
mirror of https://github.com/open-jarvis/OpenJarvis.git synced 2026-07-30 10:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add theme toggle icon in sidebar header

Browse Source
This commit is contained in:
Jon Saad-Falcon
2026-03-14 12:46:52 -07:00
parent 60c0374f9f
commit bc7ef2dd51
1 changed files with 31 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Sidebar/Sidebar.tsx
+31 -10
View File
@@ -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 */}