Workspace Fixes

code/client/src/domain/workspaces/tree/useWorkspaceTree.ts

@@ -71,6 +71,17 @@ function useWorkspaceTree() {
     setNodes(new Map(nodes));
   }
 
+  function isDescendant(parentId: string, nodeId: string): boolean {
+    let currentNode = getNode(parentId);
+    while (currentNode) {
+      if (currentNode.id === nodeId) {
+        return true;
+      }
+      currentNode = getNode(currentNode.parent);
+    }
+    return false;
+  }
+
   return {
     nodes,
     setNodes,
@@ -80,6 +91,7 @@ function useWorkspaceTree() {
     updateNode,
     removeNode,
     moveNode,
+    isDescendant,
   };
 }
 

code/client/src/ui/components/popup-menu/PopupMenu.scss

@@ -0,0 +1,32 @@
+.menu {
+  ul {
+    background-color: black;
+    width: 100px;
+    border-radius: 5px;
+    padding: 1.5vh;
+  }
+
+  button {
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    gap: 1vh;
+    color: white;
+    background-color: black;
+    border: none;
+    font-size: 12px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    width: 100%;
+
+    &:hover {
+      background-color: white;
+      color: black;
+    }
+
+    svg {
+      font-size: 16px;
+      min-width: max-content;
+    }
+  }
+}

code/client/src/ui/components/popup-menu/PopupMenu.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+import { Menu, PopoverPosition } from '@mui/material';
+import './PopupMenu.scss';
+
+type PopupMenuProps = {
+  item: ReactNode;
+  trigger?: string;
+  children: ReactNode;
+};
+
+function PopupMenu({ item, trigger, children }: PopupMenuProps) {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [contextMenuPosition, setContextMenuPosition] = useState<PopoverPosition | null>(null);
+
+  const onOpen = (event: MouseEvent | React.MouseEvent) => {
+    event.preventDefault();
+    setContextMenuPosition({
+      left: event.clientX - 2,
+      top: event.clientY - 4,
+    });
+    setAnchorEl(event.currentTarget as HTMLElement);
+  };
+
+  const onClose = () => {
+    setAnchorEl(null);
+    setContextMenuPosition(null);
+  };
+
+  useEffect(() => {
+    if (!trigger) return;
+    const triggerElement = document.getElementById(trigger);
+    if (!triggerElement) return;
+    triggerElement.addEventListener('click', onOpen);
+    return () => {
+      triggerElement.removeEventListener('click', onOpen);
+    };
+  }, [trigger]);
+
+  return (
+    <div onContextMenu={trigger ? () => {} : onOpen} onClick={onClose}>
+      {item}
+      <Menu
+        className="menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={onClose}
+        anchorReference="anchorPosition"
+        anchorPosition={contextMenuPosition || undefined}
+      >
+        {children}
+      </Menu>
+    </div>
+  );
+}
+
+export default PopupMenu;

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

@@ -2,7 +2,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  height: 100vh;
+  height: 100vh !important;
   width: 0;
   display: flex;
   flex-direction: column;
@@ -61,7 +61,6 @@
     font-size: 16px;
     font-weight: 500;
     transition: 0.3s;
-
     display: flex;
     flex-direction: row;
     justify-content: start;
@@ -82,7 +81,6 @@
       background: black;
       color: white;
       border-radius: 15px;
-
       margin-left: 20px;
       display: flex;
       flex-direction: column;
@@ -142,7 +140,6 @@
       display: flex;
       align-items: center;
       padding: 0;
