feat(theme-switcher): move to settings menu

ui/components/SettingsDialog.tsx

@@ -8,6 +8,7 @@ import React, {
   useState,
   type SelectHTMLAttributes,
 } from 'react';
+import ThemeSwitcher from './theme/Switcher';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
@@ -27,7 +28,7 @@ interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   options: { value: string; label: string; disabled?: boolean }[];
 }
 
-const Select = ({ className, options, ...restProps }: SelectProps) => {
+export const Select = ({ className, options, ...restProps }: SelectProps) => {
   return (
     <select
       {...restProps}
@@ -209,6 +210,12 @@ const SettingsDialog = ({
                 </Dialog.Title>
                 {config && !isLoading && (
                   <div className="flex flex-col space-y-4 mt-6">
+                    <div className="flex flex-col space-y-1">
+                      <p className="text-black/70 dark:text-white/70 text-sm">
+                        Theme
+                      </p>
+                      <ThemeSwitcher />
+                    </div>
                     {config.chatModelProviders && (
                       <div className="flex flex-col space-y-1">
                         <p className="text-black/70 dark:text-white/70 text-sm">

ui/components/Sidebar.tsx

@@ -68,14 +68,10 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
             ))}
           </VerticalIconContainer>
 
-          <VerticalIconContainer>
-            <ThemeSwitcher />
-
           <Settings
             onClick={() => setIsSettingsOpen(!isSettingsOpen)}
             className="cursor-pointer"
           />
-          </VerticalIconContainer>
 
           <SettingsDialog
             isOpen={isSettingsOpen}

ui/components/theme/Switcher.tsx

@@ -3,15 +3,11 @@ import { useTheme } from 'next-themes';
 import { SunIcon, MoonIcon, MonitorIcon } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { cn } from '@/lib/utils';
+import { Select } from '../SettingsDialog';
 
 type Theme = 'dark' | 'light' | 'system';
 
-interface ThemeSwitcherProps {
+const ThemeSwitcher = ({ className }: { className?: string }) => {
-  size?: number | string;
-  className?: string;
-}
-
-const ThemeSwitcher = ({ size, className }: ThemeSwitcherProps) => {
   const [mounted, setMounted] = useState(false);
 
   const { theme, setTheme } = useTheme();
@@ -50,23 +46,15 @@ const ThemeSwitcher = ({ size, className }: ThemeSwitcherProps) => {
     return null;
   }
 
-  return isTheme('dark') ? (
+  return (
-    <SunIcon
+    <Select
-      className={cn('cursor-pointer', className)}
+      className={className}
-      size={size}
+      value={theme}
-      onClick={() => handleThemeSwitch('light')}
+      onChange={(e) => handleThemeSwitch(e.target.value as Theme)}
-    />
+      options={[
-  ) : isTheme('light') ? (
+        { value: 'light', label: 'Light' },
-    <MoonIcon
+        { value: 'dark', label: 'Dark' }
-      className={cn('cursor-pointer', className)}
+      ]}
-      size={size}
-      onClick={() => handleThemeSwitch('dark')}
-    />
-  ) : (
-    <MonitorIcon
-      className={cn('cursor-pointer', className)}
-      size={size}
-      onClick={() => handleThemeSwitch('system')}
     />
   );
 };