From 889bd8d4fdc7f49914339d01bc7316773401fb97 Mon Sep 17 00:00:00 2001
From: Thomas Gauvin <35609369+thomasgauvin@users.noreply.github.com>
Date: Sat, 25 May 2024 23:56:31 -0400
Subject: [PATCH] =?UTF-8?q?Fixed=20UI=20(padding,=20margin,=20main=20conte?=
 =?UTF-8?q?nt)=20=E2=9C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\342\234\205 Todo list.md"                | 51 +++++++++++++++----
 .../FileSystem/LocalFileSystem.tsx            |  2 +-
 .../FileSystem/WorkspaceSelector.tsx          |  2 +-
 .../RemirrorCustomToolbar.tsx                 |  9 ++--
 src/components/ui/ResizableSidebar.tsx        |  9 ++--
 src/pages/Editor.tsx                          |  1 +
 tailwind.config.js                            | 17 +++++--
 7 files changed, 65 insertions(+), 26 deletions(-)

diff --git "a/sample-markdown-folder/\342\234\205 Todo list.md" "b/sample-markdown-folder/\342\234\205 Todo list.md"
index 0edc62d..93051b2 100644
--- "a/sample-markdown-folder/\342\234\205 Todo list.md"	
+++ "b/sample-markdown-folder/\342\234\205 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
\ No newline at end of file
+*   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)
\ No newline at end of file
diff --git a/src/components/FileSystemAdapters/FileSystem/LocalFileSystem.tsx b/src/components/FileSystemAdapters/FileSystem/LocalFileSystem.tsx
index d301155..ca1b7e9 100644
--- a/src/components/FileSystemAdapters/FileSystem/LocalFileSystem.tsx
+++ b/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 && (
diff --git a/src/components/FileSystemAdapters/FileSystem/WorkspaceSelector.tsx b/src/components/FileSystemAdapters/FileSystem/WorkspaceSelector.tsx
index fcb31ae..2f8d74c 100644
--- a/src/components/FileSystemAdapters/FileSystem/WorkspaceSelector.tsx
+++ b/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
diff --git a/src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbar.tsx b/src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbar.tsx
index e282a71..532794c 100644
--- a/src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbar.tsx
+++ b/src/components/MarkdownEditor/RemirrorCustomToolbar/RemirrorCustomToolbar.tsx
@@ -30,10 +30,6 @@ 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 
@@ -41,11 +37,12 @@ export const RemirrorCustomToolbar = ({}: {}) => {
       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 ">
diff --git a/src/components/ui/ResizableSidebar.tsx b/src/components/ui/ResizableSidebar.tsx
index 7ca15bd..040f1f1 100644
--- a/src/components/ui/ResizableSidebar.tsx
+++ b/src/components/ui/ResizableSidebar.tsx
@@ -1,9 +1,10 @@
 import React, { useRef, useEffect } from "react";
 
-const MyComponent = ({
+const ResizableSidebar = ({
   children,
   minWidth,
   maxWidth,
+  width,
   setWidth,
   hidden,
   style
@@ -11,6 +12,7 @@ const MyComponent = ({
   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;
diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx
index 06aaa26..2276a49 100644
--- a/src/pages/Editor.tsx
+++ b/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` }}
diff --git a/tailwind.config.js b/tailwind.config.js
index 9f28f57..5a2d3e7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,20 @@
 /** @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"),
@@ -11,7 +22,7 @@ export default {
       nocompatible: true,
       preferredStrategy: "pseudoelements",
     }),
-    require('tailwindcss-bg-patterns'),
+    require("tailwindcss-bg-patterns"),
   ],
 };