working file renaming

frontend/components/editor/index.tsx

@@ -86,6 +86,7 @@ export default function CodeEditor({
     setTabs((prev) => {
       const exists = prev.find((t) => t.id === tab.id)
       if (exists) {
+        // console.log("exists")
         setActiveId(exists.id)
         return prev
       }
@@ -116,16 +117,45 @@ export default function CodeEditor({
     setTabs((prev) => prev.filter((t) => t.id !== tab.id))
   }
 
-  const handleFileNameChange = (id: string, newName: string) => {
+  // 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
+
+  const handleRename = (
+    id: string,
+    newName: string,
+    oldName: string,
+    type: "file" | "folder"
+  ) => {
+    // Validation
+    if (
+      newName === oldName ||
+      newName.includes("/") ||
+      newName.includes("\\") ||
+      newName.includes(" ") ||
+      (type === "file" && !newName.includes(".")) ||
+      (type === "folder" && newName.includes("."))
+    ) {
+      return false
+    }
+
+    // Action
     socket.emit("renameFile", id, newName)
     setTabs((prev) =>
       prev.map((tab) => (tab.id === id ? { ...tab, name: newName } : tab))
     )
+
+    return true
   }
 
   return (
     <>
-      <Sidebar files={files} selectFile={selectFile} />
+      <Sidebar
+        files={files}
+        selectFile={selectFile}
+        handleRename={handleRename}
+      />
       <ResizablePanelGroup direction="horizontal">
         <ResizablePanel
           className="p-2 flex flex-col"

frontend/components/editor/sidebar/file.tsx

@@ -8,9 +8,16 @@ import { useEffect, useRef, useState } from "react"
 export default function SidebarFile({
   data,
   selectFile,
+  handleRename,
 }: {
   data: TFile
   selectFile: (file: TTab) => void
+  handleRename: (
+    id: string,
+    newName: string,
+    oldName: string,
+    type: "file" | "folder"
+  ) => boolean
 }) {
   const [imgSrc, setImgSrc] = useState(`/icons/${getIconForFile(data.name)}`)
   const [editing, setEditing] = useState(false)
@@ -22,6 +29,19 @@ export default function SidebarFile({
     }
   }, [editing])
 
+  const renameFile = () => {
+    const renamed = handleRename(
+      data.id,
+      inputRef.current?.value ?? data.name,
+      data.name,
+      "file"
+    )
+    if (!renamed && inputRef.current) {
+      inputRef.current.value = data.name
+    }
+    setEditing(false)
+  }
+
   return (
     <button
       onClick={() => selectFile({ ...data, saved: true })}
@@ -41,18 +61,17 @@ export default function SidebarFile({
       <form
         onSubmit={(e) => {
           e.preventDefault()
-          console.log("submit")
-          setEditing(false)
+          renameFile()
         }}
       >
         <input
           ref={inputRef}
-          className={`bg-transparent w-full ${
+          className={`bg-transparent outline-foreground w-full ${
             editing ? "" : "pointer-events-none"
           }`}
           disabled={!editing}
           defaultValue={data.name}
-          onBlur={() => setEditing(false)}
+          onBlur={() => renameFile()}
         />
       </form>
     </button>

frontend/components/editor/sidebar/folder.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import Image from "next/image"
-import { useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js"
 import { TFile, TFolder, TTab } from "./types"
 import SidebarFile from "./file"
@@ -9,19 +9,38 @@ import SidebarFile from "./file"
 export default function SidebarFolder({
   data,
   selectFile,
+  handleRename,
 }: {
   data: TFolder
   selectFile: (file: TTab) => void
+  handleRename: (
+    id: string,
+    newName: string,
+    oldName: string,
+    type: "file" | "folder"
+  ) => boolean
 }) {
   const [isOpen, setIsOpen] = useState(false)
   const folder = isOpen
     ? getIconForOpenFolder(data.name)
     : getIconForFolder(data.name)
 
+  const [editing, setEditing] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (editing) {
+      inputRef.current?.focus()
+    }
+  }, [editing])
+
   return (
     <>
       <div
         onClick={() => setIsOpen((prev) => !prev)}
+        onDoubleClick={() => {
+          setEditing(true)
+        }}
         className="w-full flex items-center h-7 px-1 transition-colors hover:bg-secondary rounded-sm cursor-pointer"
       >
         <Image
@@ -31,7 +50,26 @@ export default function SidebarFolder({
           height={18}
           className="mr-2"
         />
-        {data.name}
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            console.log("file renamed")
+            setEditing(false)
+          }}
+        >
+          <input
+            ref={inputRef}
+            className={`bg-transparent outline-foreground w-full ${
+              editing ? "" : "pointer-events-none"
+            }`}
+            disabled={!editing}
+            defaultValue={data.name}
+            onBlur={() => {
+              console.log("file renamed")
+              setEditing(false)
+            }}
+          />
+        </form>
       </div>
       {isOpen ? (
         <div className="flex w-full items-stretch">
@@ -43,12 +81,14 @@ export default function SidebarFolder({
                   key={child.id}
                   data={child}
                   selectFile={selectFile}
+                  handleRename={handleRename}
                 />
               ) : (
                 <SidebarFolder
                   key={child.id}
                   data={child}
                   selectFile={selectFile}
+                  handleRename={handleRename}
                 />
               )
             )}

frontend/components/editor/sidebar/index.tsx

@@ -5,17 +5,19 @@ import SidebarFile from "./file"
 import SidebarFolder from "./folder"
 import { TFile, TFolder, TTab } from "./types"
 
-// 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({
   files,
   selectFile,
+  handleRename,
 }: {
   files: (TFile | TFolder)[]
   selectFile: (tab: TTab) => void
+  handleRename: (
+    id: string,
+    newName: string,
+    oldName: string,
+    type: "file" | "folder"
+  ) => boolean
 }) {
   return (
     <div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">
@@ -45,12 +47,14 @@ export default function Sidebar({
                 key={child.id}
                 data={child}
                 selectFile={selectFile}
+                handleRename={handleRename}
               />
             ) : (
               <SidebarFolder
                 key={child.id}
                 data={child}
                 selectFile={selectFile}
+                handleRename={handleRename}
               />
             )
           )