Base nuxt move after refactoring until no warnings

There still exists an issue with one Adobe led library ; @international-dates don't seem to compile their sourcemaps correctly.
I don't think this is something I can fix however, and it may require hacks and workarounds to solve from what I've gathered

components/calendar/search/lists/CharacterCallout.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { Character } from '@/models/Characters'
+import type { LeimDate } 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'
+
+defineProps<{
+  character: Character
+}>()
+
+defineEmits<{
+  (e: 'query:date-jump', payload: LeimDate): void
+}>()
+
+const { getFormattedDateTitle } = useCalendar()
+</script>
+
+<template>
+  <div class="block w-full text-left py-3 px-4 border-[1px] border-slate-700 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-slate-700 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>

components/calendar/search/lists/EventCallout.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import { getRelativeString, type LeimDate } from '@/models/Date'
+import type { CalendarEvent } from '@/models/Events'
+import { useCalendar } from '@/stores/CalendarStore'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { PhArrowSquareOut, PhHourglassMedium, PhAlarm } from '@phosphor-icons/vue'
+
+const props = defineProps<{
+  event: CalendarEvent
+}>()
+
+defineEmits<{
+  (e: 'query:date-jump', payload: LeimDate): void
+}>()
+
+const { defaultDate, getFormattedDateTitle } = useCalendar()
+
+const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
+const dateDuration: string | null = props.event.endDate
+  ? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
+  : null
+</script>
+
+<template>
+  <button
+    class="relative block w-full text-left py-3 px-4 rounded-sm transition-colors"
+    :class="{
+      'text-white bg-slate-600 hover:bg-slate-700': !event.category,
+      'text-white bg-lime-600 hover:bg-lime-700': event.category === 'naissance',
+      'text-white bg-stone-500 hover:bg-stone-700': event.category === 'mort',
+      'text-white bg-orange-600 hover:bg-orange-700': event.category === 'catastrophe',
+      'text-white bg-pink-600 hover:bg-pink-700': event.category === 'catastrophe naturelle',
+      'text-white bg-sky-600 hover:bg-sky-700': event.category === 'législation',
+      'text-white bg-purple-600 hover:bg-purple-700': event.category === 'religion',
+      'text-white bg-emerald-600 hover:bg-emerald-700': event.category === 'joueurs',
+      'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category === 'inauguration',
+      'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category === 'invention',
+      'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category === 'science',
+      'text-slate-900 bg-white hover:bg-yellow-200': event.category === 'bénédiction',
+      'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category === 'découverte',
+      'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category === 'exploration',
+      'text-white bg-amber-600 hover:bg-amber-700': event.category === 'construction',
+      'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category === 'arcanologie',
+      'text-white bg-rose-600 hover:bg-rose-700': event.category === 'criminalité',
+      'text-white bg-stone-600 hover:bg-stone-700': event.category === 'scandale',
+      'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category === 'commerce'
+    }"
+    @click="$emit('query:date-jump', event.startDate)"
+  >
+    <div class="flex gap-2 items-center">
+      <h2 class="font-bold">
+        {{ event.title }}
+      </h2>
+      <div v-if="event.wiki">
+        <Button variant="link" size="xs" as-child class="text-inherit">
+          <a :href="event.wiki" target="_blank">
+            Wiki
+            <PhArrowSquareOut size="16" weight="fill" />
+          </a>
+        </Button>
+      </div>
+    </div>
+
+    <div class="mb-1">
+      <template v-if="!event.endDate">
+        <p class="col-span-2 font-semibold text-sm opacity-75">
+          {{ getFormattedDateTitle(event.startDate, true) }}
+        </p>
+      </template>
+      <template v-else>
+        <p class="col-span-2 font-semibold text-sm opacity-75">
+          Du {{ getFormattedDateTitle(event.startDate, true) }} au
+          {{ getFormattedDateTitle(event.endDate, true) }}
+        </p>
+      </template>
+    </div>
+
+    <div class="mb-1 flex gap-x-2 items-center">
+      <p class="w-fit 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-sm italic opacity-75 flex items-center gap-1">
+          <PhHourglassMedium size="16" weight="fill" /> Pendant {{ 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">
+          <Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
+            {{ event.category }}
+          </Badge>
+        </li>
+
+        <li v-for="cat in event.secondaryCategories" :key="cat">
+          <Badge class="mix-blend-luminosity bg-gray-600" variant="secondary">
+            {{ cat }}
+          </Badge>
+        </li>
+      </ul>
+    </div>
+
+    <div v-if="event.description" class="text-sm">
+      <hr class="my-2 border-white opacity-50" >
+      <span class="opacity-75">
+        {{ event.description }}
+      </span>
+    </div>
+  </button>
+</template>

components/calendar/search/lists/SearchList.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { isCharacter, type Character } from '@/models/Characters'
+import { compareDates, type LeimDate, type LeimDateOrder } from '@/models/Date'
+import { isCalendarEvent, type CalendarEvent } from '@/models/Events'
+import { useCalendar } from '@/stores/CalendarStore'
+import { computed } from 'vue'
+import type { SearchMode } from '../../SearchMode'
+
+import CharacterCallout from './CharacterCallout.vue'
+import EventCallout from './EventCallout.vue'
+
+const props = defineProps<{
+  results: (Character | CalendarEvent)[]
+  currentEntity: SearchMode
+  order: LeimDateOrder
+  startAt: number
+  endAt: number
+  limit?: number
+}>()
+
+const emit = defineEmits(['jumpedToDate'])
+
+const { jumpToDate } = useCalendar()
+
+function handleJumpToDate(date?: LeimDate) {
+  if (!date) return
+
+  jumpToDate(date)
+  emit('jumpedToDate')
+}
+
+// Initial sorting of the results
+const sortedResults = computed(() => {
+  return [...props.results].sort((a, b) => {
+    let firstDate: LeimDate
+    let secondDate: LeimDate
+
+    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-4">
+    <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>