Merge pull request 'More improvements to context menu' (#69) from context-menu-ban-kick into main

Reviewed-on: #69
Reviewed-by: Twig <git@beaver.mom>

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,22 +12,29 @@ import type { ContextMenuInterface } from './types/interfaces';
 
 const banner = useState("banner", () => false);
 
-const contextMenu = useState<ContextMenuInterface>("contextMenu");
+const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, sections: [] }));
 
 onMounted(() => {
 	loadPreferredThemes()
 
-	document.removeEventListener("contextmenu", contextMenuHandler);
 	document.addEventListener("contextmenu", (e) => {
-		if (e.target instanceof Element && e.target.classList.contains("default-contextmenu")) return;
+		if (contextMenu.value.show) {
-		contextMenuHandler(e);
+			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.closest("#context-menu")) return;
+		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);
-		removeContextMenu(contextMenu);
+		if (e.button != 2 && contextMenu.value.show) {
+			console.log("context menu is shown, hiding");
+			removeContextMenu(contextMenu);
+		}
 		if (e.target instanceof HTMLElement && e.target.classList.contains("message-text") && e.target.contentEditable) {
 			e.target.contentEditable = "false";
 		}
@@ -52,14 +59,6 @@ onMounted(() => {
 	});
 });
 
-function contextMenuHandler(e: MouseEvent) {
-	e.preventDefault();
-	//console.log("Opened context menu");
-	//createContextMenu(e, [
-	//	{ name: "Wah", callback: () => { return } }
-	//]);
-}
-
 </script>
 
 <style>

components/Guild/MemberEntry.vue

@@ -1,17 +1,20 @@
 <template>
-    <div class="member-item" @click.prevent="showModalPopup" tabindex="0">
+    <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) }}
         </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 { GuildMemberResponse } from '~/types/interfaces';
+import type { GuildMemberResponse, IConfirmationModal } from '~/types/interfaces';
 
 const { getDisplayName } = useProfile()
 
@@ -19,8 +22,12 @@ const props = defineProps<{
     member: GuildMemberResponse
 }>();
 
+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
 }
