From 9726e7c2497af29d0c5425a1a9ebfecdeac8d43b Mon Sep 17 00:00:00 2001
From: Ishaan Dey <ishaan1013@gmail.com>
Date: Sun, 28 Apr 2024 01:33:28 -0400
Subject: [PATCH] start file/folder ui

---
 frontend/components/editor/sidebar/file.tsx   |  2 +-
 frontend/components/editor/sidebar/folder.tsx |  2 +-
 frontend/components/editor/sidebar/index.tsx  | 63 ++++++++++++-------
 frontend/components/editor/sidebar/new.tsx    | 51 +++++++++++++++
 4 files changed, 94 insertions(+), 24 deletions(-)
 create mode 100644 frontend/components/editor/sidebar/new.tsx

diff --git a/frontend/components/editor/sidebar/file.tsx b/frontend/components/editor/sidebar/file.tsx
index 6d33039..79058b4 100644
--- a/frontend/components/editor/sidebar/file.tsx
+++ b/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}
diff --git a/frontend/components/editor/sidebar/folder.tsx b/frontend/components/editor/sidebar/folder.tsx
index 93b8a8e..91adf39 100644
--- a/frontend/components/editor/sidebar/folder.tsx
+++ b/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}
diff --git a/frontend/components/editor/sidebar/index.tsx b/frontend/components/editor/sidebar/index.tsx
index eb90e7c..7e18f1c 100644
--- a/frontend/components/editor/sidebar/index.tsx
+++ b/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>
-          <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>
+          <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>
-          <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>
+          {/* 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,23 +52,31 @@ export default function Sidebar({
             <Loader2 className="w-4 h-4 animate-spin" />
           </div>
         ) : (
-          files.map((child) =>
-            child.type === "file" ? (
-              <SidebarFile
-                key={child.id}
-                data={child}
-                selectFile={selectFile}
-                handleRename={handleRename}
+          <>
+            {files.map((child) =>
+              child.type === "file" ? (
+                <SidebarFile
+                  key={child.id}
+                  data={child}
+                  selectFile={selectFile}
+                  handleRename={handleRename}
+                />
+              ) : (
+                <SidebarFolder
+                  key={child.id}
+                  data={child}
+                  selectFile={selectFile}
+                  handleRename={handleRename}
+                />
+              )
+            )}
+            {creatingNew !== null ? (
+              <New
+                type={creatingNew}
+                stopEditing={() => setCreatingNew(null)}
               />
-            ) : (
-              <SidebarFolder
-                key={child.id}
-                data={child}
-                selectFile={selectFile}
-                handleRename={handleRename}
-              />
-            )
-          )
+            ) : null}
+          </>
         )}
       </div>
     </div>
diff --git a/frontend/components/editor/sidebar/new.tsx b/frontend/components/editor/sidebar/new.tsx
new file mode 100644
index 0000000..3289e00
--- /dev/null
+++ b/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>
+  )
+}