Added basic search and jump function

src/components/calendar/CalendarEventList.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { LeimDate } from '@/models/Date'
+import { useCalendar } from '@/stores/calendar'
+import type { CalendarEvent } from '@/stores/events'
+
+defineProps<{
+  events: CalendarEvent[]
+}>()
+
+const emit = defineEmits(['jumpedToDate'])
+
+const { jumpToDate } = useCalendar()
+
+function handleJumpToDate(date: LeimDate) {
+  jumpToDate(date)
+  emit('jumpedToDate')
+}
+</script>
+
+<template>
+  <ul class="grid gap-3">
+    <li v-for="e in events" :key="e.title">
+      <button
+        class="block w-full text-left p-2 rounded-sm"
+        :class="{
+          'bg-slate-600 hover:bg-slate-700': !e.category,
+          'bg-green-700 hover:bg-green-800': e.category === 'birth',
+          'bg-stone-600 hover:bg-stone-800': e.category === 'death',
+          'bg-red-600 hover:bg-red-800': e.category === 'catastrophe',
+          'bg-pink-600 hover:bg-pink-800': e.category === 'natural-disaster',
+          'bg-blue-600 hover:bg-blue-800': e.category === 'legal',
+          'bg-amber-700 hover:bg-amber-800': e.category === 'player'
+        }"
+        @click="handleJumpToDate(e.date)"
+      >
+        <div>
+          {{ e.title }}
+        </div>
+
+        <div v-if="e.description" class="text-sm">
+          <hr class="my-2 border-white opacity-25" />
+          <span class="opacity-75">
+            {{ e.description }}
+          </span>
+        </div>
+      </button>
+    </li>
+  </ul>
+</template>

src/components/calendar/CalendarMenuSearch.vue

@@ -1,12 +1,46 @@
 <script lang="ts" setup>
+import { ref, computed } from 'vue'
 import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { useCalendarEvents } from '@/stores/events'
+import CalendarEventList from './CalendarEventList.vue'
+
+const { allEvents } = useCalendarEvents()
+
+const modalOpen = ref(false)
+
+const searchQuery = ref('')
+const searchEnough = computed(() => searchQuery.value.length >= 2)
+const displaySearch = computed(() => searchQuery.value && searchEnough.value)
+
+const unifier = new RegExp(/[^a-zA-Z0-9\-'']/g)
+
+const searchResults = computed(() => {
+  return allEvents.filter((event) => {
+    const queryString = new String(searchQuery.value).replace(unifier, '').toLocaleLowerCase()
+    const hitTitle = event.title.replace(unifier, '').toLocaleLowerCase().includes(queryString)
+    const hitDesc = event.description
+      ?.replace(unifier, '')
+      .toLocaleLowerCase()
+      .includes(queryString)
+
+    return hitTitle || hitDesc
+  })
+})
+
+function resetSearch() {
+  searchQuery.value = ''
+}
+
+function closeDialog() {
+  modalOpen.value = false
+}
 </script>
 
 <template>
-  <Dialog>
+  <Dialog v-model:open="modalOpen" @update:open="resetSearch">
     <DialogTrigger>
       <Button>
         <PhMagnifyingGlass size="20" weight="light" />
@@ -14,18 +48,29 @@ import { PhMagnifyingGlass } from '@phosphor-icons/vue'
       </Button>
     </DialogTrigger>
 
-    <DialogContent>
-      <div class="relative w-full items-center">
+    <DialogContent
+      class="flex flex-col flex-nowrap top-32 -translate-y-0 data-[state=closed]:slide-out-to-top-[2rem] data-[state=open]:slide-in-from-top-[2rem]"
+      :class="{
+        'bottom-16': displaySearch && searchResults.length > 0
+      }"
+    >
+      <div class="relative w-full h-fit">
         <Input
           id="search"
           type="text"
           placeholder="Rechercher un évènement, un personnage…"
           class="pl-10 py-6 text-lg"
+          v-model:model-value="searchQuery"
         />
         <span class="absolute start-1 inset-y-0 flex items-center justify-center px-2 opacity-50">
           <PhMagnifyingGlass size="20" />
         </span>
       </div>
+
+      <div v-if="displaySearch && searchResults.length > 0" class="overflow-y-auto">
+        <hr class="mb-4" />
+        <CalendarEventList :events="searchResults" @jumped-to-date="closeDialog()" />
+      </div>
     </DialogContent>
   </Dialog>
 </template>

src/components/calendar/CalendarMenuSearchResults.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup></script>
+
+<template>
+  <ul>
+    <li>
+      <button>Yes</button>
+    </li>
+  </ul>
+</template>