fix: theme selector

web/src/components/AuthFooter.tsx

@@ -9,14 +9,10 @@ interface Props {
 }
 
 const AuthFooter = observer(({ className }: Props) => {
-  const handleLocaleSelectChange = (locale: Locale) => {
-    workspaceStore.state.setPartial({ locale });
-  };
-
   return (
     <div className={cn("mt-4 flex flex-row items-center justify-center w-full gap-2", className)}>
-      <LocaleSelect value={workspaceStore.state.locale} onChange={handleLocaleSelectChange} />
-      <ThemeSelect />
+      <LocaleSelect value={workspaceStore.state.locale} onChange={(locale) => workspaceStore.state.setPartial({ locale })} />
+      <ThemeSelect value={workspaceStore.state.theme} onValueChange={(theme) => workspaceStore.state.setPartial({ theme })} />
     </div>
   );
 });

web/src/components/ThemeSelect.tsx

 import { Moon, Palette, Sun, Wallpaper } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { workspaceStore } from "@/store";
 
 interface ThemeSelectProps {
@@ -27,25 +26,24 @@ const ThemeSelect = ({ value, onValueChange, className }: ThemeSelectProps = {})
     }
   };
 
-  const currentThemeOption = themeOptions.find((option) => option.value === currentTheme);
-
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" className={`justify-start ${className || ""}`}>
-          {currentThemeOption?.icon}
-          <span className="ml-2">{currentThemeOption?.label}</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start">
+    <Select value={currentTheme} onValueChange={handleThemeChange}>
+      <SelectTrigger className={className}>
+        <div className="flex items-center gap-2">
+          <SelectValue placeholder="Select theme" />
+        </div>
+      </SelectTrigger>
+      <SelectContent>
         {themeOptions.map((option) => (
-          <DropdownMenuItem key={option.value} onClick={() => handleThemeChange(option.value)}>
-            {option.icon}
-            <span className="ml-2">{option.label}</span>
-          </DropdownMenuItem>
+          <SelectItem key={option.value} value={option.value}>
+            <div className="flex items-center gap-2">
+              {option.icon}
+              <span>{option.label}</span>
+            </div>
+          </SelectItem>
         ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </SelectContent>
+    </Select>
   );
 };