From 839920f124e1704c0d54c43b4b15c31c798c09f7 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 16 Aug 2025 15:46:54 +0200
Subject: [PATCH] feat: make custom context menu imitate browser context menu
 behavior

---
 app.vue                  | 13 +++++++++++--
 utils/showContextMenu.ts | 20 ++++++++++++--------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/app.vue b/app.vue
index 54604ec..391fc96 100644
--- a/app.vue
+++ b/app.vue
@@ -17,12 +17,21 @@ const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show:
 onMounted(() => {
 	loadPreferredThemes()
 
-	document.addEventListener("pointerdown", (e) => {
+	document.addEventListener("contextmenu", (e) => {
+		if (contextMenu.value.show) {
+			e.preventDefault();
+			if (e.target instanceof Element && !e.target.classList.contains("context-menu-item")) {
+				removeContextMenu(contextMenu);
+			}
+		}
+	});
+
+	document.addEventListener("mousedown", (e) => {
 		if (e.target instanceof HTMLElement && e.target.classList.contains("context-menu-item")) return;
 		console.log("click");
 		console.log("target:", e.target);
 		console.log(e.target instanceof HTMLDivElement);
-		if (contextMenu.value.show) {
+		if (e.button != 2 && contextMenu.value.show) {
 			console.log("context menu is shown, hiding");
 			removeContextMenu(contextMenu);
 		}
diff --git a/utils/showContextMenu.ts b/utils/showContextMenu.ts
index d401f0c..e828a12 100644
--- a/utils/showContextMenu.ts
+++ b/utils/showContextMenu.ts
@@ -6,13 +6,17 @@ export default (e: MouseEvent | PointerEvent, sections: ContextMenuSection[]) =>
 	e.preventDefault();
 	e.stopPropagation();
 	const contextMenu = useState<ContextMenuInterface>("contextMenu");
-	console.log("Menu sections:", sections);
-	if (sections.length) {
-		console.log("Showing context menu");
-		contextMenu.value.show = true;
-		contextMenu.value.pointerX = e.clientX;
-		contextMenu.value.pointerY = e.clientY;
-		contextMenu.value.sections = sections;
-		console.log("Showed");
+	if (contextMenu.value.show) {
+		removeContextMenu(contextMenu);
+	} else {
+		console.log("Menu sections:", sections);
+		if (sections.length) {
+			console.log("Showing context menu");
+			contextMenu.value.show = true;
+			contextMenu.value.pointerX = e.clientX;
+			contextMenu.value.pointerY = e.clientY;
+			contextMenu.value.sections = sections;
+			console.log("Showed");
+		}
 	}
 }