refactor(sidebar): integrate settings modal into SidebarModals and update props

src/components/Sidebar.tsx

@@ -32,6 +32,9 @@ function Sidebar({
   loadingProgress,
   onRefresh,
   onShowSettings,
+  showSettings,
+  settingsInitialTab,
+  onCloseSettings,
   isMobile,
 }: SidebarProps) {
   const { t } = useTranslation(['sidebar', 'common']);
@@ -179,6 +182,23 @@ function Sidebar({
 
   return (
     <>
+      <SidebarModals
+        projects={projects}
+        showSettings={showSettings}
+        settingsInitialTab={settingsInitialTab}
+        onCloseSettings={onCloseSettings}
+        showNewProject={showNewProject}
+        onCloseNewProject={() => setShowNewProject(false)}
+        onProjectCreated={handleProjectCreated}
+        deleteConfirmation={deleteConfirmation}
+        onCancelDeleteProject={() => setDeleteConfirmation(null)}
+        onConfirmDeleteProject={confirmDeleteProject}
+        sessionDeleteConfirmation={sessionDeleteConfirmation}
+        onCancelDeleteSession={() => setSessionDeleteConfirmation(null)}
+        onConfirmDeleteSession={confirmDeleteSession}
+        t={t}
+      />
+
       {isSidebarCollapsed ? (
         <SidebarCollapsed
           onExpand={handleExpandSidebar}
@@ -189,19 +209,6 @@ function Sidebar({
         />
       ) : (
         <>
-          <SidebarModals
-            showNewProject={showNewProject}
-            onCloseNewProject={() => setShowNewProject(false)}
-            onProjectCreated={handleProjectCreated}
-            deleteConfirmation={deleteConfirmation}
-            onCancelDeleteProject={() => setDeleteConfirmation(null)}
-            onConfirmDeleteProject={confirmDeleteProject}
-            sessionDeleteConfirmation={sessionDeleteConfirmation}
-            onCancelDeleteSession={() => setSessionDeleteConfirmation(null)}
-            onConfirmDeleteSession={confirmDeleteSession}
-            t={t}
-          />
-
           <SidebarContent
             isPWA={isPWA}
             isMobile={isMobile}

src/components/app/AppContent.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 import Sidebar from '../Sidebar';
 import MainContent from '../MainContent';
 import MobileNav from '../MobileNav';
-import Settings from '../Settings';
 
 import { useWebSocket } from '../../contexts/WebSocketContext';
 import { useDeviceSettings } from '../../hooks/useDeviceSettings';
@@ -30,15 +29,12 @@ export default function AppContent() {
   } = useSessionProtection();
 
   const {
-    projects,
     selectedProject,
     selectedSession,
     activeTab,
     sidebarOpen,
     isLoadingProjects,
     isInputFocused,
-    showSettings,
-    settingsInitialTab,
     externalMessageUpdate,
     setActiveTab,
     setSidebarOpen,
@@ -143,12 +139,6 @@ export default function AppContent() {
         />
       )}
 
-      <Settings
-        isOpen={showSettings}
-        onClose={() => setShowSettings(false)}
-        projects={projects as any}
-        initialTab={settingsInitialTab}
-      />
     </div>
   );
 }

src/components/sidebar/SidebarModals.tsx

@@ -3,9 +3,15 @@ import { AlertTriangle, Trash2 } from 'lucide-react';
 import type { TFunction } from 'i18next';
 import { Button } from '../ui/button';
 import ProjectCreationWizard from '../ProjectCreationWizard';
+import Settings from '../Settings';
+import type { Project } from '../../types/app';
 import type { DeleteProjectConfirmation, SessionDeleteConfirmation } from './types';
 
 type SidebarModalsProps = {
+  projects: Project[];
+  showSettings: boolean;
+  settingsInitialTab: string;
+  onCloseSettings: () => void;
   showNewProject: boolean;
   onCloseNewProject: () => void;
   onProjectCreated: () => void;
@@ -19,6 +25,10 @@ type SidebarModalsProps = {
 };
 
 export default function SidebarModals({
+  projects,
+  showSettings,
+  settingsInitialTab,
+  onCloseSettings,
   showNewProject,
   onCloseNewProject,
   onProjectCreated,
@@ -41,6 +51,13 @@ export default function SidebarModals({
           document.body,
         )}
 
+      <Settings
+        isOpen={showSettings}
+        onClose={onCloseSettings}
+        projects={projects as any}
+        initialTab={settingsInitialTab}
+      />
+
       {deleteConfirmation &&
         ReactDOM.createPortal(
           <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">

src/components/sidebar/types.ts

@@ -35,6 +35,9 @@ export type SidebarProps = {
   loadingProgress: LoadingProgress | null;
   onRefresh: () => Promise<void> | void;
   onShowSettings: () => void;
+  showSettings: boolean;
+  settingsInitialTab: string;
+  onCloseSettings: () => void;
   isMobile: boolean;
 };
 

src/hooks/useProjectsState.ts

@@ -480,6 +480,9 @@ export function useProjectsState({
       loadingProgress,
       onRefresh: handleSidebarRefresh,
       onShowSettings: () => setShowSettings(true),
+      showSettings,
+      settingsInitialTab,
+      onCloseSettings: () => setShowSettings(false),
       isMobile,
     }),
     [
@@ -493,8 +496,10 @@ export function useProjectsState({
       isMobile,
       loadingProgress,
       projects,
+      settingsInitialTab,
       selectedProject,
       selectedSession,
+      showSettings,
     ],
   );