Refactored callouts into their own components

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

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { Character } from '@/models/Characters'
+import type { LeimDate } from '@/models/Date'
+import { useCalendar } from '@/stores/CalendarStore'
+
+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 :delayDuration="100">
+            <Tooltip>
+              <TooltipTrigger>
+                <Button
+                  @click="$emit('query:date-jump', character.birth!)"
+                  variant="ghost"
+                  size="xs"
+                >
+                  <PhPlant size="16" weight="fill" />
+                  {{ getFormattedDateTitle(character.birth, true) }}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Date de naissance</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </li>
+        <span v-if="character.birth && character.death">-</span>
+        <li v-if="character.death">
+          <TooltipProvider :delayDuration="100">
+            <Tooltip>
+              <TooltipTrigger>
+                <Button
+                  @click="$emit('query:date-jump', character.death!)"
+                  variant="ghost"
+                  size="xs"
+                >
+                  <PhSkull size="16" weight="fill" />
+                  {{ getFormattedDateTitle(character.death, true) }}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <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>

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

@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import { getRelativeString } 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 } from '@phosphor-icons/vue'
+
+defineProps<{
+  event: CalendarEvent
+}>()
+
+const { defaultDate, getFormattedDateTitle } = useCalendar()
+</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-yellow-100 hover:bg-yellow-200': event.category === 'bénédiction'
+    }"
+  >
+    <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 flex gap-4 items-center">
+      <p class="opacity-75">{{ getFormattedDateTitle(event.date, true) }}</p>
+      <p class="text-sm italic opacity-75 flex items-center gap-1">
+        <PhHourglassMedium size="16" weight="fill" />
+        {{ getRelativeString(defaultDate, event.date) }}
+      </p>
+    </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>

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

@@ -1,15 +1,13 @@
 <script lang="ts" setup>
 import { isCharacter, type Character } from '@/models/Characters'
-import { compareDates, getRelativeString, type LeimDate, type LeimDateOrder } from '@/models/Date'
+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 '../../Search'
 
-import { PhHourglassMedium, PhPlant, PhSkull, PhArrowSquareOut } from '@phosphor-icons/vue'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
+import CharacterCallout from './CharacterCallout.vue'
+import EventCallout from './EventCallout.vue'
 
 const props = defineProps<{
   results: (Character | CalendarEvent)[]
@@ -22,7 +20,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['jumpedToDate'])
 
-const { defaultDate, getFormattedDateTitle, jumpToDate } = useCalendar()
+const { jumpToDate } = useCalendar()
 
 function handleJumpToDate(date?: LeimDate) {
   if (!date) return
@@ -64,133 +62,13 @@ const pagedResults = computed(() => sortedResults.value.slice(props.startAt, pro
 <template>
   <ul class="grid gap-4">
     <li v-for="r in pagedResults" :key="isCalendarEvent(r) ? r.title : r.name">
-      <button
-        v-if="isCalendarEvent(r)"
-        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': !r.category,
-          'text-white bg-lime-600 hover:bg-lime-700': r.category === 'naissance',
-          'text-white bg-stone-500 hover:bg-stone-700': r.category === 'mort',
-          'text-white bg-orange-600 hover:bg-orange-700': r.category === 'catastrophe',
-          'text-white bg-pink-600 hover:bg-pink-700': r.category === 'catastrophe naturelle',
-          'text-white bg-sky-600 hover:bg-sky-700': r.category === 'législation',
-          'text-white bg-purple-600 hover:bg-purple-700': r.category === 'religion',
-          'text-white bg-emerald-600 hover:bg-emerald-700': r.category === 'joueurs',
-          'text-slate-900 bg-amber-300 hover:bg-amber-400': r.category === 'inauguration',
-          'text-slate-900 bg-emerald-200 hover:bg-emerald-300': r.category === 'invention',
-          'text-slate-900 bg-cyan-300 hover:bg-cyan-400': r.category === 'science',
-          'text-slate-900 bg-yellow-100 hover:bg-yellow-200': r.category === 'bénédiction'
-        }"
-        @click="handleJumpToDate(r.date)"
-      >
-        <div class="flex gap-2 items-center">
-          <h2 class="font-bold">
-            {{ r.title }}
-          </h2>
-          <div v-if="r.wiki">
-            <Button variant="link" size="xs" as-child class="text-inherit">
-              <a :href="r.wiki" target="_blank">
-                Wiki
-                <PhArrowSquareOut size="16" weight="fill" />
-              </a>
-            </Button>
-          </div>
-        </div>
+      <EventCallout v-if="isCalendarEvent(r)" @click="handleJumpToDate(r.date)" :event="r" />
 
-        <div class="mb-1 flex gap-4 items-center">
-          <p class="opacity-75">{{ getFormattedDateTitle(r.date, true) }}</p>
-          <p class="text-sm italic opacity-75 flex items-center gap-1">
-            <PhHourglassMedium size="16" weight="fill" />
-            {{ getRelativeString(defaultDate, r.date) }}
-          </p>
-        </div>
-
-        <div v-if="r.category || r.secondaryCategories" class="absolute top-3 right-4">
-          <ul class="flex gap-1">
-            <li v-if="r.category">
-              <Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
-                {{ r.category }}
-              </Badge>
-            </li>
-
-            <li v-for="cat in r.secondaryCategories" :key="cat">
-              <Badge class="mix-blend-luminosity bg-gray-600" variant="secondary">
-                {{ cat }}
-              </Badge>
-            </li>
-          </ul>
-        </div>
-
-        <div v-if="r.description" class="text-sm">
-          <hr class="my-2 border-white opacity-50" />
-          <span class="opacity-75">
-            {{ r.description }}
-          </span>
-        </div>
-      </button>
-
-      <div
+      <CharacterCallout
         v-else-if="isCharacter(r)"
-        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">
-              {{ r.name }}
-            </h2>
-            <div v-if="r.wiki">
-              <Button variant="link" size="xs" as-child>
-                <a :href="r.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="r.birth">
-              <TooltipProvider :delayDuration="100">
-                <Tooltip>
-                  <TooltipTrigger>
-                    <Button @click="handleJumpToDate(r.birth)" variant="ghost" size="xs">
-                      <PhPlant size="16" weight="fill" />
-                      {{ getFormattedDateTitle(r.birth, true) }}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>Date de naissance</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </li>
-            <span v-if="r.birth && r.death">-</span>
-            <li v-if="r.death">
-              <TooltipProvider :delayDuration="100">
-                <Tooltip>
-                  <TooltipTrigger>
-                    <Button @click="handleJumpToDate(r.death)" variant="ghost" size="xs">
-                      <PhSkull size="16" weight="fill" />
-                      {{ getFormattedDateTitle(r.death, true) }}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>Date de décès</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </li>
-          </menu>
-
-          <hr v-if="r.description" class="border-white opacity-25" />
-
-          <div v-if="r.description" class="text-sm">
-            <span class="opacity-75">
-              {{ r.description }}
-            </span>
-          </div>
-        </div>
-      </div>
+        :character="r"
+        @query:date-jump="handleJumpToDate"
+      />
     </li>
   </ul>
 </template>