Progress on Workspace Management

code/client/src/App.scss

@@ -16,26 +16,41 @@
   height: 100vh;
   color: black;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
-  align-items: start;
+  align-items: center;
   overflow: clip;
 
   .content {
     width: 100%;
     height: 100%;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: start;
-    align-items: center;
+    align-items: start;
     overflow-y: auto;
 
-    > :last-child {
+    > div {
       width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: start;
+      align-items: center;
     }
   }
 }
 
+.button > * {
+  text-transform: capitalize;
+  color: white;
+  transition: color 0.3s;
+}
+
+.button:hover > * {
+  color: lightgray;
+}
+
 ::-webkit-scrollbar {
   width: 14px;
   height: 18px;

code/client/src/App.tsx

@@ -1,6 +1,5 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { CommunicationProvider } from '@/services/communication/context/CommunicationContext';
-import { communication } from '@/services/communication/communication';
 import Document from '@ui/pages/document/Document';
 import Header from '@ui/components/header/Header';
 import Workspace from '@ui/pages/workspace/Workspace';
@@ -9,22 +8,45 @@ import './App.scss';
 import { ErrorProvider } from '@domain/error/ErrorContext';
 import Sidebar from '@ui/components/sidebar/Sidebar';
 import { WorkspaceProvider } from '@domain/workspace/WorkspaceContext';
+import Home from '@ui/pages/home/Home.tsx';
 
 function App() {
   return (
     <div className="app">
       <ErrorProvider>
-        <CommunicationProvider communication={communication}>
+        <CommunicationProvider>
           <Router>
-            <Sidebar />
+            <Header />
             <div className="content">
-              <Header />
               <Routes>
-                <WorkspaceProvider>
-                  <Route path="/" element={<Home />} />
-                  <Route path="/workspaces/:wid" element={<Workspace />} />
-                  <Route path="/workspaces/:wid/:id" element={<Document />} />
-                </WorkspaceProvider>
+                <Route path="/" element={<Home />} />
+                <Route
+                  path="/workspaces/:wid/*"
+                  element={
+                    <WorkspaceProvider>
+                      <Routes>
+                        <Route
+                          path="/"
+                          element={
+                            <>
+                              <Sidebar />
+                              <Workspace />
+                            </>
+                          }
+                        />
+                        <Route
+                          path="/:id"
+                          element={
+                            <>
+                              <Sidebar />
+                              <Document />
+                            </>
+                          }
+                        />
+                      </Routes>
+                    </WorkspaceProvider>
+                  }
+                />
                 <Route path="*" element={<NotFound />} />
               </Routes>
             </div>

code/client/src/domain/editor/crdt/fugue.ts

@@ -1,9 +1,9 @@
-import { type Id } from '@notespace/shared/document/types/nodes';
-import { BlockStyle, InlineStyle } from '@notespace/shared/document/types/styles';
-import { FugueTree } from '@notespace/shared/document/FugueTree.ts';
+import { type Id } from '@notespace/shared/src/document/types/nodes.ts';
+import { BlockStyle, InlineStyle } from '@notespace/shared/src/document/types/styles';
+import { FugueTree } from '@notespace/shared/src/document/FugueTree.ts';
 import { generateReplicaId, nodeInsert } from './utils';
 import { type FugueNode, type NodeInsert } from '@domain/editor/crdt/types';
-import { Cursor, Selection } from '@notespace/shared/document/types/cursor';
+import { Cursor, Selection } from '@notespace/shared/src/document/types/cursor';
 import { isEmpty, last, range } from 'lodash';
 import {
   BlockStyleOperation,
@@ -12,7 +12,7 @@ import {
   InsertOperation,
   Operation,
   ReviveOperation,
-} from '@notespace/shared/document/types/operations';
+} from '@notespace/shared/src/document/types/operations.ts';
 
 /**
  * Class that represents a local replica of a FugueTree

code/client/src/domain/editor/crdt/types.d.ts

@@ -1,5 +1,5 @@
-import { type InlineStyle } from '@notespace/shared/document/types/styles';
-import { NodeType } from '@notespace/shared/document/types/nodes';
+import { type InlineStyle } from '@notespace/shared/src/document/types/styles';
+import { NodeType } from '@notespace/shared/src/document/types/nodes.ts';
 
 export type NodeInsert = {
   value: string;

code/client/src/domain/editor/crdt/utils.ts

@@ -1,5 +1,5 @@
 import { range } from 'lodash';
-import { InlineStyle } from '@notespace/shared/document/types/styles';
+import { InlineStyle } from '@notespace/shared/src/document/types/styles';
 
 const BASE64CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
 const DEFAULT_REPLICA_ID_LENGTH = 10;

code/client/src/domain/editor/hooks/useEvents.ts

@@ -1,5 +1,5 @@
 import useSocketListeners from '@/services/communication/socket/useSocketListeners';
-import { type Operation } from '@notespace/shared/document/types/operations';
+import { type Operation } from '@notespace/shared/src/document/types/operations.ts';
 import { Communication } from '@/services/communication/communication';
 import { FugueDomainOperations } from '@domain/editor/operations/fugue/types';
 
@@ -11,7 +11,6 @@ import { FugueDomainOperations } from '@domain/editor/operations/fugue/types';
  */
 function useEvents(fugueOperations: FugueDomainOperations, { socket }: Communication, onDone: () => void) {
   function onOperation(operations: Operation[]) {
-    console.log('operation', operations);
     fugueOperations.applyOperations(operations);
     onDone();
   }

code/client/src/domain/editor/operations/fugue/operations.ts

@@ -1,6 +1,6 @@
 import { Fugue } from '@domain/editor/crdt/fugue';
 import { FugueDomainOperations } from '@domain/editor/operations/fugue/types';
-import { Operation } from '@notespace/shared/document/types/operations';
+import { Operation } from '@notespace/shared/src/document/types/operations.ts';
 
 export default (fugue: Fugue): FugueDomainOperations => {
   const applyOperations = (operations: Operation[]) => fugue.applyOperations(operations);

code/client/src/domain/editor/operations/fugue/types.d.ts

@@ -1,4 +1,4 @@
-import { Operation } from '@notespace/shared/document/types/operations';
+import { Operation } from '@notespace/shared/src/document/types/operations.ts';
 
 export type FugueDomainOperations = {
   applyOperations: (operations: Operation[]) => void;

code/client/src/domain/editor/operations/history/operations.ts

@@ -13,8 +13,8 @@ import {
   UnsetNodeOperation,
 } from '@domain/editor/operations/history/types';
 import { Communication } from '@/services/communication/communication';
-import { BlockStyle, InlineStyle } from '@notespace/shared/document/types/styles';
-import { getStyleType } from '@notespace/shared/document/types/styles';
+import { BlockStyle, InlineStyle } from '@notespace/shared/src/document/types/styles';
+import { getStyleType } from '@notespace/shared/src/document/types/styles';
 import { Text, Element } from 'slate';
 
 export default (fugue: Fugue, { socket }: Communication): HistoryDomainOperations => {

code/client/src/domain/editor/operations/history/types.d.ts

@@ -1,4 +1,4 @@
-import { Cursor, Selection } from '@notespace/shared/document/types/cursor';
+import { Cursor, Selection } from '@notespace/shared/src/document/types/cursor';
 import {
   BaseInsertTextOperation,
   BaseRemoveTextOperation,

code/client/src/domain/editor/operations/input/operations.ts

@@ -1,10 +1,10 @@
 import { BaseSelection } from 'slate';
 import { Fugue } from '@domain/editor/crdt/fugue';
 import { InputDomainOperations } from '@domain/editor/operations/input/types';
-import { Cursor, Selection } from '@notespace/shared/document/types/cursor';
+import { Cursor, Selection } from '@notespace/shared/src/document/types/cursor';
 import { nodeInsert } from '@domain/editor/crdt/utils';
-import { InlineStyle } from '@notespace/shared/document/types/styles';
-import { Operation } from '@notespace/shared/document/types/operations';
+import { InlineStyle } from '@notespace/shared/src/document/types/styles';
+import { Operation } from '@notespace/shared/src/document/types/operations.ts';
 import { Communication } from '@/services/communication/communication';
 
 export default (fugue: Fugue, { socket }: Communication): InputDomainOperations => {

code/client/src/domain/editor/operations/input/types.d.ts

@@ -1,5 +1,5 @@
-import { InlineStyle } from '@notespace/shared/document/types/styles';
-import { Cursor, Selection } from '@notespace/shared/document/types/cursor';
+import { InlineStyle } from '@notespace/shared/src/document/types/styles';
+import { Cursor, Selection } from '@notespace/shared/src/document/types/cursor';
 import { BaseSelection } from 'slate';
 
 export type InputDomainOperations = {

code/client/src/domain/editor/operations/markdown/operations.ts

@@ -1,11 +1,11 @@
 import { Fugue } from '@domain/editor/crdt/fugue';
-import { BlockStyle, InlineStyle } from '@notespace/shared/document/types/styles';
+import { BlockStyle, InlineStyle } from '@notespace/shared/src/document/types/styles';
 import { FugueNode } from '@domain/editor/crdt/types';
-import { Selection } from '@notespace/shared/document/types/cursor';
+import { Selection } from '@notespace/shared/src/document/types/cursor';
 import { MarkdownDomainOperations } from '@domain/editor/operations/markdown/types';
 import { deleteAroundSelection } from '@domain/editor/operations/markdown/utils';
 import { Communication } from '@/services/communication/communication';
-import { Operation } from '@notespace/shared/document/types/operations';
+import { Operation } from '@notespace/shared/src/document/types/operations.ts';
 import { isSelectionEmpty } from '@domain/editor/slate/utils/selection';
 
 /**

code/client/src/domain/editor/operations/markdown/types.d.ts

@@ -1,5 +1,5 @@
-import { BlockStyle, InlineStyle } from '@notespace/shared/document/types/styles';
-import { Selection } from '@notespace/shared/document/types/cursor';
+import { BlockStyle, InlineStyle } from '@notespace/shared/src/document/types/styles';
+import { Selection } from '@notespace/shared/src/document/types/cursor';
 
 export type MarkdownDomainOperations = {
   applyBlockStyle: ApplyBlockStyle;

code/client/src/domain/editor/operations/markdown/utils.ts

@@ -1,7 +1,7 @@
 import { Fugue } from '@domain/editor/crdt/fugue';
-import { DeleteOperation } from '@notespace/shared/document/types/operations';
-import { Id } from '@notespace/shared/document/types/nodes';
-import { Selection } from '@notespace/shared/document/types/cursor';
+import { DeleteOperation } from '@notespace/shared/src/document/types/operations.ts';
+import { Id } from '@notespace/shared/src/document/types/nodes.ts';
+import { Selection } from '@notespace/shared/src/document/types/cursor';
 
 /**
  * Deletes characters around the selection

code/client/src/domain/editor/slate/handlers/input/inputHandlers.ts

@@ -4,8 +4,8 @@ import CustomEditor from '@domain/editor/slate/CustomEditor';
 import { isEqual } from 'lodash';
 import { getKeyFromInputEvent } from '@domain/editor/slate/utils/domEvents';
 import { getSelection, isSelected } from '@domain/editor/slate/utils/selection';
-import { Cursor, emptyCursor } from '@notespace/shared/document/types/cursor';
-import { InlineStyle } from '@notespace/shared/document/types/styles';
+import { Cursor, emptyCursor } from '@notespace/shared/src/document/types/cursor';
+import { InlineStyle } from '@notespace/shared/src/document/types/styles';
 import { InputDomainOperations } from '@domain/editor/operations/input/types';
 
 const hotkeys: Record<string, string> = {

code/client/src/domain/editor/slate/handlers/markdown/markdownHandlers.ts

@@ -2,7 +2,7 @@ import { getSelection, isSelected } from '@domain/editor/slate/utils/selection';
 import { Editor } from 'slate';
 import CustomEditor from '@domain/editor/slate/CustomEditor';
 import { MarkdownDomainOperations } from '@domain/editor/operations/markdown/types';
-import { InlineStyle } from '@notespace/shared/document/types/styles';
+import { InlineStyle } from '@notespace/shared/src/document/types/styles';
 
 export default (editor: Editor, handlers: MarkdownDomainOperations) => {
   /**

code/client/src/domain/editor/slate/hooks/useCursors.ts

@@ -2,7 +2,7 @@ import { Range } from 'slate';
 import { useState } from 'react';
 import useSocketListeners from '@/services/communication/socket/useSocketListeners';
 import { Communication } from '@/services/communication/communication';
-import { InlineStyle } from '@notespace/shared/document/types/styles';
+import { InlineStyle } from '@notespace/shared/src/document/types/styles';
 
 export type CursorData = {
   id: string;

code/client/src/domain/editor/slate/hooks/useRenderers.ts

@@ -3,7 +3,7 @@ import { ReactEditor, type RenderElementProps, type RenderLeafProps } from 'slat
 import { getElementRenderer, getLeafRenderer } from '@domain/editor/slate/plugins/markdown/rendering/renderers';
 import { Editor } from 'slate';
 import { Fugue } from '@domain/editor/crdt/fugue';
-import { BlockStyle } from '@notespace/shared/document/types/styles';
+import { BlockStyle } from '@notespace/shared/src/document/types/styles';
 import { Communication } from '@/services/communication/communication.ts';
 
 /**

code/client/src/domain/editor/slate/plugins/markdown/operations/applyOperations.ts

@@ -1,6 +1,6 @@
 import { type Editor, Element, Range, Text, Transforms } from 'slate';
 import { getSelectionByRange } from '@domain/editor/slate/utils/selection';
-import { BlockStyle, InlineStyle } from '@notespace/shared/document/types/styles';
+import { BlockStyle, InlineStyle } from '@notespace/shared/src/document/types/styles';
 import { ApplyBlockStyle, ApplyInlineStyle } from '@domain/editor/operations/markdown/types';
 
 /**

code/client/src/domain/editor/slate/plugins/markdown/operations/editorOperations.ts

@@ -6,7 +6,7 @@ import { getSelection } from '@domain/editor/slate/utils/selection';
 import { TextDeleteOptions } from 'slate/dist/interfaces/transforms/text';
 import { MarkdownDomainOperations } from '@domain/editor/operations/markdown/types';
 import { RuleType } from '@domain/editor/slate/plugins/markdown/rules';
-import { BlockStyle } from '@notespace/shared/document/types/styles';
+import { BlockStyle } from '@notespace/shared/src/document/types/styles';
 
 type InlineFunction = (n: Element) => boolean;
 type DeleteBackwardFunction = (unit: TextUnit, options?: { at: Range }) => void;

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { BlockStyles } from '@notespace/shared/document/types/styles';
+import { BlockStyles } from '@notespace/shared/src/document/types/styles';
 import { RenderElementProps } from 'slate-react';
 import {
   Blockquote,

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

@@ -3,7 +3,7 @@ import { ElementRenderers, LeafRenderers } from './elements';
 import Selection from '@ui/pages/document/components/cursor/Selection';
 import Cursor from '@ui/pages/document/components/cursor/Cursor';
 import { Range } from 'slate';
-import { type BlockStyle, BlockStyles } from '@notespace/shared/document/types/styles';
+import { type BlockStyle, BlockStyles } from '@notespace/shared/src/document/types/styles';
 import CheckListItem from '@domain/editor/slate/plugins/markdown/rendering/components/elements/CheckListItem';
 import { isStatefulBlock } from '@domain/editor/slate/utils/slate';
 

code/client/src/domain/editor/slate/plugins/markdown/rules.ts

@@ -2,7 +2,7 @@ import {
   createSetBlockApply,
   createSetInlineApply,
 } from '@domain/editor/slate/plugins/markdown/operations/applyOperations';
-import { BlockStyle, InlineStyle } from '@notespace/shared/document/types/styles';
+import { BlockStyle, InlineStyle } from '@notespace/shared/src/document/types/styles';
 import { ApplyBlockStyle, ApplyInlineStyle } from '@domain/editor/operations/markdown/types';
 import { Editor, Range } from 'slate';
 

code/client/src/domain/editor/slate/plugins/markdown/shortcuts.ts

@@ -1,4 +1,4 @@
-import { BlockStyles, InlineStyles } from '@notespace/shared/document/types/styles';
+import { BlockStyles, InlineStyles } from '@notespace/shared/src/document/types/styles';
 import { blockRules, inlineRules } from '@domain/editor/slate/plugins/markdown/rules';
 
 export const shortcuts = [

code/client/src/domain/editor/slate/types.ts

@@ -1,7 +1,7 @@
 import { type BaseEditor, Descendant } from 'slate';
 import { type ReactEditor } from 'slate-react';
 import { type HistoryEditor } from 'slate-history';
-import { type BlockStyle, InlineStyle } from '@notespace/shared/document/types/styles';
+import { type BlockStyle, InlineStyle } from '@notespace/shared/src/document/types/styles';
 import { CursorData } from '@/domain/editor/slate/hooks/useCursors';
 
 export interface CustomFormat {

code/client/src/domain/editor/slate/utils/selection.ts

@@ -1,5 +1,5 @@
 import { Editor, Node, Path, Point, Range, Text } from 'slate';
-import { Cursor, emptyCursor, emptySelection, Selection } from '@notespace/shared/document/types/cursor';
+import { Cursor, emptyCursor, emptySelection, Selection } from '@notespace/shared/src/document/types/cursor';
 import { first, isEqual } from 'lodash';
 
 /**

code/client/src/domain/editor/slate/utils/slate.ts

@@ -1,8 +1,8 @@
 import { createEditor, Descendant, Editor, Element } from 'slate';
-import type { BlockStyle, InlineStyle } from '@notespace/shared/document/types/styles';
+import type { BlockStyle, InlineStyle } from '@notespace/shared/src/document/types/styles';
 import type { CustomText } from '@domain/editor/slate/types';
 import { isEqual, last } from 'lodash';
-import { BlockStyles } from '@notespace/shared/document/types/styles';
+import { BlockStyles } from '@notespace/shared/src/document/types/styles';
 import { Fugue } from '@domain/editor/crdt/fugue';
 
 const multiBlocks: BlockStyle[] = [

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

@@ -5,11 +5,11 @@ import ErrorComponent from '@ui/components/error/Error';
 const ERROR_TIMEOUT = 5000;
 
 export type ErrorContextType = {
-  showError: (error: Error) => void;
+  publishError: (error: Error) => void;
 };
 
 export const ErrorContext = createContext<ErrorContextType>({
-  showError: () => {},
+  publishError: () => {},
 });
 
 export function ErrorProvider({ children }: { children: React.ReactNode }) {
@@ -21,7 +21,7 @@ export function ErrorProvider({ children }: { children: React.ReactNode }) {
   }, [error]);
 
   return (
-    <ErrorContext.Provider value={{ showError: setError }}>
+    <ErrorContext.Provider value={{ publishError: setError }}>
       {error && <ErrorComponent error={error} />}
       {children}
     </ErrorContext.Provider>