Styling fixes, centering toolbar, adding topbar, content spilling ove…

…r fixes

src/components/FileSystemAdapters/FileSystem/LocalFileSystem.tsx

@@ -16,7 +16,6 @@ export const LocalFileSystem = ({
   selectedFile,
   setSelectedFile,
   hidden,
-  style,
   setPanelIsOpen,
   panelIsOpen,
 }: {
@@ -25,7 +24,6 @@ export const LocalFileSystem = ({
   selectedFile: DirectoryNode | null;
   setSelectedFile: (node: DirectoryNode | null) => Promise<void>;
   hidden: boolean | null;
-  style?: object | null;
   setPanelIsOpen: (isOpen: boolean) => void;
   panelIsOpen: boolean;
 }) => {
@@ -185,16 +183,15 @@ export const LocalFileSystem = ({
 
   return (
     <div
-      className={`min-w-16 bg-zinc-50 overflow-y-scroll ${
+      className={`bg-zinc-50 overflow-y-scroll ${
         hidden ? "hidden" : ""
       }
         h-full scrollbar scrollbar-thumb-zinc-200 scrollbar-track-zinc-100 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full 
       `}
-      style={style}
     >
       {selectedDirectory && (
         <div className="divide-y font-semibold text-base">
-          <div className="text-sm p-2 text-zinc-500 flex flex-row justify-between items-center min-w-0 overflow-ellipsis">
+          <div className="text-sm p-2 text-zinc-500 flex flex-row justify-between items-center min-w-0">
             <div className="flex items-center shrink min-w-0">
               {panelIsOpen && selectedFile?.isFile() && (
                 <>

src/components/FileSystemAdapters/FileSystem/RightClickMenu.tsx

@@ -9,10 +9,12 @@ const RightClickMenu = ({ onCreateFile, onCreateFolder, onDelete, onRename }:
     onRename: () => void
   }) => {
   return (
-    <ContextMenu.Portal>
+    <ContextMenu.Portal
+    >
       <ContextMenu.Content
-        className={`min-w-[220px] bg-white rounded-md overflow-hidden p-[5px] 
+        className={`min-w-[220px] bg-white rounded-md overflow-hidden p-[5px] z-40
         shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]`}
+
       > 
         {
           onCreateFile && (

src/components/FileSystemAdapters/FileSystem/WorkspaceSelector.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import DirectoryNode, { createDirectoryNode } from "../../../models/DirectoryNode";
 import { Button } from "../../ui/Button";
 import * as Separator from '@radix-ui/react-separator';
+import { showDirectoryPicker } from "native-file-system-adapter";
 
 export function WorkspaceSelector({
     setSelectedDirectory
@@ -12,8 +13,9 @@ export function WorkspaceSelector({
 
     const handleDirectorySelect = async () => {
         try {
-          const directoryHandle = await (window as any).showDirectoryPicker();
+          const directoryHandle = await showDirectoryPicker();
           if(!directoryHandle) return;
+
           setSelectedDirectory(
             await createDirectoryNode(directoryHandle, undefined)
           );
@@ -39,7 +41,7 @@ export function WorkspaceSelector({
     }
 
     useEffect(() => {
-        setIsSupported('showDirectoryPicker' in window && typeof window.showDirectoryPicker === 'function');
+        setIsSupported(typeof showDirectoryPicker === 'function');
     }, []);
 
     return (
@@ -81,7 +83,7 @@ export function WorkspaceSelector({
               ) : (
                 <p className="text-red-700 text-sm italic">
                   This browser does not support file access at this time. Please
-                  use a compatible browser (Google Chrome, Microsoft Edge, or
+                  use a compatible browser (desktop versions of Google Chrome, Microsoft Edge, or
                   Opera) for direct file saving.
                 </p>
               )}

src/components/MarkdownEditor/FileEditor.tsx

@@ -59,7 +59,7 @@ export const FileEditor = ({
         value={title}
         onChange={handleOnChangeFileName}
         onKeyDown={handleOnKeyDown}
-        className="text-3xl md:text-4xl font-bold w-full bg-transparent focus:outline-none pb-4 resize-none"
+        className="text-3xl md:text-4xl font-bold w-full bg-transparent focus:outline-none pb-4 resize-none overflow-clip"
       />
       <RemirrorComponent
         selectedFile={selectedFile}

src/components/MarkdownEditor/RemirrorComponent.tsx

@@ -57,7 +57,8 @@ export const RemirrorComponent = ({
   );
 
   const handleMarkdownChange = (markdown: string) => {
-    setSelectedFile(selectedFile?.updateFileContent(markdown).getCopy()); //updating state to cause rerender (direct updates to objects/objecttree do not cause rerender)
+    const updatedFile = selectedFile?.updateFileContent(markdown).getCopy();
+    setSelectedFile(updatedFile); //updating state to cause rerender (direct updates to objects/objecttree do not cause rerender)
     debouncedPersistMarkdown(markdown);
   };
 

src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbar.tsx

@@ -24,7 +24,16 @@ import * as Menubar from "@radix-ui/react-menubar";
 
 export const RemirrorCustomToolbar = ({}: {}) => {
   return (
-    <div className="fixed bottom-0 z-30 my-4 justify-center items-center w-[36rem] lg:w-[48rem]">
+    <div
+      className={`fixed bottom-0 z-30 my-4 justify-center items-center 
+    sm:max-w-[calc(48rem-1.5rem-1.5rem)] 
+    md:max-w-[calc(48rem-2rem-2rem)]
+    lg:max-w-[calc(48rem-2.5rem-2.5rem)]
+    -sm:w-full md:w-fit
+    w-[calc(100%-4rem)] lg:w-full
+    mx-0
+    `}
+    >
       <div className="flex justify-center items-center ">
         <Menubar.Root className="border overflow-hidden inline-flex flex-shrink-0 bg-white rounded-full shadow-lg">
           <Menubar.Menu>
@@ -72,7 +81,7 @@ export const RemirrorCustomToolbar = ({}: {}) => {
               <Menubar.Separator className="h-8 w-0.5 bg-zinc-100" />
             </div>
             <RemirrorCustomToolbarUndoButton />
-            <RemirrorCustomToolbarRedoButton  />
+            <RemirrorCustomToolbarRedoButton />
           </Menubar.Menu>
         </Menubar.Root>
       </div>

src/components/ui/ResizableSidebar.tsx

@@ -5,13 +5,15 @@ const MyComponent = ({
   minWidth,
   maxWidth,
   setWidth,
-  hidden
+  hidden,
+  style
 } : {
   children: React.ReactNode,
   minWidth: number,
   maxWidth: number,
   setWidth: (fn: any) => void,
-  hidden?: boolean
+  hidden?: boolean,
+  style?: React.CSSProperties
 }) => {
   //resizing sidebar
   const isResized = useRef(false);
@@ -39,9 +41,10 @@ const MyComponent = ({
 
   return (
     <div
-      className={`md:static fixed z-40 h-full flex ${
+      className={`md:static fixed z-40 h-full flex flex-1 ${
         hidden ? "hidden" : ""
       }`}
+      style={style}
     >
       {children}
       <div

src/models/DirectoryNode.ts

@@ -175,7 +175,7 @@ class DirectoryNode {
   async renameFolder(newName: string): Promise<void | Error> {
     const newFolderName = newName;
 
-    if(this.directoryHandle && this.parent && this.parent.directoryHandle){
+    if (this.directoryHandle && this.parent && this.parent.directoryHandle) {
       //search the parent to see if the file with the new name already exists
       let existingFolderHandle;
       try {
@@ -441,9 +441,8 @@ class DirectoryNode {
         currentNode = currentNode?.parent;
       } else {
         // Find the child node with the matching name
-        const matchingChild : DirectoryNode | undefined = currentNode?.children.find(
-          (child) => child.name === segment
-        );
+        const matchingChild: DirectoryNode | undefined =
+          currentNode?.children.find((child) => child.name === segment);
 
         if (!matchingChild) {
           // If the child is not found or is not a directory, return undefined
@@ -460,7 +459,7 @@ class DirectoryNode {
     }
 
     return currentNode;
-  } 
+  };
 
   async delete(skipConfirmation?: boolean): Promise<DirectoryNode | undefined> {
     //return parent if it exists
@@ -483,12 +482,11 @@ class DirectoryNode {
     //if this is a folder, ask the
     if (this.directoryHandle) {
       //delete all the files in the folder
-      try{
+      try {
         for (const child of this.children) {
           await child.delete(true);
         }
-      }
-      catch(error){
+      } catch (error) {
         console.log("error deleting child", error); //possible that the file has been moved and can't be deleted
       }
 
@@ -679,7 +677,7 @@ export const createDirectoryNode = async (
     }
 
     if (entry.kind === "directory") {
-      const subdirectoryHandle = entry as FileSystemDirectoryHandle;
+      const subdirectoryHandle = entry;
       const subdirectoryNode = await createDirectoryNode(
         subdirectoryHandle,
         directoryNode
@@ -688,7 +686,7 @@ export const createDirectoryNode = async (
         entries.push(subdirectoryNode);
       }
     } else {
-      const fileHandle = entry as FileSystemFileHandle;
+      const fileHandle = entry;
 
       const file = await fileHandle.getFile();
 
@@ -722,18 +720,24 @@ export const createDirectoryNode = async (
   return directoryNode;
 };
 
-async function copyDirectory(sourceDirectoryHandle: FileSystemDirectoryHandle, targetDirectoryHandle: FileSystemDirectoryHandle) {
+async function copyDirectory(
+  sourceDirectoryHandle: FileSystemDirectoryHandle,
+  targetDirectoryHandle: FileSystemDirectoryHandle
+) {
   //@ts-expect-error
   for await (const [name, entry] of sourceDirectoryHandle.entries()) {
     if (entry.kind === "directory") {
-      const newDirectoryHandle = await targetDirectoryHandle.getDirectoryHandle(name, {
-        create: true,
-      });
+      const newDirectoryHandle = await targetDirectoryHandle.getDirectoryHandle(
+        name,
+        {
+          create: true,
+        }
+      );
       await copyDirectory(entry, newDirectoryHandle);
     } else {
-      const subdirectoryHandle = entry as FileSystemDirectoryHandle;
+      const subdirectoryHandle = entry;
       //@ts-expect-error
       await subdirectoryHandle.move(targetDirectoryHandle, name);
     }
   }
-}
+}