@@ -28,9 +35,18 @@ function showModalPopup() {
 function hideModalPopup() {
     modalPopupVisible.value = false
 }
+
+function resetConfirmationModal() {
+	console.log("[CONFIRM] resetting");
+	if (confirmationModal) {
+		confirmationModal.value = { show: false, actionName: "", callback: () => {} };
+	}
+}
+
 </script>
 
 <style>
+
 .member-item {
 	display: flex;
 	margin-top: .5em;
@@ -49,6 +65,7 @@ function hideModalPopup() {
 }
 
 .member-display-name {
+	cursor: pointer;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }

components/Message.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
+	<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,11 +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"/>
+			<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)}`">
+				<span class="message-author-username" tabindex="0" :style="`color: ${generateIrcColor(props.message.member.user.uuid)}`"
+						@contextmenu="showContextMenu($event, memberMenuSections)">
 					{{ getDisplayName(props.message.member) }}
 				</span>
 				<span class="message-date" :title="date.toString()">
@@ -45,7 +46,7 @@
 			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 		</div>
 	</div>
-	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
+	<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">
@@ -58,6 +59,9 @@
 			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks"/>
 		</div>
 	</div>
+	<ModalConfirmation v-if="confirmationModal && confirmationModal.show" :action-name="confirmationModal.actionName"
+		:target-name="getDisplayName(props.message.member)" :callback="confirmationModal.callback"
+		:onClose="resetConfirmationModal" :onCancel="resetConfirmationModal" />
 </template>
 
 <script lang="ts" setup>
@@ -66,17 +70,17 @@ 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';
+import type { ContextMenuSection, IConfirmationModal } from '~/types/interfaces';
 
 const { getDisplayName } = useProfile()
 const { getUser } = useAuth()
 
+const route = useRoute();
+
 const props = defineProps<MessageProps>();
 
 const me = await getUser()
 
-const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
-
 const messageElement = ref<HTMLDivElement>();
 
 const dateHidden = ref<boolean>(true);
@@ -85,6 +89,10 @@ const date = uuidToDate(props.message.uuid);
 
 const currentDate: Date = new Date()
 
+const confirmationModal = ref<IConfirmationModal>();
+
+const memberMenuSections = ref<ContextMenuSection[]>([]);
+
 console.log("[MSG] message to render:", props.message);
 console.log("author:", props.message.member);
 console.log("[MSG] reply message:", props.replyMessage);
@@ -152,25 +160,39 @@ onMounted(async () => {
 	};
 
 	console.log("media links:", mediaLinks);
+
+	console.log("[CONFIRM] modal:", confirmationModal.value);
+	memberMenuSections.value = await createMemberContextMenuItems(props.message.member, route.params.serverId as string, confirmationModal);
 });
 
 //function toggleTooltip(e: Event) {
 //	showHover.value = !showHover.value;
 //}
 
-const menuItems: 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) */ } });
-	menuItems.splice(1, 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: () => {} });
-	menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
+}
+
+if (regularSection.items.length) {
+	messageMenuSections.push(regularSection);
 }
 
 function getDayDifference(date1: Date, date2: Date) {
@@ -184,6 +206,13 @@ function getDayDifference(date1: Date, date2: Date) {
     return Math.round(dayDifference);
 }
 
+function resetConfirmationModal() {
+	console.log("[CONFIRM] resetting");
+	if (confirmationModal) {
+		confirmationModal.value = { show: false, actionName: "", callback: () => {} };
+	}
+}
+
 </script>
 
 <style scoped>
@@ -243,6 +272,11 @@ function getDayDifference(date1: Date, date2: Date) {
 	max-height: 2.5em;
 	min-width: 2.5em;
 	max-width: 2.5em;
+	cursor: pointer;
+}
+
+.message-author-username {
+	cursor: pointer;
 }
 
 .left-column {

components/Modal/Base.vue

@@ -25,6 +25,11 @@ onMounted(() => {
     if (props.onCancel) dialog.value.addEventListener("cancel", props.onCancel);
   }
 });
+
+function close() { dialog.value?.close() }
+
+defineExpose({ close });
+
 </script>
 
 <style scoped>

components/Modal/Confirmation.vue

@@ -0,0 +1,54 @@
+<template>
+	<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.targetName }}?</h1>
+			</div>
+			<div class="confirmation-modal-buttons">
+				<Button :variant="'normal'" :text="'Cancel'" @click="closeModal()" />
+				<Button :variant="'scary'" :text="'Confirm'" :callback="props.callback" />
+			</div>
+		</div>
+	</ModalBase>
+</template>
+
+<script lang="ts" setup>
+import Button from '../UserInterface/Button.vue';
+
+const props = defineProps<{ actionName: string, targetName?: string, callback: CallableFunction, onClose: () => void, onCancel: () => void }>();
+
+const modal = ref<{ close: () => void }>();
+
+function closeModal() {
+	const test = document.getElementsByClassName("confirmation-modal")[0];
+	console.log("[CONFIRM] modal rah:", test);
+	if (modal.value) {
+		modal.value.close();
+	}
+}
+
+</script>
+
+<style>
+
+.confirmation-modal-body {
+	display: flex;
+	flex-direction: column;
+	background-color: var(--modal-background-color);
+	align-items: center;
+	text-align: center;
+	padding: 1rem;
+	color: var(--text-color);
+	border: .1rem solid var(--primary-color);
+}
+
+.confirmation-modal-buttons {
+	display: flex;
+	gap: 1rem;
+}
+
+.confirmation-modal-message {
+	font-size: 1.5em;
+}
+
+</style>

components/UserInterface/ContextMenu.vue

@@ -1,23 +1,33 @@
 <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");
 	if (contextMenu) {
 		contextMenu.style.left = props.pointerX.toString() + "px";
 		contextMenu.style.top = props.pointerY.toString() + "px";
+		const rect = contextMenu.getBoundingClientRect();
+		if (rect.right > (window.innerWidth || document.documentElement.clientWidth)) {
+			contextMenu.style.left = (props.pointerX - contextMenu.clientWidth).toString() + "px";
+		}
 	}
 });
 
@@ -38,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;
 }
@@ -65,4 +75,8 @@ function runCallback(item: ContextMenuItem) {
 	color: var(--danger-text-color);
 }
 
+.context-menu-section-spacer {
+	margin: 0 !important;
+}
+
 </style>

components/UserInterface/ResizableSidebar.vue

@@ -8,20 +8,22 @@
 				'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>
 </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 }>();
 
@@ -31,16 +33,19 @@ const resizableSidebar = ref<HTMLDivElement>();
 const widthResizer = ref<HTMLDivElement>();
 const storedWidth = ref<string>();
 
-const contextMenu = useState<ContextMenuInterface>("contextMenu");
+const menuSections: ContextMenuSection[] = [{
-
+	items: [
-const menuItems: ContextMenuItem[] = [
+		{
-	{ name: "Reset", type: "normal", callback: () => {
+			name: "Reset", type: "normal", callback: () => {
-		const defaultWidth = props.width ?? props.minWidth;
+			const defaultWidth = props.width ?? props.minWidth;
-		resizableSidebar.value!.style.width = defaultWidth;
+			resizableSidebar.value!.style.width = defaultWidth;
-		if (props.localStorageName) {
+				if (props.localStorageName) {
-			localStorage.setItem(props.localStorageName, defaultWidth);
+					localStorage.setItem(props.localStorageName, defaultWidth);
+				}
+			}
 		}
-	} }
+	]
+}
 ]
 
 onMounted(() => {
@@ -48,11 +53,8 @@ onMounted(() => {
 
 	if (resizableSidebar.value && widthResizer.value) {
 		widthResizer.value.addEventListener("pointerdown", (e) => {
+			if (e.button != 0) return;
 			e.preventDefault();
-			if (e.button == 2) {
-				showContextMenu(e, contextMenu.value, menuItems);
-				return
-			};
 			document.body.style.cursor = "ew-resize";
 			function handleMove(pointer: PointerEvent) {
 				if (resizableSidebar.value) {

composables/api.ts

@@ -25,6 +25,17 @@ export const useApi = () => {
 		return await fetchWithApi("/me")
 	}
 
+	async function fetchMeMember(guildId: string): Promise<GuildMemberResponse | undefined> {
+		const { getUser } = useAuth();
+
+		const me = await getUser();
+		if (me) {
+			const members = await fetchMembers(guildId);
+			const meMember = members.objects.find(member => member.user.uuid == me.uuid);
+			return meMember;
+		}
+	}
+
 	async function fetchChannels(guildId: string): Promise<ChannelResponse[]> {
 		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/channels`));
 	}
