start file/folder ui

frontend/components/editor/sidebar/file.tsx

@@ -66,7 +66,7 @@ export default function SidebarFile({
       >
         <input
           ref={inputRef}
-          className={`bg-transparent outline-foreground w-full ${
+          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}

frontend/components/editor/sidebar/folder.tsx

@@ -59,7 +59,7 @@ export default function SidebarFolder({
         >
           <input
             ref={inputRef}
-            className={`bg-transparent outline-foreground w-full ${
+            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}

frontend/components/editor/sidebar/index.tsx

@@ -4,6 +4,8 @@ import { FilePlus, FolderPlus, Loader2, Search } from "lucide-react"
 import SidebarFile from "./file"
 import SidebarFolder from "./folder"
 import { TFile, TFolder, TTab } from "./types"
+import { useState } from "react"
+import New from "./new"
 
 export default function Sidebar({
   files,
@@ -19,20 +21,29 @@ export default function Sidebar({
     type: "file" | "folder"
   ) => boolean
 }) {
+  const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(null)
+
   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="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">
+          <button
+            onClick={() => setCreatingNew("file")}
+            className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
             <FilePlus className="w-4 h-4" />
-          </div>
+          </button>
-          <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">
+          <button
+            onClick={() => setCreatingNew("folder")}
+            className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
             <FolderPlus className="w-4 h-4" />
-          </div>
+          </button>
-          <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">
+          {/* Todo: Implement file searching */}
+          {/* <button className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
             <Search className="w-4 h-4" />
-          </div>
+          </button> */}
         </div>
       </div>
       <div className="w-full mt-1 flex flex-col">
@@ -41,7 +52,8 @@ export default function Sidebar({
             <Loader2 className="w-4 h-4 animate-spin" />
           </div>
         ) : (
-          files.map((child) =>
+          <>
+            {files.map((child) =>
               child.type === "file" ? (
                 <SidebarFile
                   key={child.id}
@@ -57,7 +69,14 @@ export default function Sidebar({
                   handleRename={handleRename}
                 />
               )
-          )
+            )}
+            {creatingNew !== null ? (
+              <New
+                type={creatingNew}
+                stopEditing={() => setCreatingNew(null)}
+              />
+            ) : null}
+          </>
         )}
       </div>
     </div>

frontend/components/editor/sidebar/new.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import Image from "next/image"
+import { useEffect, useRef } from "react"
+
+export default function New({
+  type,
+  stopEditing,
+}: {
+  type: "file" | "folder"
+  stopEditing: () => void
+}) {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const createFile = () => {
+    console.log("Create File")
+    stopEditing()
+  }
+
+  useEffect(() => {
+    inputRef.current?.focus()
+  }, [])
+
+  return (
+    <div 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={
+          type === "file"
+            ? "/icons/default_file.svg"
+            : "/icons/default_folder.svg"
+        }
+        alt="File Icon"
+        width={18}
+        height={18}
+        className="mr-2"
+      />
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          createFile()
+        }}
+      >
+        <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`}
+          onBlur={() => createFile()}
+        />
+      </form>
+    </div>
+  )
+}