Frontend Refactoring & Fixes

code/client/src/App.scss

@@ -37,6 +37,10 @@
       flex-direction: column;
       justify-content: start;
       align-items: center;
+
+      a {
+        text-decoration: underline;
+      }
     }
   }
 }

code/client/src/App.tsx

@@ -7,19 +7,11 @@ import './App.scss';
 import { ErrorProvider } from '@ui/contexts/error/ErrorContext';
 import Sidebar from '@ui/components/sidebar/Sidebar';
 import { WorkspaceProvider } from '@ui/contexts/workspace/WorkspaceContext';
-import Home from '@ui/pages/home/Home';
-import { ReactLogCaller } from '@/utils/logging';
-
+import Workspaces from '@ui/pages/workspaces/Workspaces';
 import { CommunicationProvider } from '@ui/contexts/communication/CommunicationContext';
-import { useEffect } from 'react';
-
-const logger = ReactLogCaller;
+import Home from '@ui/pages/home/Home';
 
 function App() {
-  useEffect(() => {
-    logger.logSuccess('App started');
-  }, []);
-
   return (
     <div className="app">
       <ErrorProvider>
@@ -28,32 +20,41 @@ function App() {
             <Header />
             <div className="content">
               <Routes>
-                <Route path="/" element={<Home />} />
                 <Route
-                  path="/workspaces/:wid/*"
+                  path="/"
+                  element={
+                    <>
+                      <Sidebar />
+                      <Home />
+                    </>
+                  }
+                />
+                <Route
+                  path="/workspaces/*"
                   element={
-                    <WorkspaceProvider>
-                      <Routes>
-                        <Route
-                          path="/"
-                          element={
-                            <>
-                              <Sidebar />
-                              <Workspace />
-                            </>
-                          }
-                        />
-                        <Route
-                          path="/:id"
-                          element={
-                            <>
-                              <Sidebar />
-                              <Document />
-                            </>
-                          }
-                        />
-                      </Routes>
-                    </WorkspaceProvider>
+                    <Routes>
+                      <Route
+                        path="/"
+                        element={
+                          <>
+                            <Sidebar />
+                            <Workspaces />
+                          </>
+                        }
+                      />
+                      <Route
+                        path="/:wid/*"
+                        element={
+                          <WorkspaceProvider>
+                            <Sidebar />
+                            <Routes>
+                              <Route path="/" element={<Workspace />} />
+                              <Route path="/:id" element={<Document />} />
+                            </Routes>
+                          </WorkspaceProvider>
+                        }
+                      />
+                    </Routes>
                   }
                 />
                 <Route path="*" element={<NotFound />} />

code/client/src/ui/components/context-menu/ContextMenu.tsx

@@ -1,30 +1,55 @@
-import { MouseEvent, ReactNode, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import { Menu, PopoverPosition } from '@mui/material';
 import './ContextMenu.scss';
 
 type ContextMenuProps = {
   item: ReactNode;
   children: ReactNode;
+  trigger?: string;
 };
 
-function ContextMenu({ item, children }: ContextMenuProps) {
+function ContextMenu({ item, children, trigger }: ContextMenuProps) {
   const [mousePosition, setMousePosition] = useState<PopoverPosition | null>(null);
 
-  function onContextMenu(e: MouseEvent<HTMLElement>) {
-    if (mousePosition !== null) return; // don't show context menu if it's already open
-    e.preventDefault();
-    setMousePosition({
-      left: e.clientX - 2,
-      top: e.clientY - 4,
+  const onOpenMenu = useCallback(
+    (e: MouseEvent | React.MouseEvent<HTMLDivElement>) => {
+      if (mousePosition !== null) {
+        // don't show context menu if it's already open
+        setMousePosition(null);
+        return;
+      }
+      e.preventDefault();
+      setMousePosition({
+        left: e.clientX - 2,
+        top: e.clientY - 4,
+      });
+    },
+    [mousePosition]
+  );
+
+  useEffect(() => {
+    if (!trigger) return;
+
+    const triggerButtons = document.querySelectorAll(`.${trigger}`);
+
+    triggerButtons.forEach(triggerButton => {
+      (triggerButton as HTMLElement).addEventListener('click', onOpenMenu);
     });
-  }
+
+    return () => {
+      triggerButtons.forEach(triggerButton => {
+        (triggerButton as HTMLElement).removeEventListener('click', onOpenMenu);
+      });
+    };
+  }, [onOpenMenu, trigger]);
 
   function onClose() {
+    console.log('onClose');
     setMousePosition(null);
   }
 
   return (
-    <div onContextMenu={onContextMenu} onClick={onClose}>
+    <div onContextMenu={trigger ? undefined : onOpenMenu}>
       {item}
       <Menu
         className="menu"

code/client/src/ui/components/error/Error.scss

@@ -9,7 +9,7 @@
   border-radius: 5px;
   text-align: center;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  z-index: 99;
+  z-index: 10;
 
   p {
     font-size: 1em;

code/client/src/ui/components/header/Header.scss

@@ -1,7 +1,7 @@
 header {
   position: sticky;
   width: 100%;
-  height: 5vh;
+  height: 6vh;
   top: 0;
   left: 0;
   color: black;
@@ -10,11 +10,4 @@ header {
   box-shadow: black 0 0 1px;
   display: flex;
   align-items: center;
-
-  p {
-    font-size: 2.5vh;
-    padding: 1vh;
-    margin: 0 0 0 2vh;
-    font-weight: 500;
-  }
 }

code/client/src/ui/components/header/Header.tsx

@@ -1,12 +1,7 @@
-import { Link } from 'react-router-dom';
 import './Header.scss';
 
 function Header() {
-  return (
-    <header>
-      <Link to="/">NoteSpace</Link>
-    </header>
-  );
+  return <header></header>;
 }
 
 export default Header;

code/client/src/ui/components/sidebar/Sidebar.scss

@@ -14,7 +14,40 @@
   padding-top: 60px;
   color: black;
   box-shadow: black 0 7vh 1px;
-  z-index: 2;
+
+  .sidebar-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 1vh;
+    left: 1vh;
+
+    button {
+      background-color: transparent;
+      border: none;
+      color: black;
+      font-size: 5vh;
+      padding: 0;
+      margin: 0;
+      transition: transform 1s ease-in-out;
+
+      .icon {
+        padding: 0;
+        margin: 0;
+        transition: opacity 1s ease-in-out;
+      }
+    }
+
+    a {
+      padding: 0 0 2vh 1vh;
+    }
+  }
+
+  a {
+    text-decoration: none !important;
+  }
 
   ul {
     margin: 0;
@@ -36,32 +69,6 @@
     gap: 10px;
   }
 
-  > button {
-    position: fixed;
-    top: 1vh;
-    left: 1vh;
-    background-color: transparent;
-    border: none;
-    color: black;
-    font-size: 5vh;
-    padding: 0;
-    margin: 0;
-    transition: transform 1s ease-in-out;
-    z-index: 1;
-
-    .icon {
-      transition: opacity 1s ease-in-out;
-    }
-
-    .icon {
-      transition: opacity 1s ease-in-out;
-    }
-  }
-
-  button:hover {
-    color: dimgray;
-  }
-
   .workspace-tree {
     ul {
       padding: 0;
@@ -161,6 +168,10 @@
       gap: 2px;
     }
 
+    .folder svg {
+      color: darkgray;
+    }
+
     button {
       background-color: transparent;
       color: black;

code/client/src/ui/components/sidebar/Sidebar.tsx

@@ -9,24 +9,29 @@ import { FaHome } from 'react-icons/fa';
 import { IoMdSettings } from 'react-icons/io';
 
 function Sidebar() {
-  const { isOpen, isLocked, handleClick, handleMouseEnter, handleMouseLeave } = useSidebarState();
+  const { isOpen, isLocked, isLoaded, handleClick, handleMouseEnter, handleMouseLeave } = useSidebarState();
   const { workspace, nodes, operations } = useWorkspace();
 
+  if (!isLoaded) return null;
   return (
     <div
       className="sidebar"
       style={{ width: isOpen ? '20%' : '0', transition: '0.3s' }}
       onMouseLeave={handleMouseLeave}
     >
-      <button onMouseEnter={handleMouseEnter} onClick={handleClick}>
-        {isLocked ? (
-          <RiMenuFoldLine className="icon" />
-        ) : isOpen ? (
-          <RiMenuFold2Line className="icon" />
-        ) : (
-          <IoMenu className="icon-menu" />
-        )}
-      </button>
+      <div className="sidebar-header">
+        <button onMouseEnter={handleMouseEnter} onClick={handleClick}>
+          {isLocked ? (
+            <RiMenuFoldLine className="icon" />
+          ) : isOpen ? (
+            <RiMenuFold2Line className="icon" />
+          ) : (
+            <IoMenu className="icon-menu" />
+          )}
+        </button>
+        <Link to="/">NoteSpace</Link>
+      </div>
+
       <ul>
         <li>
           <FaHome />

code/client/src/ui/components/sidebar/components/CreateResourceContextMenu.tsx

@@ -0,0 +1,28 @@
+import ContextMenu from '@ui/components/context-menu/ContextMenu';
+import { ReactNode } from 'react';
+import { MdCreateNewFolder } from 'react-icons/md';
+import { ResourceType } from '@notespace/shared/src/workspace/types/resource';
+import { BsFileEarmarkPlusFill } from 'react-icons/bs';
+
+type CreateResourceContextMenuProps = {
+  onCreateNew: (type: ResourceType) => void;
+  trigger: string;
+  children: ReactNode;
+};
+
+function CreateResourceContextMenu({ children, onCreateNew, trigger }: CreateResourceContextMenuProps) {
+  return (
+    <ContextMenu item={children} trigger={trigger}>
+      <button onClick={() => onCreateNew(ResourceType.FOLDER)}>
+        <MdCreateNewFolder />
+        Folder
+      </button>
+      <button onClick={() => onCreateNew(ResourceType.DOCUMENT)}>
+        <BsFileEarmarkPlusFill />
+        Document
+      </button>
+    </ContextMenu>
+  );
+}
+
+export default CreateResourceContextMenu;