Migration to nuxt 4

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

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

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import type { Character } from "@@/models/Characters"
+import type { RPGDate } from "@@/models/Date"
+import { useCalendar } from "@/stores/CalendarStore"
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip"
+import { Button } from "~/components/ui/button"
+import { PhArrowSquareOut, PhPlant, PhSkull } from "@phosphor-icons/vue"
+
+const props = defineProps<{
+  character: Character
+}>()
+
+defineEmits<{
+  "query:date-jump": [payload: RPGDate]
+}>()
+
+const { getFormattedDateTitle } = useCalendar()
+
+console.log(props.character.birth)
+</script>
+
+<template>
+  <div class="block w-full text-left py-3 px-4 border-[1px] border-border rounded-sm">
+    <div class="grid gap-2">
+      <div class="flex gap-2">
+        <h2 class="font-bold">
+          {{ character.name }}
+        </h2>
+        <div v-if="character.wiki">
+          <Button variant="link" size="xs" as-child>
+            <a :href="character.wiki" target="_blank">
+              Wiki
+              <PhArrowSquareOut size="16" weight="fill" />
+            </a>
+          </Button>
+        </div>
+      </div>
+
+      <menu class="flex gap-2 border-[1px] border-border rounded-sm w-fit">
+        <li v-if="character.birth">
+          <TooltipProvider :delay-duration="100">
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  @click="$emit('query:date-jump', character.birth!)"
+                >
+                  <PhPlant size="16" weight="fill" />
+                  {{ getFormattedDateTitle(character.birth, true) }}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent :side="'bottom'" :align="'end'" :align-offset="20">
+                <p>Date de naissance</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </li>
+        <span v-if="character.birth && character.death">-</span>
+        <li v-if="character.death">
+          <TooltipProvider :delay-duration="100">
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  @click="$emit('query:date-jump', character.death!)"
+                >
+                  <PhSkull size="16" weight="fill" />
+                  {{ getFormattedDateTitle(character.death, true) }}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent :side="'bottom'" :align="'start'" :align-offset="20">
+                <p>Date de décès</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </li>
+      </menu>
+
+      <hr v-if="character.description" class="border-white opacity-25" >
+
+      <div v-if="character.description" class="text-sm">
+        <span class="opacity-75">
+          {{ character.description }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

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>

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

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { isCharacter, type Character } from "@@/models/Characters"
+import type { RPGDate, RPGDateOrder } from "@@/models/Date"
+import { useCalendar } from "@/stores/CalendarStore"
+import { computed } from "vue"
+import { isCalendarEvent, type CalendarEvent } from "@@/models/CalendarEvent"
+import type { SearchMode } from "../../SearchMode"
+
+import CharacterCallout from "./CharacterCallout.vue"
+import EventCallout from "./EventCallout.vue"
+
+const props = defineProps<{
+  results: (Character | CalendarEvent)[]
+  currentEntity: SearchMode
+  order: RPGDateOrder
+  startAt: number
+  endAt: number
+  limit?: number
+}>()
+
+const emit = defineEmits(["jumpedToDate"])
+
+const { jumpToDate, compareDates } = useCalendar()
+
+function handleJumpToDate(date?: RPGDate) {
+  if (!date) return
+
+  jumpToDate(date)
+  emit("jumpedToDate")
+}
+
+// Initial sorting of the results
+const sortedResults = computed(() => {
+  return [...props.results].sort((a, b) => {
+    let firstDate: RPGDate
+    let secondDate: RPGDate
+
+    if (isCalendarEvent(a)) {
+      firstDate = a.startDate
+    } else if (isCharacter(a) && a.birth) {
+      firstDate = a.birth
+    } else {
+      return 1
+    }
+
+    if (isCalendarEvent(b)) {
+      secondDate = b.startDate
+    } else if (isCharacter(b) && b.birth) {
+      secondDate = b.birth
+    } else {
+      return -1
+    }
+
+    return compareDates(firstDate, secondDate, props.order)
+  })
+})
+
+// Page the sorted results
+const pagedResults = computed(() => sortedResults.value.slice(props.startAt, props.endAt))
+</script>
+
+<template>
+  <ul class="grid gap-3 md:gap-4 pl-4 pr-6 md:pl-8 md:pr-12">
+    <li v-for="r in pagedResults" :key="isCalendarEvent(r) ? r.title : r.name">
+      <EventCallout v-if="isCalendarEvent(r)" :event="r" @query:date-jump="handleJumpToDate" />
+
+      <CharacterCallout
+        v-else-if="isCharacter(r)"
+        :character="r"
+        @query:date-jump="handleJumpToDate"
+      />
+    </li>
+  </ul>
+</template>