added some styling

package.json

@@ -16,8 +16,10 @@
     "@remirror/react": "^2.0.35",
     "@remirror/react-editors": "^1.0.40",
     "@remirror/types": "^1.0.1",
+    "lucide-react": "^0.312.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.2",
     "remirror": "^2.0.38"
   },
   "devDependencies": {
@@ -26,9 +28,12 @@
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.0.8"
   }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

sample-markdown-folder/folder/subfolder/test4.md

@@ -0,0 +1,3 @@
+hello this is a test
+
+# test 4

sample-markdown-folder/folder/subfolder/test5.md

@@ -0,0 +1,3 @@
+hello this is a test
+
+# test 5

sample-markdown-folder/folder/test3.md

@@ -0,0 +1,3 @@
+hello this is a test
+
+# test 3this is a test another

sample-markdown-folder/test.md

@@ -0,0 +1,3 @@
+hello this is a test
+
+# test twerk

sample-markdown-folder/test2.md

@@ -0,0 +1,11 @@
+hello this is a test
+
+# test 2asdfsadoohtest
+
+this is a new test
+
+**intersteingasdfasd**
+
+## this is another test asdf
+
+sadfasd

src/components/FileSystemAdapters/FileSystem/Folder.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import DirectoryNode from "../../../models/DirectoryNode";
+import { ChevronRight } from "lucide-react";
+
+export function Folder({
+  node,
+  depth,
+  handleFileSelect,
+}: {
+  node: DirectoryNode | null;
+  depth: number;
+  handleFileSelect: (file: DirectoryNode) => void;
+}) {
+  const [expanded, setExpanded] = useState(depth === 0);
+  if (!node) return null;
+
+  return (
+    <div key={node.name}>
+      {depth === 0 ? null : (
+        <div
+          className="p-2 hover:bg-zinc-200 rounded"
+          onClick={() => {
+            setExpanded(!expanded);
+          }}
+        >
+          <ChevronRight />
+          <h3 className="text-sm font-semibold">{node.name}</h3>
+        </div>
+      )}
+      <div className={`ml-4 ${expanded ? "block" : "hidden"}`}>
+        {node.children.map((child) => (
+          <div key={child.name}>
+            {child.children.length === 0 ? ( // Render file
+              <div
+                className={`ml-${(depth + 1) * 20} cursor-pointer
+                text-sm
+                  p-2 hover:bg-zinc-200 rounded ${
+                    child.unsavedChanges ? "italic" : ""
+                  }`}
+                onClick={() => {
+                  handleFileSelect(child);
+                }}
+              >
+                {child.name}
+                {child.unsavedChanges ? "*" : ""}
+              </div>
+            ) : (
+              <Folder
+                node={child}
+                depth={depth + 1}
+                handleFileSelect={handleFileSelect}
+              /> // Recursively render directory
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/FileSystemAdapters/FileSystem/LocalFileSystem.tsx

@@ -1,16 +1,27 @@
 import { useState, useEffect } from "react";
+import DirectoryNode from "../../../models/DirectoryNode";
+import { set } from "remirror";
+import { Folder } from "./Folder";
 
 //sample react function
-export const LocalFileSystem = () => {
+export const LocalFileSystem = ({
+  selectedFile,
+  setSelectedFile,
+}: {
+  selectedFile: DirectoryNode | null;
+  setSelectedFile: (file: DirectoryNode | null) => void;
+}) => {
   const [selectedDirectory, setSelectedDirectory] =
-    useState<FileSystemDirectoryHandle | null>(null);
-  const [entries, setEntries] = useState<string[]>([]);
+    useState<DirectoryNode | null>(null);
 
   useEffect(() => {
     const fetchEntries = async () => {
-      if (selectedDirectory) {
-        const entries = await getEntriesRecursive(selectedDirectory);
-        setEntries(entries.map((entry) => entry.name));
+      if (selectedDirectory?.directoryHandle) {
+        const directoryNode = await getDirectoryRecursive(
+          selectedDirectory.directoryHandle
+        );
+
+        setSelectedFile(directoryNode);
       }
     };
 
@@ -20,45 +31,90 @@ export const LocalFileSystem = () => {
   const handleDirectorySelect = async () => {
     try {
       const directoryHandle = await (window as any).showDirectoryPicker();
-      setSelectedDirectory(directoryHandle);
+      setSelectedDirectory(
+        await createDirectoryNode(directoryHandle, undefined)
+      );
     } catch (error) {
       console.error("Error selecting directory:", error);
     }
   };
 
-  const getEntriesRecursive = async (
+  const getDirectoryRecursive = async (
     directoryHandle: FileSystemDirectoryHandle
   ) => {
-    const entries: FileSystemHandle[] = [];
+    const rootDirectoryNode = await createDirectoryNode(directoryHandle);
+    return rootDirectoryNode;
+  };
 
-    for await (const entry of directoryHandle.values()) {
-      entries.push(entry);
+  const createDirectoryNode = async (
+    directoryHandle: FileSystemDirectoryHandle,
+    parent?: DirectoryNode
+  ): Promise<DirectoryNode> => {
+    const entries: DirectoryNode[] = [];
 
+    let directoryNode = new DirectoryNode(
+      directoryHandle.name,
+      false,
+      entries,
+      undefined,
+      directoryHandle,
+      parent
+    );
+
+    //@ts-ignore
+    for await (const entry of directoryHandle.values()) {
       if (entry.kind === "directory") {
         const subdirectoryHandle = entry as FileSystemDirectoryHandle;
-        const subdirectoryEntries = await getEntriesRecursive(
-          subdirectoryHandle
+        const subdirectoryNode = await createDirectoryNode(
+          subdirectoryHandle,
+          directoryNode
+        );
+        entries.push(subdirectoryNode);
+      } else {
+        const fileHandle = entry as FileSystemFileHandle;
+        const fileNode = new DirectoryNode(
+          entry.name,
+          false,
+          [],
+          fileHandle,
+          undefined,
+          directoryNode
         );
-        entries.push(...subdirectoryEntries);
+        console.log(
+          "created file node, full path should be:",
+          fileNode.getFullPath()
+        );
+        entries.push(fileNode);
       }
     }
 
-    return entries;
+    directoryNode.children = entries;
+
+    return directoryNode;
+  };
+
+  const handleFileSelect = async (node: DirectoryNode) => {
+    await node.loadFileContent();
+    setSelectedFile(node);
   };
 
   return (
     <div>
-      <button onClick={handleDirectorySelect}>Select Directory</button>
       {selectedDirectory && (
-        <div>
-          <p>Selected Directory: {selectedDirectory.name}</p>
-          <ul>
-            {entries.map((entry, index) => (
-              <li key={index}>{entry}</li>
-            ))}
-          </ul>
+        <div className="divide-y font-semibold text-base">
+          <div className="text-sm p-2 text-slate-500">
+            {selectedDirectory.name}
+          </div>
+          <div className="font-normal">
+            <Folder
+              node={selectedDirectory}
+              depth={0}
+              handleFileSelect={handleFileSelect}
+            />
+          </div>
         </div>
       )}
+      <button onClick={handleDirectorySelect}>Select Directory</button>
     </div>
   );
 };