From 0937ef72e2454771db15c62307d5f2db684496d9 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 29 Sep 2025 20:33:15 +0300
Subject: [PATCH] chore(type_widgets): start porting context menu

---
 apps/client/src/widgets/react/NoteLink.tsx    |  7 ++++-
 .../src/widgets/type_widgets/RelationMap.tsx  | 27 +++++++++++++++++--
 .../widgets/type_widgets_old/relation_map.ts  |  5 ----
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/widgets/react/NoteLink.tsx b/apps/client/src/widgets/react/NoteLink.tsx
index ee1dd078a..9e6ddc905 100644
--- a/apps/client/src/widgets/react/NoteLink.tsx
+++ b/apps/client/src/widgets/react/NoteLink.tsx
@@ -14,9 +14,10 @@ interface NoteLinkOpts {
     // Override the text of the link, otherwise the note title is used.
     title?: string;
     viewScope?: ViewScope;
+    noContextMenu?: boolean;
 }
 
-export default function NoteLink({ className, notePath, showNotePath, showNoteIcon, style, noPreview, noTnLink, highlightedTokens, title, viewScope }: NoteLinkOpts) {
+export default function NoteLink({ className, notePath, showNotePath, showNoteIcon, style, noPreview, noTnLink, highlightedTokens, title, viewScope, noContextMenu }: NoteLinkOpts) {
     const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath;
     const ref = useRef<HTMLSpanElement>(null);
     const [ jqueryEl, setJqueryEl ] = useState<JQuery<HTMLElement>>();
@@ -50,6 +51,10 @@ export default function NoteLink({ className, notePath, showNotePath, showNoteIc
         $linkEl?.addClass("tn-link");
     }
 
+    if (noContextMenu) {
+        $linkEl?.attr("data-no-context-menu", "true");
+    }
+
     if (className) {
         $linkEl?.addClass(className);
     }
diff --git a/apps/client/src/widgets/type_widgets/RelationMap.tsx b/apps/client/src/widgets/type_widgets/RelationMap.tsx
index 6a68a96e9..7e527965f 100644
--- a/apps/client/src/widgets/type_widgets/RelationMap.tsx
+++ b/apps/client/src/widgets/type_widgets/RelationMap.tsx
@@ -13,6 +13,8 @@ import dialog from "../../services/dialog";
 import server from "../../services/server";
 import toast from "../../services/toast";
 import { CreateChildrenResponse } from "@triliumnext/commons";
+import contextMenu, { ContextMenuEvent } from "../../menus/context_menu";
+import appContext from "../../components/app_context";
 
 interface MapData {
     notes: {
@@ -82,7 +84,7 @@ export default function RelationMap({ note, ntxId }: TypeWidgetProps) {
         dataSaved() {
 
         }
-    })
+    });
 
     const onTransform = useCallback((pzInstance: PanZoom) => {
         if (!containerRef.current || !apiRef.current || !data) return;
@@ -271,16 +273,37 @@ function NoteBox({ noteId, x, y }: MapData["notes"][number]) {
         froca.getNote(noteId).then(setNote);
     }, [ noteId ]);
 
+    const contextMenuHandler = useCallback((e: MouseEvent) => {
+        e.preventDefault();
+        contextMenu.show({
+            x: e.pageX,
+            y: e.pageY,
+            items: [
+                {
+                    title: t("relation_map.open_in_new_tab"),
+                    uiIcon: "bx bx-empty",
+                    handler: () => appContext.tabManager.openTabWithNoteWithHoisting(noteId)
+                },
+                {
+                    title: t("relation_map.remove_note"),
+                    uiIcon: "bx bx-trash"
+                }
+            ],
+            selectMenuItemHandler() {}
+        })
+    }, [ noteId ]);
+
     return note && (
         <div
             id={noteIdToId(noteId)}
             className={`note-box ${note?.getCssClass()}`}
+            onContextMenu={contextMenuHandler}
             style={{
                 left: x,
                 top: y
             }}
         >
-            <NoteLink className="title" notePath={noteId} noTnLink />
+            <NoteLink className="title" notePath={noteId} noTnLink noContextMenu />
             <div className="endpoint" title={t("relation_map.start_dragging_relations")} />
         </div>
     )
diff --git a/apps/client/src/widgets/type_widgets_old/relation_map.ts b/apps/client/src/widgets/type_widgets_old/relation_map.ts
index 6dbee4318..36ae9082d 100644
--- a/apps/client/src/widgets/type_widgets_old/relation_map.ts
+++ b/apps/client/src/widgets/type_widgets_old/relation_map.ts
@@ -148,14 +148,10 @@ export default class RelationMapTypeWidget extends TypeWidget {
                 x: e.pageX,
                 y: e.pageY,
                 items: [
-                    { title: t("relation_map.open_in_new_tab"), command: "openInNewTab", uiIcon: "bx bx-empty" },
-                    { title: t("relation_map.remove_note"), command: "remove", uiIcon: "bx bx-trash" },
                     { title: t("relation_map.edit_title"), command: "editTitle", uiIcon: "bx bx-pencil" }
                 ],
                 selectMenuItemHandler: ({ command }) => this.contextMenuHandler(command, e.target)
             });
-
-            return false; // blocks default browser right click menu
         });
 
         this.clipboard = null;
@@ -178,7 +174,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
         const noteId = this.idToNoteId($noteBox.prop("id"));
 
         if (command === "openInNewTab") {
-            appContext.tabManager.openTabWithNoteWithHoisting(noteId);
         } else if (command === "remove") {
             const result = await dialogService.confirmDeleteNoteBoxWithNote($title.text());