delete file ui + logic

frontend/components/editor/index.tsx

@@ -27,9 +27,6 @@ import { processFileType, validateName } from "@/lib/utils"
 import { toast } from "sonner"
 import EditorTerminal from "./terminal"
 
-import { Terminal } from "@xterm/xterm"
-import { FitAddon } from "@xterm/addon-fit"
-
 export default function CodeEditor({
   userId,
   sandboxId,
@@ -135,6 +132,9 @@ export default function CodeEditor({
   const closeTab = (tab: TFile) => {
     const numTabs = tabs.length
     const index = tabs.findIndex((t) => t.id === tab.id)
+
+    if (index === -1) return
+
     const nextId =
       activeId === tab.id
         ? numTabs === 1
@@ -156,9 +156,12 @@ export default function CodeEditor({
     oldName: string,
     type: "file" | "folder"
   ) => {
-    if (!validateName(newName, oldName, type)) return false
+    if (!validateName(newName, oldName, type)) {
+      toast.error("Invalid file name.")
+      console.log("invalid name")
+      return false
+    }
 
-    // Action
     socket.emit("renameFile", id, newName)
     setTabs((prev) =>
       prev.map((tab) => (tab.id === id ? { ...tab, name: newName } : tab))
@@ -167,12 +170,27 @@ export default function CodeEditor({
     return true
   }
 
+  const handleDeleteFile = (file: TFile) => {
+    socket.emit("deleteFile", file.id, (response: (TFolder | TFile)[]) => {
+      setFiles(response)
+    })
+    closeTab(file)
+  }
+
+  const handleDeleteFolder = (folder: TFolder) => {
+    // socket.emit("deleteFolder", folder.id, (response: (TFolder | TFile)[]) => {
+    //   setFiles(response)
+    // })
+  }
+
   return (
     <>
       <Sidebar
         files={files}
         selectFile={selectFile}
         handleRename={handleRename}
+        handleDeleteFile={handleDeleteFile}
+        handleDeleteFolder={handleDeleteFolder}
         socket={socket}
         addNew={(name, type) => {
           if (type === "file") {

frontend/components/editor/sidebar/file.tsx

@@ -4,11 +4,19 @@ import Image from "next/image"
 import { getIconForFile } from "vscode-icons-js"
 import { TFile, TTab } from "./types"
 import { useEffect, useRef, useState } from "react"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu"
+import { Loader2, Pencil, Trash2 } from "lucide-react"
 
 export default function SidebarFile({
   data,
   selectFile,
   handleRename,
+  handleDeleteFile,
 }: {
   data: TFile
   selectFile: (file: TTab) => void
@@ -18,16 +26,21 @@ export default function SidebarFile({
     oldName: string,
     type: "file" | "folder"
   ) => boolean
+  handleDeleteFile: (file: TFile) => void
 }) {
   const [imgSrc, setImgSrc] = useState(`/icons/${getIconForFile(data.name)}`)
   const [editing, setEditing] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
+  const [pendingDelete, setPendingDelete] = useState(false)
 
   useEffect(() => {
     if (editing) {
-      inputRef.current?.focus()
+      setTimeout(() => inputRef.current?.focus(), 0)
     }
-  }, [editing])
+    if (!inputRef.current) {
+      console.log("no input ref")
+    }
+  }, [editing, inputRef.current])
 
   const renameFile = () => {
     const renamed = handleRename(
@@ -43,37 +56,71 @@ export default function SidebarFile({
   }
 
   return (
-    <button
-      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
-        src={imgSrc}
-        alt="File Icon"
-        width={18}
-        height={18}
-        className="mr-2"
-        onError={() => setImgSrc("/icons/default_file.svg")}
-      />
-      <form
-        onSubmit={(e) => {
-          e.preventDefault()
-          renameFile()
+    <ContextMenu>
+      <ContextMenuTrigger
+        disabled={pendingDelete}
+        onClick={() => {
+          if (!editing && !pendingDelete) selectFile({ ...data, saved: true })
         }}
+        // onDoubleClick={() => {
+        //   setEditing(true)
+        // }}
+        className="data-[state=open]:bg-secondary/50 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"
       >
-        <input
-          ref={inputRef}
-          className={`bg-transparent transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-sm w-full ${
-            editing ? "" : "pointer-events-none"
-          }`}
-          disabled={!editing}
-          defaultValue={data.name}
-          onBlur={() => renameFile()}
+        <Image
+          src={imgSrc}
+          alt="File Icon"
+          width={18}
+          height={18}
+          className="mr-2"
+          onError={() => setImgSrc("/icons/default_file.svg")}
         />
-      </form>
-    </button>
+        {pendingDelete ? (
+          <>
+            <Loader2 className="text-muted-foreground w-4 h-4 animate-spin mr-2" />
+            <div className="text-muted-foreground">Deleting...</div>
+          </>
+        ) : (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              renameFile()
+            }}
+          >
+            <input
+              ref={inputRef}
+              className={`bg-transparent transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-sm w-full ${
+                editing ? "" : "pointer-events-none"
+              }`}
+              disabled={!editing}
+              defaultValue={data.name}
+              onBlur={() => renameFile()}
+            />
+          </form>
+        )}
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem
+          onClick={() => {
+            console.log("rename")
+            setEditing(true)
+          }}
+        >
+          <Pencil className="w-4 h-4 mr-2" />
+          Rename
+        </ContextMenuItem>
+        <ContextMenuItem
+          disabled={pendingDelete}
+          onClick={() => {
+            console.log("delete")
+            setPendingDelete(true)
+            handleDeleteFile(data)
+          }}
+        >
+          <Trash2 className="w-4 h-4 mr-2" />
+          Delete
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
   )
 }

frontend/components/editor/sidebar/folder.tsx

@@ -10,6 +10,8 @@ export default function SidebarFolder({
   data,
   selectFile,
   handleRename,
+  handleDeleteFile,
+  handleDeleteFolder,
 }: {
   data: TFolder
   selectFile: (file: TTab) => void
@@ -19,6 +21,8 @@ export default function SidebarFolder({
     oldName: string,
     type: "file" | "folder"
   ) => boolean
+  handleDeleteFile: (file: TFile) => void
+  handleDeleteFolder: (folder: TFolder) => void
 }) {
   const [isOpen, setIsOpen] = useState(false)
   const folder = isOpen
@@ -82,6 +86,7 @@ export default function SidebarFolder({
                   data={child}
                   selectFile={selectFile}
                   handleRename={handleRename}
+                  handleDeleteFile={handleDeleteFile}
                 />
               ) : (
                 <SidebarFolder
@@ -89,6 +94,8 @@ export default function SidebarFolder({
                   data={child}
                   selectFile={selectFile}
                   handleRename={handleRename}
+                  handleDeleteFile={handleDeleteFile}
+                  handleDeleteFolder={handleDeleteFolder}
                 />
               )
             )}

frontend/components/editor/sidebar/index.tsx

@@ -12,6 +12,8 @@ export default function Sidebar({
   files,
   selectFile,
   handleRename,
+  handleDeleteFile,
+  handleDeleteFolder,
   socket,
   addNew,
 }: {
@@ -23,6 +25,8 @@ export default function Sidebar({
     oldName: string,
     type: "file" | "folder"
   ) => boolean
+  handleDeleteFile: (file: TFile) => void
+  handleDeleteFolder: (folder: TFolder) => void
   socket: Socket
   addNew: (name: string, type: "file" | "folder") => void
 }) {
@@ -66,6 +70,7 @@ export default function Sidebar({
                     data={child}
                     selectFile={selectFile}
                     handleRename={handleRename}
+                    handleDeleteFile={handleDeleteFile}
                   />
                 ) : (
                   <SidebarFolder
@@ -73,6 +78,8 @@ export default function Sidebar({
                     data={child}
                     selectFile={selectFile}
                     handleRename={handleRename}
+                    handleDeleteFile={handleDeleteFile}
+                    handleDeleteFolder={handleDeleteFolder}
                   />
                 )
               )}

frontend/components/ui/context-menu.tsx

@@ -0,0 +1,204 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}