backup

sample-markdown-folder/✅ Todo list.md

@@ -66,23 +66,27 @@
 
 *   Rename files issue causing duplicate selected files ✅
 
-*   Renaming a folder does not update the folder directory when in a note within the folder
-
 *   Folder view should not have a Editor view, or the Editor view should be functional to rename a folder ✅
 
-*   Easier way to go from title to text. Maybe enter should go to text, or tab.
+*   Easier way to go from title to text. Maybe enter should go to text, or tab. ✅
+
+*   Deleting files should automatically update the folder view ✅
+
+*   Renaming files in tree view should update the folder view ✅
 
-*   Deleting files should automatically update the folder view
+*   Renaming a folder does not update the folder directory when in a note within the folder ✅
 
-*   Renaming files should not be supported in the file tree viewer, or should but currently isn't working
+*   Deleting an empty top level folder caused an error ✅
 
-*   **Add new folder/new file to tree viewer**
+*   Renaming files should not be supported in the file tree viewer, or should but currently isn't working ✅
+
+*   Add new folder/new file to tree viewer ✅
 
 *   Make it so that you can start editing and save later (maybe make it a zip on unsupported devices)
 
 *   Make it mobile UI responsive
 
-*   Make the UI have resizable side bar
+*   Have the UI have top level folders as sections
 
 
 ### P1
@@ -93,20 +97,17 @@
 
 *   Autocomplete with Bring your own OpenAI key (or Ollama integration)
 
+*   Export to website (static site generation)
+
 *   add support to add links within the project ⏸️
 
 *   hide folder create/delete until hover of item ⏸️
 
 *   add lots of CSS transitions ⏸️
 
+*   Make the UI have resizable side bar
+
 
 ### P2
 
-*   Add electron app for desktop, no notifications, and support for browsers that don't work
-
-*   ❌ styling for mobile
-
-    *   local file system doesn't even work on mobile...
-
-
-### P3+
+*   Add electron app for desktop, no notifications, and support for browsers that don't work

src/components/FileSystemAdapters/FileSystem/Folder.tsx → src/components/FileSystemAdapters/FileSystem/FileSystemItem.tsx

@@ -4,15 +4,16 @@ import { ChevronDown, ChevronRight, FilePlus, FolderPlus } from "lucide-react";
 import RightClickMenu from "./RightClickMenu";
 import * as ContextMenu from "@radix-ui/react-context-menu";
 
