dynamic file display + tab state

frontend/components/editor/sidebar/file.tsx

@@ -3,18 +3,31 @@
 import Image from "next/image"
 import { getIconForFile } from "vscode-icons-js"
 import { TFile } from "./types"
+import { useEffect, useState } from "react"
+
+export default function SidebarFile({
+  data,
+  selectFile,
+}: {
+  data: TFile
+  selectFile: (file: TFile) => void
+}) {
+  const [imgSrc, setImgSrc] = useState(`/icons/${getIconForFile(data.name)}`)
 
-export default function SidebarFile({ data }: { data: TFile }) {
   return (
-    <div className="w-full flex items-center h-7 px-1 transition-colors hover:bg-secondary rounded-sm cursor-pointer">
+    <button
+      onClick={() => selectFile(data)}
+      className="w-full flex items-center h-7 px-1 hover:bg-secondary rounded-sm cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+    >
       <Image
-        src={`/icons/${getIconForFile(data.name)}`}
+        src={imgSrc}
         alt="File Icon"
         width={18}
         height={18}
         className="mr-2"
+        onError={() => setImgSrc("/icons/default_file.svg")}
       />
       {data.name}
-    </div>
+    </button>
   )
 }

frontend/components/editor/sidebar/folder.tsx

@@ -3,10 +3,16 @@
 import Image from "next/image"
 import { useState } from "react"
 import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js"
-import { TFolder } from "./types"
+import { TFile, TFolder } from "./types"
 import SidebarFile from "./file"
 
-export default function SidebarFolder({ data }: { data: TFolder }) {
+export default function SidebarFolder({
+  data,
+  selectFile,
+}: {
+  data: TFolder
+  selectFile: (file: TFile) => void
+}) {
   const [isOpen, setIsOpen] = useState(false)
   const folder = isOpen
     ? getIconForOpenFolder(data.name)
@@ -33,9 +39,17 @@ export default function SidebarFolder({ data }: { data: TFolder }) {
           <div className="flex flex-col grow">
             {data.children.map((child) =>
               child.type === "file" ? (
-                <SidebarFile key={child.id} data={child} />
+                <SidebarFile
+                  key={child.id}
+                  data={child}
+                  selectFile={selectFile}
+                />
               ) : (
-                <SidebarFolder key={child.id} data={child} />
+                <SidebarFolder
+                  key={child.id}
+                  data={child}
+                  selectFile={selectFile}
+                />
               )
             )}
           </div>

frontend/components/editor/sidebar/index.tsx

@@ -1,72 +1,26 @@
+"use client"
+
 import { FilePlus, FolderPlus, Search } from "lucide-react"
 import SidebarFile from "./file"
 import SidebarFolder from "./folder"
 import { TFile, TFolder } from "./types"
 
-const data: (TFile | TFolder)[] = [
-  {
-    id: "index.tsx",
-    type: "file",
-    name: "index.tsx",
-  },
-  {
-    id: "components",
-    type: "folder",
-    name: "components",
-    children: [
-      {
-        id: "navbar.tsx",
-        type: "file",
-        name: "navbar.tsx",
-      },
-      {
-        id: "ui",
-        type: "folder",
-        name: "ui",
-        children: [
-          {
-            id: "Button.tsx",
-            type: "file",
-            name: "Button.tsx",
-          },
-          {
-            id: "Input.tsx",
-            type: "file",
-            name: "Input.tsx",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "App.tsx",
-    type: "file",
-    name: "App.tsx",
-  },
-  {
-    id: "styles",
-    type: "folder",
-    name: "styles",
-    children: [
-      {
-        id: "style.css",
-        type: "file",
-        name: "style.css",
-      },
-      {
-        id: "index.css",
-        type: "file",
-        name: "index.css",
-      },
-    ],
-  },
-]
+// Note: add renaming validation:
+// In general: must not contain / or \ or whitespace, not empty, no duplicates
+// Files: must contain dot
+// Folders: must not contain dot
 
-export default function Sidebar() {
+export default function Sidebar({
+  files,
+  selectFile,
+}: {
+  files: (TFile | TFolder)[]
+  selectFile: (tab: TFile) => void
+}) {
   return (
     <div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">
       <div className="flex w-full items-center justify-between h-8 mb-1 ">
-        <div className="text-muted-foreground">EXPLORER</div>
+        <div className="text-muted-foreground">Explorer</div>
         <div className="flex space-x-1">
           <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
             <FilePlus className="w-4 h-4" />
@@ -80,13 +34,15 @@ export default function Sidebar() {
         </div>
       </div>
       <div className="w-full mt-1 flex flex-col">
-        {/* <SidebarFile name="index.tsx" />
-        <SidebarFolder name="styles" /> */}
-        {data.map((child) =>
+        {files.map((child) =>
           child.type === "file" ? (
-            <SidebarFile key={child.id} data={child} />
+            <SidebarFile key={child.id} data={child} selectFile={selectFile} />
           ) : (
-            <SidebarFolder key={child.id} data={child} />
+            <SidebarFolder
+              key={child.id}
+              data={child}
+              selectFile={selectFile}
+            />
           )
         )}
       </div>