dynamic file display + tab state

frontend/app/(app)/code/[id]/page.tsx

@@ -1,28 +1,87 @@
 import Navbar from "@/components/editor/navbar"
-import { User } from "@/lib/types"
+import { TFile, TFolder } from "@/components/editor/sidebar/types"
+import { R2Files, User } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
 import dynamic from "next/dynamic"
-import { redirect } from "next/navigation"
+import { notFound, redirect } from "next/navigation"
 
 const CodeEditor = dynamic(() => import("@/components/editor"), {
   ssr: false,
 })
 
-export default async function CodePage() {
+const getUserData = async (id: string) => {
+  const userRes = await fetch(`http://localhost:8787/api/user?id=${id}`)
+  const userData: User = await userRes.json()
+  return userData
+}
+
+const getSandboxFiles = async (id: string) => {
+  const sandboxRes = await fetch(
+    `https://storage.ishaan1013.workers.dev/api?sandboxId=${id}`
+  )
+  const sandboxData: R2Files = await sandboxRes.json()
+
+  if (sandboxData.objects.length === 0) return notFound()
+  const paths = sandboxData.objects.map((obj) => obj.key)
+  return processFiles(paths, id)
+}
+
+const processFiles = (paths: string[], id: string): (TFile | TFolder)[] => {
+  const root: TFolder = { id: "/", type: "folder", name: "/", children: [] }
+
+  paths.forEach((path) => {
+    const allParts = path.split("/")
+    if (allParts[1] !== id) return notFound()
+
+    const parts = allParts.slice(2)
+    let current: TFolder = root
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const isFile = i === parts.length - 1 && part.includes(".")
+      const existing = current.children.find((child) => child.name === part)
+
+      if (existing) {
+        if (!isFile) {
+          current = existing as TFolder
+        }
+      } else {
+        if (isFile) {
+          const file: TFile = { id: path, type: "file", name: part }
+          current.children.push(file)
+        } else {
+          const folder: TFolder = {
+            id: path,
+            type: "folder",
+            name: part,
+            children: [],
+          }
+          current.children.push(folder)
+          current = folder
+        }
+      }
+    }
+  })
+
+  return root.children
+}
+
+export default async function CodePage({ params }: { params: { id: string } }) {
   const user = await currentUser()
+  const sandboxId = params.id
 
   if (!user) {
     redirect("/")
   }
 
-  const userRes = await fetch(`http://localhost:8787/api/user?id=${user.id}`)
+  const userData = await getUserData(user.id)
-  const userData = (await userRes.json()) as User
+  const sandboxFiles = await getSandboxFiles(sandboxId)
 
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
       <Navbar userData={userData} />
       <div className="w-screen flex grow">
-        <CodeEditor />
+        <CodeEditor files={sandboxFiles} />
       </div>
     </div>
   )

frontend/components/editor/index.tsx

@@ -3,55 +3,26 @@
 import Editor, { OnMount } from "@monaco-editor/react"
 import monaco from "monaco-editor"
 import { useRef, useState } from "react"
-import theme from "./theme.json"
+// import theme from "./theme.json"
 
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable"
-import { Button } from "../ui/button"
 import {
   ChevronLeft,
   ChevronRight,
-  RotateCcw,
   RotateCw,
-  Terminal,
   TerminalSquare,
-  X,
 } from "lucide-react"
 import Tab from "../ui/tab"
 import Sidebar from "./sidebar"
 import { useClerk } from "@clerk/nextjs"
+import { TFile, TFolder } from "./sidebar/types"
 
