feat: replace context menu items splicing with implementation of context menu item sections

app.vue

@@ -1,7 +1,7 @@
 <template>
   	<div>
 		<Banner v-if="banner" />
-		<ContextMenu v-if="contextMenu && contextMenu.show" :pointer-x="contextMenu.pointerX" :pointer-y="contextMenu.pointerY" :menu-items="contextMenu.items" />
+		<ContextMenu v-if="contextMenu && contextMenu.show" :pointer-x="contextMenu.pointerX" :pointer-y="contextMenu.pointerY" :menu-sections="contextMenu.sections" />
     	<NuxtPage :keepalive="true" />
   	</div>
 </template>
@@ -12,7 +12,7 @@ import type { ContextMenuInterface } from './types/interfaces';
 
 const banner = useState("banner", () => false);
 
-const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
+const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, sections: [] }));
 
 onMounted(() => {
 	loadPreferredThemes()

components/Guild/MemberEntry.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="member-item" @click.prevent="showModalPopup" tabindex="0" @contextmenu="showContextMenu($event, contextMenu, menuItems)">
+    <div class="member-item" @click.prevent="showModalPopup" tabindex="0" @contextmenu="showContextMenu($event, contextMenu, menuSections)">
         <Avatar :profile="props.member" class="member-avatar"/>
         <span class="member-display-name" :style="`color: ${generateIrcColor(props.member.user.uuid)}`">
             {{ getDisplayName(props.member) }}
@@ -21,7 +21,7 @@ const props = defineProps<{
     member: GuildMemberResponse
 }>();
 
-const menuItems = await createMemberContextMenuItems(props.member, props.member.guild_uuid);
+const menuSections = await createMemberContextMenuItems(props.member, props.member.guild_uuid);
 
 const modalPopupVisible = ref<boolean>(false);
 

components/Message.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, messageMenuItems)"
+	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, 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, memberMenuItems)" />
+			<Avatar :profile="props.message.member" class="message-author-avatar" @contextmenu="showContextMenu($event, contextMenu, 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, memberMenuItems)">
+						@contextmenu="showContextMenu($event, contextMenu, 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, messageMenuItems)"
+	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, 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">
@@ -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, IConfirmationModal } from '~/types/interfaces';
+import type { ContextMenuInterface, ContextMenuItem, ContextMenuSection, IConfirmationModal } from '~/types/interfaces';
 
 const { getDisplayName } = useProfile()
 const { getUser } = useAuth()
@@ -81,7 +81,7 @@ const props = defineProps<MessageProps>();
 
 const me = await getUser()
 
-const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
+const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, sections: [] }));
 
 const messageElement = ref<HTMLDivElement>();
 
@@ -93,7 +93,7 @@ const currentDate: Date = new Date()
 
 const confirmationModal = ref<IConfirmationModal>();
 
-const memberMenuItems = ref<ContextMenuItem[]>([]);
+const memberMenuSections = ref<ContextMenuSection[]>([]);
 
 console.log("[MSG] message to render:", props.message);
 console.log("author:", props.message.member);
@@ -164,28 +164,37 @@ onMounted(async () => {
 	console.log("media links:", mediaLinks);
 
 	console.log("[CONFIRM] modal:", confirmationModal.value);
-	memberMenuItems.value = await createMemberContextMenuItems(props.message.member, route.params.serverId as string, confirmationModal);
+	memberMenuSections.value = await createMemberContextMenuItems(props.message.member, route.params.serverId as string, confirmationModal);
 });
 
 //function toggleTooltip(e: Event) {
 //	showHover.value = !showHover.value;
 //}
 
