Added more than x event handling

src/components/calendar/CalendarTile.vue

@@ -6,6 +6,7 @@ import { useElementBounding } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, ref, type ComputedRef } from 'vue'
 
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import CalendarEventButton from './CalendarEvent.vue'
 import type { CalendarEvent } from '@/models/Events'
 
@@ -92,13 +93,34 @@ const eventsNotDisplayed = computed(
         <CalendarEventButton :event />
       </li>
 
-      <li class="pointer-events-auto">
+      <li v-if="eventsNotDisplayed > 0" class="pointer-events-auto">
+        <Popover>
+          <PopoverTrigger as-child>
             <button
-          v-if="eventsNotDisplayed > 0"
+              class="text-xs px-2 py-1 block w-full text-left font-bold rounded-sm whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer transition-colors hover:bg-slate-800"
-          class="text-xs px-2 py-1 block w-full text-left rounded-sm whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer font-bold"
             >
               {{ eventsNotDisplayed }} autre{{ eventsNotDisplayed > 1 ? 's' : '' }}
             </button>
+          </PopoverTrigger>
+          <PopoverContent class="w-80" :align="'center'" :side="'right'">
+            <div class="text-center mb-4">
+              <span
+                class="inline-flex w-12 h-12 aspect-square items-center justify-center text-lg font-semibold text-slate-300 bg-slate-800 rounded-full"
+              >
+                {{ date.day }}</span
+              >
+            </div>
+            <ul class="grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity">
+              <li
+                v-for="event in eventsForTheDay"
+                :key="event.title"
+                class="grid pointer-events-auto"
+              >
+                <CalendarEventButton :event />
+              </li>
+            </ul>
+          </PopoverContent>
+        </Popover>
       </li>
     </ul>
   </div>

src/data/Events.ts

@@ -83,53 +83,32 @@ export const regularEvents: CalendarEvent[] = [
   },
   {
     title: '2ème disparation à Cantane',
-    description: 'Seconde victime de la série de disparitions qui affecte Cantane',
+    description: 'Donovane le mineur kéturien disparait sans laisser de traces.',
     date: { day: 32, month: 7, year: 3209 },
     category: 'mort',
     hidden: true
   },
   {
     title: '3ème disparation à Cantane',
-    description: 'Troisième victime de la série de disparitions qui affecte Cantane',
+    description: 'Disparition de Sébastien, gredin sauride.',
     date: { day: 10, month: 8, year: 3209 },
     category: 'mort',
     hidden: true
   },
   {
     title: '4ème disparation à Cantane',
-    description: 'Quatrième victime de la série de disparitions qui affecte Cantane',
+    description: 'Disparition de Thérence, patrouilleur sauride de la Vieille Garde.',
     date: { day: 19, month: 8, year: 3209 },
     category: 'mort',
     hidden: true
   },
   {
     title: '5ème disparation à Cantane',
-    description: 'Cinquième victime de la série de disparitions qui affecte Cantane',
+    description: 'Disparition de Mathilda Boulais, vendeuse de pierres.',
     date: { day: 22, month: 8, year: 3209 },
     category: 'mort',
     hidden: true
   },
-  {
-    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 },
-    category: 'inauguration'
-  },
-  {
-    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 },
-    category: 'inauguration'
-  },
-  {
-    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 },
-    category: 'inauguration'
-  },
   {
     title: 'Grande Banque Minérale de Cantane',
     description: