Added categories list

src/components/calendar/CalendarEvent.vue

@@ -16,17 +16,17 @@ defineProps<{
         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 === 'birth',
+          'text-white bg-lime-600 hover:bg-lime-700': event.category === 'naissance',
-          'text-white bg-stone-600 hover:bg-stone-700': event.category === 'death',
+          '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 === 'natural-disaster',
+          'text-white bg-pink-600 hover:bg-pink-700': event.category === 'catastrophe-naturel',
-          'text-white bg-sky-600 hover:bg-sky-700': event.category === 'legal',
+          'text-white bg-sky-600 hover:bg-sky-700': event.category === 'législation',
-          'text-white bg-purple-600 hover:bg-purple-700': event.category === 'religious',
+          'text-white bg-purple-600 hover:bg-purple-700': event.category === 'religion',
-          'text-white bg-emerald-600 hover:bg-emerald-700': event.category === 'player',
+          '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 === 'boon'
+          'text-slate-900 bg-yellow-100 hover:bg-yellow-200': event.category === 'bénédiction'
         }"
       >
         {{ event.title }}

src/components/calendar/CalendarEventDetails.vue

@@ -3,6 +3,7 @@ import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
 
 import { PopoverContent } from '@/components/ui/popover'
+import { Badge } from '@/components/ui/badge'
 
 const { getFormattedDateTitle } = useCalendar()
 
@@ -11,13 +12,33 @@ defineProps<{ event: CalendarEvent }>()
 
 <template>
   <PopoverContent class="w-96" align="start">
-    <div class="space-y-1">
+    <div class="grid gap-1">
       <div class="text-lg font-semibold">
         {{ event.title }}
       </div>
-      <div class="">
+
+      <div>
         {{ getFormattedDateTitle(event.date, true) }}
       </div>
