feat: Updated context menu's

package.json

@@ -35,12 +35,15 @@
 		"@astrojs/ts-plugin": "^1.1.3",
 		"@astrojs/vercel": "^5.0.1",
 		"@astrojs/vue": "^3.0.0",
+		"@nanostores/vue": "^0.10.0",
 		"@tauri-apps/api": "^1.5.0",
 		"@vercel/blob": "^0.13.0",
+		"@vueuse/core": "^10.4.1",
 		"astro": "^3.2.2",
 		"flowbite": "^1.8.1",
 		"flowbite-typography": "^1.0.3",
 		"jose": "^4.15.1",
+		"nanostores": "^0.9.3",
 		"tailwind-scrollbar": "^3.0.5",
 		"tailwindcss": "^3.3.3",
 		"typescript": "^5.2.2",

src/components/base/confirmModal.vue

@@ -0,0 +1,86 @@
+<template>
+	<BaseModal ref="modal" class="text-center">
+		<svg
+			class="mx-auto mb-4 h-12 w-12 text-gray-400 dark:text-gray-200"
+			aria-hidden="true"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 20 20"
+		>
+			<path
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+			/>
+		</svg>
+		<h3 class="mx-auto mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+			<slot />
+		</h3>
+		<div class="flex">
+			<button
+				type="button"
+				@click.prevent="
+					modal?.close();
+					$emit('confirm');
+				"
+				:class="
+					classes +
+					' ml-auto mr-2 inline-flex items-center rounded-lg px-5 py-2.5 text-center text-sm font-medium text-white focus:outline-none focus:ring-4'
+				"
+			>
+				{{ t('yesImSure') }}
+			</button>
+			<button
+				type="button"
+				@click.prevent="modal?.close()"
+				class="mr-auto rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-600"
+			>
+				{{ t('noCancel') }}
+			</button>
+		</div>
+	</BaseModal>
+</template>
+
+<script lang="ts">
+export enum ConfirmModalType {
+	Danger = 'danger',
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, type PropType } from 'vue';
+import BaseModal from '@components/base/modal.vue';
+import { t } from '@lib/i18n';
+
+const emit = defineEmits(['confirm']);
+const props = defineProps({
+	type: {
+		type: String as PropType<ConfirmModalType>,
+		required: true,
+	},
+});
+
+defineExpose({
+	open,
+	close,
+});
+
+const modal = ref<InstanceType<typeof BaseModal>>();
+
+const classes = computed(() => {
+	switch (props.type) {
+		case ConfirmModalType.Danger:
+			return 'bg-red-600 hover:bg-red-800 focus:ring-red-300 dark:focus:ring-red-800';
+	}
+});
+
+function open() {
+	modal.value?.open();
+}
+
+function close() {
+	modal.value?.close(false);
+}
+</script>

src/components/base/contextMenu.vue

@@ -0,0 +1,57 @@
+<template>
+	<div
+		v-if="showMenu"
+		ref="menu"
+		tabindex="-1"
+		:style="{ top: `${top}px`, left: `${left}px` }"
+		class="absolute z-10 block w-44 divide-y divide-gray-100 rounded-lg bg-white shadow dark:divide-gray-600 dark:bg-gray-700"
+	>
+		<slot></slot>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import bus from '@lib/contextMenu';
+
+const menu = ref<HTMLElement | null>(null);
+const showMenu = ref(false);
+const top = ref(0);
+const left = ref(0);
+
+onClickOutside(menu, closeMenu);
+
+function setMenu(x: number, y: number) {
+	left.value = x;
+	top.value = y;
+}
+
+function closeMenu() {
+	showMenu.value = false;
+}
+
+function openMenu(e: MouseEvent) {
+	showMenu.value = true;
+
+	nextTick(() => {
+		if (!menu.value) return;
+		if (!e.currentTarget || !(e.currentTarget instanceof HTMLElement)) return;
+
+		const currentTargetRect = e.currentTarget.getBoundingClientRect();
+		const offsetX = e.pageX - currentTargetRect.left;
+		const offsetY = e.pageY - currentTargetRect.top;
+
+		setMenu(offsetX, offsetY);
+
+		bus.off(closeMenu);
+		bus.emit();
+		bus.on(closeMenu);
+	});
+}
+
+defineExpose({
+	openMenu,
+	closeMenu,
+});
+</script>