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} />
+      <LocaleSelect value={workspaceStore.state.locale} onChange={(locale) => workspaceStore.state.setPartial({ locale })} />
-      <ThemeSelect />
+      <ThemeSelect value={workspaceStore.state.theme} onValueChange={(theme) => workspaceStore.state.setPartial({ theme })} />
     </div>
   );
 });

web/src/components/ThemeSelect.tsx

@@ -1,6 +1,5 @@
 import { Moon, Palette, Sun, Wallpaper } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 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>
+    <Select value={currentTheme} onValueChange={handleThemeChange}>
-      <DropdownMenuTrigger asChild>
+      <SelectTrigger className={className}>
-        <Button variant="outline" className={`justify-start ${className || ""}`}>
+        <div className="flex items-center gap-2">
-          {currentThemeOption?.icon}
+          <SelectValue placeholder="Select theme" />
-          <span className="ml-2">{currentThemeOption?.label}</span>
+        </div>
-        </Button>
+      </SelectTrigger>
-      </DropdownMenuTrigger>
+      <SelectContent>
-      <DropdownMenuContent align="start">
         {themeOptions.map((option) => (
-          <DropdownMenuItem key={option.value} onClick={() => handleThemeChange(option.value)}>
+          <SelectItem key={option.value} value={option.value}>
-            {option.icon}
+            <div className="flex items-center gap-2">
-            <span className="ml-2">{option.label}</span>
+              {option.icon}
-          </DropdownMenuItem>
+              <span>{option.label}</span>
+            </div>
+          </SelectItem>
         ))}
-      </DropdownMenuContent>
+      </SelectContent>
-    </DropdownMenu>
+    </Select>
   );
 };