From ba5b4816170bc1c35b957865ff4cd5bc7ed6546c Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Sun, 28 Dec 2025 22:43:05 +0800
Subject: [PATCH] refactor: simplify theme toggle implementation in HomeSidebar
 and ThemeToggle components

---
 .../components/home-sidebar/HomeSidebar.tsx   | 49 ++++++++++---------
 web/src/components/ui/theme-toggle.tsx        | 13 +++--
 2 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/web/src/app/home/components/home-sidebar/HomeSidebar.tsx b/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
index bfca8a35..2b1ae764 100644
--- a/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
+++ b/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
@@ -29,7 +29,6 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { Button } from '@/components/ui/button';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { LanguageSelector } from '@/components/ui/language-selector';
 import { Badge } from '@/components/ui/badge';
 import AccountSettingsDialog from '@/app/home/components/account-settings-dialog/AccountSettingsDialog';
@@ -376,28 +375,32 @@ export default function HomeSidebar({
               </span>
             </div>
 
-            <LanguageSelector
-              triggerClassName="w-full"
-              onOpenChange={setLanguageSelectorOpen}
-            />
-            <ToggleGroup
-              type="single"
-              value={theme}
-              onValueChange={(value) => {
-                if (value) setTheme(value);
-              }}
-              className="w-full justify-start"
-            >
-              <ToggleGroupItem value="light" size="sm">
-                <Sun className="h-4 w-4" />
-              </ToggleGroupItem>
-              <ToggleGroupItem value="dark" size="sm">
-                <Moon className="h-4 w-4" />
-              </ToggleGroupItem>
-              <ToggleGroupItem value="system" size="sm">
-                <Monitor className="h-4 w-4" />
-              </ToggleGroupItem>
-            </ToggleGroup>
+            <div className="flex items-center gap-2">
+              <LanguageSelector
+                triggerClassName="flex-1"
+                onOpenChange={setLanguageSelectorOpen}
+              />
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() =>
+                  setTheme(
+                    theme === 'light'
+                      ? 'dark'
+                      : theme === 'dark'
+                        ? 'system'
+                        : 'light',
+                  )
+                }
+                className="h-9 w-9 shrink-0"
+              >
+                {theme === 'light' && <Sun className="h-[1.2rem] w-[1.2rem]" />}
+                {theme === 'dark' && <Moon className="h-[1.2rem] w-[1.2rem]" />}
+                {theme === 'system' && (
+                  <Monitor className="h-[1.2rem] w-[1.2rem]" />
+                )}
+              </Button>
+            </div>
 
             <div className="flex flex-col gap-1">
               <Button
diff --git a/web/src/components/ui/theme-toggle.tsx b/web/src/components/ui/theme-toggle.tsx
index 143e9460..cdbb4da4 100644
--- a/web/src/components/ui/theme-toggle.tsx
+++ b/web/src/components/ui/theme-toggle.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Moon, Sun } from 'lucide-react';
+import { Moon, Sun, Monitor } from 'lucide-react';
 import { useTheme } from 'next-themes';
 
 import { Button } from '@/components/ui/button';
@@ -13,11 +13,16 @@ export function ThemeToggle() {
     <Button
       variant="outline"
       size="icon"
-      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+      onClick={() =>
+        setTheme(
+          theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light',
+        )
+      }
       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" />
-      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      {theme === 'light' && <Sun className="h-[1.2rem] w-[1.2rem]" />}
+      {theme === 'dark' && <Moon className="h-[1.2rem] w-[1.2rem]" />}
+      {theme === 'system' && <Monitor className="h-[1.2rem] w-[1.2rem]" />}
     </Button>
   );
 }