Refactor Settings, FileTree, GitPanel, Shell, and CodeEditor components (#402)

src/components/main-content/view/MainContent.tsx

@@ -1,26 +1,23 @@
 import React, { useEffect } from 'react';
 
 import ChatInterface from '../../chat/view/ChatInterface';
-import FileTree from '../../FileTree';
-import StandaloneShell from '../../StandaloneShell';
-import GitPanel from '../../GitPanel';
+import FileTree from '../../file-tree/view/FileTree';
+import StandaloneShell from '../../standalone-shell/view/StandaloneShell';
+import GitPanel from '../../git-panel/view/GitPanel';
 import ErrorBoundary from '../../ErrorBoundary';
 
 import MainContentHeader from './subcomponents/MainContentHeader';
 import MainContentStateView from './subcomponents/MainContentStateView';
-import EditorSidebar from './subcomponents/EditorSidebar';
 import TaskMasterPanel from './subcomponents/TaskMasterPanel';
 import type { MainContentProps } from '../types/types';
 
 import { useTaskMaster } from '../../../contexts/TaskMasterContext';
 import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
 import { useUiPreferences } from '../../../hooks/useUiPreferences';
-import { useEditorSidebar } from '../hooks/useEditorSidebar';
+import { useEditorSidebar } from '../../code-editor/hooks/useEditorSidebar';
+import EditorSidebar from '../../code-editor/view/EditorSidebar';
 import type { Project } from '../../../types/app';
 
-const AnyStandaloneShell = StandaloneShell as any;
-const AnyGitPanel = GitPanel as any;
-
 type TaskMasterContextValue = {
   currentProject?: Project | null;
   setCurrentProject?: ((project: Project) => void) | null;
@@ -66,6 +63,7 @@ function MainContent({
     editingFile,
     editorWidth,
     editorExpanded,
+    hasManualWidth,
     resizeHandleRef,
     handleFileOpen,
     handleCloseEditor,
@@ -109,7 +107,7 @@ function MainContent({
       />
 
       <div className="flex-1 flex min-h-0 overflow-hidden">
-        <div className={`flex flex-col min-h-0 overflow-hidden ${editorExpanded ? 'hidden' : ''} ${activeTab === 'files' && editingFile ? 'w-[280px] flex-shrink-0' : 'flex-1'}`}>
+        <div className={`flex flex-col min-h-0 min-w-0 overflow-hidden ${editorExpanded ? 'hidden' : ''} flex-1`}>
           <div className={`h-full ${activeTab === 'chat' ? 'block' : 'hidden'}`}>
             <ErrorBoundary showDetails>
               <ChatInterface
@@ -147,13 +145,13 @@ function MainContent({
 
           {activeTab === 'shell' && (
             <div className="h-full w-full overflow-hidden">
-              <AnyStandaloneShell project={selectedProject} session={selectedSession} showHeader={false} />
+              <StandaloneShell project={selectedProject} session={selectedSession} showHeader={false} />
             </div>
           )}
 
           {activeTab === 'git' && (
             <div className="h-full overflow-hidden">
-              <AnyGitPanel selectedProject={selectedProject} isMobile={isMobile} onFileOpen={handleFileOpen} />
+              <GitPanel selectedProject={selectedProject} isMobile={isMobile} onFileOpen={handleFileOpen} />
             </div>
           )}
 
@@ -167,6 +165,7 @@ function MainContent({
           isMobile={isMobile}
           editorExpanded={editorExpanded}
           editorWidth={editorWidth}
+          hasManualWidth={hasManualWidth}
           resizeHandleRef={resizeHandleRef}
           onResizeStart={handleResizeStart}
           onCloseEditor={handleCloseEditor}

src/components/main-content/view/subcomponents/EditorSidebar.tsx

@@ -1,70 +0,0 @@
-import { useState } from 'react';
-import CodeEditor from '../../../CodeEditor';
-import type { EditorSidebarProps } from '../../types/types';
-
-const AnyCodeEditor = CodeEditor as any;
-
-export default function EditorSidebar({
-  editingFile,
-  isMobile,
-  editorExpanded,
-  editorWidth,
-  resizeHandleRef,
-  onResizeStart,
-  onCloseEditor,
-  onToggleEditorExpand,
-  projectPath,
-  fillSpace,
-}: EditorSidebarProps) {
-  const [poppedOut, setPoppedOut] = useState(false);
-
-  if (!editingFile) {
-    return null;
-  }
-
-  if (isMobile || poppedOut) {
-    return (
-      <AnyCodeEditor
-        file={editingFile}
-        onClose={() => {
-          setPoppedOut(false);
-          onCloseEditor();
-        }}
-        projectPath={projectPath}
-        isSidebar={false}
-      />
-    );
-  }
-
-  const useFlex = editorExpanded || fillSpace;
-
-  return (
-    <>
-      {!editorExpanded && (
-        <div
-          ref={resizeHandleRef}
-          onMouseDown={onResizeStart}
-          className="flex-shrink-0 w-1 bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 cursor-col-resize transition-colors relative group"
-          title="Drag to resize"
-        >
-          <div className="absolute inset-y-0 left-1/2 -translate-x-1/2 w-1 bg-blue-500 dark:bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity" />
-        </div>
-      )}
-
-      <div
-        className={`flex-shrink-0 border-l border-gray-200 dark:border-gray-700 h-full overflow-hidden ${useFlex ? 'flex-1' : ''}`}
-        style={useFlex ? undefined : { width: `${editorWidth}px` }}
-      >
-        <AnyCodeEditor
-          file={editingFile}
-          onClose={onCloseEditor}
-          projectPath={projectPath}
-          isSidebar
-          isExpanded={editorExpanded}
-          onToggleExpand={onToggleEditorExpand}
-          onPopOut={() => setPoppedOut(true)}
-        />
-      </div>
-    </>
-  );
-}

src/components/main-content/view/subcomponents/MainContentTitle.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import SessionProviderLogo from '../../../SessionProviderLogo';
+import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
 import type { AppTab, Project, ProjectSession } from '../../../../types/app';
 
 type MainContentTitleProps = {