-export function Folder({
+export function FileSystemItem({
   node,
   depth,
   handleFileSelect,
   currentlySelectedFile,
   handleDeleteFile,
   handleCreateFile,
   handleCreateFolder,
-  handleRenameFolder
+  handleRenameFolder,
+  handleRenameFile,
 }: {
   node: DirectoryNode;
   depth: number;
@@ -22,6 +23,7 @@ export function Folder({
   handleCreateFile: (node: DirectoryNode) => void;
   handleCreateFolder: (node: DirectoryNode) => void;
   handleRenameFolder: (node: DirectoryNode) => void;
+  handleRenameFile: (node: DirectoryNode) => void;
 }) {
   const [expanded, setExpanded] = useState(depth === 0);
 
@@ -106,7 +108,7 @@ export function Folder({
                     )}
                   </>
                 ) : (
-                  <Folder
+                  <FileSystemItem
                     node={child}
                     depth={depth + 1}
                     handleFileSelect={handleFileSelect}
@@ -115,12 +117,27 @@ export function Folder({
                     handleCreateFile={handleCreateFile}
                     handleCreateFolder={handleCreateFolder}
                     handleRenameFolder={handleRenameFolder}
+                    handleRenameFile={handleRenameFile}
                   /> // Recursively render directory
                 )}
               </ContextMenu.Trigger>
               <RightClickMenu
+                onCreateFile={
+                  child.isDirectory()
+                    ? () => handleCreateFile(child)
+                    : undefined
+                }
+                onCreateFolder={
+                  child.isDirectory()
+                    ? () => handleCreateFolder(child)
+                    : undefined
+                }
                 onDelete={() => handleDeleteFile(child)}
-                onRename={() => handleRenameFolder(child)}
+                onRename={
+                  child.isDirectory() ? 
+                  () => handleRenameFolder(child) :
+                  () => handleRenameFile(child)
+                }
               />
             </ContextMenu.Root>
           </div>

src/components/FileSystemAdapters/FileSystem/LocalFileSystem.tsx

@@ -6,12 +6,12 @@ import { useEffect } from "react";
 import DirectoryNode, {
   createDirectoryNode,
 } from "../../../models/DirectoryNode";
-import { Folder } from "./Folder";
+import { FileSystemItem } from "./FileSystemItem";
 import { FilePlus, FolderPlus } from "lucide-react";
 
 //sample react function
 export const LocalFileSystem = ({
-  selectedDirectory,
+  selectedDirectory, //rootDirectory
   setSelectedDirectory,
   selectedFile,
   setSelectedFile,
@@ -37,17 +37,6 @@ export const LocalFileSystem = ({
     fetchEntries();
   }, [selectedDirectory]);
 
-  // const handleDirectorySelect = async () => {
-  //   try {
-  //     const directoryHandle = await (window as any).showDirectoryPicker();
-  //     setSelectedDirectory(
-  //       await createDirectoryNode(directoryHandle, undefined)
-  //     );
-  //   } catch (error) {
-  //     console.error("Error selecting directory:", error);
-  //   }
-  // };
-
   const getDirectoryRecursive = async (
     directoryHandle: FileSystemDirectoryHandle
   ) => {
@@ -65,8 +54,21 @@ export const LocalFileSystem = ({
 
   const handleDeleteFile = async (node: DirectoryNode) => {
     console.log("deleting file");
-    const parent = await node.delete();
-    setSelectedFile(getClosestParentsFirstFile(parent)); // TODO: set to root directory
+    await node.delete();
+
+    //determine if the selected file still exists, if it does, set the selected file to it (leave as is), otherwise set it to null
+    if(selectedFile){
+      const selectedFileAsFoundInCurrentDirectory =
+        selectedDirectory?.findChildByPath(selectedFile?.getFullPath());
+      if(selectedFileAsFoundInCurrentDirectory){
+        setSelectedFile(selectedFileAsFoundInCurrentDirectory.getCopy() || null);
+      } else {
+        setSelectedFile(null);
+      }
+    }
+    else{
+      setSelectedFile(null);
+    }
   };
 
   const createFileHandlingDuplicates = async (parent: DirectoryNode) => {
@@ -134,7 +136,15 @@ export const LocalFileSystem = ({
     const newName = prompt("Enter new name for folder", node.name);
     if (newName) {
       await node.renameFolder(newName);
-      setSelectedFile(getClosestParentsFirstFile(node));
+      setSelectedFile(selectedFile?.getCopy() || null);
+    }
+  }
+
+  const handleRenameFile = async (node: DirectoryNode) => {
+    const newName = prompt("Enter new name for file", node.getName() || node.name);
+    if (newName) {
+      await node.renameFile(newName);
+      setSelectedFile(selectedFile?.getCopy() || null);
     }
   }
 
@@ -193,7 +203,7 @@ export const LocalFileSystem = ({
             </div>
           </div>
           <div className="font-normal p-1">
-            <Folder
+            <FileSystemItem
               node={selectedDirectory}
               depth={0}
               handleFileSelect={handleFileSelect}
@@ -202,6 +212,7 @@ export const LocalFileSystem = ({
               handleCreateFile={handleCreateFile}
               handleCreateFolder={handleCreateFolder}
               handleRenameFolder={handleRenameFolder}
+              handleRenameFile={handleRenameFile}
             />
           </div>
         </div>

src/components/FileSystemAdapters/FileSystem/RightClickMenu.tsx

@@ -1,8 +1,10 @@
-import { FolderPen, Trash } from "lucide-react";
+import { FilePlus, FolderPen, FolderPlus, Trash } from "lucide-react";
 import * as ContextMenu from "@radix-ui/react-context-menu";
 
-const RightClickMenu = ({ onDelete, onRename }: 
+const RightClickMenu = ({ onCreateFile, onCreateFolder, onDelete, onRename }: 
   { 
+    onCreateFile: (() => void) | undefined, 
+    onCreateFolder: (() => void) | undefined,
     onDelete: () => void,
     onRename: () => void
   }) => {
@@ -11,7 +13,39 @@ const RightClickMenu = ({ onDelete, onRename }:
       <ContextMenu.Content
         className={`min-w-[220px] bg-white rounded-md overflow-hidden p-[5px] 
         shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]`}
-      >
+      > 
+        {
+          onCreateFile && (
+            <ContextMenu.Item
+              className={`text-sm leading-none rounded-md 
+                flex items-center h-[25px] px-[5px] relative select-none outline-none 
+                data-[disabled]:pointer-events-none 
+                data-[highlighted]:bg-zinc-100`}
+              onClick={() => {
+                onCreateFile();
+              }}
+            >
+              <FilePlus size={14} className="mr-[8px]" />
+              <div>Create note</div>
+            </ContextMenu.Item>
+          )
+        }
+        {
+          onCreateFolder && (
+            <ContextMenu.Item
+              className={`text-sm leading-none rounded-md 
+                flex items-center h-[25px] px-[5px] relative select-none outline-none 
+                data-[disabled]:pointer-events-none 
+                data-[highlighted]:bg-zinc-100`}
+              onClick={() => {
+                onCreateFolder();
+              }}
+            >
+              <FolderPlus size={14} className="mr-[8px]" />
+              <div>Create folder</div>
+            </ContextMenu.Item>
+          )
+        }
         <ContextMenu.Item
           className={`text-sm leading-none rounded-md 
             flex items-center h-[25px] px-[5px] relative select-none outline-none