+
+      <div 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">
+              {{ 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>
+
+      <hr class="my-2" />
+
       <div class="italic text-slate-500">
         {{ event.description }}
       </div>

src/components/calendar/search/CalendarSearch.vue

@@ -165,7 +165,7 @@ whenever(keys.control_period, () => {
       </VisuallyHidden>
 
       <!-- Dialog header -->
-      <div class="grid gap-2">
+      <div class="grid gap-3">
         <div class="relative w-full h-fit">
           <Input
             id="search"
@@ -233,10 +233,10 @@ whenever(keys.control_period, () => {
             </TooltipProvider>
           </div>
         </div>
-
-        <hr />
       </div>
 
+      <hr />
+
       <div v-if="searchResults.length > 0" class="grow overflow-y-auto">
         <SearchList
           :results="searchResults"

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

@@ -7,6 +7,7 @@ import { computed } from 'vue'
 import type { SearchMode } from '../../Search'
 
 import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
 
 const props = defineProps<{
   results: (Character | CalendarEvent)[]
@@ -66,17 +67,17 @@ const pagedResults = computed(() => sortedResults.value.slice(props.startAt, pro
         class="block w-full text-left p-2 rounded-sm"
         :class="{
           'text-white bg-slate-600 hover:bg-slate-700': !r.category,
-          'text-white bg-lime-600 hover:bg-lime-700': r.category === 'birth',
+          'text-white bg-lime-600 hover:bg-lime-700': r.category === 'naissance',
-          'text-white bg-stone-600 hover:bg-stone-700': r.category === 'death',
+          '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 === 'natural-disaster',
+          'text-white bg-pink-600 hover:bg-pink-700': r.category === 'catastrophe-naturel',
-          'text-white bg-sky-600 hover:bg-sky-700': r.category === 'legal',
+          'text-white bg-sky-600 hover:bg-sky-700': r.category === 'législation',
-          'text-white bg-purple-600 hover:bg-purple-700': r.category === 'religious',
+          'text-white bg-purple-600 hover:bg-purple-700': r.category === 'religion',
-          'text-white bg-emerald-600 hover:bg-emerald-700': r.category === 'player',
+          '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 === 'boon'
+          'text-slate-900 bg-yellow-100 hover:bg-yellow-200': r.category === 'bénédiction'
         }"
         @click="handleJumpToDate(r.date)"
       >
@@ -88,8 +89,24 @@ const pagedResults = computed(() => sortedResults.value.slice(props.startAt, pro
           <span class="opacity-75 italic">{{ getFormattedDateTitle(r.date, true) }}</span>
         </div>
 
+        <div v-if="r.category || r.secondaryCategories">
+          <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-25" />
+          <hr class="my-2 border-white opacity-50" />
           <span class="opacity-75">
             {{ r.description }}
           </span>

src/components/ui/badge/Badge.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { type BadgeVariants, badgeVariants } from '.'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>

src/components/ui/badge/index.ts

@@ -0,0 +1,24 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Badge } from './Badge.vue'
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>

src/data/Events.ts

@@ -7,8 +7,8 @@ export const regularEvents: CalendarEvent[] = [
     date: { 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: 'boon',
+    category: 'bénédiction',
-    secondaryCategories: ['death'],
+    secondaryCategories: ['mort'],
     wiki: 'https://alexcreates.fr/leim/index.php/Alliance_Kald%C3%A9lienne#Trait%C3%A9_de_Kadel',
     hidden: true
   },
@@ -17,7 +17,7 @@ export const regularEvents: CalendarEvent[] = [
     date: { day: 20, month: 4, year: 100 },
     description: '',
     category: 'inauguration',
-    secondaryCategories: ['legal'],
+    secondaryCategories: ['législation'],
     wiki: 'https://alexcreates.fr/leim/index.php/Alliance_Kald%C3%A9lienne#Trait%C3%A9_de_Kadel'
   },
 
@@ -38,7 +38,7 @@ export const regularEvents: CalendarEvent[] = [
     date: { 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: 'player'
+    category: 'joueurs'
   },
   {
     title: "Naufrage de l'Éclipse",
@@ -51,19 +51,19 @@ export const regularEvents: CalendarEvent[] = [
     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 },
-    category: 'legal'
+    category: 'législation'
   },
   {
     title: 'Sulvan et Anastael atteignent Bamast',
     date: { day: 19, month: 2, year: 3210 },
-    category: 'player'
+    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 },
-    category: 'legal'
+    category: 'législation'
   },
 
   // "Les Cloches de Cantane"
@@ -71,42 +71,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 },
-    category: 'religious',
+    category: 'religion',
     hidden: true
   },
   {
     title: '1ère disparation à Cantane',
     description: 'Première victime de la série de disparitions qui affecte Cantane',
     date: { day: 28, month: 7, year: 3209 },
-    category: 'death',
+    category: 'mort',
     hidden: true
   },
   {
     title: '2ème disparation à Cantane',
     description: 'Seconde victime de la série de disparitions qui affecte Cantane',
     date: { day: 32, month: 7, year: 3209 },
-    category: 'death',
+    category: 'mort',
     hidden: true
   },
   {
     title: '3ème disparation à Cantane',
     description: 'Troisième victime de la série de disparitions qui affecte Cantane',
     date: { day: 10, month: 8, year: 3209 },
-    category: 'death',
+    category: 'mort',
     hidden: true
   },
   {
     title: '4ème disparation à Cantane',
     description: 'Quatrième victime de la série de disparitions qui affecte Cantane',
     date: { day: 19, month: 8, year: 3209 },
-    category: 'death',
+    category: 'mort',
     hidden: true
   },
   {
     title: '5ème disparation à Cantane',
     description: 'Cinquième victime de la série de disparitions qui affecte Cantane',
     date: { day: 22, month: 8, year: 3209 },
-    category: 'death',
+    category: 'mort',
     hidden: true
   }
 ]

src/models/Events.ts

@@ -11,17 +11,17 @@ export interface CalendarEvent {
 }
 
 export type CalendarEventCategory =
-  | 'birth'
+  | 'naissance'
-  | 'death'
+  | 'mort'
   | 'catastrophe'
-  | 'legal'
+  | 'législation'
-  | 'natural-disaster'
+  | 'catastrophe-naturel'
   | 'inauguration'
-  | 'religious'
+  | 'religion'
   | 'invention'
   | 'science'
-  | 'boon' // Great event on a global scale
+  | 'bénédiction' // Great event on a global scale
-  | 'player'
+  | 'joueurs'
 
 export function isCalendarEvent(object: any): object is CalendarEvent {
   return 'date' in object