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>
+          <Settings
+            onClick={() => setIsSettingsOpen(!isSettingsOpen)}
+            className="cursor-pointer"
+          />
 
           <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 {
-  size?: number | string;
-  className?: string;
-}
-
-const ThemeSwitcher = ({ size, className }: ThemeSwitcherProps) => {
+const ThemeSwitcher = ({ className }: { className?: string }) => {
   const [mounted, setMounted] = useState(false);
 
   const { theme, setTheme } = useTheme();
@@ -50,23 +46,15 @@ const ThemeSwitcher = ({ size, className }: ThemeSwitcherProps) => {
     return null;
   }
 
-  return isTheme('dark') ? (
-    <SunIcon
-      className={cn('cursor-pointer', className)}
-      size={size}
-      onClick={() => handleThemeSwitch('light')}
-    />
-  ) : isTheme('light') ? (
-    <MoonIcon
-      className={cn('cursor-pointer', className)}
-      size={size}
-      onClick={() => handleThemeSwitch('dark')}
-    />
-  ) : (
-    <MonitorIcon
-      className={cn('cursor-pointer', className)}
-      size={size}
-      onClick={() => handleThemeSwitch('system')}
+  return (
+    <Select
+      className={className}
+      value={theme}
+      onChange={(e) => handleThemeSwitch(e.target.value as Theme)}
+      options={[
+        { value: 'light', label: 'Light' },
+        { value: 'dark', label: 'Dark' }
+      ]}
     />
   );
 };