feature: swap default code editor to sidebar and make the modal optional

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

@@ -109,7 +109,7 @@ function MainContent({
       />
 
       <div className="flex-1 flex min-h-0 overflow-hidden">
-        <div className={`flex-1 flex flex-col min-h-0 overflow-hidden ${editorExpanded ? '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={`h-full ${activeTab === 'chat' ? 'block' : 'hidden'}`}>
             <ErrorBoundary showDetails>
               <ChatInterface
@@ -141,7 +141,7 @@ function MainContent({
 
           {activeTab === 'files' && (
             <div className="h-full overflow-hidden">
-              <FileTree selectedProject={selectedProject} />
+              <FileTree selectedProject={selectedProject} onFileOpen={handleFileOpen} />
             </div>
           )}
 
@@ -172,6 +172,7 @@ function MainContent({
           onCloseEditor={handleCloseEditor}
           onToggleEditorExpand={handleToggleEditorExpand}
           projectPath={selectedProject.path}
+          fillSpace={activeTab === 'files'}
         />
       </div>
     </div>

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import CodeEditor from '../../../CodeEditor';
 import type { EditorSidebarProps } from '../../types/types';
 
@@ -13,22 +14,30 @@ export default function EditorSidebar({
   onCloseEditor,
   onToggleEditorExpand,
   projectPath,
+  fillSpace,
 }: EditorSidebarProps) {
+  const [poppedOut, setPoppedOut] = useState(false);
+
   if (!editingFile) {
     return null;
   }
 
-  if (isMobile) {
+  if (isMobile || poppedOut) {
     return (
       <AnyCodeEditor
         file={editingFile}
-        onClose={onCloseEditor}
+        onClose={() => {
+          setPoppedOut(false);
+          onCloseEditor();
+        }}
         projectPath={projectPath}
         isSidebar={false}
       />
     );
   }
 
+  const useFlex = editorExpanded || fillSpace;
+
   return (
     <>
       {!editorExpanded && (
@@ -43,8 +52,8 @@ export default function EditorSidebar({
       )}
 
       <div
-        className={`flex-shrink-0 border-l border-gray-200 dark:border-gray-700 h-full overflow-hidden ${editorExpanded ? 'flex-1' : ''}`}
-        style={editorExpanded ? undefined : { width: `${editorWidth}px` }}
+        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}
@@ -53,6 +62,7 @@ export default function EditorSidebar({
           isSidebar
           isExpanded={editorExpanded}
           onToggleExpand={onToggleEditorExpand}
+          onPopOut={() => setPoppedOut(true)}
         />
       </div>
     </>