Refactor settings view in App.jsx using SettingsPanel and SettingsSidebar components

src/App.jsx

@@ -2545,44 +2545,10 @@ async function createNewChat() {
             </div>
           )}
           {activeSidebarMode === 'settings' && (
-            <div className="settings-list">
+            <SettingsSidebar
-              <div
+              activeSection={activeSettingsSubmenu}
-                className={`settings-item ${activeSettingsSubmenu === 'General' ? 'active' : ''}`}
+              onSelect={setActiveSettingsSubmenu}
-                onClick={() => setActiveSettingsSubmenu('General')}
+            />
-              >
-                General
-              </div>
-              <div
-                className={`settings-item ${activeSettingsSubmenu === 'AI Models' ? 'active' : ''}`}
-                onClick={() => setActiveSettingsSubmenu('AI Models')}
-              >
-                AI Models
-              </div>
-              <div
-                className={`settings-item ${activeSettingsSubmenu === 'Interface' ? 'active' : ''}`}
-                onClick={() => setActiveSettingsSubmenu('Interface')}
-              >
-                Interface
-              </div>
-              <div
-                className={`settings-item ${activeSettingsSubmenu === 'Backend' ? 'active' : ''}`}
-                onClick={() => setActiveSettingsSubmenu('Backend')}
-              >
-                Backend
-              </div>
-              <div
-                className={`settings-item ${activeSettingsSubmenu === 'Updates' ? 'active' : ''}`}
-                onClick={() => setActiveSettingsSubmenu('Updates')}
-              >
-                Updates
-              </div>
-              <div
-                className={`settings-item ${activeSettingsSubmenu === 'Advanced' ? 'active' : ''}`}
-                onClick={() => setActiveSettingsSubmenu('Advanced')}
-              >
-                Advanced
-              </div>
-            </div>
           )}
         </div>
         {activeSidebarMode !== 'settings' && (
@@ -3090,48 +3056,22 @@ async function createNewChat() {
           </>
         )}
         {activeSidebarMode === 'settings' && (
-          <>
+          <SettingsPanel
-            <div className="header">
+            activeSection={activeSettingsSubmenu}
-              <strong>{activeSettingsSubmenu} Settings</strong>
+            onAudioInputDeviceChange={setAudioInputDeviceId}
-            </div>
+            onAudioInputLanguageChange={setAudioInputLanguage}
-            {activeSettingsSubmenu === 'General' && (
+            onBackendApiUrlChange={setBackendApiUrl}
-              <GeneralSettings
+            onLibrariesPurged={handleLibrariesPurged}
-                panel="General"
+            onModelChange={setModel}
-                onAudioInputDeviceChange={setAudioInputDeviceId}
+            onStreamOutputChange={setStreamOutput}
-                onAudioInputLanguageChange={setAudioInputLanguage}
+            onTranscriptionModelChange={setTranscriptionModel}
-              />
+            onVisionModelChange={setVisionModel}
-            )}
+            searxEngines={searxEngines}
-            {activeSettingsSubmenu === 'AI Models' && (
+            searxUrl={searxUrl}
-              <GeneralSettings
+            setSearxEngines={setSearxEngines}
-                panel="AI Models"
+            setSearxUrl={setSearxUrl}
-                onModelChange={setModel}
+            streamOutput={streamOutput}
-                onVisionModelChange={setVisionModel}
+          />
-                onTranscriptionModelChange={setTranscriptionModel}
-                onLibrariesPurged={handleLibrariesPurged}
-              />
-            )}
-            {activeSettingsSubmenu === 'Interface' && (
-              <InterfaceSettings
-                streamOutput={streamOutput}
-                onStreamOutputChange={setStreamOutput}
-              />
-            )}
-            {activeSettingsSubmenu === 'Backend' && (
-              <WebsearchSettings
-                onBackendApiUrlChange={setBackendApiUrl}
-                searxUrl={searxUrl}
-                setSearxUrl={setSearxUrl}
-                engines={searxEngines}
-                setEngines={(next) => setSearxEngines(normalizeWebsearchEngines(next))}
-              />
-            )}
-            {activeSettingsSubmenu === 'Updates' && (
-              <GeneralSettings panel="Updates" />
-            )}
-            {activeSettingsSubmenu === 'Advanced' && (
-              <GeneralSettings panel="Advanced" onLibrariesPurged={handleLibrariesPurged} />
-            )}
-          </>
         )}
       </div>
     </div>