-export default function CodeEditor() {
+export default function CodeEditor({ files }: { files: (TFile | TFolder)[] }) {
-  const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)
+  // const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)
-  const [code, setCode] = useState([
-    {
-      language: "css",
-      name: "style.css",
-      value: `body { background-color: #282c34; color: white; }`,
-    },
-    {
-      language: "html",
-      name: "index.html",
-      value: `<!DOCTYPE html>
-<html>
-<head>
-  <link rel="stylesheet" href="style.css">
-</head>
-<body>
-  <h1>Hello, world!</h1>
-  <script src="script.js"></script>
-</body>
-</html>`,
-    },
-    {
-      language: "javascript",
-      name: "script.js",
-      value: `console.log("Hello, world!")`,
-    },
-  ])
 
   // const handleEditorMount: OnMount = (editor, monaco) => {
   //   editorRef.current = editor
@@ -59,9 +30,42 @@ export default function CodeEditor() {
 
   const clerk = useClerk()
 
+  const [tabs, setTabs] = useState<TFile[]>([])
+  const [activeId, setActiveId] = useState<string | null>(null)
+
+  const selectFile = (tab: TFile) => {
+    setTabs((prev) => {
+      const exists = prev.find((t) => t.id === tab.id)
+      if (exists) {
+        setActiveId(exists.id)
+        return prev
+      }
+      return [...prev, tab]
+    })
+    setActiveId(tab.id)
+  }
+
+  const closeTab = (tab: TFile) => {
+    const numTabs = tabs.length
+    const index = tabs.findIndex((t) => t.id === tab.id)
+    setActiveId((prev) => {
+      const next =
+        prev === tab.id
+          ? numTabs === 1
+            ? null
+            : index < numTabs - 1
+            ? tabs[index + 1].id
+            : tabs[index - 1].id
+          : prev
+
+      return next
+    })
+    setTabs((prev) => prev.filter((t) => t.id !== tab.id))
+  }
+
   return (
     <>
-      <Sidebar />
+      <Sidebar files={files} selectFile={selectFile} />
       <ResizablePanelGroup direction="horizontal">
         <ResizablePanel
           className="p-2 flex flex-col"
@@ -70,11 +74,25 @@ export default function CodeEditor() {
           defaultSize={60}
         >
           <div className="h-10 w-full flex gap-2">
-            <Tab selected>index.html</Tab>
+            {tabs.map((tab) => (
-            <Tab>style.css</Tab>
+              <Tab
+                key={tab.id}
+                selected={activeId === tab.id}
+                onClick={() => setActiveId(tab.id)}
+                onClose={() => closeTab(tab)}
+              >
+                {tab.name}
+              </Tab>
+            ))}
           </div>
           <div className="grow w-full overflow-hidden rounded-md">
-            {clerk.loaded ? (
+            {activeId === null ? (
+              <>
+                <div className="w-full h-full flex items-center justify-center text-xl font-medium text-secondary select-none">
+                  No file selected.
+                </div>
+              </>
+            ) : clerk.loaded ? (
               <Editor
                 height="100%"
                 defaultLanguage="typescript"

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)[] = [
+// Note: add renaming validation:
-  {
+// In general: must not contain / or \ or whitespace, not empty, no duplicates
-    id: "index.tsx",
+// Files: must contain dot
-    type: "file",
+// Folders: must not contain dot
-    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",
-      },
-    ],
-  },
-]
 
-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" />
+        {files.map((child) =>
-        <SidebarFolder name="styles" /> */}
-        {data.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/ui/tab.tsx

@@ -2,6 +2,7 @@
 
 import { X } from "lucide-react"
 import { Button } from "./button"
+import { useEffect } from "react"
 
 export default function Tab({
   children,
@@ -19,13 +20,23 @@ export default function Tab({
       onClick={onClick ?? undefined}
       size="sm"
       variant={"secondary"}
-      className={`group select-none ${
+      className={`group font-normal select-none ${
-        selected ? "bg-neutral-700 hover:bg-neutral-600" : ""
+        selected
+          ? "bg-neutral-700 hover:bg-neutral-600 text-foreground"
+          : "text-muted-foreground"
       }`}
     >
       {children}
       <div
-        onClick={onClose ?? undefined}
+        onClick={
+          onClose
+            ? (e) => {
+                e.stopPropagation()
+                e.preventDefault()
+                onClose()
+              }
+            : undefined
+        }
         className="h-5 w-5 ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm"
       >
         <X className="w-3 h-3" />

frontend/lib/types.ts

@@ -15,3 +15,20 @@ export type Sandbox = {
   bucket: string | null
   userId: string
 }
+
+export type R2Files = {
+  objects: R2FileData[]
+  truncated: boolean
+  delimitedPrefixes: any[]
+}
+
+export type R2FileData = {
+  storageClass: string
+  uploaded: string
+  checksums: any
+  httpEtag: string
+  etag: string
+  size: number
+  version: string
+  key: string
+}