From 503bf6a9bb49da4f8e1c35f3033d017a1f9f58fb Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Sat, 4 Jan 2025 23:29:20 +0800
Subject: [PATCH] feat: replace DropdownMenu with Select component in
 ModeToggle for improved theme selection

---
 src/components/ModeToggle.tsx    | 44 +++++++++++++++++---------------
 src/components/ThemeProvider.tsx |  2 +-
 src/components/navbar.tsx        |  2 --
 src/pages/App.tsx                |  1 +
 4 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/components/ModeToggle.tsx b/src/components/ModeToggle.tsx
index 8a925d1..70cc101 100644
--- a/src/components/ModeToggle.tsx
+++ b/src/components/ModeToggle.tsx
@@ -7,31 +7,33 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useTheme } from "@/components/ThemeProvider";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useTheme, Theme } from "@/components/ThemeProvider";
 
 export function ModeToggle() {
   const { setTheme } = useTheme();
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <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" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <Select onValueChange={(value) => setTheme(value as Theme)}>
+      <SelectTrigger className="w-full">
+        <SelectValue placeholder="Select theme" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Theme</SelectLabel>
+          <SelectItem value="light">Light</SelectItem>
+          <SelectItem value="dark">Dark</SelectItem>
+          <SelectItem value="system">System</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
   );
 }
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
index 7b9eeb2..d35ebbf 100644
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -1,6 +1,6 @@
 import { createContext, useContext, useEffect, useState } from "react";
 
-type Theme = "dark" | "light" | "system";
+export type Theme = "dark" | "light" | "system";
 
 type ThemeProviderProps = {
   children: React.ReactNode;
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 2d6bbd8..68923c8 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -14,7 +14,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { ModeToggle } from "@/components/ModeToggle";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Separator } from "@/components/ui/separator";
 import {
@@ -130,7 +129,6 @@ const Navbar: React.FC = () => {
                 </Menubar>
               </div>
             </div>
-            <ModeToggle />
           </div>
         </div>
         <div className="flex ml-auto gap-2 px-3">
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index bcbee45..6a7cf7a 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -414,6 +414,7 @@ export function App() {
           </SidebarGroup>
         </SidebarContent>
         <SidebarFooter>
+          <ModeToggle />
           <AlertDialog>
             <AlertDialogTrigger asChild>
               <Button variant="destructive">{Tr("DEL")}</Button>