From eaea7b043ed41268670b704436843db305543a82 Mon Sep 17 00:00:00 2001
From: lideming <me@yuuza.net>
Date: Thu, 30 May 2024 00:36:25 +0800
Subject: [PATCH] feat: right-click to open menu for document/collection links

---
 app/components/DocumentListItem.tsx                |  8 ++++++++
 .../Sidebar/components/CollectionLink.tsx          | 12 +++++++++++-
 app/components/Sidebar/components/DocumentLink.tsx |  8 ++++++++
 app/components/Sidebar/components/StarredLink.tsx  | 14 +++++++++++++-
 app/menus/CollectionMenu.tsx                       |  8 ++++++++
 app/menus/DocumentMenu.tsx                         |  8 ++++++++
 6 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/app/components/DocumentListItem.tsx b/app/components/DocumentListItem.tsx
index a33ec43f4..9bfa42f03 100644
--- a/app/components/DocumentListItem.tsx
+++ b/app/components/DocumentListItem.tsx
@@ -92,6 +92,13 @@ function DocumentListItem(
           title: document.titleWithDefault,
         },
       }}
+      onContextMenu={(e) => {
+        if (menuOpen) {
+          return;
+        }
+        e.preventDefault();
+        handleMenuOpen();
+      }}
       {...rest}
       {...rovingTabIndex}
     >
@@ -149,6 +156,7 @@ function DocumentListItem(
         <DocumentMenu
           document={document}
           showPin={showPin}
+          visible={menuOpen}
           onOpen={handleMenuOpen}
           onClose={handleMenuClose}
           modal={false}
diff --git a/app/components/Sidebar/components/CollectionLink.tsx b/app/components/Sidebar/components/CollectionLink.tsx
index b46908dfc..562e59d86 100644
--- a/app/components/Sidebar/components/CollectionLink.tsx
+++ b/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}
                   />
diff --git a/app/components/Sidebar/components/DocumentLink.tsx b/app/components/Sidebar/components/DocumentLink.tsx
index 8da367b35..bf69113b0 100644
--- a/app/components/Sidebar/components/DocumentLink.tsx
+++ b/app/components/Sidebar/components/DocumentLink.tsx
@@ -313,6 +313,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">
@@ -373,6 +380,7 @@ function InnerDocumentLink(
                         onRename={() =>
                           editableTitleRef.current?.setIsEditing(true)
                         }
+                        visible={menuOpen}
                         onOpen={handleMenuOpen}
                         onClose={handleMenuClose}
                       />
diff --git a/app/components/Sidebar/components/StarredLink.tsx b/app/components/Sidebar/components/StarredLink.tsx
index ee64fc63e..61b5a7f7c 100644
--- a/app/components/Sidebar/components/StarredLink.tsx
+++ b/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}
                   />
diff --git a/app/menus/CollectionMenu.tsx b/app/menus/CollectionMenu.tsx
index debc1e138..dd55e4d12 100644
--- a/app/menus/CollectionMenu.tsx
+++ b/app/menus/CollectionMenu.tsx
@@ -40,6 +40,7 @@ type Props = {
   collection: Collection;
   placement?: Placement;
   modal?: boolean;
+  visible?: boolean;
   label?: (props: MenuButtonHTMLProps) => React.ReactNode;
   onRename?: () => void;
   onOpen?: () => void;
@@ -50,6 +51,7 @@ function CollectionMenu({
   collection,
   label,
   modal = true,
+  visible,
   placement,
   onRename,
   onOpen,
@@ -65,6 +67,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"),
diff --git a/app/menus/DocumentMenu.tsx b/app/menus/DocumentMenu.tsx
index 87f666767..1ecef093d 100644
--- a/app/menus/DocumentMenu.tsx
+++ b/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();