Merge branch 'main' into dev

.github/workflows/main.yml

@@ -22,7 +22,7 @@ jobs:
 
       - uses: pnpm/action-setup@v3
         with:
-          version: 'latest'
+          version: '9.0.6'
 
       - uses: actions/setup-node@v4
         with:
@@ -52,7 +52,7 @@ jobs:
 
       - uses: pnpm/action-setup@v3
         with:
-          version: 'latest'
+          version: '9.0.6'
 
       - name: Set up Node.js
         uses: actions/setup-node@v4
@@ -83,7 +83,7 @@ jobs:
 
       - uses: pnpm/action-setup@v3
         with:
-          version: 'latest'
+          version: '9.0.6'
 
       - name: Set up Node.js
         uses: actions/setup-node@v4

code/client/package.json

@@ -19,6 +19,9 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/material": "^5.15.16",
     "@notespace/shared": "file:..\\shared",
     "@testing-library/jest-dom": "^6.4.5",
     "dotenv": "^16.4.5",
@@ -27,7 +30,6 @@
     "msw": "^2.2.14",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-error-boundary": "^4.0.13",
     "react-icons": "^5.2.0",
     "react-router-dom": "^6.23.0",
     "slate": "^0.103.0",

code/client/src/App.scss

@@ -15,6 +15,25 @@
   width: 100vw;
   height: 100vh;
   color: black;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: start;
