Migration to Nuxt v4 file structure and dependencies update

app/components/base/HoverCard.vue

@@ -0,0 +1,36 @@
+<template>
+    <HoverCardRoot :open-delay="delay" @update:open="(...args) => emits('open', ...args)">
+        <HoverCardTrigger class="inline-block cursor-help outline-none">
+            <slot></slot>
+        </HoverCardTrigger>
+        <HoverCardPortal v-if="!disabled">
+            <HoverCardContent :class="$attrs.class" :side="side" :align="align" avoidCollisions :collisionPadding="20" class="max-h-[var(--radix-hover-card-content-available-height)] data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
+                <slot name="content"></slot>
+                <HoverCardArrow class="fill-light-35 dark:fill-dark-35" />
+            </HoverCardContent>
+        </HoverCardPortal>
+    </HoverCardRoot>
+</template>
+
+<script setup lang="ts">
+const { delay = 500, disabled = false, side = 'bottom', align = 'center', triggerKey } = defineProps<{
+    delay?: number
+    disabled?: boolean
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    align?: 'start' | 'center' | 'end'
+    triggerKey?: string
+}>();
+
+const emits = defineEmits(['open']);
+const canOpen = ref(true);
+
+if(triggerKey)
+{
+    const magicKeys = useMagicKeys();
+    const keys = magicKeys[triggerKey];
+
+    watch(keys, (v) => {
+        canOpen.value = v;
+    }, { immediate: true, });
+}
+</script>