feat: right-click to open menu for document/collection links

app/components/DocumentListItem.tsx

@@ -81,6 +81,13 @@ function DocumentListItem(
           title: document.titleWithDefault,
         },
       }}
+      onContextMenu={(e) => {
+        if (menuOpen) {
+          return;
+        }
+        e.preventDefault();
+        handleMenuOpen();
+      }}
       {...rest}
     >
       <Content>
@@ -137,6 +144,7 @@ function DocumentListItem(
         <DocumentMenu
           document={document}
           showPin={showPin}
+          visible={menuOpen}
           onOpen={handleMenuOpen}
           onClose={handleMenuClose}
           modal={false}

app/components/Sidebar/components/CollectionLink.tsx

@@ -131,7 +131,16 @@ const CollectionLink: React.FC<Props> = ({
 
   return (
     <>
-      <Relative ref={drop}>
+      <Relative
+        ref={drop}
+        onContextMenu={(e) => {
+          if (menuOpen || isEditing) {
+            return;
+          }
+          e.preventDefault();
+          handleMenuOpen();
+        }}
+      >
         <DropToImport collectionId={collection.id}>
           <SidebarLink
             to={{
@@ -178,6 +187,7 @@ const CollectionLink: React.FC<Props> = ({
                     onRename={() =>
                       editableTitleRef.current?.setIsEditing(true)
                     }
+                    visible={menuOpen}
                     onOpen={handleMenuOpen}
                     onClose={handleMenuClose}
                   />

app/components/Sidebar/components/DocumentLink.tsx

@@ -310,6 +310,13 @@ function InnerDocumentLink(
           $isDragging={isDragging}
           $isMoving={isMoving}
           onKeyDown={handleKeyDown}
+          onContextMenu={(e) => {
+            if (menuOpen || isEditing) {
+              return;
+            }
+            e.preventDefault();
+            handleMenuOpen();
+          }}
         >
           <div ref={dropToReparent}>
             <DropToImport documentId={node.id} activeClassName="activeDropZone">
@@ -372,6 +379,7 @@ function InnerDocumentLink(
                         onRename={() =>
                           editableTitleRef.current?.setIsEditing(true)
                         }
+                        visible={menuOpen}
                         onOpen={handleMenuOpen}
                         onClose={handleMenuClose}
                       />

app/components/Sidebar/components/StarredLink.tsx

@@ -115,7 +115,18 @@ function StarredLink({ star }: Props) {
 
     return (
       <>
-        <Draggable key={star.id} ref={draggableRef} $isDragging={isDragging}>
+        <Draggable
+          key={star.id}
+          ref={draggableRef}
+          $isDragging={isDragging}
+          onContextMenu={(e) => {
+            if (menuOpen) {
+              return;
+            }
+            e.preventDefault();
+            handleMenuOpen();
+          }}
+        >
           <SidebarLink
             depth={0}
             to={{
@@ -136,6 +147,7 @@ function StarredLink({ star }: Props) {
                 <Fade>
                   <DocumentMenu
                     document={document}
+                    visible={menuOpen}
                     onOpen={handleMenuOpen}
                     onClose={handleMenuClose}
                   />

app/menus/CollectionMenu.tsx

@@ -39,6 +39,7 @@ type Props = {
   collection: Collection;
   placement?: Placement;
   modal?: boolean;
+  visible?: boolean;
   label?: (props: MenuButtonHTMLProps) => React.ReactNode;
   onRename?: () => void;
   onOpen?: () => void;
@@ -49,6 +50,7 @@ function CollectionMenu({
   collection,
   label,
   modal = true,
+  visible,
   placement,
   onRename,
   onOpen,
@@ -64,6 +66,12 @@ function CollectionMenu({
   const history = useHistory();
   const file = React.useRef<HTMLInputElement>(null);
 
+  React.useEffect(() => {
+    if (visible !== undefined && menu.visible !== visible) {
+      menu.setVisible(visible);
+    }
+  }, [visible]);
+
   const handleExport = React.useCallback(() => {
     dialogs.openModal({
       title: t("Export collection"),

app/menus/DocumentMenu.tsx

@@ -61,6 +61,7 @@ type Props = {
   /** Pass true if the document is currently being displayed */
   showDisplayOptions?: boolean;
   modal?: boolean;
+  visible?: boolean;
   showToggleEmbeds?: boolean;
   showPin?: boolean;
   label?: (props: MenuButtonHTMLProps) => React.ReactNode;
@@ -74,6 +75,7 @@ function DocumentMenu({
   document,
   className,
   modal = true,
+  visible,
   showToggleEmbeds,
   showDisplayOptions,
   label,
@@ -106,6 +108,12 @@ function DocumentMenu({
     })
   );
 
+  React.useEffect(() => {
+    if (visible !== undefined && menu.visible !== visible) {
+      menu.setVisible(visible);
+    }
+  }, [visible]);
+
   const handleOpen = React.useCallback(async () => {
     if (!data && !loading) {
       await request();