start file rename logic

frontend/components/editor/index.tsx

@@ -13,13 +13,14 @@ import {
 import {
   ChevronLeft,
   ChevronRight,
+  FileJson,
   RotateCw,
   TerminalSquare,
 } from "lucide-react"
 import Tab from "../ui/tab"
 import Sidebar from "./sidebar"
 import { useClerk } from "@clerk/nextjs"
-import { TFile, TFileData, TFolder } from "./sidebar/types"
+import { TFile, TFileData, TFolder, TTab } from "./sidebar/types"
 
 import { io } from "socket.io-client"
 import { set } from "zod"
@@ -41,7 +42,7 @@ export default function CodeEditor({
   const [files, setFiles] = useState<(TFolder | TFile)[]>([])
   const [editorLanguage, setEditorLanguage] = useState("plaintext")
   const [activeFile, setActiveFile] = useState<string | null>(null)
-  const [tabs, setTabs] = useState<TFile[]>([])
+  const [tabs, setTabs] = useState<TTab[]>([])
   const [activeId, setActiveId] = useState<string | null>(null)
 
   const socket = io(
@@ -81,7 +82,7 @@ export default function CodeEditor({
 
   const clerk = useClerk()
 
-  const selectFile = (tab: TFile) => {
+  const selectFile = (tab: TTab) => {
     setTabs((prev) => {
       const exists = prev.find((t) => t.id === tab.id)
       if (exists) {
@@ -115,6 +116,13 @@ export default function CodeEditor({
     setTabs((prev) => prev.filter((t) => t.id !== tab.id))
   }
 
+  const handleFileNameChange = (id: string, newName: string) => {
+    socket.emit("renameFile", id, newName)
+    setTabs((prev) =>
+      prev.map((tab) => (tab.id === id ? { ...tab, name: newName } : tab))
+    )
+  }
+
   return (
     <>
       <Sidebar files={files} selectFile={selectFile} />
@@ -129,6 +137,7 @@ export default function CodeEditor({
             {tabs.map((tab) => (
               <Tab
                 key={tab.id}
+                saved={tab.saved}
                 selected={activeId === tab.id}
                 onClick={() => {
                   selectFile(tab)
@@ -143,6 +152,7 @@ export default function CodeEditor({
             {activeId === null ? (
               <>
                 <div className="w-full h-full flex items-center justify-center text-xl font-medium text-secondary select-none">
+                  <FileJson className="w-6 h-6 mr-3" />
                   No file selected.
                 </div>
               </>
@@ -152,6 +162,13 @@ export default function CodeEditor({
                 // defaultLanguage="typescript"
                 language={editorLanguage}
                 onMount={handleEditorMount}
+                onChange={(value) => {
+                  setTabs((prev) =>
+                    prev.map((tab) =>
+                      tab.id === activeId ? { ...tab, saved: false } : tab
+                    )
+                  )
+                }}
                 options={{
                   minimap: {
                     enabled: false,

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 { TFile, TTab } from "./types"
-import { useEffect, useState } from "react"
+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

frontend/components/ui/tab.tsx

@@ -6,11 +6,13 @@ import { useEffect } from "react"
 
 export default function Tab({
   children,
-  selected,
+  saved = true,
+  selected = false,
   onClick,
   onClose,
 }: {
   children: React.ReactNode
+  saved?: boolean
   selected?: boolean
   onClick?: () => void
   onClose?: () => void
@@ -20,7 +22,7 @@ export default function Tab({
       onClick={onClick ?? undefined}
       size="sm"
       variant={"secondary"}
-      className={`group font-normal select-none ${
+      className={`font-normal select-none ${
         selected
           ? "bg-neutral-700 hover:bg-neutral-600 text-foreground"
           : "text-muted-foreground"
@@ -37,9 +39,16 @@ export default function Tab({
               }
             : 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"
+        className="h-5 w-5 ml-0.5 group flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm"
       >
+        {saved ? (
           <X className="w-3 h-3" />
+        ) : (
+          <>
+            <X className="w-3 h-3 group-hover:block hidden" />
+            <div className="w-2 h-2 rounded-full bg-foreground group-hover:hidden" />
+          </>
+        )}
       </div>
     </Button>
   )