dynamic file display + tab state

2024-04-26 00:10:53 -04:00
parent 432133f64f
commit a49de2294d
7 changed files with 207 additions and 119 deletions
--- a/frontend/components/editor/index.tsx
+++ b/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() {
-  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!")`,
-    },
-  ])
+export default function CodeEditor({ files }: { files: (TFile | TFolder)[] }) {
+  // const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)

  // 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>
-            <Tab>style.css</Tab>
+            {tabs.map((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"
--- a/frontend/components/editor/sidebar/file.tsx
+++ b/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>
  )
 }
--- a/frontend/components/editor/sidebar/folder.tsx
+++ b/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>
--- a/frontend/components/editor/sidebar/index.tsx
+++ b/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>
--- a/frontend/components/ui/tab.tsx
+++ b/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 ${
-        selected ? "bg-neutral-700 hover:bg-neutral-600" : ""
+      className={`group font-normal select-none ${
+        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" />