Fixed UI (padding, margin, main content) ✅

sample-markdown-folder/✅ Todo list.md

@@ -82,34 +82,63 @@
 
 *   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 the UI have resizable side bar ✅
 
-*   Make it mobile UI responsive <-- 🟡⬅️
+*   Fix styling to have less spacing between sections, paragraphs, overall polish (make it look like Brian Lovin) ✅
 
-*   After entering the title, click enter, and then it deselects, kinda annoying (upon note creation)
+*   Make it mobile UI responsive (useless since not supported on mobile) ⏸️
+
+*   Make it so that you can start editing and save later (maybe make it a zip on unsupported devices (no, just don't support unsupported devices))
+
+*   Reduce the spacing between lines (way too much spacing!) ✅
+
+*   Make the side bar resizable ✅
+
+*   Reorder pages with [https://atlaskit.atlassian.com/packages/confluence/tree](https://atlaskit.atlassian.com/packages/confluence/tree) or [https://ant.design/components/tree#components-tree-demo-draggable](https://ant.design/components/tree#components-tree-demo-draggable)
+
+*   Fix UI (padding, margin, main content) ✅
+
+*   Click is imperfect on open sidebar ✅
+
+*   Sometimes content spills over ✅
+
+*   Fix centering of toolbar ✅
+
+*   Show browser support (check out [https://github.com/use-strict/file-system-access/tree/master](https://github.com/use-strict/file-system-access/tree/master) (didn't work and mobile experience is poor))
+
+*   Allow the ability to have multiple notes open at once ⏸️
+
+*   \--> SHIP
 
 
 ### P1
 
-*   Have the UI have top level folders as sections
-
 *   Support ignoring frontmatter ✅
 
-*   Add support for Google Drive, GitHub syncing
-
-*   Autocomplete with Bring your own OpenAI key (or Ollama integration)
+*   Add styling customizability
 
 *   Export to website (static site generation)
 
+
+### P2
+
+*   Add Google Drive
+
+*   Support ignoring frontmatter ✅
+
 *   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
+*   Have the UI have top level folders as sections
+
+*   Custom links
 
 
-### P2
+### P3
 
-*   Add electron app for desktop, no notifications, and support for browsers that don't work
+*   Add electron app for desktop, no notifications, and support for browsers that don't work
+
+*   Autocomplete with Bring your own OpenAI key (or Ollama integration)

src/components/FileSystemAdapters/FileSystem/LocalFileSystem.tsx

@@ -186,7 +186,7 @@ export const LocalFileSystem = ({
       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 
+        w-full h-full scrollbar scrollbar-thumb-zinc-200 scrollbar-track-zinc-100 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full 
       `}
     >
       {selectedDirectory && (

src/components/FileSystemAdapters/FileSystem/WorkspaceSelector.tsx

@@ -69,7 +69,7 @@ export function WorkspaceSelector({
                 </p>
               </div>
             </div>
-            <div className="mt-4">
+            <div className="my-4">
               {isSupported ? (
                 <div className="my-2">
                   <Button

src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbar.tsx

@@ -30,22 +30,19 @@ export const RemirrorCustomToolbar = ({}: {}) => {
 
   const { width, panelIsOpen } = useContext(SidebarContext);
 
-  console.log(`calc(0 - ${width ? width : '0'}px)`);
-
-  console.log(width, panelIsOpen, window.screen.width)
-
   return (
     <div
       className={`fixed bottom-0 z-30 my-4 justify-center items-center 
       max-w-[100vw]
       w-[100vw]
       mx-0
       left-0
-      max-[768px]:!pl-0
+      md:pl-[300px]
+      -md:!pl-0
     `}//need to change left-0 so that it reacts when the sidebar is open (left-sidebar/2)
     //important needed to override style on screens (cant have media queries in style)
     style={{
-      paddingLeft: `${panelIsOpen ? `${width/2}` : '0'}px`
+      paddingLeft: `${panelIsOpen ? `${width}` : '0'}px`
     }}
     >
       <div className="flex justify-center items-center ">

src/components/ui/ResizableSidebar.tsx

@@ -1,16 +1,18 @@
 import React, { useRef, useEffect } from "react";
 
-const MyComponent = ({
+const ResizableSidebar = ({
   children,
   minWidth,
   maxWidth,
+  width,
   setWidth,
   hidden,
   style
 } : {
   children: React.ReactNode,
   minWidth: number,
   maxWidth: number,
+  width: number,
   setWidth: (fn: any) => void,
   hidden?: boolean,
   style?: React.CSSProperties
@@ -41,7 +43,7 @@ const MyComponent = ({
 
   return (
     <div
-      className={`md:static grow-0 fixed z-40 h-full flex flex-1 ${
+      className={`md:static fixed z-40 h-full flex flex-1 ${
         hidden ? "hidden" : ""
       }`}
       style={style}
@@ -50,7 +52,6 @@ const MyComponent = ({
       <div
         //draggable divider
         onMouseDown={() => {
-          console.log("mousedown")
           isResized.current = true;
         }}
         className="w-0 pl-[3px] bg-zinc-50 cursor-col-resize "
@@ -59,4 +60,4 @@ const MyComponent = ({
   );
 };
 
-export default MyComponent;
+export default ResizableSidebar;

src/pages/Editor.tsx

@@ -36,6 +36,7 @@ export const EditorPage: React.FC = () => {
       <ResizableSidebar
         minWidth={minWidth}
         maxWidth={maxWidth}
+        width={width}
         setWidth={setWidth}
         hidden={!panelIsOpen || !selectedDirectory}
         style={{ maxWidth: `${width}px` }}

tailwind.config.js

@@ -1,17 +1,28 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: 'class',
+  darkMode: "class",
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        "-md": { max: "767px" },
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            maxWidth: "100ch", // add required value here
+          },
+        },
+      },
+    },
   },
   plugins: [
     require("@tailwindcss/typography"),
     require("tailwind-scrollbar")({
       nocompatible: true,
       preferredStrategy: "pseudoelements",
     }),
-    require('tailwindcss-bg-patterns'),
+    require("tailwindcss-bg-patterns"),
   ],
 };