From 1d21d476d54f070b4155527c057634a2f031b5a6 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 16 Aug 2025 15:06:31 +0200
Subject: [PATCH] feat: get context menu state variable directly in
 showContextMenu instead of requiring a context menu object as a parameter

---
 components/Guild/MemberEntry.vue              |  4 +--
 components/Message.vue                        | 14 +++++------
 components/UserInterface/ResizableSidebar.vue | 10 ++++----
 utils/showContextMenu.ts                      | 25 ++++++++++---------
 4 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index e7fcbab..94ad56d 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="member-item" @click.prevent="showModalPopup" tabindex="0" @contextmenu="showContextMenu($event, contextMenu, menuSections)">
+    <div class="member-item" @click.prevent="showModalPopup" tabindex="0" @contextmenu="showContextMenu($event, menuSections)">
         <Avatar :profile="props.member" class="member-avatar"/>
         <span class="member-display-name" :style="`color: ${generateIrcColor(props.member.user.uuid)}`">
             {{ getDisplayName(props.member) }}
@@ -15,8 +15,6 @@ import type { ContextMenuInterface, GuildMemberResponse } from '~/types/interfac
 
 const { getDisplayName } = useProfile()
 
-const contextMenu = useState<ContextMenuInterface>("contextMenu");
-
 const props = defineProps<{
     member: GuildMemberResponse
 }>();
diff --git a/components/Message.vue b/components/Message.vue
index d3e9b52..cbdfccc 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="showContextMenu($event, contextMenu, messageMenuSections)"
+	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, messageMenuSections)"
 			class="message normal-message" :class="{ 'highlighted': (props.isMentioned || (props.replyMessage && props.message.member.user.uuid != me!.uuid && props.replyMessage?.member.user.uuid == me!.uuid)) }"
 			:data-message-id="props.message.uuid" :editing.sync="props.editing">
 		<div v-if="props.replyMessage" class="message-reply-svg">
@@ -27,12 +27,12 @@
 			:text="props.replyMessage?.message"
 			:reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
-			<Avatar :profile="props.message.member" class="message-author-avatar" @contextmenu="showContextMenu($event, contextMenu, memberMenuSections)" />
+			<Avatar :profile="props.message.member" class="message-author-avatar" @contextmenu="showContextMenu($event, memberMenuSections)" />
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
 				<span class="message-author-username" tabindex="0" :style="`color: ${generateIrcColor(props.message.member.user.uuid)}`"
-						@contextmenu="showContextMenu($event, contextMenu, memberMenuSections)">
+						@contextmenu="showContextMenu($event, memberMenuSections)">
 					{{ getDisplayName(props.message.member) }}
 				</span>
 				<span class="message-date" :title="date.toString()">
@@ -46,7 +46,7 @@
 			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 		</div>
 	</div>
-	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, messageMenuSections)"
+	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, messageMenuSections)"
 			class="message grouped-message" :class="{ 'mentioned': props.replyMessage || props.isMentioned }"
 			:data-message-id="props.message.uuid" :editing.sync="props.editing">
 		<div class="left-column">
@@ -81,8 +81,6 @@ const props = defineProps<MessageProps>();
 
 const me = await getUser()
 
-const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, sections: [] }));
-
 const messageElement = ref<HTMLDivElement>();
 
 const dateHidden = ref<boolean>(true);
@@ -193,7 +191,9 @@ if (props.message.member.user.uuid == me!.uuid) {
 	regularSection.items.push({ name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
 }
 
-messageMenuSections.push(regularSection);
+if (regularSection.items.length) {
+	messageMenuSections.push(regularSection);
+}
 
 function getDayDifference(date1: Date, date2: Date) {
     const midnight1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
index 716285b..1777009 100644
--- a/components/UserInterface/ResizableSidebar.vue
+++ b/components/UserInterface/ResizableSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="resizableSidebar" class="resizable-sidebar" @contextmenu="showContextMenu($event, contextMenu, menuSections)"
+	<div ref="resizableSidebar" class="resizable-sidebar"
 			:style="{
 				'width': storedWidth ? storedWidth : props.width,
 				'min-width': props.minWidth,
@@ -8,13 +8,15 @@
 				'border-top': props.borderSides?.includes('top') ? borderStyling : undefined,
 				'border-bottom': props.borderSides?.includes('bottom') ? borderStyling : undefined,
 			}">
-		<div v-if="props.borderSides != 'right'" class="width-resizer-bar">
+		<div v-if="props.borderSides != 'right'" class="width-resizer-bar"
+				@contextmenu="showContextMenu($event, menuSections)">
 			<div ref="widthResizer" class="width-resizer"></div>
 		</div>
 		<div class="sidebar-content">
 			<slot />
 		</div>
-		<div v-if="props.borderSides == 'right'" class="width-resizer-bar">
+		<div v-if="props.borderSides == 'right'" class="width-resizer-bar"
+				@contextmenu="showContextMenu($event, menuSections)">
 			<div ref="widthResizer" class="width-resizer"></div>
 		</div>
 	</div>
@@ -31,8 +33,6 @@ const resizableSidebar = ref<HTMLDivElement>();
 const widthResizer = ref<HTMLDivElement>();
 const storedWidth = ref<string>();
 
-const contextMenu = useState<ContextMenuInterface>("contextMenu");
-
 const menuSections: ContextMenuSection[] = [{
 	items: [
 		{
diff --git a/utils/showContextMenu.ts b/utils/showContextMenu.ts
index 2ed4472..d401f0c 100644
--- a/utils/showContextMenu.ts
+++ b/utils/showContextMenu.ts
@@ -2,16 +2,17 @@ import { render } from "vue";
 import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
 import type { ContextMenuInterface, ContextMenuItem, ContextMenuSection } from "~/types/interfaces";
 
-export default (e: MouseEvent | PointerEvent, contextMenu: ContextMenuInterface, sections: ContextMenuSection[]) => {
-  e.preventDefault();
-  e.stopPropagation();
-  console.log("Menu sections:", sections);
-  if (sections.length) {
-    console.log("Showing context menu");
-    contextMenu.show = true;
-    contextMenu.pointerX = e.clientX;
-	contextMenu.pointerY = e.clientY;
-    contextMenu.sections = sections;
-    console.log("Showed");
-  }
+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");
+	}
 }