+  overflow: clip;
+
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+    overflow-y: auto;
+
+    > :last-child {
+      width: 100%;
+    }
+  }
 }
 
 ::-webkit-scrollbar {

code/client/src/App.tsx

@@ -1,30 +1,36 @@
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 import { CommunicationProvider } from '@/domain/communication/context/CommunicationContext';
 import { communication } from '@/domain/communication/communication';
-import { ErrorBoundary } from 'react-error-boundary';
 import Document from '@/ui/pages/document/Document';
 import Header from '@/ui/components/header/Header';
 import Workspace from '@/ui/pages/workspace/Workspace';
-import Error from '@/ui/components/error/Error';
-import './App.scss';
 import NotFound from '@/ui/pages/notfound/NotFound';
+import './App.scss';
+import { ErrorProvider } from '@domain/error/ErrorContext';
+import Sidebar from '@ui/components/sidebar/Sidebar';
+import { WorkspaceProvider } from '@domain/workspace/WorkspaceContext';
 
 function App() {
   return (
     <div className="app">
-      <CommunicationProvider communication={communication}>
-        <Router>
-          <Header />
-          <ErrorBoundary FallbackComponent={Error}>
-            <Routes>
-              <Route path="/" element={<Navigate to={`/documents`} />} />
-              <Route path="/documents" element={<Workspace />} />
-              <Route path="/documents/:id" element={<Document />} />
-              <Route path="*" element={<NotFound />} />
-            </Routes>
-          </ErrorBoundary>
-        </Router>
-      </CommunicationProvider>
+      <ErrorProvider>
+        <CommunicationProvider communication={communication}>
+          <WorkspaceProvider>
+            <Router>
+              <Sidebar />
+              <div className="content">
+                <Header />
+                <Routes>
+                  <Route path="/" element={<Navigate to={`/documents`} />} />
+                  <Route path="/documents" element={<Workspace />} />
+                  <Route path="/documents/:id" element={<Document />} />
+                  <Route path="*" element={<NotFound />} />
+                </Routes>
+              </div>
+            </Router>
+          </WorkspaceProvider>
+        </CommunicationProvider>
+      </ErrorProvider>
     </div>
   );
 }

code/client/src/domain/communication/socket/socketCommunication.ts

@@ -6,7 +6,7 @@ type EmitType = (event: string, data?: any) => void;
 type ListenType = (eventHandlers: SocketEventHandlers) => void;
 export type SocketEventHandlers = Record<string, (...args: any[]) => void>;
 
-const OPTIONS = { autoConnect: false };
+const OPTIONS = { autoConnect: true };
 export const socket: Socket = io(config.SOCKET_SERVER_URL, OPTIONS);
 const operationEmitter = new OperationEmitter();
 

code/client/src/domain/editor/services/useDocumentServices.ts → code/client/src/domain/editor/hooks/useDocumentServices.ts

@@ -1,5 +1,5 @@
-import { HttpCommunication } from '@/domain/communication/http/httpCommunication';
-import documentServices from '@/domain/editor/services/documentServices';
+import { HttpCommunication } from '@domain/communication/http/httpCommunication';
+import documentServices from '@/services/documentServices';
 
 function useDocumentServices(http: HttpCommunication) {
   async function getDocument(id: string) {

code/client/src/domain/editor/slate/handlers/history/toHistoryOperations.ts

@@ -126,7 +126,6 @@ function toHistoryOperations(editor: Editor, operations: Batch | undefined, reve
     operation: BaseInsertNodeOperation | BaseRemoveNodeOperation,
     insert_mode: boolean
   ): InsertNodeOperation | RemoveNodeOperation | undefined {
-    console.log(insert_mode ? 'insertNodeOperation' : 'removeNodeOperation', operation);
     if (operation.node.text === '') return undefined;
 
     const offset = (line: number) => (line === 0 ? 0 : 1);

code/client/src/domain/editor/slate/plugins/markdown/rendering/renderers.tsx

@@ -35,13 +35,12 @@ export const getLeafRenderer = (leaf: CustomText, children: ReactNode) => {
     children = renderer(children);
   }
   if (leaf.cursor) {
-    const { color, id, range, styles } = leaf.cursor;
-
-    children = Range.isCollapsed(range!) ? (
-      <Cursor color={color} styles={styles} key={id} children={children} />
-    ) : (
-      <Selection color={color} children={children} />
-    );
+    const { color, range, styles } = leaf.cursor;
+    if (Range.isCollapsed(range!)) {
+      children = <Cursor color={color} styles={styles} children={children} />;
+    } else {
+      children = <Selection color={color} children={children} />;
+    }
   }
   return children;
 };

code/client/src/domain/error/ErrorContext.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { useState, createContext, useEffect } from 'react';
+import ErrorComponent from '@ui/components/error/Error';
+
+const ERROR_TIMEOUT = 5000;
+
+export type ErrorContextType = {
+  showError: (error: Error) => void;
+};
+
+export const ErrorContext = createContext<ErrorContextType>({
+  showError: () => {},
+});
+
+export function ErrorProvider({ children }: { children: React.ReactNode }) {
+  const [error, setError] = useState<Error | undefined>();
+
+  useEffect(() => {
+    if (error) {
+      setTimeout(() => {
+        setError(undefined);
+      }, ERROR_TIMEOUT);
+    }
+  }, [error]);
+
+  return (
+    <ErrorContext.Provider value={{ showError: setError }}>
+      {error && <ErrorComponent error={error} />}
+      {children}
+    </ErrorContext.Provider>
+  );
+}

code/client/src/domain/error/useError.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { ErrorContext } from '@domain/error/ErrorContext';
+
+function useError() {
+  return useContext(ErrorContext);
+}
+
+export default useError;

code/client/src/domain/workspace/WorkspaceContext.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useState, createContext } from 'react';
+
+export type WorkspaceContextType = {
+  filePath: string | undefined;
+  setFilePath: (path: string) => void;
+};
+
+export const WorkspaceContext = createContext<WorkspaceContextType>({
+  filePath: undefined,
+  setFilePath: () => {},
+});
+
+export function WorkspaceProvider({ children }: { children: React.ReactNode }) {
+  const [filePath, setFilePath] = useState<string | undefined>(undefined);
+  return <WorkspaceContext.Provider value={{ filePath, setFilePath }}>{children}</WorkspaceContext.Provider>;
+}

code/client/src/domain/workspace/useWorkspace.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { WorkspaceContext } from '@domain/workspace/WorkspaceContext';
+
+function useWorkspace() {
+  return useContext(WorkspaceContext);
+}
+
+export default useWorkspace;

code/client/src/index.css

@@ -46,11 +46,6 @@ button {
   border: none;
 }
 
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

code/client/src/domain/editor/services/documentServices.ts → code/client/src/services/documentServices.ts

@@ -1,4 +1,4 @@
-import { HttpCommunication } from '@/domain/communication/http/httpCommunication';
+import { HttpCommunication } from '@domain/communication/http/httpCommunication';
 import { Document } from '@notespace/shared/crdt/types/document';
 
 async function getDocument(http: HttpCommunication, id: string): Promise<Document> {

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

@@ -0,0 +1,36 @@
+.menu {
+  ul {
+    background-color: black;
+    width: 100px;
+    border-radius: 5px;
+  }
+
+  .menu-items {
+    display: flex;
+    flex-direction: column;
+    background-color: black;
+
+    button {
+      display: flex;
+      flex-direction: row;
+      justify-content: left;
+      color: white;
+      background-color: black;
+      border: none;
+      padding: 2vh;
+      margin: 0 1vh 0 1vh;
+      font-size: 10px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: white;
+        color: black;
+      }
+
+      :first-child {
+        margin-right: 1.5vh;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+import { MouseEvent, ReactNode, useState } from 'react';
+import { Menu, PopoverPosition } from '@mui/material';
+import './ContextMenu.scss';
+
+type ContextMenuProps = {
+  item: ReactNode;
+  children: ReactNode;
+};
+
+function ContextMenu({ item, children }: 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,
+    });
+  }
+
+  function onClose() {
+    setMousePosition(null);
+  }
+
+  return (
+    <div onContextMenu={onContextMenu} onClick={onClose}>
+      {item}
+      <Menu
+        className="menu"
+        open={mousePosition !== null}
+        onClose={onClose}
+        anchorReference="anchorPosition"
+        anchorPosition={mousePosition || undefined}
+        keepMounted
+      >
+        <div className="menu-items">{children}</div>
+      </Menu>
+    </div>
+  );
+}
+
+export default ContextMenu;

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

@@ -1,27 +1,14 @@
 import './Error.scss';
 import { MdError } from 'react-icons/md';
-import { useState, useEffect } from 'react';
 
 type ErrorProps = {
-  error: Error;
+  error?: Error;
 };
 
-const ERROR_TIMEOUT = 5000;
-
 function Error({ error }: ErrorProps) {
-  const [showError, setShowError] = useState(true);
-
-  useEffect(() => {
-    const id = setTimeout(() => {
-      setShowError(false);
-    }, ERROR_TIMEOUT);
-    return () => clearTimeout(id);
-  }, []);
-
-  if (!showError) {
+  if (!error) {
     return null;
   }
-
   return (
     <div className="error" role="alert">
       <span>

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

@@ -1,16 +1,21 @@
 header {
+  position: sticky;
+  width: 100%;
+  height: 5vh;
+  top: 0;
+  left: 0;
   color: black;
   background: white;
-  width: 100%;
-  padding: 1vh 0 1vh 5vh;
+  padding: 1vh 0 1vh 15vh;
   box-shadow: black 0 0 1px;
   display: flex;
   align-items: center;
+  z-index: 1;
 
-  .title {
-    font-size: 3vh;
+  p {
+    font-size: 2.5vh;
     padding: 1vh;
-    margin: 0 0 0 1vh;
+    margin: 0 0 0 2vh;
     font-weight: 500;
   }
 }