-const messageMenuItems: ContextMenuItem[] = [
+const messageMenuSections: ContextMenuSection[] = [];
-	{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
+
-]
+const regularSection: ContextMenuSection = {
+	items: [
+		{
+			name: "Reply",
+			icon: "lucide:reply",
+			type: "normal",
+			callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props)}
+		}
+	]
+};
 
 console.log("me:", me);
 if (props.message.member.user.uuid == me!.uuid) {
-	// Inserts "edit" option at index 1 (below the "reply" option)
+	regularSection.items.push({ name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
-	messageMenuItems.splice(Math.min(1, messageMenuItems.length), 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
 }
 
-if (props.message.member.user.uuid == me!.uuid /* || check message delete permission*/) {
+if (props.message.member.user.uuid == me!.uuid) {
-	// Inserts "edit" option at index 2 (below the "edit" option)
+	regularSection.items.push({ name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
-	messageMenuItems.splice(Math.min(2, messageMenuItems.length), 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
 }
 
+messageMenuSections.push(regularSection);
+
 function getDayDifference(date1: Date, date2: Date) {
     const midnight1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
     const midnight2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());

components/Modal/Confirmation.vue

@@ -2,11 +2,11 @@
 	<ModalBase ref="modal" class="confirmation-modal" :obscure="true" :onClose="props.onClose" :onCancel="props.onCancel">
 		<div class="confirmation-modal-body">
 			<div>
-				<h1 class="confirmation-modal-message">Are you sure you would like to {{ props.actionName.toLowerCase() }} {{ props.displayName }}?</h1>
+				<h1 class="confirmation-modal-message">Are you sure you would like to {{ props.actionName.toLowerCase() }} {{ props.targetName }}?</h1>
 			</div>
 			<div class="confirmation-modal-buttons">
 				<Button :variant="'normal'" :text="'Cancel'" @click="closeModal()" />
-				<Button :variant="'scary'" :text="'Confirm'" :callback="props.callback()" />
+				<Button :variant="'scary'" :text="'Confirm'" :callback="props.callback" />
 			</div>
 		</div>
 	</ModalBase>
@@ -15,7 +15,7 @@
 <script lang="ts" setup>
 import Button from '../UserInterface/Button.vue';
 
-const props = defineProps<{ actionName: string, displayName?: string, callback: CallableFunction, onClose: () => void, onCancel: () => void }>();
+const props = defineProps<{ actionName: string, targetName?: string, callback: CallableFunction, onClose: () => void, onCancel: () => void }>();
 
 const modal = ref<{ close: () => void }>();
 

components/UserInterface/ContextMenu.vue

@@ -1,17 +1,23 @@
 <template>
 	<div id="context-menu">
-		<button v-for="item of props.menuItems" class="context-menu-item"
+		<template v-for="(section, index) of props.menuSections">
-				:class="'context-menu-item-' + item.type"
+			<div class="context-menu-section">
-				@click="runCallback(item)">
+				<button v-for="item of section.items" class="context-menu-item"
-			{{ item.name }} <Icon v-if="item.icon" :name="item.icon" />
+						:class="'context-menu-item-' + item.type"
-		</button>
+						@click="runCallback(item)">
+					{{ item.name }} <Icon v-if="item.icon" :name="item.icon" />
+				</button>
+			</div>
+			<VerticalSpacer v-if="index < props.menuSections.length - 1" class="context-menu-section-spacer" />
+		</template>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
+import type { ContextMenuInterface, ContextMenuItem, ContextMenuSection } from '~/types/interfaces';
+import VerticalSpacer from './VerticalSpacer.vue';
 
-const props = defineProps<{ menuItems: ContextMenuItem[], pointerX: number, pointerY: number }>();
+const props = defineProps<{ menuSections: ContextMenuSection[], pointerX: number, pointerY: number }>();
 
 onMounted(() => {
 	const contextMenu = document.getElementById("context-menu");
@@ -42,7 +48,7 @@ function runCallback(item: ContextMenuItem) {
 	flex-direction: column;
 	width: 10rem;
 	border: .1rem solid var(--reply-text-color);
-	background-color: var(--sidebar-highlighted-background-color);
+	background-color: var(--popup-background-color);
 	text-align: left;
 	z-index: 100;
 }
@@ -69,4 +75,8 @@ function runCallback(item: ContextMenuItem) {
 	color: var(--danger-text-color);
 }
 
+.context-menu-section-spacer {
+	margin: 0 !important;
+}
+
 </style>

components/UserInterface/ResizableSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div ref="resizableSidebar" class="resizable-sidebar" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
+	<div ref="resizableSidebar" class="resizable-sidebar" @contextmenu="showContextMenu($event, contextMenu, menuSections)"
 			:style="{
 				'width': storedWidth ? storedWidth : props.width,
 				'min-width': props.minWidth,
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
+import type { ContextMenuInterface, ContextMenuItem, ContextMenuSection } from '~/types/interfaces';
 
 const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[], localStorageName?: string }>();
 
@@ -33,14 +33,19 @@ const storedWidth = ref<string>();
 
 const contextMenu = useState<ContextMenuInterface>("contextMenu");
 
-const menuItems: ContextMenuItem[] = [
+const menuSections: ContextMenuSection[] = [{
-	{ name: "Reset", type: "normal", callback: () => {
+	items: [
-		const defaultWidth = props.width ?? props.minWidth;
+		{
-		resizableSidebar.value!.style.width = defaultWidth;
+			name: "Reset", type: "normal", callback: () => {
-		if (props.localStorageName) {
+			const defaultWidth = props.width ?? props.minWidth;
-			localStorage.setItem(props.localStorageName, defaultWidth);
+			resizableSidebar.value!.style.width = defaultWidth;
+				if (props.localStorageName) {
+					localStorage.setItem(props.localStorageName, defaultWidth);
+				}
+			}
 		}
-	} }
+	]
+}
 ]
 
 onMounted(() => {

types/interfaces.ts

@@ -115,11 +115,16 @@ export interface ContextMenuItem {
 	callback: (...args: any[]) => any;
 }
 
+export interface ContextMenuSection {
+	name?: string
+	items: ContextMenuItem[]
+}
+
 export interface ContextMenuInterface {
 	show: boolean,
 	pointerX: number,
 	pointerY: number,
-	items: ContextMenuItem[]
+	sections: ContextMenuSection[]
 }
 
 export interface NavbarItem {

utils/createMemberContextMenuItems.ts

@@ -1,8 +1,12 @@
 import { Permission } from "~/types/enums";
-import type { ContextMenuItem, GuildMemberResponse, IConfirmationModal } from "~/types/interfaces";
+import type { ContextMenuSection, GuildMemberResponse, IConfirmationModal } from "~/types/interfaces";
 
 export default async (member: GuildMemberResponse, guildId: string, confirmationModal?: Ref<IConfirmationModal | undefined>) => {
-	const menuItems: ContextMenuItem[] = [];
+	const menuSections: ContextMenuSection[] = [];
+	const moderationSection: ContextMenuSection = {
+		name: "Moderation",
+		items: []
+	};
 
 	const { fetchMeMember } = useApi();
 	const me = useState<GuildMemberResponse | undefined>("me");
@@ -19,7 +23,7 @@ export default async (member: GuildMemberResponse, guildId: string, confirmation
 		console.log("[MENUITEM] member is not me");
 		if (hasPermission(me.value, Permission.KickMember)) {
 			console.log("[MENUITEM] has kick member permission");
-			menuItems.splice(Math.min(3, menuItems.length), 0, {
+			moderationSection.items.splice(Math.min(3, menuSections.length), 0, {
 				name: "Kick",
 				icon: "lucide:user-x",
 				type: "danger",
@@ -41,7 +45,7 @@ export default async (member: GuildMemberResponse, guildId: string, confirmation
 
 		if (hasPermission(me.value, Permission.BanMember)) {
 			console.log("[MENUITEM] has ban permission");
-			menuItems.splice(Math.min(4, menuItems.length), 0, {
+			moderationSection.items.splice(Math.min(4, menuSections.length), 0, {
 				name: "Ban (WIP)",
 				icon: "lucide:ban",
 				type: "danger",
@@ -62,6 +66,8 @@ export default async (member: GuildMemberResponse, guildId: string, confirmation
 		}
 	}
 
-	console.log("[MENUITEM] returning menu items:", menuItems);
+	menuSections.push(moderationSection);
-	return menuItems;
+
+	console.log("[MENUITEM] returning menu items:", menuSections);
+	return menuSections;
 }

utils/removeContextMenu.ts

@@ -6,7 +6,7 @@ export default (contextMenu: Ref<ContextMenuInterface>) => {
 		show: false,
 		pointerX: 0,
 		pointerY: 0,
-		items: []
+		sections: []
 	}
 	console.log("hidden context menu");
 }

utils/showContextMenu.ts

@@ -1,17 +1,17 @@
 import { render } from "vue";
 import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
-import type { ContextMenuInterface, ContextMenuItem } from "~/types/interfaces";
+import type { ContextMenuInterface, ContextMenuItem, ContextMenuSection } from "~/types/interfaces";
 
-export default (e: MouseEvent | PointerEvent, contextMenu: ContextMenuInterface, menuItems: ContextMenuItem[]) => {
+export default (e: MouseEvent | PointerEvent, contextMenu: ContextMenuInterface, sections: ContextMenuSection[]) => {
   e.preventDefault();
   e.stopPropagation();
-  console.log("Menu items:", menuItems);
+  console.log("Menu sections:", sections);
-  if (menuItems.length) {
+  if (sections.length) {
     console.log("Showing context menu");
     contextMenu.show = true;
     contextMenu.pointerX = e.clientX;
 	contextMenu.pointerY = e.clientY;
-    contextMenu.items = menuItems;
+    contextMenu.sections = sections;
     console.log("Showed");
   }
 }