xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-07-20 11:26:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify theme toggle implementation in HomeSidebar and ThemeToggle components

Browse Source
This commit is contained in:
Junyan Qin
2025-12-28 22:43:05 +08:00
parent 07ad846e96
commit ba5b481617
2 changed files with 35 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/home/components/home-sidebar/HomeSidebar.tsx
+26 -23
View File
@@ -29,7 +29,6 @@ import {
PopoverTrigger, PopoverTrigger,
} from '@/components/ui/popover'; } from '@/components/ui/popover';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import { LanguageSelector } from '@/components/ui/language-selector'; import { LanguageSelector } from '@/components/ui/language-selector';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import AccountSettingsDialog from '@/app/home/components/account-settings-dialog/AccountSettingsDialog'; import AccountSettingsDialog from '@/app/home/components/account-settings-dialog/AccountSettingsDialog';
@@ -376,28 +375,32 @@ export default function HomeSidebar({
</span> </span>
</div> </div>
<LanguageSelector <div className="flex items-center gap-2">
triggerClassName="w-full" <LanguageSelector
onOpenChange={setLanguageSelectorOpen} triggerClassName="flex-1"
/> onOpenChange={setLanguageSelectorOpen}
<ToggleGroup />
type="single" <Button
value={theme} variant="outline"
onValueChange={(value) => { size="icon"
if (value) setTheme(value); onClick={() =>
}} setTheme(
className="w-full justify-start" theme === 'light'
> ? 'dark'
<ToggleGroupItem value="light" size="sm"> : theme === 'dark'
<Sun className="h-4 w-4" /> ? 'system'
</ToggleGroupItem> : 'light',
<ToggleGroupItem value="dark" size="sm"> )
<Moon className="h-4 w-4" /> }
</ToggleGroupItem> className="h-9 w-9 shrink-0"
<ToggleGroupItem value="system" size="sm"> >
<Monitor className="h-4 w-4" /> {theme === 'light' && <Sun className="h-[1.2rem] w-[1.2rem]" />}
</ToggleGroupItem> {theme === 'dark' && <Moon className="h-[1.2rem] w-[1.2rem]" />}
</ToggleGroup> {theme === 'system' && (
<Monitor className="h-[1.2rem] w-[1.2rem]" />
)}
</Button>
</div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Button <Button
web/src/components/ui/theme-toggle.tsx
+9 -4
View File
@@ -1,7 +1,7 @@
'use client'; 'use client';
import * as React from 'react'; import * as React from 'react';
import { Moon, Sun } from 'lucide-react'; import { Moon, Sun, Monitor } from 'lucide-react';
import { useTheme } from 'next-themes'; import { useTheme } from 'next-themes';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@@ -13,11 +13,16 @@ export function ThemeToggle() {
<Button <Button
variant="outline" variant="outline"
size="icon" size="icon"
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')} onClick={() =>
setTheme(
theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light',
)
}
className="h-9 w-9" className="h-9 w-9"
> >
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> {theme === 'light' && <Sun className="h-[1.2rem] w-[1.2rem]" />}
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> {theme === 'dark' && <Moon className="h-[1.2rem] w-[1.2rem]" />}
{theme === 'system' && <Monitor className="h-[1.2rem] w-[1.2rem]" />}
</Button> </Button>
); );
} }