made folder view not have editor view

package.json

@@ -47,6 +47,7 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.33",
     "tailwindcss": "^3.4.1",
+    "tailwindcss-bg-patterns": "^0.3.0",
     "typescript": "^5.2.2",
     "vite": "^5.0.8"
   },

sample-markdown-folder/✅ Todo list.md

@@ -47,7 +47,7 @@
 
 ### P0
 
-*   The lines for indentation is a bit annoying (styling) ✅ (removed spines)
+*   The lines for indentation is a bit annoying (styling) (removed spines) ✅
 
 *   Add a button to indicate this doesn't work on unsupported browsers ✅
 
@@ -66,22 +66,24 @@
 
 *   Rename files issue causing duplicate selected files ✅
 
-*   Renaming a folder does not update the folder directory
+*   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
+*   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.
 
 *   Deleting files should automatically update the folder view
 
 *   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
+*   **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
+
 
 ### P1
 

src/models/DirectoryNode.ts

@@ -303,6 +303,10 @@ class DirectoryNode {
     return !!this.directoryHandle;
   }
 
+  isFile(): boolean {
+    return !this.isDirectory();
+  }
+
   //function is markdown
   isMarkdown(): boolean {
     return this.name.endsWith(".md");

src/pages/Editor.tsx

@@ -33,7 +33,7 @@ export const EditorPage: React.FC = () => {
         <div
           className={`flex-1 flex flex-col overflow-y-scroll
                scrollbar scrollbar-thumb-zinc-200 scrollbar-track-zinc-100 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full 
-
+               ${selectedFile && selectedFile.isDirectory() ? " pattern-boxes pattern-gray-400 pattern-bg-white pattern-opacity-5 pattern-size-4" : ""}
                `}
         >
           <div className="p-1 sticky top-0 cursor-pointer">
@@ -50,16 +50,26 @@ export const EditorPage: React.FC = () => {
           </div>
           <div className="w-full max-w-3xl mx-auto pt-16 flex flex-1 flex-col">
             <div className="m-6">
-              {selectedFile?.blobUrl ? (
-                <div>
-                  <img src={selectedFile.blobUrl} />
-                </div>
-              ) : (
-                <FileEditor
-                  selectedFile={selectedFile}
-                  setSelectedFile={handleSetSelectedFile}
-                />
-              )}
+              {
+                selectedFile?.blobUrl && (
+                  <div>
+                    <img src={selectedFile.blobUrl} />
+                  </div>
+                )
+              }
+              {/* {
+                selectedFile && selectedFile.isDirectory() && (
+                  <div className="bg-red-100">test</div>
+                )
+              } */}
+              {
+                selectedFile && selectedFile.isFile() && (
+                  <FileEditor
+                    selectedFile={selectedFile}
+                    setSelectedFile={handleSetSelectedFile}
+                  />
+                )
+              }
             </div>
           </div>
         </div>

tailwind.config.js

@@ -11,6 +11,7 @@ export default {
       nocompatible: true,
       preferredStrategy: "pseudoelements",
     }),
+    require('tailwindcss-bg-patterns'),
   ],
 };
 

vite.config.ts

@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  build: { //add this property
+    sourcemap: true,
+  }
 })