From b46533aa5fbefd82003c3372db457bccc0674a89 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 16 Aug 2025 15:03:58 +0200
Subject: [PATCH 1/7] fix: change app.vue mousedown listener to pointerdown due
 to mousedown only listening to left-click, causing context menu not to be
 removed properly in certain cases

---
 app.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app.vue b/app.vue
index 9fb1768..54604ec 100644
--- a/app.vue
+++ b/app.vue
@@ -17,7 +17,7 @@ const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show:
 onMounted(() => {
 	loadPreferredThemes()
 
-	document.addEventListener("mousedown", (e) => {
+	document.addEventListener("pointerdown", (e) => {
 		if (e.target instanceof HTMLElement && e.target.classList.contains("context-menu-item")) return;
 		console.log("click");
 		console.log("target:", e.target);

From 538566e9e1d50258d1c32baaf76ae2c3f077145d Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 16 Aug 2025 15:05:07 +0200
Subject: [PATCH 2/7] feat: move initialization of logged-in user member state
 variable to channelId page

---
 pages/servers/[serverId]/channels/[channelId].vue | 9 +++++++++
 utils/createMemberContextMenuItems.ts             | 9 +++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index e82a317..8fc9555 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -16,6 +16,8 @@
 </template>
 
 <script lang="ts" setup>
+import type { GuildMemberResponse } from '~/types/interfaces';
+
 
 const route = useRoute();
 const { fetchGuild, fetchChannel } = useApi()
@@ -28,6 +30,13 @@ const channelUrlPath = `channels/${channelId}`;
 const guild = await fetchGuild(guildId)
 const channel = await fetchChannel(channelId)
 
+const { fetchMeMember } = useApi();
+const me = useState<GuildMemberResponse | undefined>("me");
+if (!me.value || me.value.guild_uuid != guildId) {
+	const fetchedMe = await fetchMeMember(guildId);
+	me.value = fetchedMe;
+}
+
 // function toggleInvitePopup(e: Event) {
 // 	e.preventDefault();
 // 	showInvitePopup.value = !showInvitePopup.value;
diff --git a/utils/createMemberContextMenuItems.ts b/utils/createMemberContextMenuItems.ts
index ba1915e..ee4bfdf 100644
--- a/utils/createMemberContextMenuItems.ts
+++ b/utils/createMemberContextMenuItems.ts
@@ -8,12 +8,7 @@ export default async (member: GuildMemberResponse, guildId: string, confirmation
 		items: []
 	};
 
-	const { fetchMeMember } = useApi();
 	const me = useState<GuildMemberResponse | undefined>("me");
-	if (!me.value) {
-		const fetchedMe = await fetchMeMember(member.guild_uuid);
-		me.value = fetchedMe;
-	}
 	const { banMember, kickMember } = useApi();
 
 	console.log("[MENUITEM] hi");
@@ -66,7 +61,9 @@ export default async (member: GuildMemberResponse, guildId: string, confirmation
 		}
 	}
 
-	menuSections.push(moderationSection);
+	if (moderationSection.items.length) {
+		menuSections.push(moderationSection);
+	}
 
 	console.log("[MENUITEM] returning menu items:", menuSections);
 	return menuSections;

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 3/7] 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");
+	}
 }

From 99ed210d26f259981d3631f89169c522ae2f3a08 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 16 Aug 2025 15:45:56 +0200
Subject: [PATCH 4/7] fix: sidebar resizing while holding right-click

---
 components/UserInterface/ResizableSidebar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
index 1777009..1a9fd1a 100644
--- a/components/UserInterface/ResizableSidebar.vue
+++ b/components/UserInterface/ResizableSidebar.vue
@@ -53,6 +53,7 @@ onMounted(() => {
 
 	if (resizableSidebar.value && widthResizer.value) {
 		widthResizer.value.addEventListener("pointerdown", (e) => {
+			if (e.button != 0) return;
 			e.preventDefault();
 			document.body.style.cursor = "ew-resize";
 			function handleMove(pointer: PointerEvent) {

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 5/7] 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");
+		}
 	}
 }

From e28bc23d12dcdb03ca3439944210e143d2e240da Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 16 Aug 2025 15:49:02 +0200
Subject: [PATCH 6/7] fix: Confirmation modal target name not being displayed
 correctly in Message.vue due to use of display-name prop rather than
 target-name

---
 components/Message.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index cbdfccc..433075e 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -60,7 +60,7 @@
 		</div>
 	</div>
 	<ModalConfirmation v-if="confirmationModal && confirmationModal.show" :action-name="confirmationModal.actionName"
-		:display-name="getDisplayName(props.message.member)" :callback="confirmationModal.callback"
+		:target-name="getDisplayName(props.message.member)" :callback="confirmationModal.callback"
 		:onClose="resetConfirmationModal" :onCancel="resetConfirmationModal" />
 </template>
 
@@ -70,7 +70,7 @@ 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, ContextMenuSection, IConfirmationModal } from '~/types/interfaces';
+import type { ContextMenuSection, IConfirmationModal } from '~/types/interfaces';
 
 const { getDisplayName } = useProfile()
 const { getUser } = useAuth()

From 8b8c0591a54edf41619e529ebb6de0d7d6b706dd Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 16 Aug 2025 15:50:11 +0200
Subject: [PATCH 7/7] feat: add Confirmation modal to MemberEntry.vue

---
 components/Guild/MemberEntry.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index 94ad56d..4e13c00 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -6,12 +6,15 @@
         </span>
     </div>
     <ModalProfilePopup v-if="modalPopupVisible" :profile="props.member"
-        :onFinish="hideModalPopup" :keepalive="false"/>
+        :onFinish="hideModalPopup" :keepalive="false" />
+	<ModalConfirmation v-if="confirmationModal && confirmationModal.show" :action-name="confirmationModal.actionName"
+		:target-name="getDisplayName(props.member)" :callback="confirmationModal.callback"
+		:onClose="resetConfirmationModal" :onCancel="resetConfirmationModal" />
 </template>
 
 <script lang="ts" setup>
 import { ModalProfilePopup } from '#components';
-import type { ContextMenuInterface, GuildMemberResponse } from '~/types/interfaces';
+import type { GuildMemberResponse, IConfirmationModal } from '~/types/interfaces';
 
 const { getDisplayName } = useProfile()
 
@@ -19,10 +22,12 @@ const props = defineProps<{
     member: GuildMemberResponse
 }>();
 
-const menuSections = await createMemberContextMenuItems(props.member, props.member.guild_uuid);
+const confirmationModal = ref<IConfirmationModal>();
+const menuSections = await createMemberContextMenuItems(props.member, props.member.guild_uuid, confirmationModal);
 
 const modalPopupVisible = ref<boolean>(false);
 
+
 function showModalPopup() {
     modalPopupVisible.value = true
 }
@@ -30,6 +35,14 @@ function showModalPopup() {
 function hideModalPopup() {
     modalPopupVisible.value = false
 }
+
+function resetConfirmationModal() {
+	console.log("[CONFIRM] resetting");
+	if (confirmationModal) {
+		confirmationModal.value = { show: false, actionName: "", callback: () => {} };
+	}
+}
+
 </script>
 
 <style>