From 6c2b0492d1bc82998c9449ff711b0aabd8214cb7 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 30 Apr 2024 20:28:22 +0200
Subject: [PATCH 01/25] Refactored callouts into their own components

---
 .../search/lists/CharacterCallout.vue         |  85 +++++++++++
 .../calendar/search/lists/EventCallout.vue    |  80 ++++++++++
 .../calendar/search/lists/SearchList.vue      | 140 ++----------------
 3 files changed, 174 insertions(+), 131 deletions(-)
 create mode 100644 src/components/calendar/search/lists/CharacterCallout.vue
 create mode 100644 src/components/calendar/search/lists/EventCallout.vue

diff --git a/src/components/calendar/search/lists/CharacterCallout.vue b/src/components/calendar/search/lists/CharacterCallout.vue
new file mode 100644
index 0000000..10cb38f
--- /dev/null
+++ b/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>
diff --git a/src/components/calendar/search/lists/EventCallout.vue b/src/components/calendar/search/lists/EventCallout.vue
new file mode 100644
index 0000000..efeacf3
--- /dev/null
+++ b/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>
diff --git a/src/components/calendar/search/lists/SearchList.vue b/src/components/calendar/search/lists/SearchList.vue
index 1936fac..d7d92ad 100644
--- a/src/components/calendar/search/lists/SearchList.vue
+++ b/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>

From 13bf4c4bff809ed038b22af6b16d5bae225862d7 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 May 2024 12:17:17 +0200
Subject: [PATCH 02/25] Fixed missing ui dependencies in callout

---
 src/components/calendar/search/lists/CharacterCallout.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/calendar/search/lists/CharacterCallout.vue b/src/components/calendar/search/lists/CharacterCallout.vue
index 10cb38f..5134087 100644
--- a/src/components/calendar/search/lists/CharacterCallout.vue
+++ b/src/components/calendar/search/lists/CharacterCallout.vue
@@ -3,6 +3,10 @@ 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
 }>()

From 052bad3889f315e525316c3ca50fff287bda8b9e Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 May 2024 12:17:32 +0200
Subject: [PATCH 03/25] Cleaned / JSDoc for calendar search

---
 .../calendar/search/CalendarSearch.vue        | 42 ++++++++++++-------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/components/calendar/search/CalendarSearch.vue b/src/components/calendar/search/CalendarSearch.vue
index 0996da2..2ab164d 100644
--- a/src/components/calendar/search/CalendarSearch.vue
+++ b/src/components/calendar/search/CalendarSearch.vue
@@ -1,33 +1,27 @@
 <script lang="ts" setup>
 import {
+  characterCategories,
   isCharacter,
   type Character,
-  characterCategories,
   type CharacterCategory
 } from '@/models/Characters'
 import type { LeimDateOrder } from '@/models/Date'
 import {
+  calendarEventCategories,
   isCalendarEvent,
   type CalendarEvent,
-  calendarEventCategories,
   type CalendarEventCategory
 } from '@/models/Events'
-import { capitalize } from '@/utils/Strings'
 import { useCharacters } from '@/stores/CharacterStore'
 import { useCalendarEvents } from '@/stores/EventStore'
+import { capitalize } from '@/utils/Strings'
 import { useMagicKeys, useStorage, whenever } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { searchUnifier, type SearchMode } from '../Search'
 
 import { Button } from '@/components/ui/button'
 import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/components/ui/command'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle,
-  DialogTrigger
-} from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import {
   Pagination,
@@ -87,6 +81,9 @@ const itemsPerPage: number = 20
 const startOfList = computed<number>(() => (currentPage.value - 1) * itemsPerPage)
 const endOfList = computed<number>(() => startOfList.value + itemsPerPage)
 
+/**
+ * Resets the pagination
+ */
 function resetPage() {
   currentPage.value = 1
 }
@@ -186,20 +183,32 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
   return results
 })
 
+/**
+ * Removes the search query, resets the pagination and removes all selected categories
+ */
 function resetSearch() {
   searchQuery.value = ''
   resetPage()
   selectedCategories.value = []
 }
 
+/**
+ * Opens the search dialog
+ */
 function openDialog() {
   modalOpen.value = true
 }
 
+/**
+ * Closes the search dialog
+ */
 function closeDialog() {
   modalOpen.value = false
 }
 
