Migration to nuxt 4

Used codemods CLI and reworked most alias'd path that stopped working

app/components/calendar/search/lists/EventCallout.vue

@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils"
+import type { RPGDate } from "@@/models/Date"
+import type { CalendarEvent } from "@@/models/CalendarEvent"
+
+import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from "@phosphor-icons/vue"
+
+const props = defineProps<{
+  event: CalendarEvent
+}>()
+
+defineEmits<{
+  "query:date-jump": [payload: RPGDate]
+}>()
+
+const { getRelativeString, defaultDate, getFormattedDateTitle } = useCalendar()
+
+const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
+const dateDuration = computed<string | null>(() => props.event.endDate ? getRelativeString(props.event.startDate, props.event.endDate, "compact") : null)
+</script>
+
+<template>
+  <button
+    class="event-callout group relative block w-full text-left py-2 px-3 md:py-3 md:px-4 cursor-pointer transition-colors"
+    :class="cn(
+      event.category ? `element-${event.category.color}` : '',
+      {
+        'pt-4 is-hidden': event.hidden,
+      })"
+    @click="$emit('query:date-jump', event.startDate)"
+  >
+    <div class="flex gap-2 items-center mb-1">
+      <h2 class="font-semibold md:font-bold md:text-lg underline-offset-4 group-hover:underline">
+        {{ event.title }}
+      </h2>
+      <div v-if="event.wiki">
+        <UiButton variant="link" size="xs" as-child class="text-inherit">
+          <a :href="event.wiki" target="_blank">
+            Wiki
+            <PhArrowSquareOut size="16" weight="fill" />
+          </a>
+        </UiButton>
+      </div>
+    </div>
+
+    <div class="flex gap-2 items-center justify-between mb-2 md:mb-1">
+      <template v-if="!event.endDate">
+        <p class="font-semibold text-sm opacity-75">
+          {{ getFormattedDateTitle(event.startDate, true) }}
+        </p>
+      </template>
+      <template v-else>
+        <p class="font-semibold text-sm opacity-75">
+          {{
+            $t('entity.calendar.date.fromTo',
+              {
+                startDate: getFormattedDateTitle(event.startDate, true),
+                endDate: getFormattedDateTitle(event.endDate, true)
+              }
+            )
+          }}
+        </p>
+      </template>
+      <div v-if="event.hidden" class="flex justify-end">
+        <UiTooltipProvider :delay-duration="250">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiBadge class="flex gap-1">
+                <PhEye size="16" weight="fill" /> {{ $t('entity.calendar.event.isHidden') }}
+              </UiBadge>
+            </UiTooltipTrigger>
+            <UiTooltipContent>
+              <p>
+                {{ $t('entity.calendar.event.hiddenTooltip') }}
+              </p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+      </div>
+    </div>
+
+    <div class="mb-1 flex gap-x-2 items-center">
+      <template v-if="event.location">
+        <p class="w-fit text-xs md:text-sm italic opacity-75 flex items-center gap-1">
+          <PhMapPinArea size="16" weight="fill" /> {{ event.location }}
+        </p>
+      </template>
+      <p class="w-fit text-xs md:text-sm italic opacity-75 flex items-center gap-1">
+        <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
+      </p>
+      <template v-if="dateDuration">
+        <p class="w-fit text-xs md:text-sm italic opacity-75 flex items-center gap-1">
+          <PhHourglassMedium size="16" weight="fill" /> {{ $t('entity.calendar.date.while', { duration: dateDuration } )}}
+        </p>
+      </template>
+    </div>
+
+    <div v-if="event.category || event.secondaryCategories" class="absolute top-3 right-4">
+      <ul class="flex gap-1">
+        <li v-if="event.category">
+          <UiBadge class="mix-blend-luminosity font-bold bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
+            {{ event.category?.name }}
+          </UiBadge>
+        </li>
+
+        <li v-for="cat in event.secondaryCategories" :key="cat.id">
+          <UiBadge class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
+            {{ cat.name }}
+          </UiBadge>
+        </li>
+      </ul>
+    </div>
+
+    <div v-if="event.description" class="text-xs md:text-sm">
+      <hr class="my-3 md:my-2 border-white opacity-50" >
+      <span class="opacity-75">
+        {{ event.description }}
+      </span>
+    </div>
+  </button>
+</template>