refactor: use one dark mode toggle component for appearance settings and quick settings panel

src/components/DarkModeToggle.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { useTheme } from '../contexts/ThemeContext';
-
-function DarkModeToggle() {
-  const { isDarkMode, toggleDarkMode } = useTheme();
-
-  return (
-    <button
-      onClick={toggleDarkMode}
-      className="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
-      role="switch"
-      aria-checked={isDarkMode}
-      aria-label="Toggle dark mode"
-    >
-      <span className="sr-only">Toggle dark mode</span>
-      <span
-        className={`${
-          isDarkMode ? 'translate-x-7' : 'translate-x-1'
-        } inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200 flex items-center justify-center`}
-      >
-        {isDarkMode ? (
-          <svg className="w-3.5 h-3.5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-          </svg>
-        ) : (
-          <svg className="w-3.5 h-3.5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-          </svg>
-        )}
-      </span>
-    </button>
-  );
-}
-
-export default DarkModeToggle;

src/components/DarkModeToggle.tsx

@@ -0,0 +1,31 @@
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+
+function DarkModeToggle() {
+  const { isDarkMode, toggleDarkMode } = useTheme();
+
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+      role="switch"
+      aria-checked={isDarkMode}
+      aria-label="Toggle dark mode"
+    >
+      <span className="sr-only">Toggle dark mode</span>
+      <span
+        className={`${
+          isDarkMode ? 'translate-x-7' : 'translate-x-1'
+        } h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200 flex items-center justify-center`}
+      >
+        {isDarkMode ? (
+          <Moon className="h-3.5 w-3.5 text-gray-700" />
+        ) : (
+          <Sun className="h-3.5 w-3.5 text-yellow-500" />
+        )}
+      </span>
+    </button>
+  );
+}
+
+export default DarkModeToggle;

src/components/settings/Settings.tsx

@@ -29,8 +29,6 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
   const {
     activeTab,
     setActiveTab,
-    isDarkMode,
-    toggleDarkMode,
     isSaving,
     saveStatus,
     projectSortOrder,
@@ -116,8 +114,6 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
           <div className="p-4 md:p-6 space-y-6 md:space-y-8 pb-safe-area-inset-bottom">
             {activeTab === 'appearance' && (
               <AppearanceSettingsTab
-                isDarkMode={isDarkMode}
-                onToggleDarkMode={toggleDarkMode}
                 projectSortOrder={projectSortOrder}
                 onProjectSortOrderChange={setProjectSortOrder}
                 codeEditorSettings={codeEditorSettings}

src/components/settings/view/tabs/AppearanceSettingsTab.tsx

@@ -1,12 +1,11 @@
 import { Moon, Sun } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
+import DarkModeToggle from '../../../DarkModeToggle';
 import LanguageSelector from '../../../LanguageSelector';
 import type { CodeEditorSettingsState, ProjectSortOrder } from '../../types/types';
 
 type AppearanceSettingsTabProps = {
-  isDarkMode: boolean;
-  onToggleDarkMode: () => void;
   projectSortOrder: ProjectSortOrder;
   onProjectSortOrderChange: (value: ProjectSortOrder) => void;
   codeEditorSettings: CodeEditorSettingsState;
@@ -52,9 +51,8 @@ function ToggleCard({
         >
           <span className="sr-only">{ariaLabel}</span>
           <span
-            className={`${
-              checked ? 'translate-x-7' : 'translate-x-1'
-            } inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200 flex items-center justify-center`}
+            className={`${checked ? 'translate-x-7' : 'translate-x-1'
+              } h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200 flex items-center justify-center`}
           >
             {checked ? onIcon : offIcon}
           </span>
@@ -65,8 +63,6 @@ function ToggleCard({
 }
 
 export default function AppearanceSettingsTab({
-  isDarkMode,
-  onToggleDarkMode,
   projectSortOrder,
   onProjectSortOrderChange,
   codeEditorSettings,
@@ -81,15 +77,17 @@ export default function AppearanceSettingsTab({
   return (
     <div className="space-y-6 md:space-y-8">
       <div className="space-y-4">
-        <ToggleCard
-          label={t('appearanceSettings.darkMode.label')}
-          description={t('appearanceSettings.darkMode.description')}
-          checked={isDarkMode}
-          onChange={onToggleDarkMode}
-          onIcon={<Moon className="w-3.5 h-3.5 text-gray-700" />}
-          offIcon={<Sun className="w-3.5 h-3.5 text-yellow-500" />}
-          ariaLabel={t('appearanceSettings.darkMode.label')}
-        />
+        <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="font-medium text-foreground">{t('appearanceSettings.darkMode.label')}</div>
+              <div className="text-sm text-muted-foreground">
+                {t('appearanceSettings.darkMode.description')}
+              </div>
+            </div>
+            <DarkModeToggle />
+          </div>
+        </div>
       </div>
 
       <div className="space-y-4">