From 7c676479d45f68b2939bf4baba0d85e707e07b2a Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <kushagra20103@gmail.com>
Date: Sun, 2 Jun 2024 12:19:53 +0530
Subject: [PATCH] feat(theme-switcher): move to settings menu

---
 ui/components/SettingsDialog.tsx |  9 ++++++++-
 ui/components/Sidebar.tsx        | 12 ++++-------
 ui/components/theme/Switcher.tsx | 34 +++++++++++---------------------
 3 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/ui/components/SettingsDialog.tsx b/ui/components/SettingsDialog.tsx
index 8524aed..e932cee 100644
--- a/ui/components/SettingsDialog.tsx
+++ b/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">
diff --git a/ui/components/Sidebar.tsx b/ui/components/Sidebar.tsx
index 88a8b35..7b3e971 100644
--- a/ui/components/Sidebar.tsx
+++ b/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}
diff --git a/ui/components/theme/Switcher.tsx b/ui/components/theme/Switcher.tsx
index d4b0941..22e2ecc 100644
--- a/ui/components/theme/Switcher.tsx
+++ b/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' }
+      ]}
     />
   );
 };