-      margin: 1vh;
     }
 
     .resource-header > button:hover {

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

@@ -1,4 +1,4 @@
-import ContextMenu from '@ui/components/context-menu/ContextMenu';
+import PopupMenu from '@ui/components/popup-menu/PopupMenu';
 import { ReactNode } from 'react';
 import { MdCreateNewFolder } from 'react-icons/md';
 import { ResourceType } from '@notespace/shared/src/workspace/types/resource';
@@ -12,7 +12,7 @@ type CreateResourceContextMenuProps = {
 
 function CreateResourceContextMenu({ children, onCreateNew, trigger }: CreateResourceContextMenuProps) {
   return (
-    <ContextMenu item={children} trigger={trigger}>
+    <PopupMenu item={children} trigger={trigger}>
       <button onClick={() => onCreateNew(ResourceType.FOLDER)}>
         <MdCreateNewFolder />
         Folder
@@ -21,7 +21,7 @@ function CreateResourceContextMenu({ children, onCreateNew, trigger }: CreateRes
         <BsFileEarmarkPlusFill />
         Document
       </button>
-    </ContextMenu>
+    </PopupMenu>
   );
 }
 

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

@@ -24,10 +24,11 @@ function ResourceView({ resource, workspace, children, onCreateResource, onDrag,
   };
 
   const props: React.HTMLProps<HTMLDivElement> = {
+    id: resource.id,
     draggable: true,
     onDragOver: (e: React.DragEvent) => e.preventDefault(),
     onDragStart: onDrag,
-    onDrop,
+    onDrop: onDrop,
   };
 
   return (
@@ -37,7 +38,7 @@ function ResourceView({ resource, workspace, children, onCreateResource, onDrag,
           <button onClick={handleToggle}>{isOpen ? <RiArrowDownSFill /> : <RiArrowRightSFill />}</button>
           <CreateResourceContextMenu
             onCreateNew={(type: ResourceType) => onCreateResource!(resource.id, type)}
-            trigger="create-new-resource"
+            trigger={'create-new-resource-' + resource.id}
           >
             {resource.type === ResourceType.DOCUMENT ? (
               <div {...props}>
@@ -54,7 +55,7 @@ function ResourceView({ resource, workspace, children, onCreateResource, onDrag,
             )}
           </CreateResourceContextMenu>
         </div>
-        <button className="create-new-resource">
+        <button id={'create-new-resource-' + resource.id}>
           <FaPlusSquare />
         </button>
       </div>

code/client/src/ui/contexts/workspace/useResources.ts

@@ -51,6 +51,7 @@ function useResources() {
   }
 
   async function moveResource(id: string, parent: string) {
+    if (id === parent || tree.isDescendant(parent, id)) return;
     await service.updateResource(id, { parent });
   }
 

code/client/src/ui/hooks/useEditing.tsx

@@ -5,8 +5,8 @@ function useEditing(initialValue: string, onEdit: (value: string) => void) {
   const ref = useRef<HTMLSpanElement>(null);
   const [isEditing, setIsEditing] = useState(false);
 
+  // listen for changes in the initial value
   useEffect(() => {
-    // listen for changes in the initial value
     setValue(initialValue);
   }, [initialValue]);
 

code/client/src/ui/pages/workspace/components/FileContextMenu.tsx

@@ -1,4 +1,4 @@
-import ContextMenu from '@ui/components/context-menu/ContextMenu';
+import PopupMenu from '@ui/components/popup-menu/PopupMenu';
 import { ReactNode } from 'react';
 import { MdDelete, MdEdit } from 'react-icons/md';
 import { HiDuplicate } from 'react-icons/hi';
@@ -12,7 +12,7 @@ type DocumentContextMenuProps = {
 
 function FileContextMenu({ children, onRename, onDelete, onDuplicate }: DocumentContextMenuProps) {
   return (
-    <ContextMenu item={children}>
+    <PopupMenu item={children}>
       <button onClick={onRename}>
         <MdEdit />
         Rename
@@ -25,7 +25,7 @@ function FileContextMenu({ children, onRename, onDelete, onDuplicate }: Document
         <MdDelete />
         Delete
       </button>
-    </ContextMenu>
+    </PopupMenu>
   );
 }
 

code/client/src/ui/pages/workspaces/components/WorkspaceContextMenu.tsx

@@ -1,4 +1,4 @@
-import ContextMenu from '@ui/components/context-menu/ContextMenu';
+import PopupMenu from '@ui/components/popup-menu/PopupMenu';
 import { ReactNode } from 'react';
 import { MdDelete, MdEdit } from 'react-icons/md';
 import { RiShareBoxLine } from 'react-icons/ri';
@@ -12,7 +12,7 @@ type WorkspaceContextMenuProps = {
 
 function WorkspaceContextMenu({ children, onInvite, onRename, onDelete }: WorkspaceContextMenuProps) {
   return (
-    <ContextMenu item={children}>
+    <PopupMenu item={children}>
       <button onClick={onInvite}>
         <RiShareBoxLine />
         Invite
@@ -25,7 +25,7 @@ function WorkspaceContextMenu({ children, onInvite, onRename, onDelete }: Worksp
         <MdDelete />
         Delete
       </button>
-    </ContextMenu>
+    </PopupMenu>
   );
 }
 

code/server/src/ts/controllers/http/handlers/workspacesHandlers.ts

@@ -16,7 +16,6 @@ function workspacesHandlers(services: Services, io: Server) {
     const { name } = req.body as WorkspaceInputModel;
     if (!name) throw new InvalidParameterError('Workspace name is required');
     const id = await services.workspace.createWorkspace(name);
-
     io.emit('createdWorkspace', { id, name });
     httpResponse.created(res).json({ id });
   };