start file rename logic

frontend/components/editor/sidebar/file.tsx

@@ -2,21 +2,32 @@
 
 import Image from "next/image"
 import { getIconForFile } from "vscode-icons-js"
-import { TFile } from "./types"
-import { useEffect, useState } from "react"
+import { TFile, TTab } from "./types"
+import { useEffect, useRef, useState } from "react"
 
 export default function SidebarFile({
   data,
   selectFile,
 }: {
   data: TFile
-  selectFile: (file: TFile) => void
+  selectFile: (file: TTab) => void
 }) {
   const [imgSrc, setImgSrc] = useState(`/icons/${getIconForFile(data.name)}`)
+  const [editing, setEditing] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (editing) {
+      inputRef.current?.focus()
+    }
+  }, [editing])
 
   return (
     <button
-      onClick={() => selectFile(data)}
+      onClick={() => selectFile({ ...data, saved: true })}
+      onDoubleClick={() => {
+        setEditing(true)
+      }}
       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
@@ -27,7 +38,23 @@ export default function SidebarFile({
         className="mr-2"
         onError={() => setImgSrc("/icons/default_file.svg")}
       />
-      {data.name}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          console.log("submit")
+          setEditing(false)
+        }}
+      >
+        <input
+          ref={inputRef}
+          className={`bg-transparent w-full ${
+            editing ? "" : "pointer-events-none"
+          }`}
+          disabled={!editing}
+          defaultValue={data.name}
+          onBlur={() => setEditing(false)}
+        />
+      </form>
     </button>
   )
 }

frontend/components/editor/sidebar/folder.tsx

@@ -3,7 +3,7 @@
 import Image from "next/image"
 import { useState } from "react"
 import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js"
-import { TFile, TFolder } from "./types"
+import { TFile, TFolder, TTab } from "./types"
 import SidebarFile from "./file"
 
 export default function SidebarFolder({
@@ -11,7 +11,7 @@ export default function SidebarFolder({
   selectFile,
 }: {
   data: TFolder
-  selectFile: (file: TFile) => void
+  selectFile: (file: TTab) => void
 }) {
   const [isOpen, setIsOpen] = useState(false)
   const folder = isOpen

frontend/components/editor/sidebar/index.tsx

@@ -3,7 +3,7 @@
 import { FilePlus, FolderPlus, Loader2, Search } from "lucide-react"
 import SidebarFile from "./file"
 import SidebarFolder from "./folder"
-import { TFile, TFolder } from "./types"
+import { TFile, TFolder, TTab } from "./types"
 
 // Note: add renaming validation:
 // In general: must not contain / or \ or whitespace, not empty, no duplicates
@@ -15,7 +15,7 @@ export default function Sidebar({
   selectFile,
 }: {
   files: (TFile | TFolder)[]
-  selectFile: (tab: TFile) => void
+  selectFile: (tab: TTab) => void
 }) {
   return (
     <div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">

frontend/components/editor/sidebar/types.ts

@@ -11,6 +11,10 @@ export type TFile = {
   name: string
 }
 
+export type TTab = TFile & {
+  saved: boolean
+}
+
 export type TFileData = {
   id: string
   data: string