+/**
+ * Switches the selectedEntity
+ */
 function handleEntitySwitch() {
   resetPage()
   selectedCategories.value = []
@@ -212,7 +221,7 @@ whenever(keys.control_period, () => {
   openDialog()
 })
 
-// Categories
+// Compute categories based on current selectedEntity
 const currentCategories = computed(() => {
   if (selectedEntity.value === 'characters') {
     return [...characterCategories]
@@ -225,17 +234,22 @@ const selectedCategories = ref<(CharacterCategory | CalendarEventCategory)[]>([]
 const categoryFilterOpened = ref<boolean>(false)
 const searchCategory = ref<string>('')
 
-const filteredFrameworks = computed(() =>
+const filteredCategories = computed(() =>
   currentCategories.value.filter((i) => !selectedCategories.value.includes(i))
 )
 
+/**
+ * Handles the category selections from the TagInput component
+ *
+ * @param e Radix Change Event
+ */
 function handleCategorySelect(e: any) {
   if (typeof e.detail.value === 'string') {
     searchCategory.value = ''
     selectedCategories.value.push(e.detail.value)
   }
 
-  if (filteredFrameworks.value.length === 0) {
+  if (filteredCategories.value.length === 0) {
     categoryFilterOpened.value = false
   }
 }
@@ -325,7 +339,7 @@ function handleCategorySelect(e: any) {
                     <CommandEmpty />
                     <CommandGroup>
                       <CommandItem
-                        v-for="framework in filteredFrameworks"
+                        v-for="framework in filteredCategories"
                         :key="framework"
                         :value="framework"
                         @select.prevent="handleCategorySelect"

From 89ef95c50f8c2038e46b6ad87b0a593f046cb3ac Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 May 2024 12:38:06 +0200
Subject: [PATCH 04/25] Added some events and more categories

---
 src/components/calendar/CalendarEvent.vue     |  8 ++-
 .../calendar/CalendarEventDetails.vue         | 30 +++++++-
 .../calendar/search/lists/EventCallout.vue    |  8 ++-
 src/data/Characters.ts                        |  9 +++
 src/data/Events.ts                            | 69 ++++++++++++++++++-
 src/models/Events.ts                          | 10 ++-
 6 files changed, 126 insertions(+), 8 deletions(-)

diff --git a/src/components/calendar/CalendarEvent.vue b/src/components/calendar/CalendarEvent.vue
index 234b1f8..de9d1df 100644
--- a/src/components/calendar/CalendarEvent.vue
+++ b/src/components/calendar/CalendarEvent.vue
@@ -26,7 +26,13 @@ defineProps<{
           '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'
+          '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'
         }"
       >
         {{ event.title }}
diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index 2211918..4adbecd 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -32,7 +32,13 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.date)
       'border-amber-800': event.category === 'inauguration',
       'border-green-800': event.category === 'invention',
       'border-cyan-800': event.category === 'science',
-      'border-yellow-800': event.category === 'bénédiction'
+      'border-slate-600': event.category === 'bénédiction',
+      'border-purple-700': event.category === 'découverte',
+      'border-indigo-700': event.category === 'exploration',
+      'border-amber-700': event.category === 'construction',
+      'border-violet-700': event.category === 'arcanologie',
+      'border-rose-800': event.category === 'criminalité',
+      'border-stone-700': event.category === 'scandale'
     }"
   >
     <div class="grid gap-1">
@@ -104,7 +110,25 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.date)
 .border-cyan-800 {
   background-color: color-mix(in srgb, var(--color-cyan-800), var(--color-slate-950) 85%);
 }
-.border-yellow-800 {
-  background-color: color-mix(in srgb, var(--color-yellow-800), var(--color-slate-950) 85%);
+.border-slate-600 {
+  background-color: color-mix(in srgb, var(--color-slate-600), var(--color-slate-950) 85%);
+}
+.border-purple-700 {
+  background-color: color-mix(in srgb, var(--color-purple-700), var(--color-slate-950) 85%);
+}
+.border-indigo-700 {
+  background-color: color-mix(in srgb, var(--color-indigo-700), var(--color-slate-950) 85%);
+}
+.border-amber-700 {
+  background-color: color-mix(in srgb, var(--color-amber-700), var(--color-slate-950) 85%);
+}
+.border-violet-700 {
+  background-color: color-mix(in srgb, var(--color-violet-700), var(--color-slate-950) 85%);
+}
+.border-rose-800 {
+  background-color: color-mix(in srgb, var(--color-rose-800), var(--color-slate-950) 85%);
+}
+.border-stone-700 {
+  background-color: color-mix(in srgb, var(--color-stone-700), var(--color-slate-950) 85%);
 }
 </style>
diff --git a/src/components/calendar/search/lists/EventCallout.vue b/src/components/calendar/search/lists/EventCallout.vue
index efeacf3..0b0f64f 100644
--- a/src/components/calendar/search/lists/EventCallout.vue
+++ b/src/components/calendar/search/lists/EventCallout.vue
@@ -29,7 +29,13 @@ const { defaultDate, getFormattedDateTitle } = useCalendar()
       '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'
+      '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'
     }"
   >
     <div class="flex gap-2 items-center">
diff --git a/src/data/Characters.ts b/src/data/Characters.ts
index 4caf5b8..294d34d 100644
--- a/src/data/Characters.ts
+++ b/src/data/Characters.ts
@@ -174,6 +174,15 @@ export const charactersList: Character[] = [
     wiki: 'https://alexcreates.fr/leim/index.php/Räzal'
   },
 
+  // Legends
+  {
+    name: 'Jorhas Kirendre',
+    birth: { day: 2, month: 9, year: -452 },
+    death: { day: 2, month: 2, year: -419 },
+    category: 'sentinelle',
+    wiki: 'https://alexcreates.fr/leim/index.php/Jorhas_Kirendre'
+  },
+
   // "Les Milles Cages"
   {
     name: 'Ernestin Pomel',
diff --git a/src/data/Events.ts b/src/data/Events.ts
index a2bd4f7..66301fb 100644
--- a/src/data/Events.ts
+++ b/src/data/Events.ts
@@ -2,6 +2,26 @@ import type { CalendarEvent } from '@/models/Events'
 
 export const regularEvents: CalendarEvent[] = [
   // Histoire Antique
+  {
+    title: "Laurdieu devient la première cité de l'empire de Kaliatos",
+    date: { day: 3, month: 4, year: -1932 },
+    description:
+      "L'empire de Kaliatos établi sa capitale dans la cité de Laurdieu, qui connaitra une prospérité nouvelle au sein d'Aldys.",
+    category: 'législation',
+    secondaryCategories: ['inauguration'],
+    wiki: 'https://alexcreates.fr/leim/index.php/Laurdieu',
+    hidden: true
+  },
+  {
+    title: "Apparition d'Asménys",
+    date: { day: 19, month: 7, year: -1358 },
+    description:
+      "La défunte chanteuse Asménys apparaît à un barde pendant son jeune public, démarrant la religion des Prêtresses d'Asménys.",
+    category: 'religion',
+    secondaryCategories: ['bénédiction'],
+    wiki: 'https://alexcreates.fr/leim/index.php/Pr%C3%AAtresses_d%27Asm%C3%A9nys',
+    hidden: true
+  },
   {
     title: 'Exécution de Tyhos',
     date: { day: 1, month: 0, year: 0 },
@@ -14,14 +34,52 @@ export const regularEvents: CalendarEvent[] = [
   },
   {
     title: 'Traité de Kadel',
-    date: { day: 20, month: 4, year: 100 },
+    date: { day: 29, month: 4, year: 100 },
     description: '',
     category: 'inauguration',
     secondaryCategories: ['législation'],
     wiki: 'https://alexcreates.fr/leim/index.php/Alliance_Kald%C3%A9lienne#Trait%C3%A9_de_Kadel'
   },
+  {
+    title: 'Découverte des Plaines de Poussières',
+    date: { day: 17, month: 7, year: 305 },
+    description:
+      "Les troupes de la reconquête aldienne explorent le littoral d'une immense étendue grise et inerte.",
+    category: 'découverte',
+    secondaryCategories: ['exploration'],
+    wiki: 'https://alexcreates.fr/leim/index.php/Plaines_de_poussi%C3%A8re',
+    hidden: true
+  },
+  {
+    title: 'Début de la construction du Rempart de Laurdieu',
+    date: { day: 30, month: 2, year: 340 },
+    description:
+      "Le Grand Conseil Kaldélien ordonne la construction d'une muraille autour des Plaines de Poussières, afin de contenir les quelques démons y sortant.",
+    category: 'construction',
+    wiki: 'https://alexcreates.fr/leim/index.php/Plaines_de_poussi%C3%A8re',
+    hidden: true
+  },
+  {
+    title: 'Finition du Rempart de Laurdieu',
+    date: { day: 27, month: 9, year: 355 },
+    description:
+      "Les terramanciens kaldéliens terminent les remparts protégeant l'alliance des démons des Plaines de Poussières.",
+    category: 'construction',
+    secondaryCategories: ['inauguration'],
+    wiki: 'https://alexcreates.fr/leim/index.php/Plaines_de_poussi%C3%A8re',
+    hidden: true
+  },
 
   // Histoire Récente
+  {
+    title: "Inauguration de l'Académie Artistique Arcanique",
+    date: { day: 11, month: 6, year: 2545 },
+    description:
+      "Scäd Sceni ouvre son institut artistique dédié à l'apprentissage des arts arcaniques",
+    category: 'inauguration',
+    secondaryCategories: ['arcanologie'],
+    wiki: 'https://alexcreates.fr/leim/index.php/Buse_(arme)'
+  },
   {
     title: 'Création de la buse kaldélienne',
     date: { day: 4, month: 2, year: 3113 },
@@ -31,6 +89,15 @@ export const regularEvents: CalendarEvent[] = [
     secondaryCategories: ['science'],
     wiki: 'https://alexcreates.fr/leim/index.php/Buse_(arme)'
   },
+  {
+    title: 'Scandale Rodhus',
+    date: { day: 25, month: 9, year: 3208 },
+    description:
+      "Tivian Rodhus, un professeur estimé de l'Académie Centrale Kaldélienne, est emprisonné pour corruption et aggression sexuelle. Le corps enseignant y est remanié sur ordre de Lazarus Tymos, comte de Nacride.",
+    category: 'criminalité',
+    secondaryCategories: ['scandale'],
+    wiki: 'https://alexcreates.fr/leim/index.php/Tivian_Rodhus'
+  },
 
   // "Les Milles Cages"
   {
diff --git a/src/models/Events.ts b/src/models/Events.ts
index 02e5cad..42949d8 100644
--- a/src/models/Events.ts
+++ b/src/models/Events.ts
@@ -21,8 +21,14 @@ export const calendarEventCategories = [
   'invention',
   'science',
   'bénédiction',
-  'joueurs'
-]
+  'joueurs',
+  'découverte',
+  'exploration',
+  'construction',
+  'arcanologie',
+  'criminalité',
+  'scandale'
+] as const
 
 export type CalendarEventCategory = (typeof calendarEventCategories)[number]
 

From 87df080857a8c1ece067f33a93939538d1f8d987 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 May 2024 14:15:56 +0200
Subject: [PATCH 05/25] Changed default event date to startDate

---
 .../calendar/CalendarEventDetails.vue         |  4 +-
 .../calendar/state/monthly/DayTile.vue        |  2 +-
 .../calendar/state/yearly/DayTile.vue         |  2 +-
 src/data/Events.ts                            | 44 +++++++++----------
 src/models/Events.ts                          |  3 +-
 src/stores/EventStore.ts                      | 19 ++++----
 6 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index 4adbecd..b81e413 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -11,7 +11,7 @@ const { defaultDate, getFormattedDateTitle } = useCalendar()
 
 const props = defineProps<{ event: CalendarEvent }>()
 
-const dateDifference: string = getRelativeString(defaultDate, props.event.date)
+const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 </script>
 
 <template>
@@ -47,7 +47,7 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.date)
       </div>
 
       <div class="mb-1 space-y-1">
-        <p class="font-semibold">{{ getFormattedDateTitle(event.date, true) }}</p>
+        <p class="font-semibold">{{ getFormattedDateTitle(event.startDate, true) }}</p>
         <p class="text-sm italic opacity-75 flex items-center gap-1">
           <PhHourglassMedium size="16" weight="fill" /> {{ dateDifference }}
         </p>
diff --git a/src/components/calendar/state/monthly/DayTile.vue b/src/components/calendar/state/monthly/DayTile.vue
index f1c3a4e..5d9aada 100644
--- a/src/components/calendar/state/monthly/DayTile.vue
+++ b/src/components/calendar/state/monthly/DayTile.vue
@@ -24,7 +24,7 @@ const { currentEvents } = storeToRefs(useCalendarEvents())
 
 const eventsForTheDay = computed(() => {
   return currentEvents.value.filter((currentEvent) => {
-    return areDatesIdentical(currentEvent.date, props.date)
+    return areDatesIdentical(currentEvent.startDate, props.date)
   })
 })
 
diff --git a/src/components/calendar/state/yearly/DayTile.vue b/src/components/calendar/state/yearly/DayTile.vue
index d065c1d..9c1e1dd 100644
--- a/src/components/calendar/state/yearly/DayTile.vue
+++ b/src/components/calendar/state/yearly/DayTile.vue
@@ -33,7 +33,7 @@ const isSelectedDate = computed<boolean>(() => {
 const hasAtLeastOneEvent = computed<boolean>(() => {
   return Boolean(
     currentEvents.value.find((currentEvent) => {
-      return areDatesIdentical(currentEvent.date, tileDate.value)
+      return areDatesIdentical(currentEvent.startDate, tileDate.value)
     })
   )
 })
diff --git a/src/data/Events.ts b/src/data/Events.ts
index 66301fb..28b96cb 100644
--- a/src/data/Events.ts
+++ b/src/data/Events.ts
@@ -4,7 +4,7 @@ export const regularEvents: CalendarEvent[] = [
   // Histoire Antique
   {
     title: "Laurdieu devient la première cité de l'empire de Kaliatos",
-    date: { day: 3, month: 4, year: -1932 },
+    startDate: { day: 3, month: 4, year: -1932 },
     description:
       "L'empire de Kaliatos établi sa capitale dans la cité de Laurdieu, qui connaitra une prospérité nouvelle au sein d'Aldys.",
     category: 'législation',
@@ -14,7 +14,7 @@ export const regularEvents: CalendarEvent[] = [
   },
   {
     title: "Apparition d'Asménys",
-    date: { day: 19, month: 7, year: -1358 },
+    startDate: { day: 19, month: 7, year: -1358 },
     description:
       "La défunte chanteuse Asménys apparaît à un barde pendant son jeune public, démarrant la religion des Prêtresses d'Asménys.",
     category: 'religion',
@@ -24,7 +24,7 @@ export const regularEvents: CalendarEvent[] = [
   },
   {
     title: 'Exécution de Tyhos',
-    date: { day: 1, month: 0, year: 0 },
+    startDate: { day: 1, month: 0, year: 0 },
     description:
       "Le léviathan Tyhos rend l'âme après un combat de plusieurs années contre Lystos, le dieu du Soleil.",
     category: 'bénédiction',
@@ -34,7 +34,7 @@ export const regularEvents: CalendarEvent[] = [
   },
   {
     title: 'Traité de Kadel',
-    date: { day: 29, month: 4, year: 100 },
+    startDate: { day: 29, month: 4, year: 100 },
     description: '',
     category: 'inauguration',
     secondaryCategories: ['législation'],
@@ -42,7 +42,7 @@ export const regularEvents: CalendarEvent[] = [
   },
   {
     title: 'Découverte des Plaines de Poussières',
-    date: { day: 17, month: 7, year: 305 },
+    startDate: { day: 17, month: 7, year: 305 },
     description:
       "Les troupes de la reconquête aldienne explorent le littoral d'une immense étendue grise et inerte.",
     category: 'découverte',
@@ -52,7 +52,7 @@ export const regularEvents: CalendarEvent[] = [
   },
   {
     title: 'Début de la construction du Rempart de Laurdieu',
-    date: { day: 30, month: 2, year: 340 },
+    startDate: { day: 30, month: 2, year: 340 },
     description:
       "Le Grand Conseil Kaldélien ordonne la construction d'une muraille autour des Plaines de Poussières, afin de contenir les quelques démons y sortant.",
     category: 'construction',
@@ -61,7 +61,7 @@ export const regularEvents: CalendarEvent[] = [
   },
   {
     title: 'Finition du Rempart de Laurdieu',
-    date: { day: 27, month: 9, year: 355 },
+    startDate: { day: 27, month: 9, year: 355 },
     description:
       "Les terramanciens kaldéliens terminent les remparts protégeant l'alliance des démons des Plaines de Poussières.",
     category: 'construction',
@@ -73,7 +73,7 @@ export const regularEvents: CalendarEvent[] = [
   // Histoire Récente
   {
     title: "Inauguration de l'Académie Artistique Arcanique",
-    date: { day: 11, month: 6, year: 2545 },
+    startDate: { day: 11, month: 6, year: 2545 },
     description:
       "Scäd Sceni ouvre son institut artistique dédié à l'apprentissage des arts arcaniques",
     category: 'inauguration',
@@ -82,7 +82,7 @@ export const regularEvents: CalendarEvent[] = [
   },
   {
     title: 'Création de la buse kaldélienne',
-    date: { day: 4, month: 2, year: 3113 },
+    startDate: { day: 4, month: 2, year: 3113 },
     description:
       'Sophia de Rougefer invente la buse kaldélienne, une arme à feu souple à deux canons.',
     category: 'invention',
@@ -91,7 +91,7 @@ export const regularEvents: CalendarEvent[] = [
   },
   {
     title: 'Scandale Rodhus',
-    date: { day: 25, month: 9, year: 3208 },
+    startDate: { day: 25, month: 9, year: 3208 },
     description:
       "Tivian Rodhus, un professeur estimé de l'Académie Centrale Kaldélienne, est emprisonné pour corruption et aggression sexuelle. Le corps enseignant y est remanié sur ordre de Lazarus Tymos, comte de Nacride.",
     category: 'criminalité',
@@ -102,7 +102,7 @@ export const regularEvents: CalendarEvent[] = [
   // "Les Milles Cages"
   {
     title: "Arrivée d'aventuriers à Borélis",
-    date: { day: 12, month: 7, year: 3209 },
+    startDate: { day: 12, month: 7, year: 3209 },
     description:
       'Tara Belyus, Vascylly et Adol Sulvan livrent 3 condamnés à Handany. Ils partent pour la mer durant la journée.',
     category: 'joueurs'
@@ -111,25 +111,25 @@ export const regularEvents: CalendarEvent[] = [
     title: "Naufrage de l'Éclipse",
     description:
       "L'Éclipse, le navire de la garde contenant des condamnés à destination des Cages Handaniennes, s'échoue au large des côtes montagneuses de la Lance d'Aldys.",
-    date: { day: 14, month: 7, year: 3209 },
+    startDate: { day: 14, month: 7, year: 3209 },
     category: 'catastrophe'
   },
   {
     title: 'Emprisonnement de Tivian Rodhus',
     description: "Celui qu'on surnomme la Bête d'Ambrose arrive à Handany, où il purgera sa peine.",
-    date: { day: 14, month: 7, year: 3209 },
+    startDate: { day: 14, month: 7, year: 3209 },
     category: 'législation'
   },
   {
     title: 'Sulvan et Anastael atteignent Bamast',
-    date: { day: 19, month: 2, year: 3210 },
+    startDate: { day: 19, month: 2, year: 3210 },
     category: 'joueurs'
   },
   {
     title: 'Jugement de Bormis Griloup',
     description:
       "Bromis Griloup est jugé coupable d'escroquerie et sabotage aux Cours d'Acier de Tourgrise. Il purgera une peine de 10 ans au sein des prisons royales.",
-    date: { day: 4, month: 8, year: 3209 },
+    startDate: { day: 4, month: 8, year: 3209 },
     category: 'législation'
   },
 
@@ -137,42 +137,42 @@ export const regularEvents: CalendarEvent[] = [
   {
     title: 'Inauguration de la Cloche du Pilier',
     description: "Le Moine Premier inaugure la grande cloche d'argent au sommet du Pilier d'Ikami.",
-    date: { day: 29, month: 5, year: 3209 },
+    startDate: { day: 29, month: 5, year: 3209 },
     category: 'religion',
     hidden: true
   },
   {
     title: '1ère disparation à Cantane',
     description: "Taleb Vaht décède dans une grotte à la suite d'une attaque d'ischiels enragées.",
-    date: { day: 28, month: 7, year: 3209 },
+    startDate: { day: 28, month: 7, year: 3209 },
     category: 'mort',
     hidden: true
   },
   {
     title: '2ème disparation à Cantane',
     description: 'Donovane le mineur kéturien disparait sans laisser de traces.',
-    date: { day: 32, month: 7, year: 3209 },
+    startDate: { day: 32, month: 7, year: 3209 },
     category: 'mort',
     hidden: true
   },
   {
     title: '3ème disparation à Cantane',
     description: 'Disparition de Sébastien, gredin sauride.',
-    date: { day: 10, month: 8, year: 3209 },
+    startDate: { day: 10, month: 8, year: 3209 },
     category: 'mort',
     hidden: true
   },
   {
     title: '4ème disparation à Cantane',
     description: 'Disparition de Thérence, patrouilleur sauride de la Vieille Garde.',
-    date: { day: 19, month: 8, year: 3209 },
+    startDate: { day: 19, month: 8, year: 3209 },
     category: 'mort',
     hidden: true
   },
   {
     title: '5ème disparation à Cantane',
     description: 'Disparition de Mathilda Boulais, vendeuse de pierres.',
-    date: { day: 22, month: 8, year: 3209 },
+    startDate: { day: 22, month: 8, year: 3209 },
     category: 'mort',
     hidden: true
   },
@@ -180,7 +180,7 @@ export const regularEvents: CalendarEvent[] = [
     title: 'Grande Banque Minérale de Cantane',
     description:
       'Les artisans et mineurs de Rougefer se réunissent à Cantane pour vendre le fruit de leur dur labeur.',
-    date: { day: 23, month: 8, year: 3209 },
+    startDate: { day: 23, month: 8, year: 3209 },
     category: 'inauguration'
   }
 ]
diff --git a/src/models/Events.ts b/src/models/Events.ts
index 42949d8..3a01343 100644
--- a/src/models/Events.ts
+++ b/src/models/Events.ts
@@ -2,7 +2,8 @@ import type { LeimDate } from './Date'
 
 export interface CalendarEvent {
   title: string
-  date: LeimDate
+  startDate: LeimDate
+  endDate?: LeimDate
   description?: string
   category?: CalendarEventCategory
   secondaryCategories?: CalendarEventCategory[]
diff --git a/src/stores/EventStore.ts b/src/stores/EventStore.ts
index 1e24890..663f2f5 100644
--- a/src/stores/EventStore.ts
+++ b/src/stores/EventStore.ts
@@ -15,7 +15,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
   const characterBirthEvents = charactersWithBirthData.map((character) => {
     return {
       title: `Naissance de ${character.name}`,
-      date: character.birth,
+      startDate: character.birth,
       category: 'naissance'
     } as CalendarEvent
   })
@@ -23,7 +23,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
   const characterDeathEvents = charactersWithDeathData.map((character) => {
     return {
       title: `Décès de ${character.name}`,
-      date: character.death,
+      startDate: character.death,
       category: 'mort'
     } as CalendarEvent
   })
@@ -47,9 +47,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    * @returns Whether the event should appear in the current view
    */
   function shouldEventBeDisplayed(event: CalendarEvent): boolean {
-    const eventDateToDays = convertDateToDays(event.date)
+    const eventDateToDays = convertDateToDays(event.startDate)
     const isEventOnCurrentScreen =
-      event.date.year === currentDate.currentYear && event.date.month === currentDate.currentMonth
+      event.startDate.year === currentDate.currentYear &&
+      event.startDate.month === currentDate.currentMonth
 
     // Check whether the event is on the last 8 tiles
     // This is to allow leap events from appearing on the last 8 tiles
@@ -69,18 +70,18 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
         return isEventOnCurrentScreen || isEventOnNext8Tiles
 
       case 'year':
-        return event.date.year === currentDate.currentYear
+        return event.startDate.year === currentDate.currentYear
 
       case 'decade':
         return (
-          event.date.year >= currentDate.currentYear &&
-          event.date.year <= currentDate.currentYear + 10
+          event.startDate.year >= currentDate.currentYear &&
+          event.startDate.year <= currentDate.currentYear + 10
         )
 
       case 'century':
         return (
-          event.date.year >= currentDate.currentYear &&
-          event.date.year <= currentDate.currentYear + 100
+          event.startDate.year >= currentDate.currentYear &&
+          event.startDate.year <= currentDate.currentYear + 100
         )
 
       default:

From e9c14f355dc3a79f0d937c8c7f24d565d5bcb04c Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 May 2024 14:47:06 +0200
Subject: [PATCH 06/25] Fixed some bugs

One issue was a missing ui component and the other was about the previous commit's changes with startDate
---
 src/components/calendar/CalendarMenu.vue            |  1 +
 src/components/calendar/search/CalendarSearch.vue   |  6 +++---
 .../calendar/search/lists/EventCallout.vue          |  4 ++--
 src/components/calendar/search/lists/SearchList.vue |  6 +++---
 src/data/Events.ts                                  | 13 ++-----------
 src/models/Events.ts                                |  2 +-
 6 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/components/calendar/CalendarMenu.vue b/src/components/calendar/CalendarMenu.vue
index d6869b8..2afe5f3 100644
--- a/src/components/calendar/CalendarMenu.vue
+++ b/src/components/calendar/CalendarMenu.vue
@@ -2,6 +2,7 @@
 import { useCalendar } from '@/stores/CalendarStore'
 
 import { Button } from '@/components/ui/button'
+import { PhMagnifyingGlass } from '@phosphor-icons/vue'
 import CalendarMenuNav from './CalendarMenuNav.vue'
 import CalendarMenuToday from './CalendarMenuToday.vue'
 import CalendarSwitch from './CalendarSwitch.vue'
diff --git a/src/components/calendar/search/CalendarSearch.vue b/src/components/calendar/search/CalendarSearch.vue
index 2ab164d..8daa23d 100644
--- a/src/components/calendar/search/CalendarSearch.vue
+++ b/src/components/calendar/search/CalendarSearch.vue
@@ -139,7 +139,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
       }
 
       hitCategories = selectedCategories.value.every((selectedCat) => {
-        return allCategories.includes(selectedCat)
+        return allCategories.includes(selectedCat as CalendarEventCategory)
       })
 
       return (hitTitle || hitDesc) && hitCategories
@@ -162,7 +162,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
 
       // Handle categories logic
       let hitCategories: boolean = false
-      let allCategories: CalendarEventCategory[] = []
+      let allCategories: CharacterCategory[] = []
 
       if (item.category) {
         allCategories.push(item.category)
@@ -173,7 +173,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
       }
 
       hitCategories = selectedCategories.value.every((selectedCat) => {
-        return allCategories.includes(selectedCat)
+        return allCategories.includes(selectedCat as CharacterCategory)
       })
 
       return hitTitle && hitCategories
diff --git a/src/components/calendar/search/lists/EventCallout.vue b/src/components/calendar/search/lists/EventCallout.vue
index 0b0f64f..7aebc83 100644
--- a/src/components/calendar/search/lists/EventCallout.vue
+++ b/src/components/calendar/search/lists/EventCallout.vue
@@ -53,10 +53,10 @@ const { defaultDate, getFormattedDateTitle } = useCalendar()
     </div>
 
     <div class="mb-1 flex gap-4 items-center">
-      <p class="opacity-75">{{ getFormattedDateTitle(event.date, true) }}</p>
+      <p class="opacity-75">{{ getFormattedDateTitle(event.startDate, true) }}</p>
       <p class="text-sm italic opacity-75 flex items-center gap-1">
         <PhHourglassMedium size="16" weight="fill" />
-        {{ getRelativeString(defaultDate, event.date) }}
+        {{ getRelativeString(defaultDate, event.startDate) }}
       </p>
     </div>
 
diff --git a/src/components/calendar/search/lists/SearchList.vue b/src/components/calendar/search/lists/SearchList.vue
index d7d92ad..736d143 100644
--- a/src/components/calendar/search/lists/SearchList.vue
+++ b/src/components/calendar/search/lists/SearchList.vue
@@ -36,7 +36,7 @@ const sortedResults = computed(() => {
     let secondDate: LeimDate
 
     if (isCalendarEvent(a)) {
-      firstDate = a.date
+      firstDate = a.startDate
     } else if (isCharacter(a) && a.birth) {
       firstDate = a.birth
     } else {
@@ -44,7 +44,7 @@ const sortedResults = computed(() => {
     }
 
     if (isCalendarEvent(b)) {
-      secondDate = b.date
+      secondDate = b.startDate
     } else if (isCharacter(b) && b.birth) {
       secondDate = b.birth
     } else {
@@ -62,7 +62,7 @@ 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">
-      <EventCallout v-if="isCalendarEvent(r)" @click="handleJumpToDate(r.date)" :event="r" />
+      <EventCallout v-if="isCalendarEvent(r)" @click="handleJumpToDate(r.startDate)" :event="r" />
 
       <CharacterCallout
         v-else-if="isCharacter(r)"
diff --git a/src/data/Events.ts b/src/data/Events.ts
index 28b96cb..9af8c7f 100644
--- a/src/data/Events.ts
+++ b/src/data/Events.ts
@@ -51,24 +51,15 @@ export const regularEvents: CalendarEvent[] = [
     hidden: true
   },
   {
-    title: 'Début de la construction du Rempart de Laurdieu',
+    title: 'Construction du Rempart de Laurdieu',
     startDate: { day: 30, month: 2, year: 340 },
+    endDate: { day: 27, month: 9, year: 355 },
     description:
       "Le Grand Conseil Kaldélien ordonne la construction d'une muraille autour des Plaines de Poussières, afin de contenir les quelques démons y sortant.",
     category: 'construction',
     wiki: 'https://alexcreates.fr/leim/index.php/Plaines_de_poussi%C3%A8re',
     hidden: true
   },
-  {
-    title: 'Finition du Rempart de Laurdieu',
-    startDate: { day: 27, month: 9, year: 355 },
-    description:
-      "Les terramanciens kaldéliens terminent les remparts protégeant l'alliance des démons des Plaines de Poussières.",
-    category: 'construction',
-    secondaryCategories: ['inauguration'],
-    wiki: 'https://alexcreates.fr/leim/index.php/Plaines_de_poussi%C3%A8re',
-    hidden: true
-  },
 
   // Histoire Récente
   {
diff --git a/src/models/Events.ts b/src/models/Events.ts
index 3a01343..98178e0 100644
--- a/src/models/Events.ts
+++ b/src/models/Events.ts
@@ -34,5 +34,5 @@ export const calendarEventCategories = [
 export type CalendarEventCategory = (typeof calendarEventCategories)[number]
 
 export function isCalendarEvent(object: any): object is CalendarEvent {
-  return 'date' in object
+  return 'startDate' in object
 }

From 3bd3dc577e968d3702ad4fac288d7dad3fb4bc69 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 May 2024 15:00:41 +0200
Subject: [PATCH 07/25] Added default padding to dialog

---
 src/components/ui/dialog/DialogContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/dialog/DialogContent.vue b/src/components/ui/dialog/DialogContent.vue
index b835dd3..76ee2f7 100644
--- a/src/components/ui/dialog/DialogContent.vue
+++ b/src/components/ui/dialog/DialogContent.vue
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-4xl -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-4xl -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
           props.class
         )
       "

From cbc3b0b013ee6866a55ce149b0225522767e2256 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 May 2024 15:34:02 +0200
Subject: [PATCH 08/25] Uniformed event query date jump handlers for callouts

---
 src/components/calendar/search/lists/EventCallout.vue | 7 ++++++-
 src/components/calendar/search/lists/SearchList.vue   | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/calendar/search/lists/EventCallout.vue b/src/components/calendar/search/lists/EventCallout.vue
index 7aebc83..b1730a7 100644
--- a/src/components/calendar/search/lists/EventCallout.vue
+++ b/src/components/calendar/search/lists/EventCallout.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getRelativeString } from '@/models/Date'
+import { getRelativeString, type LeimDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
 
@@ -11,6 +11,10 @@ defineProps<{
   event: CalendarEvent
 }>()
 
+defineEmits<{
+  (e: 'query:date-jump', payload: LeimDate): void
+}>()
+
 const { defaultDate, getFormattedDateTitle } = useCalendar()
 </script>
 
@@ -37,6 +41,7 @@ const { defaultDate, getFormattedDateTitle } = useCalendar()
       'text-white bg-rose-600 hover:bg-rose-700': event.category === 'criminalité',
       'text-white bg-stone-600 hover:bg-stone-700': event.category === 'scandale'
     }"
+    @click="$emit('query:date-jump', event.startDate)"
   >
     <div class="flex gap-2 items-center">
       <h2 class="font-bold">
diff --git a/src/components/calendar/search/lists/SearchList.vue b/src/components/calendar/search/lists/SearchList.vue
index 736d143..bc53b29 100644
--- a/src/components/calendar/search/lists/SearchList.vue
+++ b/src/components/calendar/search/lists/SearchList.vue
@@ -62,7 +62,7 @@ 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">
-      <EventCallout v-if="isCalendarEvent(r)" @click="handleJumpToDate(r.startDate)" :event="r" />
+      <EventCallout v-if="isCalendarEvent(r)" :event="r" @query:date-jump="handleJumpToDate" />
 
       <CharacterCallout
         v-else-if="isCharacter(r)"

From 29ecaec59c89f46e3c3693101aa376251c840982 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 May 2024 15:43:48 +0200
Subject: [PATCH 09/25] Added timespan to long events

---
 src/components/calendar/CalendarEventDetails.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index b81e413..c9bd2c0 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -17,7 +17,7 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
 <template>
   <PopoverContent
     class="w-96"
-    align="start"
+    :align="'start'"
     :align-offset="50"
     :collision-padding="20"
     :class="{
@@ -47,13 +47,21 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
       </div>
 
       <div class="mb-1 space-y-1">
-        <p class="font-semibold">{{ getFormattedDateTitle(event.startDate, true) }}</p>
+        <template v-if="event.startDate && !event.endDate">
+          <p class="font-semibold">{{ getFormattedDateTitle(event.startDate, true) }}</p>
+        </template>
+        <template v-else-if="event.startDate && event.endDate">
+          <p class="font-semibold">
+            Du {{ getFormattedDateTitle(event.startDate, true) }} au
+            {{ getFormattedDateTitle(event.endDate, true) }}
+          </p>
+        </template>
         <p class="text-sm italic opacity-75 flex items-center gap-1">
           <PhHourglassMedium size="16" weight="fill" /> {{ dateDifference }}
         </p>
       </div>
 
-      <div v-if="event.category || event.secondaryCategories">
+      <template v-if="event.category || event.secondaryCategories">
         <ul class="flex gap-1">
           <li v-if="event.category">
             <Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
@@ -67,7 +75,7 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
             </Badge>
           </li>
         </ul>
-      </div>
+      </template>
 
       <div class="mt-2 italic text-sm text-slate-500">
         {{ event.description }}

From eedecdfddfd870fe8f552907f8e065cf508909e2 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 May 2024 15:51:02 +0200
Subject: [PATCH 10/25] Added commerce category

---
 src/components/calendar/CalendarEvent.vue            |  3 ++-
 src/components/calendar/CalendarEventDetails.vue     | 12 ++++++++----
 .../calendar/search/lists/EventCallout.vue           |  3 ++-
 src/data/Events.ts                                   |  3 ++-
 src/models/Events.ts                                 |  3 ++-
 5 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/calendar/CalendarEvent.vue b/src/components/calendar/CalendarEvent.vue
index de9d1df..0a794f1 100644
--- a/src/components/calendar/CalendarEvent.vue
+++ b/src/components/calendar/CalendarEvent.vue
@@ -32,7 +32,8 @@ defineProps<{
           '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-white bg-stone-600 hover:bg-stone-700': event.category === 'scandale',
+          'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category === 'commerce'
         }"
       >
         {{ event.title }}
diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index c9bd2c0..7c6924a 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -23,7 +23,7 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
     :class="{
       'border-slate-800': !event.category,
       'border-lime-800': event.category === 'naissance',
-      'border-stone-800': event.category === 'mort',
+      'border-stone-600': event.category === 'mort',
       'border-orange-800': event.category === 'catastrophe',
       'border-pink-800': event.category === 'catastrophe naturelle',
       'border-sky-800': event.category === 'législation',
@@ -38,7 +38,8 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
       'border-amber-700': event.category === 'construction',
       'border-violet-700': event.category === 'arcanologie',
       'border-rose-800': event.category === 'criminalité',
-      'border-stone-700': event.category === 'scandale'
+      'border-stone-700': event.category === 'scandale',
+      'border-yellow-600': event.category === 'commerce'
     }"
   >
     <div class="grid gap-1">
@@ -91,8 +92,8 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
 .border-lime-800 {
   background-color: color-mix(in srgb, var(--color-lime-800), var(--color-slate-950) 85%);
 }
-.border-stone-800 {
-  background-color: color-mix(in srgb, var(--color-stone-800), var(--color-slate-950) 85%);
+.border-stone-600 {
+  background-color: color-mix(in srgb, var(--color-stone-600), var(--color-slate-950) 85%);
 }
 .border-orange-800 {
   background-color: color-mix(in srgb, var(--color-orange-800), var(--color-slate-950) 85%);
@@ -139,4 +140,7 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
 .border-stone-700 {
   background-color: color-mix(in srgb, var(--color-stone-700), var(--color-slate-950) 85%);
 }
+.border-yellow-600 {
+  background-color: color-mix(in srgb, var(--color-yellow-600), var(--color-slate-950) 85%);
+}
 </style>
diff --git a/src/components/calendar/search/lists/EventCallout.vue b/src/components/calendar/search/lists/EventCallout.vue
index b1730a7..6829849 100644
--- a/src/components/calendar/search/lists/EventCallout.vue
+++ b/src/components/calendar/search/lists/EventCallout.vue
@@ -39,7 +39,8 @@ const { defaultDate, getFormattedDateTitle } = useCalendar()
       '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-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)"
   >
diff --git a/src/data/Events.ts b/src/data/Events.ts
index 9af8c7f..f42c3be 100644
--- a/src/data/Events.ts
+++ b/src/data/Events.ts
@@ -172,6 +172,7 @@ export const regularEvents: CalendarEvent[] = [
     description:
       'Les artisans et mineurs de Rougefer se réunissent à Cantane pour vendre le fruit de leur dur labeur.',
     startDate: { day: 23, month: 8, year: 3209 },
-    category: 'inauguration'
+    endDate: { day: 26, month: 8, year: 3209 },
+    category: 'commerce'
   }
 ]
diff --git a/src/models/Events.ts b/src/models/Events.ts
index 98178e0..6ddeb4d 100644
--- a/src/models/Events.ts
+++ b/src/models/Events.ts
@@ -28,7 +28,8 @@ export const calendarEventCategories = [
   'construction',
   'arcanologie',
   'criminalité',
-  'scandale'
+  'scandale',
+  'commerce'
 ] as const
 
 export type CalendarEventCategory = (typeof calendarEventCategories)[number]

From 104d93df065fe9bec73785918fd9af092fdd1e38 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 May 2024 16:32:27 +0200
Subject: [PATCH 11/25] Added duration display for long events

---
 .../calendar/CalendarEventDetails.vue         | 65 ++++++++++++-------
 .../calendar/search/lists/EventCallout.vue    | 36 ++++++++--
 src/data/Events.ts                            |  2 +-
 src/models/Date.ts                            | 58 +++++++++--------
 4 files changed, 104 insertions(+), 57 deletions(-)

diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index 7c6924a..3fb9fc5 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -3,7 +3,7 @@ import { getRelativeString } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
 
-import { PhHourglassMedium } from '@phosphor-icons/vue'
+import { PhHourglassMedium, PhAlarm } from '@phosphor-icons/vue'
 import { Badge } from '@/components/ui/badge'
 import { PopoverContent } from '@/components/ui/popover'
 
@@ -12,11 +12,14 @@ const { defaultDate, getFormattedDateTitle } = useCalendar()
 const props = defineProps<{ event: CalendarEvent }>()
 
 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>
   <PopoverContent
-    class="w-96"
+    class="event-details w-96"
     :align="'start'"
     :align-offset="50"
     :collision-padding="20"
@@ -56,9 +59,14 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
             Du {{ getFormattedDateTitle(event.startDate, true) }} au
             {{ getFormattedDateTitle(event.endDate, true) }}
           </p>
+          <template v-if="dateDuration">
+            <p class="text-sm italic opacity-75 flex items-center gap-1">
+              <PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
+            </p>
+          </template>
         </template>
         <p class="text-sm italic opacity-75 flex items-center gap-1">
-          <PhHourglassMedium size="16" weight="fill" /> {{ dateDifference }}
+          <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
         </p>
       </div>
 
@@ -78,7 +86,9 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
         </ul>
       </template>
 
-      <div class="mt-2 italic text-sm text-slate-500">
+      <hr class="border-slate-500 mt-2" />
+
+      <div class="mt-2 text-sm text-slate-300">
         {{ event.description }}
       </div>
     </div>
@@ -87,60 +97,69 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
 
 <style lang="scss">
 .border-slate-800 {
-  background-color: color-mix(in srgb, var(--color-slate-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-slate-800);
 }
 .border-lime-800 {
-  background-color: color-mix(in srgb, var(--color-lime-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-lime-800);
 }
 .border-stone-600 {
-  background-color: color-mix(in srgb, var(--color-stone-600), var(--color-slate-950) 85%);
+  --base-color: var(--color-stone-600);
 }
 .border-orange-800 {
-  background-color: color-mix(in srgb, var(--color-orange-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-orange-800);
 }
 .border-pink-800 {
-  background-color: color-mix(in srgb, var(--color-pink-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-pink-800);
 }
 .border-sky-800 {
-  background-color: color-mix(in srgb, var(--color-sky-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-sky-800);
 }
 .border-purple-800 {
-  background-color: color-mix(in srgb, var(--color-purple-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-purple-800);
 }
 .border-emerald-800 {
-  background-color: color-mix(in srgb, var(--color-emerald-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-emerald-800);
 }
 .border-amber-800 {
-  background-color: color-mix(in srgb, var(--color-amber-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-amber-800);
 }
 .border-green-800 {
-  background-color: color-mix(in srgb, var(--color-green-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-green-800);
 }
 .border-cyan-800 {
-  background-color: color-mix(in srgb, var(--color-cyan-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-cyan-800);
 }
 .border-slate-600 {
-  background-color: color-mix(in srgb, var(--color-slate-600), var(--color-slate-950) 85%);
+  --base-color: var(--color-slate-600);
 }
 .border-purple-700 {
-  background-color: color-mix(in srgb, var(--color-purple-700), var(--color-slate-950) 85%);
+  --base-color: var(--color-purple-700);
 }
 .border-indigo-700 {
-  background-color: color-mix(in srgb, var(--color-indigo-700), var(--color-slate-950) 85%);
+  --base-color: var(--color-indigo-700);
 }
 .border-amber-700 {
-  background-color: color-mix(in srgb, var(--color-amber-700), var(--color-slate-950) 85%);
+  --base-color: var(--color-amber-700);
 }
 .border-violet-700 {
-  background-color: color-mix(in srgb, var(--color-violet-700), var(--color-slate-950) 85%);
+  --base-color: var(--color-violet-700);
 }
 .border-rose-800 {
-  background-color: color-mix(in srgb, var(--color-rose-800), var(--color-slate-950) 85%);
+  --base-color: var(--color-rose-800);
 }
 .border-stone-700 {
-  background-color: color-mix(in srgb, var(--color-stone-700), var(--color-slate-950) 85%);
+  --base-color: var(--color-stone-700);
 }
 .border-yellow-600 {
-  background-color: color-mix(in srgb, var(--color-yellow-600), var(--color-slate-950) 85%);
+  --base-color: var(--color-yellow-600);
+}
+
+.event-details {
+  --bg-color: color-mix(in srgb, var(--base-color), var(--color-slate-950) 85%);
+  background-color: var(--bg-color);
+
+  hr {
+    border-color: var(--base-color);
+  }
 }
 </style>
diff --git a/src/components/calendar/search/lists/EventCallout.vue b/src/components/calendar/search/lists/EventCallout.vue
index 6829849..ee9ce63 100644
--- a/src/components/calendar/search/lists/EventCallout.vue
+++ b/src/components/calendar/search/lists/EventCallout.vue
@@ -5,9 +5,9 @@ import { useCalendar } from '@/stores/CalendarStore'
 
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { PhArrowSquareOut, PhHourglassMedium } from '@phosphor-icons/vue'
+import { PhArrowSquareOut, PhHourglassMedium, PhAlarm } from '@phosphor-icons/vue'
 
-defineProps<{
+const props = defineProps<{
   event: CalendarEvent
 }>()
 
@@ -16,6 +16,11 @@ defineEmits<{
 }>()
 
 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>
@@ -58,12 +63,29 @@ const { defaultDate, getFormattedDateTitle } = useCalendar()
       </div>
     </div>
 
-    <div class="mb-1 flex gap-4 items-center">
-      <p class="opacity-75">{{ getFormattedDateTitle(event.startDate, true) }}</p>
-      <p class="text-sm italic opacity-75 flex items-center gap-1">
-        <PhHourglassMedium size="16" weight="fill" />
-        {{ getRelativeString(defaultDate, event.startDate) }}
+    <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">
diff --git a/src/data/Events.ts b/src/data/Events.ts
index f42c3be..26258bf 100644
--- a/src/data/Events.ts
+++ b/src/data/Events.ts
@@ -55,7 +55,7 @@ export const regularEvents: CalendarEvent[] = [
     startDate: { day: 30, month: 2, year: 340 },
     endDate: { day: 27, month: 9, year: 355 },
     description:
-      "Le Grand Conseil Kaldélien ordonne la construction d'une muraille autour des Plaines de Poussières, afin de contenir les quelques démons y sortant.",
+      "Le Grand Conseil Kaldélien ordonne la construction d'une muraille autour des Plaines de Poussières, afin de contenir les démons y sortant.",
     category: 'construction',
     wiki: 'https://alexcreates.fr/leim/index.php/Plaines_de_poussi%C3%A8re',
     hidden: true
diff --git a/src/models/Date.ts b/src/models/Date.ts
index feaaec8..209819a 100644
--- a/src/models/Date.ts
+++ b/src/models/Date.ts
@@ -90,7 +90,11 @@ export function getDifferenceInDays(baseDate: LeimDate, relativeDate: LeimDate):
  * @param relativeDate The year to compare it to
  * @returns A string with info on how the relative date differs to the base date
  */
-export function getRelativeString(baseDate: LeimDate, relativeDate: LeimDate): string {
+export function getRelativeString(
+  baseDate: LeimDate,
+  relativeDate: LeimDate,
+  formatting: 'compact' | 'complex' = 'complex'
+): string {
   const differenceInDays: number = getDifferenceInDays(baseDate, relativeDate)
   let output: string = ''
   let direction: 'past' | 'present' | 'future' = 'present'
@@ -103,31 +107,33 @@ export function getRelativeString(baseDate: LeimDate, relativeDate: LeimDate): s
     direction = 'past'
   }
 
-  // Handle if it's the same date
-  if (direction === 'present') {
-    return "Aujourd'hui"
-  }
-  if (differenceInDays === -2) {
-    return 'Avant-hier'
-  }
-  if (differenceInDays === -1) {
-    return 'Hier'
-  }
-  if (differenceInDays === 1) {
-    return 'Demain'
-  }
-  if (differenceInDays === 2) {
-    return 'Après-demain'
-  }
+  if (formatting === 'complex') {
+    // Handle if it's the same date
+    if (direction === 'present') {
+      return "Aujourd'hui"
+    }
+    if (differenceInDays === -2) {
+      return 'Avant-hier'
+    }
+    if (differenceInDays === -1) {
+      return 'Hier'
+    }
+    if (differenceInDays === 1) {
+      return 'Demain'
+    }
+    if (differenceInDays === 2) {
+      return 'Après-demain'
+    }
 
-  // Get relevant prefix for the string
-  if (direction === 'future') {
-    directionPrefix = 'Dans'
-  } else if (direction === 'past') {
-    directionPrefix = 'Il y a'
-  }
+    // Get relevant prefix for the string
+    if (direction === 'future') {
+      directionPrefix = 'Dans '
+    } else if (direction === 'past') {
+      directionPrefix = 'Il y a '
+    }
 
-  output += directionPrefix
+    output += directionPrefix
+  }
 
   const yearPackets: number = Math.abs(Math.trunc(differenceInDays / daysPerYear))
   const monthPackets: number = Math.abs(Math.trunc(differenceInDays / daysPerMonth) % monthsPerYear)
@@ -138,9 +144,9 @@ export function getRelativeString(baseDate: LeimDate, relativeDate: LeimDate): s
   // Assign year part
   if (yearPackets) {
     if (yearPackets === 1) {
-      output += ` ${yearPackets} an`
+      output += `${yearPackets} an`
     } else {
-      output += ` ${yearPackets} ans`
+      output += `${yearPackets} ans`
     }
   }
 

From 0520aa44e634bb9c324121fe0e727b80502bb1ec Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 May 2024 23:00:12 +0200
Subject: [PATCH 12/25] Added tags for start and end dates

---
 src/components/calendar/CalendarEvent.vue     | 59 +++++++++++--------
 .../calendar/CalendarEventDetails.vue         | 49 ++++++++++-----
 .../calendar/state/monthly/DayTile.vue        |  9 ++-
 src/data/Events.ts                            | 12 +++-
 src/stores/EventStore.ts                      | 16 +++--
 5 files changed, 99 insertions(+), 46 deletions(-)

diff --git a/src/components/calendar/CalendarEvent.vue b/src/components/calendar/CalendarEvent.vue
index 0a794f1..c8d445e 100644
--- a/src/components/calendar/CalendarEvent.vue
+++ b/src/components/calendar/CalendarEvent.vue
@@ -1,12 +1,21 @@
 <script lang="ts" setup>
+import { cn } from '@/lib/utils'
 import { Popover, PopoverTrigger } from '@/components/ui/popover'
 import type { CalendarEvent } from '@/models/Events'
 
 import CalendarEventDetails from './CalendarEventDetails.vue'
+import { areDatesIdentical, type LeimDate } from '@/models/Date'
 
-defineProps<{
+const props = defineProps<{
   event: CalendarEvent
+  tileDate: LeimDate
 }>()
+
+const spansMultipleDays = Boolean(props.event.startDate && props.event.endDate)
+
+const isStartEvent = spansMultipleDays && areDatesIdentical(props.tileDate, props.event.startDate)
+const isEndEvent =
+  spansMultipleDays && props.event.endDate && areDatesIdentical(props.tileDate, props.event.endDate)
 </script>
 
 <template>
@@ -14,32 +23,36 @@ defineProps<{
     <PopoverTrigger as-child>
       <button
         class="text-xs px-2 py-1 block w-full text-left rounded-sm whitespace-nowrap overflow-hidden text-ellipsis"
-        :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'
-        }"
+        :class="
+          cn({
+            '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',
+            'rounded-r-none': isStartEvent,
+            'rounded-l-none': isEndEvent
+          })
+        "
       >
         {{ event.title }}
       </button>
     </PopoverTrigger>
 
-    <CalendarEventDetails :event v-once />
+    <CalendarEventDetails :event :spans-multiple-days :is-start-event :is-end-event v-once />
   </Popover>
 </template>
diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index 3fb9fc5..5f50f4b 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -3,13 +3,18 @@ import { getRelativeString } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
 
-import { PhHourglassMedium, PhAlarm } from '@phosphor-icons/vue'
+import { PhHourglassMedium, PhAlarm, PhHourglassHigh, PhHourglassLow } from '@phosphor-icons/vue'
 import { Badge } from '@/components/ui/badge'
 import { PopoverContent } from '@/components/ui/popover'
 
 const { defaultDate, getFormattedDateTitle } = useCalendar()
 
-const props = defineProps<{ event: CalendarEvent }>()
+const props = defineProps<{
+  event: CalendarEvent
+  spansMultipleDays: boolean
+  isStartEvent?: boolean
+  isEndEvent?: boolean
+}>()
 
 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 const dateDuration: string | null = props.event.endDate
@@ -20,9 +25,11 @@ const dateDuration: string | null = props.event.endDate
 <template>
   <PopoverContent
     class="event-details w-96"
-    :align="'start'"
+    :align="'center'"
     :align-offset="50"
+    :side="'left'"
     :collision-padding="20"
+    :hide-when-detached="true"
     :class="{
       'border-slate-800': !event.category,
       'border-lime-800': event.category === 'naissance',
@@ -50,24 +57,27 @@ const dateDuration: string | null = props.event.endDate
         {{ event.title }}
       </div>
 
-      <div class="mb-1 space-y-1">
-        <template v-if="event.startDate && !event.endDate">
+      <div class="mb-1">
+        <template v-if="!event.endDate">
           <p class="font-semibold">{{ getFormattedDateTitle(event.startDate, true) }}</p>
         </template>
-        <template v-else-if="event.startDate && event.endDate">
+        <template v-else>
           <p class="font-semibold">
             Du {{ getFormattedDateTitle(event.startDate, true) }} au
             {{ getFormattedDateTitle(event.endDate, true) }}
           </p>
-          <template v-if="dateDuration">
-            <p class="text-sm italic opacity-75 flex items-center gap-1">
-              <PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
-            </p>
-          </template>
         </template>
+      </div>
+
+      <div class="mb-1 space-y-1">
         <p class="text-sm italic opacity-75 flex items-center gap-1">
           <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
         </p>
+        <template v-if="dateDuration">
+          <p class="text-sm italic opacity-75 flex items-center gap-1">
+            <PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
+          </p>
+        </template>
       </div>
 
       <template v-if="event.category || event.secondaryCategories">
@@ -86,12 +96,21 @@ const dateDuration: string | null = props.event.endDate
         </ul>
       </template>
 
-      <hr class="border-slate-500 mt-2" />
+      <template v-if="event.description">
+        <hr class="border-slate-500 mt-2" />
 
-      <div class="mt-2 text-sm text-slate-300">
-        {{ event.description }}
-      </div>
+        <div class="mt-2 text-sm text-slate-300">
+          {{ event.description }}
+        </div>
+      </template>
     </div>
+
+    <Badge v-if="isStartEvent" class="absolute -top-2 left-2 hover:bg-slate-300 hover:opacity-100">
+      <PhHourglassHigh size="16" weight="fill" /> Début
+    </Badge>
+    <Badge v-if="isEndEvent" class="absolute -top-2 left-2 hover:bg-slate-300 hover:opacity-100">
+      <PhHourglassLow size="16" weight="fill" /> Fin
+    </Badge>
   </PopoverContent>
 </template>
 
diff --git a/src/components/calendar/state/monthly/DayTile.vue b/src/components/calendar/state/monthly/DayTile.vue
index 5d9aada..3852cc1 100644
--- a/src/components/calendar/state/monthly/DayTile.vue
+++ b/src/components/calendar/state/monthly/DayTile.vue
@@ -24,7 +24,10 @@ const { currentEvents } = storeToRefs(useCalendarEvents())
 
 const eventsForTheDay = computed(() => {
   return currentEvents.value.filter((currentEvent) => {
-    return areDatesIdentical(currentEvent.startDate, props.date)
+    return (
+      areDatesIdentical(currentEvent.startDate, props.date) ||
+      areDatesIdentical(currentEvent.endDate!, props.date)
+    )
   })
 })
 
@@ -90,7 +93,7 @@ const eventsNotDisplayed = computed(
       }"
     >
       <li v-for="event in eventsToDisplay" :key="event.title" class="grid pointer-events-auto">
-        <CalendarEventButton :event />
+        <CalendarEventButton :event :tile-date="date" />
       </li>
 
       <li v-if="eventsNotDisplayed > 0" class="pointer-events-auto">
@@ -116,7 +119,7 @@ const eventsNotDisplayed = computed(
                 :key="event.title"
                 class="grid pointer-events-auto"
               >
-                <CalendarEventButton :event />
+                <CalendarEventButton :event :tile-date="date" />
               </li>
             </ul>
           </PopoverContent>
diff --git a/src/data/Events.ts b/src/data/Events.ts
index 26258bf..11abfc3 100644
--- a/src/data/Events.ts
+++ b/src/data/Events.ts
@@ -22,6 +22,16 @@ export const regularEvents: CalendarEvent[] = [
     wiki: 'https://alexcreates.fr/leim/index.php/Pr%C3%AAtresses_d%27Asm%C3%A9nys',
     hidden: true
   },
+  {
+    title: 'Marche du sang',
+    startDate: { day: 18, month: 9, year: -420 },
+    endDate: { day: 27, month: 1, year: -419 },
+    description:
+      "L'empereur de Kaliatos ordonne personnellement la traque de Jorhas Kirendre pour connivence avec les démons. Plusieurs bataillons sont affectés à la chasse de Jorhas, qui se terminera par son incarcération ainsi que la mort de plusieurs centaines de soldats.",
+    category: 'criminalité',
+    wiki: 'https://alexcreates.fr/leim/index.php/Jorhas_Kirendre',
+    hidden: true
+  },
   {
     title: 'Exécution de Tyhos',
     startDate: { day: 1, month: 0, year: 0 },
@@ -130,7 +140,7 @@ export const regularEvents: CalendarEvent[] = [
     description: "Le Moine Premier inaugure la grande cloche d'argent au sommet du Pilier d'Ikami.",
     startDate: { day: 29, month: 5, year: 3209 },
     category: 'religion',
-    hidden: true
+    secondaryCategories: ['inauguration']
   },
   {
     title: '1ère disparation à Cantane',
diff --git a/src/stores/EventStore.ts b/src/stores/EventStore.ts
index 663f2f5..c47a6b1 100644
--- a/src/stores/EventStore.ts
+++ b/src/stores/EventStore.ts
@@ -47,10 +47,15 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    * @returns Whether the event should appear in the current view
    */
   function shouldEventBeDisplayed(event: CalendarEvent): boolean {
-    const eventDateToDays = convertDateToDays(event.startDate)
+    const eventStartDateToDays = convertDateToDays(event.startDate)
+    const eventEndDateToDays: number = event.endDate ? convertDateToDays(event.endDate) : 0
+
     const isEventOnCurrentScreen =
-      event.startDate.year === currentDate.currentYear &&
-      event.startDate.month === currentDate.currentMonth
+      (event.startDate.year === currentDate.currentYear &&
+        event.startDate.month === currentDate.currentMonth) ||
+      (event.endDate &&
+        event.endDate.year === currentDate.currentYear &&
+        event.endDate.month === currentDate.currentMonth)
 
     // Check whether the event is on the last 8 tiles
     // This is to allow leap events from appearing on the last 8 tiles
@@ -63,7 +68,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     const last8Tiles = lastDayOfCurrentMonth + 8
 
     const isEventOnNext8Tiles =
-      eventDateToDays <= last8Tiles && eventDateToDays >= lastDayOfCurrentMonth
+      (eventStartDateToDays <= last8Tiles && eventStartDateToDays >= lastDayOfCurrentMonth) ||
+      (Boolean(event.endDate) &&
+        eventEndDateToDays <= last8Tiles &&
+        eventEndDateToDays >= lastDayOfCurrentMonth)
 
     switch (currentConfig.viewType) {
       case 'month':

From 145338c4d9b4c77125ef271da5963e281cb7f8b9 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 3 May 2024 12:13:00 +0200
Subject: [PATCH 13/25] Fixed dropdown padding

---
 src/components/calendar/CalendarSwitch.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/calendar/CalendarSwitch.vue b/src/components/calendar/CalendarSwitch.vue
index a663bf0..9029500 100644
--- a/src/components/calendar/CalendarSwitch.vue
+++ b/src/components/calendar/CalendarSwitch.vue
@@ -27,7 +27,7 @@ const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
         {{ viewTypeTitle }}
       </Button>
     </DropdownMenuTrigger>
-    <DropdownMenuContent>
+    <DropdownMenuContent :side="'bottom'" :collision-padding="30">
       <DropdownMenuLabel>Mode d'affichage</DropdownMenuLabel>
       <DropdownMenuSeparator />
       <DropdownMenuItem

From e01d99d1238e71e47e304aa33426264c56a7600e Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 3 May 2024 12:14:37 +0200
Subject: [PATCH 14/25] Added popover close on start/end select

---
 src/components/calendar/CalendarEvent.vue     | 18 ++++++++--
 .../calendar/CalendarEventDetails.vue         | 33 ++++++++++++++-----
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/components/calendar/CalendarEvent.vue b/src/components/calendar/CalendarEvent.vue
index c8d445e..9f303c9 100644
--- a/src/components/calendar/CalendarEvent.vue
+++ b/src/components/calendar/CalendarEvent.vue
@@ -5,6 +5,7 @@ import type { CalendarEvent } from '@/models/Events'
 
 import CalendarEventDetails from './CalendarEventDetails.vue'
 import { areDatesIdentical, type LeimDate } from '@/models/Date'
+import { ref } from 'vue'
 
 const props = defineProps<{
   event: CalendarEvent
@@ -16,10 +17,16 @@ const spansMultipleDays = Boolean(props.event.startDate && props.event.endDate)
 const isStartEvent = spansMultipleDays && areDatesIdentical(props.tileDate, props.event.startDate)
 const isEndEvent =
   spansMultipleDays && props.event.endDate && areDatesIdentical(props.tileDate, props.event.endDate)
+
+const isPopoverOpen = ref<boolean>(false)
+
+function handleClosePopover() {
+  isPopoverOpen.value = false
+}
 </script>
 
 <template>
-  <Popover>
+  <Popover v-model:open="isPopoverOpen">
     <PopoverTrigger as-child>
       <button
         class="text-xs px-2 py-1 block w-full text-left rounded-sm whitespace-nowrap overflow-hidden text-ellipsis"
@@ -53,6 +60,13 @@ const isEndEvent =
       </button>
     </PopoverTrigger>
 
-    <CalendarEventDetails :event :spans-multiple-days :is-start-event :is-end-event v-once />
+    <CalendarEventDetails
+      :event
+      :spans-multiple-days
+      :is-start-event
+      :is-end-event
+      @query:close-popover="handleClosePopover"
+      v-once
+    />
   </Popover>
 </template>
diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index 5f50f4b..9316da0 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getRelativeString } from '@/models/Date'
+import { getRelativeString, type LeimDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
 
@@ -7,7 +7,7 @@ import { PhHourglassMedium, PhAlarm, PhHourglassHigh, PhHourglassLow } from '@ph
 import { Badge } from '@/components/ui/badge'
 import { PopoverContent } from '@/components/ui/popover'
 
-const { defaultDate, getFormattedDateTitle } = useCalendar()
+const { defaultDate, getFormattedDateTitle, jumpToDate } = useCalendar()
 
 const props = defineProps<{
   event: CalendarEvent
@@ -16,10 +16,17 @@ const props = defineProps<{
   isEndEvent?: boolean
 }>()
 
+const emit = defineEmits(['query:close-popover'])
+
 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 const dateDuration: string | null = props.event.endDate
   ? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
   : null
+
+function handleJumpToDate(date: LeimDate) {
+  jumpToDate(date)
+  emit('query:close-popover')
+}
 </script>
 
 <template>
@@ -105,12 +112,22 @@ const dateDuration: string | null = props.event.endDate
       </template>
     </div>
 
-    <Badge v-if="isStartEvent" class="absolute -top-2 left-2 hover:bg-slate-300 hover:opacity-100">
-      <PhHourglassHigh size="16" weight="fill" /> Début
-    </Badge>
-    <Badge v-if="isEndEvent" class="absolute -top-2 left-2 hover:bg-slate-300 hover:opacity-100">
-      <PhHourglassLow size="16" weight="fill" /> Fin
-    </Badge>
+    <nav v-if="event.startDate && event.endDate" class="absolute -top-2 right-2 flex gap-2">
+      <Badge class="hover:opacity-100 hover:bg-slate-300" as-child>
+        <button
+          class="flex gap-1"
+          @click="handleJumpToDate(event.startDate!)"
+          title="Naviguer au début"
+        >
+          <PhHourglassHigh size="16" weight="fill" /> Début
+        </button>
+      </Badge>
+      <Badge class="hover:opacity-100 hover:bg-slate-300" as-child title="Naviguer à la fin">
+        <button class="flex gap-1" @click="handleJumpToDate(event.endDate!)">
+          <PhHourglassLow size="16" weight="fill" /> Fin
+        </button>
+      </Badge>
+    </nav>
   </PopoverContent>
 </template>
 

From 1ba5cef56417b0dea47e6c73e8c24dfe23f4f7be Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 3 May 2024 13:41:24 +0200
Subject: [PATCH 15/25] Better collision padding for calendar events

---
 src/components/calendar/CalendarEventDetails.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index 9316da0..7175349 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -35,7 +35,7 @@ function handleJumpToDate(date: LeimDate) {
     :align="'center'"
     :align-offset="50"
     :side="'left'"
-    :collision-padding="20"
+    :collision-padding="60"
     :hide-when-detached="true"
     :class="{
       'border-slate-800': !event.category,

From bfa7f1aea5b42f2324b3ddcb7e055b58f32c5420 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 3 May 2024 17:22:12 +0200
Subject: [PATCH 16/25] Removed useless call to event store for now

---
 src/components/calendar/state/centennially/Layout.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/calendar/state/centennially/Layout.vue b/src/components/calendar/state/centennially/Layout.vue
index 63d8978..195f44c 100644
--- a/src/components/calendar/state/centennially/Layout.vue
+++ b/src/components/calendar/state/centennially/Layout.vue
@@ -1,8 +1,4 @@
-<script lang="ts" setup>
-import { useCalendarEvents } from '@/stores/EventStore'
-
-const { currentEvents } = useCalendarEvents()
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <div>Century</div>

From 8a9f38069aac2c7310c18705dc5cec637cf0bc99 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 3 May 2024 18:15:40 +0200
Subject: [PATCH 17/25] Sorting events by default and minor fixes

---
 .../calendar/search/CalendarSearch.vue        |  8 ++--
 src/data/Events.ts                            |  2 +-
 src/stores/EventStore.ts                      | 46 ++++++++++---------
 3 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/components/calendar/search/CalendarSearch.vue b/src/components/calendar/search/CalendarSearch.vue
index 8daa23d..a1796ea 100644
--- a/src/components/calendar/search/CalendarSearch.vue
+++ b/src/components/calendar/search/CalendarSearch.vue
@@ -54,7 +54,7 @@ import {
 import SearchList from './lists/SearchList.vue'
 
 const { characters } = useCharacters()
-const { baseEvents } = useCalendarEvents()
+const { allEvents } = useCalendarEvents()
 
 const modalOpen = defineModel({ default: false })
 
@@ -96,11 +96,11 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
   // Assign data to loop over and filter
   // They are assigned this way for readability
   if (selectedEntity.value === 'events') {
-    dataToFilter = baseEvents
+    dataToFilter = allEvents
   } else if (selectedEntity.value === 'characters') {
     dataToFilter = characters
   } else {
-    dataToFilter = [...baseEvents, ...characters]
+    dataToFilter = [...allEvents, ...characters]
   }
 
   /**
@@ -306,7 +306,7 @@ function handleCategorySelect(e: any) {
           </div>
 
           <div class="flex items-center gap-1">
-            <TagsInput class="px-0 gap-0 w-52" :model-value="selectedCategories">
+            <TagsInput class="px-0 gap-0 w-72" :model-value="selectedCategories">
               <div class="flex gap-2 flex-wrap items-center px-3">
                 <TagsInputItem v-for="item in selectedCategories" :key="item" :value="item">
                   <TagsInputItemText class="capitalize" />
diff --git a/src/data/Events.ts b/src/data/Events.ts
index 11abfc3..6788b03 100644
--- a/src/data/Events.ts
+++ b/src/data/Events.ts
@@ -1,6 +1,6 @@
 import type { CalendarEvent } from '@/models/Events'
 
-export const regularEvents: CalendarEvent[] = [
+export const initialEvents: CalendarEvent[] = [
   // Histoire Antique
   {
     title: "Laurdieu devient la première cité de l'empire de Kaliatos",
diff --git a/src/stores/EventStore.ts b/src/stores/EventStore.ts
index c47a6b1..964f208 100644
--- a/src/stores/EventStore.ts
+++ b/src/stores/EventStore.ts
@@ -1,35 +1,37 @@
-import { regularEvents } from '@/data/Events'
-import { convertDateToDays, daysPerMonth } from '@/models/Date'
+import { initialEvents } from '@/data/Events'
+import { compareDates, convertDateToDays, daysPerMonth } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { defineStore } from 'pinia'
 import { ref, watch, type Ref } from 'vue'
 import { useCalendar } from './CalendarStore'
-import { useCharacters } from './CharacterStore'
+// import { useCharacters } from './CharacterStore'
 
 export const useCalendarEvents = defineStore('calendar-events', () => {
   const { currentDate, currentConfig } = useCalendar()
-  const { charactersWithBirthData, charactersWithDeathData } = useCharacters()
+  // const { charactersWithBirthData, charactersWithDeathData } = useCharacters()
 
-  const baseEvents: CalendarEvent[] = regularEvents
+  const baseEvents: CalendarEvent[] = initialEvents
 
-  const characterBirthEvents = charactersWithBirthData.map((character) => {
-    return {
-      title: `Naissance de ${character.name}`,
-      startDate: character.birth,
-      category: 'naissance'
-    } as CalendarEvent
+  // const characterBirthEvents = charactersWithBirthData.map((character) => {
+  //   return {
+  //     title: `Naissance de ${character.name}`,
+  //     startDate: character.birth,
+  //     category: 'naissance'
+  //   } as CalendarEvent
+  // })
+
+  // const characterDeathEvents = charactersWithDeathData.map((character) => {
+  //   return {
+  //     title: `Décès de ${character.name}`,
+  //     startDate: character.death,
+  //     category: 'mort'
+  //   } as CalendarEvent
+  // })
+
+  const allEvents = [...baseEvents].sort((a, b) => {
+    return compareDates(a.startDate, b.startDate, 'desc')
   })
 
-  const characterDeathEvents = charactersWithDeathData.map((character) => {
-    return {
-      title: `Décès de ${character.name}`,
-      startDate: character.death,
-      category: 'mort'
-    } as CalendarEvent
-  })
-
-  const allEvents = [...characterBirthEvents, ...characterDeathEvents, ...baseEvents]
-
   // Gets all current event in its default state
   const currentEvents: Ref<CalendarEvent[]> = ref(computeCurrentEvents())
 
@@ -106,5 +108,5 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     return allEvents.filter((event) => shouldEventBeDisplayed(event))
   }
 
-  return { baseEvents, allEvents, currentEvents }
+  return { allEvents, currentEvents }
 })

From e9429ac5571547541c9c7030ebb5cd3b12f5ce2a Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 3 May 2024 23:47:10 +0200
Subject: [PATCH 18/25] First draft of function that handles seeing previous /
 next events

---
 src/components/calendar/CalendarEvent.vue     |  6 +-
 .../calendar/CalendarEventDetails.vue         | 52 +++++++++-
 src/components/calendar/CalendarMenuNav.vue   |  2 +-
 src/stores/EventStore.ts                      | 96 ++++++++++++++++++-
 4 files changed, 147 insertions(+), 9 deletions(-)

diff --git a/src/components/calendar/CalendarEvent.vue b/src/components/calendar/CalendarEvent.vue
index 9f303c9..7f1c6e5 100644
--- a/src/components/calendar/CalendarEvent.vue
+++ b/src/components/calendar/CalendarEvent.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
 import { cn } from '@/lib/utils'
+import { areDatesIdentical, type LeimDate } from '@/models/Date'
+
 import { Popover, PopoverTrigger } from '@/components/ui/popover'
 import type { CalendarEvent } from '@/models/Events'
-
 import CalendarEventDetails from './CalendarEventDetails.vue'
-import { areDatesIdentical, type LeimDate } from '@/models/Date'
-import { ref } from 'vue'
 
 const props = defineProps<{
   event: CalendarEvent
diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index 7175349..49b2b8f 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -2,12 +2,21 @@
 import { getRelativeString, type LeimDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
+import { useCalendarEvents } from '@/stores/EventStore'
 
-import { PhHourglassMedium, PhAlarm, PhHourglassHigh, PhHourglassLow } from '@phosphor-icons/vue'
+import {
+  PhHourglassMedium,
+  PhAlarm,
+  PhHourglassHigh,
+  PhHourglassLow,
+  PhArrowBendDoubleUpLeft,
+  PhArrowBendDoubleUpRight
+} from '@phosphor-icons/vue'
 import { Badge } from '@/components/ui/badge'
 import { PopoverContent } from '@/components/ui/popover'
 
 const { defaultDate, getFormattedDateTitle, jumpToDate } = useCalendar()
+const { getRelativeEvent } = useCalendarEvents()
 
 const props = defineProps<{
   event: CalendarEvent
@@ -16,7 +25,9 @@ const props = defineProps<{
   isEndEvent?: boolean
 }>()
 
-const emit = defineEmits(['query:close-popover'])
+const emit = defineEmits<{
+  (e: 'query:close-popover'): void
+}>()
 
 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 const dateDuration: string | null = props.event.endDate
@@ -27,6 +38,16 @@ function handleJumpToDate(date: LeimDate) {
   jumpToDate(date)
   emit('query:close-popover')
 }
+
+function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
+  try {
+    const { targetDate } = getRelativeEvent(props.event, position, props.isEndEvent)
+
+    handleJumpToDate(targetDate)
+  } catch (err) {
+    console.log(err)
+  }
+}
 </script>
 
 <template>
@@ -123,11 +144,36 @@ function handleJumpToDate(date: LeimDate) {
         </button>
       </Badge>
       <Badge class="hover:opacity-100 hover:bg-slate-300" as-child title="Naviguer à la fin">
-        <button class="flex gap-1" @click="handleJumpToDate(event.endDate!)">
+        <button
+          class="flex gap-1"
+          @click="handleJumpToDate(event.endDate!)"
+          title="Naviguer à la fin"
+        >
           <PhHourglassLow size="16" weight="fill" /> Fin
         </button>
       </Badge>
     </nav>
+
+    <nav class="mt-2 flex gap-2">
+      <Badge class="hover:opacity-100 hover:bg-slate-300" as-child>
+        <button
+          class="flex gap-1"
+          @click="handleGotoRelativeEvent('prev')"
+          title="Évènement précédent"
+        >
+          <PhArrowBendDoubleUpLeft size="16" weight="fill" /> Précédent
+        </button>
+      </Badge>
+      <Badge class="hover:opacity-100 hover:bg-slate-300" as-child title="Naviguer à la fin">
+        <button
+          class="flex gap-1"
+          @click="handleGotoRelativeEvent('next')"
+          title="Évènement suivant"
+        >
+          <PhArrowBendDoubleUpRight size="16" weight="fill" /> Suivant
+        </button>
+      </Badge>
+    </nav>
   </PopoverContent>
 </template>
 
diff --git a/src/components/calendar/CalendarMenuNav.vue b/src/components/calendar/CalendarMenuNav.vue
index 05d303e..d68c0eb 100644
--- a/src/components/calendar/CalendarMenuNav.vue
+++ b/src/components/calendar/CalendarMenuNav.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed, type ComputedRef } from 'vue'
 import { useCalendar } from '@/stores/CalendarStore'
 
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
@@ -9,7 +10,6 @@ import {
   PhCaretRight
 } from '@phosphor-icons/vue'
 import Button from '../ui/button/Button.vue'
-import { computed, type ComputedRef } from 'vue'
 
 interface DirectionLabels {
   pastFar: string
diff --git a/src/stores/EventStore.ts b/src/stores/EventStore.ts
index 964f208..4753c1e 100644
--- a/src/stores/EventStore.ts
+++ b/src/stores/EventStore.ts
@@ -1,5 +1,5 @@
 import { initialEvents } from '@/data/Events'
-import { compareDates, convertDateToDays, daysPerMonth } from '@/models/Date'
+import { compareDates, convertDateToDays, daysPerMonth, type LeimDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { defineStore } from 'pinia'
 import { ref, watch, type Ref } from 'vue'
@@ -108,5 +108,97 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     return allEvents.filter((event) => shouldEventBeDisplayed(event))
   }
 
-  return { allEvents, currentEvents }
+  /**
+   * From a base event, gets the next or previous in the timeline
+   * @todo **This should probably be extracted to function FIRST with dates only, as the initialIsEnd param is only used at the beggining to establish a pivot**
+   *
+   * @param event The event at a given position in the data
+   * @param position Whether we should get the next or previous event
+   * @returns The next event in chronological order
+   */
+  function getRelativeEvent(
+    event: CalendarEvent,
+    position: 'next' | 'prev' = 'next',
+    initialIsEnd: boolean = false
+  ): { event: CalendarEvent; targetDate: LeimDate } {
+    let eventPivotValue: number // Day value of the date that the user interacted with
+
+    if (initialIsEnd && event.endDate) {
+      eventPivotValue = convertDateToDays(event.endDate)
+    } else {
+      eventPivotValue = convertDateToDays(event.startDate)
+    }
+
+    const t: { eventData: CalendarEvent; distance: number; targetKey: 'startDate' | 'endDate' }[] =
+      []
+    let eventPivotIndex: number | null = null // Pivot index to save
+    let realPositon: number = 0
+
+    // Loop over all event once to convert the structure to a usable one
+    for (let i = 0; i < allEvents.length; i++) {
+      const e: CalendarEvent = allEvents[i]
+      // Estimate distance from pivot
+      const startDateDays: number = convertDateToDays(e.startDate)
+      const startDistance: number = startDateDays - eventPivotValue
+
+      // Push startDate to comparator array
+      t.push({
+        eventData: e,
+        distance: startDistance,
+        targetKey: 'startDate'
+      })
+
+      // If the distance from initial pivot is 0, this is our target index
+      if (startDistance === 0) {
+        eventPivotIndex = realPositon
+      }
+
+      // Check the same things for endDate
+      if (e.endDate) {
+        realPositon++
+        const endDateDays: number = convertDateToDays(e.endDate)
+        const endDistance: number = endDateDays - eventPivotValue
+
+        // Push optional endDate to comparator array
+        t.push({
+          eventData: e,
+          distance: endDistance,
+          targetKey: 'endDate'
+        })
+
+        // Same as above, but with the optional end distance
+        if (endDistance === 0) {
+          eventPivotIndex = realPositon
+        }
+      }
+
+      realPositon++
+
+      // Optimization possible with index skipping (once we find the pivot index)
+    }
+
+    // If SOMEHOW we can't find the pivot index
+    if (eventPivotIndex === null) {
+      throw new Error("Impossible de trouver l'évènement initial.")
+    }
+
+    let returnEventIndex: number | null = null // Output event index
+    if (position === 'next') {
+      returnEventIndex = eventPivotIndex + 1
+    } else {
+      returnEventIndex = eventPivotIndex - 1
+    }
+
+    if (!t[returnEventIndex])
+      throw new Error(
+        "Aucun évènement trouvé ; Peut-être l'évènement se situe au début ou à la fin du calendrier ?"
+      )
+
+    return {
+      event: t[returnEventIndex].eventData,
+      targetDate: t[returnEventIndex].eventData[t[returnEventIndex].targetKey]!
+    }
+  }
+
+  return { allEvents, currentEvents, getRelativeEvent }
 })

From 82bd7cd3cee1bd335a3ec166c0fb64be25633b1f Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 4 May 2024 12:19:58 +0200
Subject: [PATCH 19/25] Refactored event goto function into a sub function

---
 .../calendar/CalendarEventDetails.vue         |  4 ++--
 src/stores/EventStore.ts                      | 22 +++++++++++++------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index 49b2b8f..c7e3f73 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -16,7 +16,7 @@ import { Badge } from '@/components/ui/badge'
 import { PopoverContent } from '@/components/ui/popover'
 
 const { defaultDate, getFormattedDateTitle, jumpToDate } = useCalendar()
-const { getRelativeEvent } = useCalendarEvents()
+const { getRelativeEventFromEvent } = useCalendarEvents()
 
 const props = defineProps<{
   event: CalendarEvent
@@ -41,7 +41,7 @@ function handleJumpToDate(date: LeimDate) {
 
 function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
   try {
-    const { targetDate } = getRelativeEvent(props.event, position, props.isEndEvent)
+    const { targetDate } = getRelativeEventFromEvent(props.event, position, props.isEndEvent)
 
     handleJumpToDate(targetDate)
   } catch (err) {
diff --git a/src/stores/EventStore.ts b/src/stores/EventStore.ts
index 4753c1e..ba519ad 100644
--- a/src/stores/EventStore.ts
+++ b/src/stores/EventStore.ts
@@ -116,19 +116,27 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    * @param position Whether we should get the next or previous event
    * @returns The next event in chronological order
    */
-  function getRelativeEvent(
+  function getRelativeEventFromEvent(
     event: CalendarEvent,
     position: 'next' | 'prev' = 'next',
     initialIsEnd: boolean = false
   ): { event: CalendarEvent; targetDate: LeimDate } {
-    let eventPivotValue: number // Day value of the date that the user interacted with
+    let dateToParse: LeimDate // Day value of the date that the user interacted with
 
     if (initialIsEnd && event.endDate) {
-      eventPivotValue = convertDateToDays(event.endDate)
+      dateToParse = event.endDate
     } else {
-      eventPivotValue = convertDateToDays(event.startDate)
+      dateToParse = event.startDate
     }
 
+    return getRelativeEventFromDate(dateToParse, position)
+  }
+
+  function getRelativeEventFromDate(
+    date: LeimDate,
+    position: 'next' | 'prev' = 'next'
+  ): { event: CalendarEvent; targetDate: LeimDate } {
+    const pivotValue = convertDateToDays(date)
     const t: { eventData: CalendarEvent; distance: number; targetKey: 'startDate' | 'endDate' }[] =
       []
     let eventPivotIndex: number | null = null // Pivot index to save
@@ -139,7 +147,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
       const e: CalendarEvent = allEvents[i]
       // Estimate distance from pivot
       const startDateDays: number = convertDateToDays(e.startDate)
-      const startDistance: number = startDateDays - eventPivotValue
+      const startDistance: number = startDateDays - pivotValue
 
       // Push startDate to comparator array
       t.push({
@@ -157,7 +165,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
       if (e.endDate) {
         realPositon++
         const endDateDays: number = convertDateToDays(e.endDate)
-        const endDistance: number = endDateDays - eventPivotValue
+        const endDistance: number = endDateDays - pivotValue
 
         // Push optional endDate to comparator array
         t.push({
@@ -200,5 +208,5 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     }
   }
 
-  return { allEvents, currentEvents, getRelativeEvent }
+  return { allEvents, currentEvents, getRelativeEventFromDate, getRelativeEventFromEvent }
 })

From 9fbbfde8982a3b6eda867ce89b7408c15f7b4791 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 4 May 2024 14:40:44 +0200
Subject: [PATCH 20/25] Updated event navigation to include multispan

---
 src/stores/EventStore.ts | 69 +++++++++++++++++++++-------------------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/src/stores/EventStore.ts b/src/stores/EventStore.ts
index ba519ad..1feb0b3 100644
--- a/src/stores/EventStore.ts
+++ b/src/stores/EventStore.ts
@@ -137,14 +137,12 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     position: 'next' | 'prev' = 'next'
   ): { event: CalendarEvent; targetDate: LeimDate } {
     const pivotValue = convertDateToDays(date)
-    const t: { eventData: CalendarEvent; distance: number; targetKey: 'startDate' | 'endDate' }[] =
-      []
-    let eventPivotIndex: number | null = null // Pivot index to save
-    let realPositon: number = 0
+    let t: { eventData: CalendarEvent; distance: number; targetKey: 'startDate' | 'endDate' }[] = []
 
     // Loop over all event once to convert the structure to a usable one
     for (let i = 0; i < allEvents.length; i++) {
       const e: CalendarEvent = allEvents[i]
+
       // Estimate distance from pivot
       const startDateDays: number = convertDateToDays(e.startDate)
       const startDistance: number = startDateDays - pivotValue
@@ -156,14 +154,8 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
         targetKey: 'startDate'
       })
 
-      // If the distance from initial pivot is 0, this is our target index
-      if (startDistance === 0) {
-        eventPivotIndex = realPositon
-      }
-
       // Check the same things for endDate
       if (e.endDate) {
-        realPositon++
         const endDateDays: number = convertDateToDays(e.endDate)
         const endDistance: number = endDateDays - pivotValue
 
@@ -173,38 +165,49 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
           distance: endDistance,
           targetKey: 'endDate'
         })
-
-        // Same as above, but with the optional end distance
-        if (endDistance === 0) {
-          eventPivotIndex = realPositon
-        }
       }
-
-      realPositon++
-
-      // Optimization possible with index skipping (once we find the pivot index)
     }
 
-    // If SOMEHOW we can't find the pivot index
-    if (eventPivotIndex === null) {
-      throw new Error("Impossible de trouver l'évènement initial.")
-    }
+    // // Special case : If we query the first one but it already is
+    // if (position === 'prev' && t[0].distance === 0) {
+    //   const targetDate =
+    //     t[0].targetKey === 'startDate' ? t[0].eventData.startDate : t[0].eventData.endDate!
+    //   return {
+    //     event: t[0].eventData,
+    //     targetDate: targetDate
+    //   }
+    // }
+    // // Special case : If we query the last one but it already is
+    // if (position === 'next' && t[t.length - 1].distance === 0) {
+    //   const targetDate =
+    //     t[t.length - 1].targetKey === 'startDate'
+    //       ? t[t.length - 1].eventData.startDate
+    //       : t[t.length - 1].eventData.endDate!
+    //   return {
+    //     event: t[t.length - 1].eventData,
+    //     targetDate: targetDate
+    //   }
+    // }
 
-    let returnEventIndex: number | null = null // Output event index
-    if (position === 'next') {
-      returnEventIndex = eventPivotIndex + 1
-    } else {
-      returnEventIndex = eventPivotIndex - 1
-    }
+    // Based on the direction, either ignore negative distance (past) or positive distance (future)
+    t = t.filter((i) => {
+      return position === 'next' ? i.distance > 0 : i.distance < 0
+    })
 
-    if (!t[returnEventIndex])
+    if (!t.length) {
       throw new Error(
-        "Aucun évènement trouvé ; Peut-être l'évènement se situe au début ou à la fin du calendrier ?"
+        "Aucun évènement suivant ou précédent trouvé ; Peut-être l'évènement se situe au début ou à la fin du calendrier ?"
       )
+    }
+
+    // Get event with remaining minimum distance
+    const closestEvent = t.reduce((a, b) => {
+      return Math.abs(b.distance) < Math.abs(a.distance) ? b : a
+    })
 
     return {
-      event: t[returnEventIndex].eventData,
-      targetDate: t[returnEventIndex].eventData[t[returnEventIndex].targetKey]!
+      event: closestEvent.eventData,
+      targetDate: closestEvent.eventData[closestEvent.targetKey]!
     }
   }
 

From 49b318b376b4b56c30a4cfb1cd4d976391e60d3e Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 4 May 2024 15:50:20 +0200
Subject: [PATCH 21/25] Added quick nav menu between content pages

Really happy that's a thing tbh
---
 package-lock.json                             |   8 +-
 package.json                                  |   3 +-
 src/components/calendar/CalendarMenu.vue      |  10 +-
 src/components/calendar/CalendarMenuNav.vue   |   2 +-
 .../calendar/CalendarMenuSubnav.vue           | 107 ++++++++++++++++++
 5 files changed, 119 insertions(+), 11 deletions(-)
 create mode 100644 src/components/calendar/CalendarMenuSubnav.vue

diff --git a/package-lock.json b/package-lock.json
index c2a70b7..9ebd87e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "vue-project",
       "version": "0.0.0",
       "dependencies": {
-        "@phosphor-icons/vue": "^2.1.6",
+        "@phosphor-icons/vue": "^2.2.1",
         "@vueuse/core": "^10.9.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
@@ -890,9 +890,9 @@
       }
     },
     "node_modules/@phosphor-icons/vue": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@phosphor-icons/vue/-/vue-2.1.6.tgz",
-      "integrity": "sha512-j4iVvNT4JbDR2udIVfakKZHd14i3jCvO4b24OC0W/1rasftU8qVg1Tnb3QDwAT0teNU+UxvaM+kCWxfGHC2dUg==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/vue/-/vue-2.2.1.tgz",
+      "integrity": "sha512-3RNg1utc2Z5RwPKWFkW3eXI/0BfQAwXgtFxPUPeSzi55jGYUq16b+UqcgbKLazWFlwg5R92OCLKjDiJjeiJcnA==",
       "engines": {
         "node": ">=14"
       },
diff --git a/package.json b/package.json
index 33bb9df..a1a3a19 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@phosphor-icons/vue": "^2.1.6",
+    "@phosphor-icons/vue": "^2.2.1",
+    "lucide-vue-next": "^0.364.0",
     "@vueuse/core": "^10.9.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
diff --git a/src/components/calendar/CalendarMenu.vue b/src/components/calendar/CalendarMenu.vue
index 2afe5f3..d44762b 100644
--- a/src/components/calendar/CalendarMenu.vue
+++ b/src/components/calendar/CalendarMenu.vue
@@ -4,11 +4,12 @@ import { useCalendar } from '@/stores/CalendarStore'
 import { Button } from '@/components/ui/button'
 import { PhMagnifyingGlass } from '@phosphor-icons/vue'
 import CalendarMenuNav from './CalendarMenuNav.vue'
+import CalendarMenuSubnav from './CalendarMenuSubnav.vue'
 import CalendarMenuToday from './CalendarMenuToday.vue'
 import CalendarSwitch from './CalendarSwitch.vue'
 import CalendarCurrentDate from './CalendarCurrentDate.vue'
 
-const { currentDate, revealAdvancedSearch } = useCalendar()
+const { revealAdvancedSearch } = useCalendar()
 </script>
 
 <template>
@@ -38,10 +39,9 @@ const { currentDate, revealAdvancedSearch } = useCalendar()
         </li>
       </menu>
     </div>
-    <div class="ml-12 flex">
-      <div class="px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
-        <span class="text-sm">{{ currentDate.currentDateTitle }}</span>
-      </div>
+
+    <div class="ml-6">
+      <CalendarMenuSubnav />
     </div>
   </header>
 </template>
diff --git a/src/components/calendar/CalendarMenuNav.vue b/src/components/calendar/CalendarMenuNav.vue
index d68c0eb..8120ac5 100644
--- a/src/components/calendar/CalendarMenuNav.vue
+++ b/src/components/calendar/CalendarMenuNav.vue
@@ -9,7 +9,7 @@ import {
   PhCaretLeft,
   PhCaretRight
 } from '@phosphor-icons/vue'
-import Button from '../ui/button/Button.vue'
+import Button from '@/components/ui/button/Button.vue'
 
 interface DirectionLabels {
   pastFar: string
diff --git a/src/components/calendar/CalendarMenuSubnav.vue b/src/components/calendar/CalendarMenuSubnav.vue
new file mode 100644
index 0000000..d6fe29f
--- /dev/null
+++ b/src/components/calendar/CalendarMenuSubnav.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import { daysPerMonth, monthsPerYear, type LeimDate } from '@/models/Date'
+import { useCalendar } from '@/stores/CalendarStore'
+import { useCalendarEvents } from '@/stores/EventStore'
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { PhArrowLineLeft, PhArrowLineRight } from '@phosphor-icons/vue'
+import Button from '@/components/ui/button/Button.vue'
+
+const { currentDate, currentConfig, jumpToDate } = useCalendar()
+const { getRelativeEventFromDate } = useCalendarEvents()
+
+function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
+  let fromDate: LeimDate
+  const toDay = position === 'next' ? daysPerMonth : 1
+  const toMonth = position === 'next' ? monthsPerYear : 0
+
+  switch (currentConfig.viewType) {
+    case 'month':
+      fromDate = {
+        day: toDay,
+        month: currentDate.currentMonth,
+        year: currentDate.currentYear
+      }
+      break
+
+    case 'year':
+      fromDate = {
+        day: toDay,
+        month: toMonth,
+        year: currentDate.currentYear
+      }
+      break
+
+    case 'decade':
+      fromDate = {
+        day: toDay,
+        month: currentDate.currentMonth,
+        year: currentDate.currentYear
+      }
+      break
+
+    case 'century':
+    default:
+      fromDate = {
+        day: toDay,
+        month: currentDate.currentMonth,
+        year: currentDate.currentYear
+      }
+      break
+  }
+
+  try {
+    const { targetDate } = getRelativeEventFromDate(fromDate, position)
+
+    jumpToDate(targetDate)
+  } catch (err) {
+    console.log(err)
+  }
+}
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <div class="w-40 px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+      <span class="text-sm">{{ currentDate.currentDateTitle }}</span>
+    </div>
+    <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+      <TooltipProvider :delayDuration="250">
+        <Tooltip>
+          <TooltipTrigger>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-t-sm rounded-b-none"
+              @click="handleGotoPreviousEventPage('prev')"
+            >
+              <PhArrowLineLeft size="22" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Précédente page à évènements</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+    <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+      <TooltipProvider :delayDuration="250">
+        <Tooltip>
+          <TooltipTrigger>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-t-sm rounded-b-none"
+              @click="handleGotoPreviousEventPage('next')"
+            >
+              <PhArrowLineRight size="22" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Prochaine page à évènements</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  </div>
+</template>

From f2bb535d9faeb55ef15feb78a454afedbb67d11a Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 4 May 2024 22:09:58 +0200
Subject: [PATCH 22/25] Added events

---
 src/data/Events.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/data/Events.ts b/src/data/Events.ts
index 6788b03..cb6b4e5 100644
--- a/src/data/Events.ts
+++ b/src/data/Events.ts
@@ -90,6 +90,24 @@ export const initialEvents: CalendarEvent[] = [
     secondaryCategories: ['science'],
     wiki: 'https://alexcreates.fr/leim/index.php/Buse_(arme)'
   },
+  {
+    title: 'Feux dans les champs de Bamast',
+    startDate: { day: 9, month: 5, year: 3200 },
+    description:
+      "Plusieurs incendies criminels se propagent à travers les champs de sérille des fermiers des littoraux de Bamast. Aucun suspect ni coupable ne sera trouvé et l'enquête sera baclée.",
+    category: 'catastrophe',
+    secondaryCategories: ['criminalité'],
+    wiki: 'https://alexcreates.fr/leim/index.php/Vascylly'
+  },
+  {
+    title: 'Meurtre de Darléon Typhos',
+    startDate: { day: 21, month: 6, year: 3200 },
+    description:
+      'Darléon Typhos surprend Vascylly fouillant sa demeure peu après la tombée de la nuit. Le majordome de la famille Typhos découvre le corps sans vie de son maître le lendemain.',
+    category: 'criminalité',
+    secondaryCategories: ['joueurs'],
+    wiki: 'https://alexcreates.fr/leim/index.php/Vascylly'
+  },
   {
     title: 'Scandale Rodhus',
     startDate: { day: 25, month: 9, year: 3208 },

From 9e6a0b19a6070919c257f61d3cc77c960b336c95 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 4 May 2024 23:30:07 +0200
Subject: [PATCH 23/25] Added another event

---
 src/data/Events.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/data/Events.ts b/src/data/Events.ts
index cb6b4e5..d5591de 100644
--- a/src/data/Events.ts
+++ b/src/data/Events.ts
@@ -22,6 +22,17 @@ export const initialEvents: CalendarEvent[] = [
     wiki: 'https://alexcreates.fr/leim/index.php/Pr%C3%AAtresses_d%27Asm%C3%A9nys',
     hidden: true
   },
+  {
+    title: 'La Rupture',
+    startDate: { day: 26, month: 5, year: -756 },
+    endDate: { day: 4, month: 9, year: 29 },
+    description:
+      "Les Abysses se déversent à la surface de Léim, à travers plusieurs brèches. Plusieurs hordes de démons se rapprochent des villes, et ce qu'on appellera l'Âge des Abysses commencent alors sur la planète entière.",
+    category: 'catastrophe',
+    secondaryCategories: ['catastrophe naturelle'],
+    wiki: 'https://alexcreates.fr/leim/index.php/Seconde_Rupture',
+    hidden: true
+  },
   {
     title: 'Marche du sang',
     startDate: { day: 18, month: 9, year: -420 },

From bf5b951e75e2f31e740df7fa2a9e5e9706e19069 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 4 May 2024 23:43:16 +0200
Subject: [PATCH 24/25] Added scroll to top when you switch pages

---
 src/components/calendar/search/CalendarSearch.vue   | 13 ++++++++++---
 src/components/calendar/search/lists/SearchList.vue |  3 ++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/calendar/search/CalendarSearch.vue b/src/components/calendar/search/CalendarSearch.vue
index a1796ea..a845d7f 100644
--- a/src/components/calendar/search/CalendarSearch.vue
+++ b/src/components/calendar/search/CalendarSearch.vue
@@ -15,8 +15,8 @@ import {
 import { useCharacters } from '@/stores/CharacterStore'
 import { useCalendarEvents } from '@/stores/EventStore'
 import { capitalize } from '@/utils/Strings'
-import { useMagicKeys, useStorage, whenever } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { useMagicKeys, useScroll, useStorage, whenever } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 import { searchUnifier, type SearchMode } from '../Search'
 
 import { Button } from '@/components/ui/button'
@@ -221,6 +221,13 @@ whenever(keys.control_period, () => {
   openDialog()
 })
 
+const searchResultsRef = ref<HTMLElement | null>(null)
+const { y: searchResultsY } = useScroll(searchResultsRef)
+
+watch(currentPage, () => {
+  searchResultsY.value = 0
+})
+
 // Compute categories based on current selectedEntity
 const currentCategories = computed(() => {
   if (selectedEntity.value === 'characters') {
@@ -391,7 +398,7 @@ function handleCategorySelect(e: any) {
 
       <hr />
 
-      <div v-if="searchResults.length > 0" class="grow overflow-y-auto">
+      <div v-if="searchResults.length > 0" class="grow overflow-y-auto" ref="searchResultsRef">
         <SearchList
           :results="searchResults"
           :current-entity="selectedEntity"
diff --git a/src/components/calendar/search/lists/SearchList.vue b/src/components/calendar/search/lists/SearchList.vue
index bc53b29..e91ffad 100644
--- a/src/components/calendar/search/lists/SearchList.vue
+++ b/src/components/calendar/search/lists/SearchList.vue
@@ -3,11 +3,12 @@ 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 { computed, ref } from 'vue'
 import type { SearchMode } from '../../Search'
 
 import CharacterCallout from './CharacterCallout.vue'
 import EventCallout from './EventCallout.vue'
+import { useScroll } from '@vueuse/core'
 
 const props = defineProps<{
   results: (Character | CalendarEvent)[]

From 77892e79a1b47fd2b784eacdab1c6f4ab67af888 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 5 May 2024 16:48:48 +0200
Subject: [PATCH 25/25] Renamed project to tools

Also added tooltip fixes
---
 README.md                                     | 64 ++-----------------
 index.html                                    |  8 +--
 package.json                                  |  4 +-
 src/components/calendar/CalendarMenuNav.vue   |  8 +--
 .../calendar/CalendarMenuSubnav.vue           |  4 +-
 src/components/calendar/CalendarMenuToday.vue |  2 +-
 src/components/calendar/CalendarSwitch.vue    |  2 +-
 src/components/calendar/Sidebar.vue           |  4 +-
 .../calendar/search/CalendarSearch.vue        |  4 +-
 .../search/lists/CharacterCallout.vue         |  8 +--
 src/views/CalendarPage.vue                    |  4 ++
 src/views/HomePage.vue                        |  5 ++
 src/views/meta.ts                             |  1 +
 13 files changed, 35 insertions(+), 83 deletions(-)
 create mode 100644 src/views/meta.ts

diff --git a/README.md b/README.md
index ba8ef80..1d3a6b8 100644
--- a/README.md
+++ b/README.md
@@ -1,61 +1,5 @@
-# vue-project
+# Leim Tools
+A congregate of tools used to visualize TTRPG elements and help content creators (mostly me for now tbh) build their worlds.
 
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component)
-
-```sh
-npm run test:unit:dev # or `npm run test:unit` for headless testing
-```
-
-### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
-
-```sh
-npm run test:e2e:dev
-```
-
-This runs the end-to-end tests against the Vite development server.
-It is much faster than the production build.
-
-But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
-
-```sh
-npm run build
-npm run test:e2e
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```
+## Timeline
+Visual helper for time-related data, such as events, eras and characters. Helpful to know how old a character is while something is happening in the world, or how far two events are separated in the timeline.
diff --git a/index.html b/index.html
index 21c2c10..9c7ebc3 100644
--- a/index.html
+++ b/index.html
@@ -9,8 +9,6 @@
     <meta name="description" content="Outil de visualisation chronologique des évènements de Léim" />
     <meta name="generator" content="VueJS" />
 
-    <title>Chronologie — Leim Wiki</title>
-
     <meta name="robots" content="noindex, nofollow">
 
     <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png">
@@ -21,9 +19,9 @@
     <meta name="msapplication-TileColor" content="#00aba9">
     <meta name="theme-color" content="#a9d1eb">
 
-    <meta property="og:title" content="Chronologie — Leim Wiki"/>
-    <meta property="og:type" content="timeline" />
-    <meta property="og:url" content="timeline.alexcreates.fr" />
+    <meta property="og:title" content="Outils — Leim Wiki"/>
+    <meta property="og:type" content="tabletop-tools" />
+    <meta property="og:url" content="ttt.alexcreates.fr" />
   </head>
   <body>
     <div id="app"></div>
diff --git a/package.json b/package.json
index a1a3a19..41441a6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "vue-project",
-  "version": "0.0.0",
+  "name": "leim-tool",
+  "version": "0.1.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/components/calendar/CalendarMenuNav.vue b/src/components/calendar/CalendarMenuNav.vue
index 8120ac5..dd671e9 100644
--- a/src/components/calendar/CalendarMenuNav.vue
+++ b/src/components/calendar/CalendarMenuNav.vue
@@ -147,7 +147,7 @@ function toFutureFar(): void {
   <div class="flex items-center gap-2">
     <TooltipProvider :delayDuration="250">
       <Tooltip>
-        <TooltipTrigger>
+        <TooltipTrigger as-child>
           <Button variant="outline" size="icon" @click="toPastFar()">
             <PhCaretDoubleLeft size="18" />
           </Button>
@@ -160,7 +160,7 @@ function toFutureFar(): void {
 
     <TooltipProvider :delayDuration="250">
       <Tooltip>
-        <TooltipTrigger>
+        <TooltipTrigger as-child>
           <Button variant="outline" size="icon" @click="toPastNear()">
             <PhCaretLeft size="18" />
           </Button>
@@ -173,7 +173,7 @@ function toFutureFar(): void {
 
     <TooltipProvider :delayDuration="250">
       <Tooltip>
-        <TooltipTrigger>
+        <TooltipTrigger as-child>
           <Button variant="outline" size="icon" @click="toFutureNear()">
             <PhCaretRight size="18" />
           </Button>
@@ -186,7 +186,7 @@ function toFutureFar(): void {
 
     <TooltipProvider :delayDuration="250">
       <Tooltip>
-        <TooltipTrigger>
+        <TooltipTrigger as-child>
           <Button variant="outline" size="icon" @click="toFutureFar()">
             <PhCaretDoubleRight size="18" />
           </Button>
diff --git a/src/components/calendar/CalendarMenuSubnav.vue b/src/components/calendar/CalendarMenuSubnav.vue
index d6fe29f..cd879c6 100644
--- a/src/components/calendar/CalendarMenuSubnav.vue
+++ b/src/components/calendar/CalendarMenuSubnav.vue
@@ -68,7 +68,7 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
     <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
       <TooltipProvider :delayDuration="250">
         <Tooltip>
-          <TooltipTrigger>
+          <TooltipTrigger as-child>
             <Button
               variant="ghost"
               size="icon"
@@ -87,7 +87,7 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
     <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
       <TooltipProvider :delayDuration="250">
         <Tooltip>
-          <TooltipTrigger>
+          <TooltipTrigger as-child>
             <Button
               variant="ghost"
               size="icon"
diff --git a/src/components/calendar/CalendarMenuToday.vue b/src/components/calendar/CalendarMenuToday.vue
index 0c3e2b7..3141daf 100644
--- a/src/components/calendar/CalendarMenuToday.vue
+++ b/src/components/calendar/CalendarMenuToday.vue
@@ -20,7 +20,7 @@ const isDefaultDate = computed(() => {
 <template>
   <TooltipProvider :delayDuration="250">
     <Tooltip>
-      <TooltipTrigger>
+      <TooltipTrigger as-child>
         <Button @click="jumpToDefaultDate" size="sm" :disabled="isDefaultDate">
           Aujourd'hui
         </Button>
diff --git a/src/components/calendar/CalendarSwitch.vue b/src/components/calendar/CalendarSwitch.vue
index 9029500..bf34c0c 100644
--- a/src/components/calendar/CalendarSwitch.vue
+++ b/src/components/calendar/CalendarSwitch.vue
@@ -20,7 +20,7 @@ const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
 
 <template>
   <DropdownMenu>
-    <DropdownMenuTrigger>
+    <DropdownMenuTrigger as-child>
       <Button size="sm" variant="secondary">
         <PhCalendarBlank size="18" weight="fill" />
 
diff --git a/src/components/calendar/Sidebar.vue b/src/components/calendar/Sidebar.vue
index 7041540..3cbdc9b 100644
--- a/src/components/calendar/Sidebar.vue
+++ b/src/components/calendar/Sidebar.vue
@@ -19,7 +19,7 @@ const { revealAdvancedSearch } = useCalendar()
       <li>
         <TooltipProvider :delayDuration="100">
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger as-child>
               <Button variant="ghost" size="icon" class="rounded-full" as-child>
                 <RouterLink to="/">
                   <PhHouse size="24" weight="fill" />
@@ -35,7 +35,7 @@ const { revealAdvancedSearch } = useCalendar()
       <li>
         <TooltipProvider :delayDuration="100">
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger as-child>
               <Button
                 variant="ghost"
                 size="icon"
diff --git a/src/components/calendar/search/CalendarSearch.vue b/src/components/calendar/search/CalendarSearch.vue
index a845d7f..ae09ae0 100644
--- a/src/components/calendar/search/CalendarSearch.vue
+++ b/src/components/calendar/search/CalendarSearch.vue
@@ -361,7 +361,7 @@ function handleCategorySelect(e: any) {
 
             <TooltipProvider :delayDuration="250">
               <Tooltip>
-                <TooltipTrigger>
+                <TooltipTrigger as-child>
                   <Button
                     :variant="selectedOrder === 'desc' ? 'secondary' : 'outline'"
                     size="icon"
@@ -378,7 +378,7 @@ function handleCategorySelect(e: any) {
 
             <TooltipProvider :delayDuration="250">
               <Tooltip>
-                <TooltipTrigger>
+                <TooltipTrigger as-child>
                   <Button
                     :variant="selectedOrder === 'asc' ? 'secondary' : 'outline'"
                     size="icon"
diff --git a/src/components/calendar/search/lists/CharacterCallout.vue b/src/components/calendar/search/lists/CharacterCallout.vue
index 5134087..75ed658 100644
--- a/src/components/calendar/search/lists/CharacterCallout.vue
+++ b/src/components/calendar/search/lists/CharacterCallout.vue
@@ -39,7 +39,7 @@ const { getFormattedDateTitle } = useCalendar()
         <li v-if="character.birth">
           <TooltipProvider :delayDuration="100">
             <Tooltip>
-              <TooltipTrigger>
+              <TooltipTrigger as-child>
                 <Button
                   @click="$emit('query:date-jump', character.birth!)"
                   variant="ghost"
@@ -49,7 +49,7 @@ const { getFormattedDateTitle } = useCalendar()
                   {{ getFormattedDateTitle(character.birth, true) }}
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>
+              <TooltipContent :side="'bottom'" :align="'end'" :align-offset="20">
                 <p>Date de naissance</p>
               </TooltipContent>
             </Tooltip>
@@ -59,7 +59,7 @@ const { getFormattedDateTitle } = useCalendar()
         <li v-if="character.death">
           <TooltipProvider :delayDuration="100">
             <Tooltip>
-              <TooltipTrigger>
+              <TooltipTrigger as-child>
                 <Button
                   @click="$emit('query:date-jump', character.death!)"
                   variant="ghost"
@@ -69,7 +69,7 @@ const { getFormattedDateTitle } = useCalendar()
                   {{ getFormattedDateTitle(character.death, true) }}
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>
+              <TooltipContent :side="'bottom'" :align="'start'" :align-offset="20">
                 <p>Date de décès</p>
               </TooltipContent>
             </Tooltip>
diff --git a/src/views/CalendarPage.vue b/src/views/CalendarPage.vue
index 13b0984..ee245b3 100644
--- a/src/views/CalendarPage.vue
+++ b/src/views/CalendarPage.vue
@@ -2,6 +2,8 @@
 import { storeToRefs } from 'pinia'
 import { onMounted } from 'vue'
 import { useCalendar } from '@/stores/CalendarStore'
+import { useTitle } from '@vueuse/core'
+import { titleTemplate } from './meta'
 
 import Calendar from '@/components/calendar/Calendar.vue'
 import Sidebar from '@/components/calendar/Sidebar.vue'
@@ -11,6 +13,8 @@ const { validateUrlParams } = useCalendar()
 const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
 
 onMounted(() => validateUrlParams())
+
+useTitle('Calendrier', titleTemplate)
 </script>
 
 <template>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index b7db808..1c8d0f1 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
+import { useTitle } from '@vueuse/core'
+import { titleTemplate } from './meta'
+
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
+
+useTitle('Outils', titleTemplate)
 </script>
 
 <template>
diff --git a/src/views/meta.ts b/src/views/meta.ts
new file mode 100644
index 0000000..17b049a
--- /dev/null
+++ b/src/views/meta.ts
@@ -0,0 +1 @@
+export const titleTemplate = { titleTemplate: '%s — TTTools' }