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

src/components/code-editor/view/EditorSidebar.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import type { MouseEvent, MutableRefObject } from 'react';
+import type { CodeEditorFile } from '../types/types';
+import CodeEditor from './CodeEditor';
+
+type EditorSidebarProps = {
+  editingFile: CodeEditorFile | null;
+  isMobile: boolean;
+  editorExpanded: boolean;
+  editorWidth: number;
+  hasManualWidth: boolean;
+  resizeHandleRef: MutableRefObject<HTMLDivElement | null>;
+  onResizeStart: (event: MouseEvent<HTMLDivElement>) => void;
+  onCloseEditor: () => void;
+  onToggleEditorExpand: () => void;
+  projectPath?: string;
+  fillSpace?: boolean;
+};
+
+export default function EditorSidebar({
+  editingFile,
+  isMobile,
+  editorExpanded,
+  editorWidth,
+  hasManualWidth,
+  resizeHandleRef,
+  onResizeStart,
+  onCloseEditor,
+  onToggleEditorExpand,
+  projectPath,
+  fillSpace,
+}: EditorSidebarProps) {
+  const [poppedOut, setPoppedOut] = useState(false);
+
+  if (!editingFile) {
+    return null;
+  }
+
+  if (isMobile || poppedOut) {
+    return (
+      <CodeEditor
+        file={editingFile}
+        onClose={() => {
+          setPoppedOut(false);
+          onCloseEditor();
+        }}
+        projectPath={projectPath}
+        isSidebar={false}
+      />
+    );
+  }
+
+  // In files tab, fill the remaining width unless user has dragged manually.
+  const useFlexLayout = editorExpanded || (fillSpace && !hasManualWidth);
+
+  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 ${useFlexLayout ? 'flex-1' : ''}`}
+        style={useFlexLayout ? undefined : { width: `${editorWidth}px` }}
+      >
+        <CodeEditor
+          file={editingFile}
+          onClose={onCloseEditor}
+          projectPath={projectPath}
+          isSidebar
+          isExpanded={editorExpanded}
+          onToggleExpand={onToggleEditorExpand}
+          onPopOut={() => setPoppedOut(true)}
+        />
+      </div>
+    </>
+  );
+}