@@ -48,6 +59,14 @@ export const useApi = () => {
 		return await fetchWithApi(`/guilds/${guildId}/members/${memberId}`);
 	}
 
+	async function kickMember(memberId: string) {
+		return await fetchWithApi(`/members/${memberId}`, { method: "DELETE" });
+	}
+
+	async function banMember(guildId: string, memberId: string) {
+		//
+	}
+	
 	async function fetchUsers() {
 		return await fetchWithApi(`/users`);
 	}
@@ -114,10 +133,13 @@ export const useApi = () => {
 		fetchGuild,
 		fetchMyGuilds,
 		fetchMe,
+		fetchMeMember,
 		fetchChannels,
 		fetchChannel,
 		fetchMembers,
 		fetchMember,
+		kickMember,
+		banMember,
 		fetchUsers,
 		fetchUser,
 		fetchFriends,

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;

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 {
@@ -140,3 +145,8 @@ export interface NavbarOptions {
 	isDirectMessages?: boolean
 }
 
+export interface IConfirmationModal {
+	show: boolean,
+	actionName: string,
+	callback: CallableFunction
+}

utils/createMemberContextMenuItems.ts

@@ -0,0 +1,70 @@
+import { Permission } from "~/types/enums";
+import type { ContextMenuSection, GuildMemberResponse, IConfirmationModal } from "~/types/interfaces";
+
+export default async (member: GuildMemberResponse, guildId: string, confirmationModal?: Ref<IConfirmationModal | undefined>) => {
+	const menuSections: ContextMenuSection[] = [];
+	const moderationSection: ContextMenuSection = {
+		name: "Moderation",
+		items: []
+	};
+
+	const me = useState<GuildMemberResponse | undefined>("me");
+	const { banMember, kickMember } = useApi();
+
+	console.log("[MENUITEM] hi");
+	console.log("[MENUITEM] member:", member.user.username);
+	console.log("[MENUITEM] me:", me.value?.user.username);
+	if (me.value && member.uuid != me.value.uuid) {
+		console.log("[MENUITEM] member is not me");
+		if (hasPermission(me.value, Permission.KickMember)) {
+			console.log("[MENUITEM] has kick member permission");
+			moderationSection.items.push({
+				name: "Kick",
+				icon: "lucide:user-x",
+				type: "danger",
+				callback: async () => {
+					if (confirmationModal) {
+						console.log("[CONFIRM] HEYO THERE!!");
+						confirmationModal.value = {
+							actionName: "kick",
+							callback: async () => await kickMember(member.uuid),
+							show: true
+						}
+					} else {
+						console.log("[CONFIRM] no modal");
+						await kickMember(member.uuid)
+					}
+				}
+			});
+		}
+
+		if (hasPermission(me.value, Permission.BanMember)) {
+			console.log("[MENUITEM] has ban permission");
+			moderationSection.items.push({
+				name: "Ban (WIP)",
+				icon: "lucide:ban",
+				type: "danger",
+				callback: async () => {
+					if (confirmationModal) {
+						console.log("[CONFIRM] HEYO THERE!! 2");
+						confirmationModal.value = {
+							actionName: "ban",
+							callback: async () => await banMember(member.guild_uuid, member.uuid),
+							show: true
+						}
+					} else {
+						console.log("[CONFIRM] no modal 2");
+						await banMember(member.guild_uuid, member.uuid)
+					}
+		 		}
+			});
+		}
+	}
+
+	if (moderationSection.items.length) {
+		menuSections.push(moderationSection);
+	}
+
+	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,12 +1,22 @@
 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, sections: ContextMenuSection[]) => {
-  console.log("Showing context menu");
+	e.preventDefault();
-  contextMenu.show = true;
+	e.stopPropagation();
-  contextMenu.pointerX = e.clientX;
+	const contextMenu = useState<ContextMenuInterface>("contextMenu");
-  contextMenu.pointerY = e.clientY;
+	if (contextMenu.value.show) {
-  contextMenu.items = menuItems;
+		removeContextMenu(contextMenu);
-  console.log("Showed");
+	} 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");
+		}
+	}
 }