feat: create files

frontend/src/modules/ide/components/FileExplorer.tsx

@@ -56,8 +56,10 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
   };
 
   const filteredFiles = store.searchQuery
-    ? filterTree(files, store.searchQuery)
-    : files;
+    ? (files.children || [])
+        .map((child) => filterTree(child, store.searchQuery))
+        .filter((child): child is FileNode => child !== null)
+    : files.children || [];
 
   useEffect(() => {
     if (store.searchQuery && files) {
@@ -185,29 +187,6 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
         </div>
       </div>
 
-      <div
-        style={{
-          padding: "6px 12px",
-          display: "flex",
-          alignItems: "center",
-          gap: "6px",
-          borderBottom: "1px solid #3e3e42",
-        }}
-      >
-        <FiFolder size={14} color="#858585" />
-        <span
-          style={{
-            color: "#cccccc",
-            fontWeight: 600,
-            fontSize: "11px",
-            letterSpacing: "0.3px",
-            flex: 1,
-          }}
-        >
-          {files.name}
-        </span>
-      </div>
-
       {showSearch && (
         <div style={{ padding: "6px 8px", borderBottom: "1px solid #3e3e42" }}>
           <div
@@ -262,19 +241,21 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
       )}
 
       <div style={{ flex: 1, overflowY: "auto" }}>
-        {filteredFiles ? (
-          <FileTreeItem
-            node={filteredFiles}
-            level={0}
-            onFileSelect={store.selectFile}
-            selectedFile={store.activeFile?.path || null}
-            onContextMenu={handleNodeContextMenu}
-            expandedFolders={store.expandedFolders}
-            onToggleFolder={store.toggleFolder}
-            onDelete={store.handleDeleteNode}
-            isRoot
-            searchQuery={store.searchQuery}
-          />
+        {filteredFiles.length > 0 ? (
+          filteredFiles.map((child, idx) => (
+            <FileTreeItem
+              key={idx}
+              node={child}
+              level={0}
+              onFileSelect={store.selectFile}
+              selectedFile={store.activeFile?.path || null}
+              onContextMenu={handleNodeContextMenu}
+              expandedFolders={store.expandedFolders}
+              onToggleFolder={store.toggleFolder}
+              onDelete={store.handleDeleteNode}
+              searchQuery={store.searchQuery}
+            />
+          ))
         ) : (
           <div
             style={{

frontend/src/modules/ide/components/FilePicker.tsx

@@ -60,7 +60,9 @@ export const FilePicker: React.FC<FilePickerProps> = ({ files }) => {
         backgroundColor: "var(--bg-primary)",
       }}
     >
-      <FilePickerTree node={files} level={0} />
+      {(files.children || []).map((child, idx) => (
+        <FilePickerTree key={idx} node={child} level={0} />
+      ))}
     </div>
   );
 };