From 78d43ca0c85f0b081dda198de43a822c260749a8 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 30 Jul 2025 16:26:06 +0200
Subject: [PATCH] feat: make use of useState to show and hide context menu
 rather than manually rendering and unrendering

---
 app.vue                                  |  8 ++++++--
 components/Message.vue                   |  7 +++++--
 components/UserInterface/ContextMenu.vue | 11 +++++++----
 types/interfaces.ts                      |  7 +++++++
 utils/createContextMenu.ts               | 17 -----------------
 utils/removeContextMenu.ts               | 14 ++++++++++----
 utils/showContextMenu.ts                 | 12 ++++++++++++
 7 files changed, 47 insertions(+), 29 deletions(-)
 delete mode 100644 utils/createContextMenu.ts
 create mode 100644 utils/showContextMenu.ts

diff --git a/app.vue b/app.vue
index 9c8fb1c..5bf9b59 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <Banner v-if="banner" />
+	<ContextMenu v-if="contextMenu && contextMenu.show" :cursor-x="contextMenu.cursorX" :cursor-y="contextMenu.cursorY" :menu-items="contextMenu.items" />
     <NuxtPage :keepalive="true" />
   </div>
 </template>
@@ -8,9 +9,12 @@
 <script lang="ts" setup>
 import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
 import { render } from 'vue';
+import type { ContextMenuInterface } from './types/interfaces';
 
 const banner = useState("banner", () => false);
 
+const contextMenu = useState<ContextMenuInterface>("contextMenu");
+
 onMounted(() => {
 	document.removeEventListener("contextmenu", contextMenuHandler);
 	document.addEventListener("contextmenu", (e) => {
@@ -18,11 +22,11 @@ onMounted(() => {
 		contextMenuHandler(e);
 	});
 	document.addEventListener("mousedown", (e) => {
-		if (e.target instanceof HTMLDivElement && e.target.closest("#context-menu")) return;
+		if (e.target instanceof HTMLElement && e.target.closest("#context-menu")) return;
 		console.log("click");
 		console.log("target:", e.target);
 		console.log(e.target instanceof HTMLDivElement);
-		removeContextMenu();
+		removeContextMenu(contextMenu);
 		if (e.target instanceof HTMLElement && e.target.classList.contains("message-text") && e.target.contentEditable) {
 			e.target.contentEditable = "false";
 		}
diff --git a/components/Message.vue b/components/Message.vue
index 9c2c0c8..7d606fe 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
+	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
 			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid && props.replyMessage?.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
 			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div v-if="props.replyMessage" class="message-reply-svg">
@@ -50,7 +50,7 @@
 		</div>
 		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
-	<div v-else ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
+	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
 			class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
 			:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div class="left-column">
@@ -71,9 +71,12 @@ import { parse } from 'marked';
 import type { MessageProps } from '~/types/props';
 import MessageMedia from './MessageMedia.vue';
 import MessageReply from './UserInterface/MessageReply.vue';
+import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
 
 const props = defineProps<MessageProps>();
 
+const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, cursorX: 0, cursorY: 0, items: [] }));
+
 const messageElement = ref<HTMLDivElement>();
 
 const dateHidden = ref<boolean>(true);
diff --git a/components/UserInterface/ContextMenu.vue b/components/UserInterface/ContextMenu.vue
index 1388bbd..95f11c4 100644
--- a/components/UserInterface/ContextMenu.vue
+++ b/components/UserInterface/ContextMenu.vue
@@ -1,11 +1,13 @@
 <template>
-	<div v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
-		{{ item.name }}
+	<div id="context-menu">
+		<button v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
+			{{ item.name }} <Icon v-if="item.icon" :name="item.icon" />
+		</button>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import type { ContextMenuItem } from '~/types/interfaces';
+import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
 
 const props = defineProps<{ menuItems: ContextMenuItem[], cursorX: number, cursorY: number }>();
 
@@ -19,7 +21,8 @@ onMounted(() => {
 
 
 function runCallback(item: ContextMenuItem) {
-	removeContextMenu();
+	const contextMenu = useState<ContextMenuInterface>("contextMenu");
+	removeContextMenu(contextMenu);
 	item.callback();
 }
 
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 2a05c38..e96e7f8 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -103,3 +103,10 @@ export interface ContextMenuItem {
 	name: string,
 	callback: (...args: any[]) => any;
 }
+
+export interface ContextMenuInterface {
+	show: boolean,
+	cursorX: number,
+	cursorY: number,
+	items: ContextMenuItem[]
+}
diff --git a/utils/createContextMenu.ts b/utils/createContextMenu.ts
deleted file mode 100644
index 88fe6fb..0000000
--- a/utils/createContextMenu.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { render } from "vue";
-import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
-import type { ContextMenuItem } from "~/types/interfaces";
-
-export default (e: MouseEvent, menuItems: ContextMenuItem[]) => {
-  console.log("Rendering new context menu");
-  const menuContainer = document.createElement("div");
-  menuContainer.id = "context-menu";
-  document.body.appendChild(menuContainer);
-  const contextMenu = h(ContextMenu, {
-  	menuItems,
-  	cursorX: e.clientX,
-  	cursorY: e.clientY 
-  });
-  render(contextMenu, menuContainer);
-  console.log("Rendered");
-}
diff --git a/utils/removeContextMenu.ts b/utils/removeContextMenu.ts
index 3b42c8b..d66a64b 100644
--- a/utils/removeContextMenu.ts
+++ b/utils/removeContextMenu.ts
@@ -1,6 +1,12 @@
-export default () => {
-	const contextMenu = document.getElementById("context-menu");
-	if (contextMenu) {
-		contextMenu.remove();
+import type { ContextMenuInterface } from "~/types/interfaces";
+
+export default (contextMenu: Ref<ContextMenuInterface>) => {
+	console.log("resetting and hiding context menu");
+	contextMenu.value = {
+		show: false,
+		cursorX: 0,
+		cursorY: 0,
+		items: []
 	}
+	console.log("hidden context menu");
 }
diff --git a/utils/showContextMenu.ts b/utils/showContextMenu.ts
new file mode 100644
index 0000000..64e23a6
--- /dev/null
+++ b/utils/showContextMenu.ts
@@ -0,0 +1,12 @@
+import { render } from "vue";
+import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
+import type { ContextMenuInterface, ContextMenuItem } from "~/types/interfaces";
+
+export default (e: MouseEvent, contextMenu: ContextMenuInterface, menuItems: ContextMenuItem[]) => {
+  console.log("Showing context menu");
+  contextMenu.show = true;
+  contextMenu.cursorX = e.clientX;
+  contextMenu.cursorY = e.clientY;
+  contextMenu.items = menuItems;
+  console.log("Showed");
+}