feat: settings dialog and moved theme settings to dialog from sidebar (#570)

* feat: settings dialog and moved theme settings to dialog from sidebar.

* chore(locale): move some labels to settings from sidebar

components/Chatbar/components/ChatbarSettings.tsx

@@ -1,10 +1,17 @@
-import { IconFileExport, IconMoon, IconSun } from '@tabler/icons-react';
-import { useContext } from 'react';
+import {
+  IconFileExport,
+  IconMoon,
+  IconSettings,
+  IconSun,
+} from '@tabler/icons-react';
+import { useContext, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
 import HomeContext from '@/pages/api/home/home.context';
 
+import { SettingDialog } from '@/components/Settings/SettingDialog';
+
 import { Import } from '../../Settings/Import';
 import { Key } from '../../Settings/Key';
 import { SidebarButton } from '../../Sidebar/SidebarButton';
@@ -14,6 +21,7 @@ import { PluginKeys } from './PluginKeys';
 
 export const ChatbarSettings = () => {
   const { t } = useTranslation('sidebar');
+  const [isSettingDialogOpen, setIsSettingDialog] = useState<boolean>(false);
 
   const {
     state: {
@@ -49,16 +57,9 @@ export const ChatbarSettings = () => {
       />
 
       <SidebarButton
-        text={lightMode === 'light' ? t('Dark mode') : t('Light mode')}
-        icon={
-          lightMode === 'light' ? <IconMoon size={18} /> : <IconSun size={18} />
-        }
-        onClick={() =>
-          homeDispatch({
-            field: 'lightMode',
-            value: lightMode === 'light' ? 'dark' : 'light',
-          })
-        }
+        text={t('Settings')}
+        icon={<IconSettings size={18} />}
+        onClick={() => setIsSettingDialog(true)}
       />
 
       {!serverSideApiKeyIsSet ? (
@@ -66,6 +67,13 @@ export const ChatbarSettings = () => {
       ) : null}
 
       {!serverSidePluginKeysSet ? <PluginKeys /> : null}
+
+      <SettingDialog
+        open={isSettingDialogOpen}
+        onClose={() => {
+          setIsSettingDialog(false);
+        }}
+      />
     </div>
   );
 };