From 17b9937c6ab82defc0b23cda3ccf52687e5b98d8 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 10 Jun 2024 18:58:08 +0200
Subject: [PATCH 01/11] Added category input component

---
 components/calendar/Calendar.vue              | 21 +++++-
 components/calendar/form/CreateEvent.vue      | 14 +++-
 components/calendar/form/UpdateEvent.vue      | 14 +++-
 components/calendar/input/EventCategories.vue | 72 +++++++++++++++++++
 components/ui/checkbox/Checkbox.vue           | 33 +++++++++
 components/ui/checkbox/index.ts               |  1 +
 models/CalendarEvent.ts                       |  5 +-
 server/api/calendars/categories/query.get.ts  | 15 ++++
 server/api/calendars/events/[id].patch.ts     |  2 +-
 server/api/calendars/events/create.post.ts    |  1 +
 stores/EventStore.ts                          | 11 ++-
 11 files changed, 178 insertions(+), 11 deletions(-)
 create mode 100644 components/calendar/input/EventCategories.vue
 create mode 100644 components/ui/checkbox/Checkbox.vue
 create mode 100644 components/ui/checkbox/index.ts
 create mode 100644 server/api/calendars/categories/query.get.ts

diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index 9506e05..cf5c9b8 100644
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -12,11 +12,12 @@ const route = useRoute()
 const worldId = route.params.id
 
 const { setCalendarId, setMonths, setDefaultDate, currentConfig, selectedDate, jumpToDate } = useCalendar()
-const { setEvents } = useCalendarEvents()
+const { setEvents, setCategories } = useCalendarEvents()
 const { setCharacters } = useCharacters()
 
 const { data: calendar, pending: calPending, refresh: calRefresh } = await useLazyFetch(`/api/calendars/query?world_id=${worldId}`)
 const { data: characters, pending: charPending, refresh: charRefresh } = await useLazyFetch(`/api/characters/query?world_id=${worldId}`)
+const { data: categories, pending: categoryPending, refresh: categoryRefresh } = await useLazyFetch(`/api/calendars/categories/query`)
 
 if (!calendar.value) {
   await calRefresh()
@@ -37,6 +38,15 @@ if (!calendar.value) {
     setEvents(calendar.value?.data?.events)
   }
 }
+
+if (!categories.value) {
+  await categoryRefresh()
+} else {
+  if (categories.value?.data) {
+    setCategories(categories.value?.data)
+  }
+}
+
 if (!characters.value) {
   await charRefresh()
 } else {
@@ -61,6 +71,13 @@ watch(calPending, (newStatus) => {
     }
   }
 })
+watch(categoryPending, (newStatus) => {
+  if (!newStatus) {
+    if (categories.value?.data) {
+      setCategories(categories.value?.data)
+    }
+  }
+})
 watch(charPending, (newStatus) => {
   if (!newStatus) {
     if (characters.value?.data) {
@@ -103,7 +120,7 @@ onMounted(() => {
 
 <template>
   <div class="h-full">
-    <template v-if="calPending || charPending">
+    <template v-if="calPending || charPending || categoryPending">
       <div class="h-full grid place-items-center">
         Loading notamment
       </div>
diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index 8fd6d42..444ffcb 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { RPGDate } from '~/models/Date';
 import { PopoverAnchor } from 'radix-vue';
-import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea } from '@phosphor-icons/vue'
+import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from '@phosphor-icons/vue'
 
 const { eventSkeleton, operationInProgress } = storeToRefs(useCalendarEvents())
 const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendarEvents()
@@ -96,7 +96,7 @@ function handleCancel() {
       @pointer-down-outside="handleClosing"
     >
       <form @submit.prevent="handleSubmit">
-        <div class="grid grid-cols-2 gap-y-6">
+        <div class="grid grid-cols-2 gap-y-3">
           <div class="col-span-2 pl-8">
             <input
               id="new-event-title"
@@ -140,6 +140,14 @@ function handleCancel() {
           </div>
 
           <div class="col-span-2">
+            <div class="flex items-center gap-4">
+              <PhTag size="18" weight="fill" />
+
+              <CalendarInputEventCategories v-model="eventSkeleton.category" placeholder="Ajouter une catégorie principale" />
+            </div>
+          </div>
+
+          <div class="col-span-2 mb-4">
             <div class="flex items-center gap-4">
               <PhMapPinArea size="18" weight="fill" />
 
@@ -149,7 +157,7 @@ function handleCancel() {
                 type="text"
                 name="new-event-location"
                 placeholder="Ajouter un endroit"
-                class="w-full -my-1 py-1 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
+                class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
             </div>
           </div>
 
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index bb7fd68..77dac87 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine } from '@phosphor-icons/vue'
+import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from '@phosphor-icons/vue'
 import { VisuallyHidden } from 'radix-vue'
 
 const { isEditEventModalOpen } = storeToRefs(useCalendarEvents())
@@ -81,7 +81,7 @@ function handleCancel() {
       </VisuallyHidden>
 
       <form @submit.prevent="handleAction">
-        <div class="grid grid-cols-2 gap-y-6">
+        <div class="grid grid-cols-2 gap-y-3">
           <div class="col-span-2">
             <div class="flex items-center gap-4">
               <PhPencilSimpleLine size="20" weight="fill" />
@@ -130,6 +130,14 @@ function handleCancel() {
           </div>
 
           <div class="col-span-2">
+            <div class="flex items-center gap-4">
+              <PhTag size="18" weight="fill" />
+
+              <CalendarInputEventCategories v-model="eventSkeleton.category" placeholder="Ajouter une catégorie principale" />
+            </div>
+          </div>
+
+          <div class="col-span-2 mb-4">
             <div class="flex items-center gap-4">
               <PhMapPinArea size="18" weight="fill" />
 
@@ -139,7 +147,7 @@ function handleCancel() {
                 type="text"
                 name="new-event-location"
                 placeholder="Ajouter un endroit"
-                class="w-full -my-1 py-1 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
+                class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
             </div>
           </div>
 
diff --git a/components/calendar/input/EventCategories.vue b/components/calendar/input/EventCategories.vue
new file mode 100644
index 0000000..76e969b
--- /dev/null
+++ b/components/calendar/input/EventCategories.vue
@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { PhCaretDown } from '@phosphor-icons/vue';
+import type { Category } from '~/models/Category';
+
+const props = defineProps<{
+  placeholder?: string
+  multiple?: boolean
+}>()
+
+const model = defineModel<Category[] | Category>()
+
+const { categories: availableCategories } = useCalendarEvents()
+
+const isPopoverOpen = ref<boolean>(false)
+
+function handleCatSelect() {
+  if (!props.multiple) {
+    isPopoverOpen.value = false
+  }
+}
+
+const computedTextValue = computed(() => {
+  if (model.value) {
+    if ("name" in model.value) {
+      return model.value.name
+    } else {
+      return model.value[0].name
+    }
+  } else {
+    return props.placeholder
+  }
+})
+</script>
+
+<template>
+  <UiPopover v-model:open="isPopoverOpen">
+    <UiPopoverTrigger as-child>
+      <UiButton
+        variant="outline"
+        role="combobox"
+        class="w-fit max-w-full justify-between capitalize"
+      >
+        {{ computedTextValue }}
+
+        <PhCaretDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+      </UiButton>
+    </UiPopoverTrigger>
+    <UiPopoverContent
+      :align="'start'"
+      class="w-fit p-0"
+    >
+      <UiCommand v-model="model" :multiple>
+        <UiCommandInput placeholder="Rechercher les catégories" />
+        <UiCommandEmpty>Aucune catégorie trouvée.</UiCommandEmpty>
+        <UiCommandList>
+          <UiCommandGroup>
+            <UiCommandItem
+              v-for="category in availableCategories"
+              :key="category.id"
+              :value="category"
+              @select="handleCatSelect"
+            >
+              <span class="capitalize">
+                {{ category.name }}
+              </span>
+            </UiCommandItem>
+          </UiCommandGroup>
+        </UiCommandList>
+      </UiCommand>
+    </UiPopoverContent>
+  </UiPopover>
+</template>
diff --git a/components/ui/checkbox/Checkbox.vue b/components/ui/checkbox/Checkbox.vue
new file mode 100644
index 0000000..4621bf7
--- /dev/null
+++ b/components/ui/checkbox/Checkbox.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { Check } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+         props.class)"
+  >
+    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+      <slot>
+        <Check class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
diff --git a/components/ui/checkbox/index.ts b/components/ui/checkbox/index.ts
new file mode 100644
index 0000000..8c28c28
--- /dev/null
+++ b/components/ui/checkbox/index.ts
@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue'
diff --git a/models/CalendarEvent.ts b/models/CalendarEvent.ts
index a1e9be0..f49328a 100644
--- a/models/CalendarEvent.ts
+++ b/models/CalendarEvent.ts
@@ -25,7 +25,10 @@ export const postEventBodySchema = z.object({
     location: z.string().optional().nullable(),
     startDate: dateSchema.required(),
     endDate: dateSchema.optional().nullable(),
-    hidden: z.boolean().optional().nullable()
+    hidden: z.boolean().optional().nullable(),
+    category: z.object({
+      id: z.number().int()
+    }),
   }),
   calendarId: z.number({ coerce: true }).int().positive()
 })
diff --git a/server/api/calendars/categories/query.get.ts b/server/api/calendars/categories/query.get.ts
new file mode 100644
index 0000000..25abe89
--- /dev/null
+++ b/server/api/calendars/categories/query.get.ts
@@ -0,0 +1,15 @@
+import { serverSupabaseClient } from "#supabase/server";
+import type { Category } from "~/models/Category";
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient(event)
+
+  const output = client
+    .from('calendar_event_categories')
+    .select(`
+      id,
+      name
+    `)
+
+  return output.returns<Category[]>()
+})
diff --git a/server/api/calendars/events/[id].patch.ts b/server/api/calendars/events/[id].patch.ts
index 6e3298f..7ae2573 100644
--- a/server/api/calendars/events/[id].patch.ts
+++ b/server/api/calendars/events/[id].patch.ts
@@ -22,7 +22,6 @@ export default defineEventHandler(async (event) => {
   }
 
   if (bodyError) {
-    console.log(bodyData)
     throw createError({
       cause: 'Utilisateur',
       fatal: false,
@@ -42,6 +41,7 @@ export default defineEventHandler(async (event) => {
           description: bodyData.event.description,
           location: bodyData.event.location,
           hidden: bodyData.event.hidden,
+          category: bodyData.event.category.id,
           calendar_id: bodyData?.calendarId
         } as never
       )
diff --git a/server/api/calendars/events/create.post.ts b/server/api/calendars/events/create.post.ts
index 9782b41..4fb9caf 100644
--- a/server/api/calendars/events/create.post.ts
+++ b/server/api/calendars/events/create.post.ts
@@ -26,6 +26,7 @@ export default defineEventHandler(async (event) => {
           description: bodyData.event.description,
           location: bodyData.event.location,
           hidden: bodyData.event.hidden,
+          category: bodyData.event.category.id,
           calendar_id: bodyData?.calendarId
         } as never
       )
diff --git a/stores/EventStore.ts b/stores/EventStore.ts
index b3294e9..40cf752 100644
--- a/stores/EventStore.ts
+++ b/stores/EventStore.ts
@@ -1,7 +1,8 @@
-import type { RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/CalendarEvent'
+import type { RPGDate } from '@/models/Date'
 import { defineStore } from 'pinia'
 import { ref, watch, type Ref } from 'vue'
+import type { Category } from '~/models/Category'
 import { useCalendar } from './CalendarStore'
 
 export const useCalendarEvents = defineStore('calendar-events', () => {
@@ -14,6 +15,12 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     baseEvents.value = data
   }
 
+  const categories = ref<Category[]>([])
+
+  function setCategories(data: Category[]) {
+    categories.value = data
+  }
+
   // Order base events by dates
   const allEvents = computed(() => baseEvents.value.sort((a, b) => {
     return compareDates(a.startDate, b.startDate, 'desc')
@@ -269,6 +276,8 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
   return {
     allEvents,
     setEvents,
+    categories,
+    setCategories,
     currentEvents,
     getRelativeEventFromDate,
     getRelativeEventFromEvent,

From a1aa512018ef17ce4bfa8437758f13bdac960f37 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 10 Jun 2024 20:26:21 +0200
Subject: [PATCH 02/11] Added collision detection for category list

---
 components/calendar/input/EventCategories.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/calendar/input/EventCategories.vue b/components/calendar/input/EventCategories.vue
index 76e969b..2292cfe 100644
--- a/components/calendar/input/EventCategories.vue
+++ b/components/calendar/input/EventCategories.vue
@@ -38,7 +38,7 @@ const computedTextValue = computed(() => {
       <UiButton
         variant="outline"
         role="combobox"
-        class="w-fit max-w-full justify-between capitalize"
+        class="w-fit max-w-full justify-between"
       >
         {{ computedTextValue }}
 
@@ -46,8 +46,10 @@ const computedTextValue = computed(() => {
       </UiButton>
     </UiPopoverTrigger>
     <UiPopoverContent
-      :align="'start'"
-      class="w-fit p-0"
+      align="start"
+      side="bottom"
+      :collision-padding="50"
+      class="w-fit h-[33vh] p-0"
     >
       <UiCommand v-model="model" :multiple>
         <UiCommandInput placeholder="Rechercher les catégories" />

From 69f18e93381536984fe65b98c1010f178f244c81 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 10 Jun 2024 20:43:05 +0200
Subject: [PATCH 03/11] Added category schema validation

---
 models/CalendarEvent.ts                    | 6 ++----
 models/Category.ts                         | 7 +++++++
 server/api/calendars/events/[id].patch.ts  | 2 +-
 server/api/calendars/events/create.post.ts | 2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/models/CalendarEvent.ts b/models/CalendarEvent.ts
index f49328a..ca8da54 100644
--- a/models/CalendarEvent.ts
+++ b/models/CalendarEvent.ts
@@ -1,5 +1,5 @@
 import { z } from 'zod'
-import type { Category } from './Category'
+import { categorySchema, type Category } from './Category'
 import { dateSchema, type RPGDate } from './Date'
 
 export interface CalendarEvent {
@@ -26,9 +26,7 @@ export const postEventBodySchema = z.object({
     startDate: dateSchema.required(),
     endDate: dateSchema.optional().nullable(),
     hidden: z.boolean().optional().nullable(),
-    category: z.object({
-      id: z.number().int()
-    }),
+    category: categorySchema.optional().nullable(),
   }),
   calendarId: z.number({ coerce: true }).int().positive()
 })
diff --git a/models/Category.ts b/models/Category.ts
index f86e0c3..33ddcc4 100644
--- a/models/Category.ts
+++ b/models/Category.ts
@@ -1,4 +1,11 @@
+import { z } from 'zod'
+
 export interface Category {
   id: number
   name: string
 }
+
+export const categorySchema = z.object({
+  id: z.number().int(),
+  name: z.string()
+})
diff --git a/server/api/calendars/events/[id].patch.ts b/server/api/calendars/events/[id].patch.ts
index 7ae2573..adfb7fa 100644
--- a/server/api/calendars/events/[id].patch.ts
+++ b/server/api/calendars/events/[id].patch.ts
@@ -41,7 +41,7 @@ export default defineEventHandler(async (event) => {
           description: bodyData.event.description,
           location: bodyData.event.location,
           hidden: bodyData.event.hidden,
-          category: bodyData.event.category.id,
+          category: bodyData.event.category?.id,
           calendar_id: bodyData?.calendarId
         } as never
       )
diff --git a/server/api/calendars/events/create.post.ts b/server/api/calendars/events/create.post.ts
index 4fb9caf..1d311a0 100644
--- a/server/api/calendars/events/create.post.ts
+++ b/server/api/calendars/events/create.post.ts
@@ -26,7 +26,7 @@ export default defineEventHandler(async (event) => {
           description: bodyData.event.description,
           location: bodyData.event.location,
           hidden: bodyData.event.hidden,
-          category: bodyData.event.category.id,
+          category: bodyData.event.category?.id,
           calendar_id: bodyData?.calendarId
         } as never
       )

From 91273461315a30bf73fe645fd0eb03420522d119 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 10 Jun 2024 22:25:34 +0200
Subject: [PATCH 04/11] Added standardized colors

---
 assets/main.css                               | 59 ++++++++++++++++
 components/calendar/CalendarEvent.vue         | 33 +++------
 components/calendar/input/EventCategories.vue |  4 +-
 .../calendar/search/lists/EventCallout.vue    | 28 ++------
 models/Category.ts                            |  5 +-
 models/Color.ts                               |  1 +
 server/api/calendars/events/[id].patch.ts     |  1 +
 supabase/migrations/202401_init.sql           |  5 +-
 supabase/seed.sql                             | 70 +++++++++----------
 9 files changed, 119 insertions(+), 87 deletions(-)
 create mode 100644 models/Color.ts

diff --git a/assets/main.css b/assets/main.css
index 68dd98d..8249af6 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -77,6 +77,65 @@
   }
 }
 
+/* Colors */
+.event-red {
+  @apply text-slate-900 bg-red-500 hover:bg-red-600
+}
+.event-orange {
+  @apply text-slate-900 bg-orange-500 hover:bg-orange-600
+}
+.event-amber {
+  @apply text-slate-900 bg-amber-500 hover:bg-amber-600
+}
+.event-yellow {
+  @apply text-slate-900 bg-yellow-600 hover:bg-yellow-700
+}
+.event-lime {
+  @apply text-slate-900 bg-lime-500 hover:bg-lime-600
+}
+.event-green {
+  @apply text-white bg-green-600 hover:bg-green-700
+}
+.event-emerald {
+  @apply text-white bg-emerald-600 hover:bg-emerald-700
+}
+.event-teal {
+  @apply text-white bg-teal-600 hover:bg-teal-700
+}
+.event-cyan {
+  @apply text-white bg-cyan-600 hover:bg-cyan-700
+}
+.event-sky {
+  @apply text-white bg-sky-600 hover:bg-sky-700
+}
+.event-blue {
+  @apply text-white bg-blue-600 hover:bg-blue-700
+}
+.event-indigo {
+  @apply text-white bg-indigo-600 hover:bg-indigo-700
+}
+.event-violet {
+  @apply text-white bg-violet-600 hover:bg-violet-700
+}
+.event-purple {
+  @apply text-white bg-purple-600 hover:bg-purple-700
+}
+.event-fuchsia {
+  @apply text-white bg-fuchsia-600 hover:bg-fuchsia-700
+}
+.event-pink {
+  @apply text-white bg-pink-700 hover:bg-pink-800
+}
+.event-rose {
+  @apply text-white bg-rose-700 hover:bg-rose-800
+}
+.event-black {
+  @apply text-white bg-stone-500 hover:bg-stone-700
+}
+.event-white {
+  @apply text-slate-900 bg-white hover:bg-yellow-200
+}
+
 .fade-enter-active,
 .fade-leave-active {
   transition: all .5s ease;
diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue
index 96b530d..13a869a 100644
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { cn } from '@/lib/utils'
 import type { RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '~/models/CalendarEvent'
@@ -59,30 +58,14 @@ onMounted(() => {
       <button
         class="text-xs px-2 py-1 block w-full text-left rounded-sm focus-visible:bg-red-200"
         :class="
-          cn({
-            'italic': event.hidden,
-            'text-white bg-slate-600 hover:bg-slate-700': !event.category,
-            'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance',
-            'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort',
-            'text-white bg-orange-600 hover:bg-orange-700': event.category?.name === 'catastrophe',
-            'text-white bg-pink-600 hover:bg-pink-700': event.category?.name === 'catastrophe naturelle',
-            'text-white bg-sky-600 hover:bg-sky-700': event.category?.name === 'législation',
-            'text-white bg-purple-600 hover:bg-purple-700': event.category?.name === 'religion',
-            'text-white bg-emerald-600 hover:bg-emerald-700': event.category?.name === 'joueurs',
-            'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category?.name === 'inauguration',
-            'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category?.name === 'invention',
-            'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category?.name === 'science',
-            'text-slate-900 bg-white hover:bg-yellow-200': event.category?.name === 'bénédiction',
-            'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category?.name === 'découverte',
-            'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category?.name === 'exploration',
-            'text-white bg-amber-600 hover:bg-amber-700': event.category?.name === 'construction',
-            'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category?.name === 'arcanologie',
-            'text-white bg-rose-600 hover:bg-rose-700': event.category?.name === 'criminalité',
-            'text-white bg-stone-600 hover:bg-stone-700': event.category?.name === 'scandale',
-            'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category?.name === 'commerce',
-            'rounded-r-none': isStartEvent,
-            'rounded-l-none': isEndEvent
-          })
+          cn(
+            event.category ? `event-${event.category.color}` : '',
+            {
+              'italic': event.hidden,
+              'rounded-r-none': isStartEvent,
+              'rounded-l-none': isEndEvent,
+            }
+          )
         "
         @dblclick="handleDoubleClick"
         @keydown.delete="handleDelete"
diff --git a/components/calendar/input/EventCategories.vue b/components/calendar/input/EventCategories.vue
index 2292cfe..5042005 100644
--- a/components/calendar/input/EventCategories.vue
+++ b/components/calendar/input/EventCategories.vue
@@ -62,9 +62,7 @@ const computedTextValue = computed(() => {
               :value="category"
               @select="handleCatSelect"
             >
-              <span class="capitalize">
-                {{ category.name }}
-              </span>
+              {{ category.name }}
             </UiCommandItem>
           </UiCommandGroup>
         </UiCommandList>
diff --git a/components/calendar/search/lists/EventCallout.vue b/components/calendar/search/lists/EventCallout.vue
index 85f9a03..503178f 100644
--- a/components/calendar/search/lists/EventCallout.vue
+++ b/components/calendar/search/lists/EventCallout.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { cn } from '@/lib/utils'
 import type { RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/CalendarEvent'
 import { useCalendar } from '@/stores/CalendarStore'
@@ -26,28 +27,11 @@ const dateDuration: string | null = props.event.endDate
 <template>
   <button
     class="relative block w-full text-left py-3 px-4 rounded-sm transition-colors"
-    :class="{
-      'pt-4': event.hidden,
-      'text-white bg-slate-600 hover:bg-slate-700': !event.category,
-      'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance',
-      'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort',
-      'text-white bg-orange-600 hover:bg-orange-700': event.category?.name === 'catastrophe',
-      'text-white bg-pink-600 hover:bg-pink-700': event.category?.name === 'catastrophe naturelle',
-      'text-white bg-sky-600 hover:bg-sky-700': event.category?.name === 'législation',
-      'text-white bg-purple-600 hover:bg-purple-700': event.category?.name === 'religion',
-      'text-white bg-emerald-600 hover:bg-emerald-700': event.category?.name === 'joueurs',
-      'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category?.name === 'inauguration',
-      'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category?.name === 'invention',
-      'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category?.name === 'science',
-      'text-slate-900 bg-white hover:bg-yellow-200': event.category?.name === 'bénédiction',
-      'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category?.name === 'découverte',
-      'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category?.name === 'exploration',
-      'text-white bg-amber-600 hover:bg-amber-700': event.category?.name === 'construction',
-      'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category?.name === 'arcanologie',
-      'text-white bg-rose-600 hover:bg-rose-700': event.category?.name === 'criminalité',
-      'text-white bg-stone-600 hover:bg-stone-700': event.category?.name === 'scandale',
-      'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category?.name === 'commerce'
-    }"
+    :class="cn(
+      event.category ? `event-${event.category.color}` : '',
+      {
+        'pt-4': event.hidden,
+      })"
     @click="$emit('query:date-jump', event.startDate)"
   >
     <div class="flex gap-2 items-center mb-1">
diff --git a/models/Category.ts b/models/Category.ts
index 33ddcc4..2b260e7 100644
--- a/models/Category.ts
+++ b/models/Category.ts
@@ -1,11 +1,14 @@
 import { z } from 'zod'
+import type { RPGColor } from './Color'
 
 export interface Category {
   id: number
   name: string
+  color?: RPGColor
 }
 
 export const categorySchema = z.object({
   id: z.number().int(),
-  name: z.string()
+  name: z.string(),
+  color: z.string().default("black")
 })
diff --git a/models/Color.ts b/models/Color.ts
new file mode 100644
index 0000000..3ac9e2a
--- /dev/null
+++ b/models/Color.ts
@@ -0,0 +1 @@
+export type RPGColor = "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "black" | "white"
diff --git a/server/api/calendars/events/[id].patch.ts b/server/api/calendars/events/[id].patch.ts
index adfb7fa..0520f68 100644
--- a/server/api/calendars/events/[id].patch.ts
+++ b/server/api/calendars/events/[id].patch.ts
@@ -64,6 +64,7 @@ export default defineEventHandler(async (event) => {
 
     return data
   } catch (err) {
+    console.log(err)
     throw createError({
       cause: 'Serveur',
       status: 500,
diff --git a/supabase/migrations/202401_init.sql b/supabase/migrations/202401_init.sql
index 52dc5b2..be2f6f5 100644
--- a/supabase/migrations/202401_init.sql
+++ b/supabase/migrations/202401_init.sql
@@ -39,7 +39,7 @@ create table public.worlds (
   id            bigint generated by default as identity primary key,
   name          text not null,
   description   text,
-  color         app_colors,
+  color         app_colors default 'black',
   gm_id         uuid references public.users on delete cascade
 );
 comment on table public.worlds is 'Worlds belonging to a single user ; a game master.';
@@ -49,6 +49,7 @@ create table public.calendars (
   id                bigint generated by default as identity primary key,
   name              text not null,
   today             json not null,
+  color             app_colors default 'black',
   world_id          bigint references public.worlds on delete cascade not null
 );
 comment on table public.calendars is 'Calendar settings and configuration attached to a single world.';
@@ -67,6 +68,7 @@ comment on table public.calendar_months is 'A calendar month.';
 create table public.calendar_event_categories (
   id        bigint generated by default as identity primary key,
   name      text not null,
+  color     app_colors default 'black',
   unique (name)
 );
 comment on table public.calendar_event_categories is 'Categories describing events.';
@@ -98,6 +100,7 @@ comment on table public.calendar_event_categories_links is 'Link tables for mult
 create table public.character_categories (
   id        bigint generated by default as identity primary key,
   name      text not null,
+  color     app_colors default 'black',
   unique (name)
 );
 comment on table public.character_categories is 'Categories describing characters';
diff --git a/supabase/seed.sql b/supabase/seed.sql
index ccdda57..91ef5fb 100644
--- a/supabase/seed.sql
+++ b/supabase/seed.sql
@@ -2,38 +2,38 @@ insert into public.role_permissions (role, permission) values ('sa', 'events.see
 insert into public.role_permissions (role, permission) values ('sa', 'users.ban');
 
 -- Event categories
-insert into public.calendar_event_categories (name) values ('naissance');
-insert into public.calendar_event_categories (name) values ('mort');
-insert into public.calendar_event_categories (name) values ('catastrophe');
-insert into public.calendar_event_categories (name) values ('catastrophe naturelle');
-insert into public.calendar_event_categories (name) values ('inauguration');
-insert into public.calendar_event_categories (name) values ('religion');
-insert into public.calendar_event_categories (name) values ('invention');
-insert into public.calendar_event_categories (name) values ('science');
-insert into public.calendar_event_categories (name) values ('bénédiction');
-insert into public.calendar_event_categories (name) values ('joueurs');
-insert into public.calendar_event_categories (name) values ('découverte');
-insert into public.calendar_event_categories (name) values ('exploration');
-insert into public.calendar_event_categories (name) values ('construction');
-insert into public.calendar_event_categories (name) values ('arcanologie');
-insert into public.calendar_event_categories (name) values ('criminalité');
-insert into public.calendar_event_categories (name) values ('scandale');
-insert into public.calendar_event_categories (name) values ('commerce');
-insert into public.calendar_event_categories (name) values ('législation');
+insert into public.calendar_event_categories (name, color) values ('Naissance', 'white');
+insert into public.calendar_event_categories (name, color) values ('Mort', 'black');
+insert into public.calendar_event_categories (name, color) values ('Catastrophe', 'orange');
+insert into public.calendar_event_categories (name, color) values ('Catastrophe naturelle', 'red');
+insert into public.calendar_event_categories (name, color) values ('Inauguration', 'green');
+insert into public.calendar_event_categories (name, color) values ('Religion', 'violet');
+insert into public.calendar_event_categories (name, color) values ('Invention', 'teal');
+insert into public.calendar_event_categories (name, color) values ('Science', 'indigo');
+insert into public.calendar_event_categories (name, color) values ('Bénédiction', 'white');
+insert into public.calendar_event_categories (name, color) values ('Joueurs', 'white');
+insert into public.calendar_event_categories (name, color) values ('Découverte', 'purple');
+insert into public.calendar_event_categories (name, color) values ('Exploration', 'lime');
+insert into public.calendar_event_categories (name, color) values ('Construction', 'blue');
+insert into public.calendar_event_categories (name, color) values ('Arcanologie', 'cyan');
+insert into public.calendar_event_categories (name, color) values ('Criminalité', 'rose');
+insert into public.calendar_event_categories (name, color) values ('Scandale', 'pink');
+insert into public.calendar_event_categories (name, color) values ('Commerce', 'amber');
+insert into public.calendar_event_categories (name, color) values ('Législation', 'blue');
 
 -- Character categories
-insert into public.character_categories (name) values ('joueur');
-insert into public.character_categories (name) values ('comte');
-insert into public.character_categories (name) values ('scientifique');
-insert into public.character_categories (name) values ('mage');
-insert into public.character_categories (name) values ('professeur');
-insert into public.character_categories (name) values ('criminel');
-insert into public.character_categories (name) values ('étincelle');
-insert into public.character_categories (name) values ('buse blanche');
-insert into public.character_categories (name) values ('ecclésiastique');
-insert into public.character_categories (name) values ('militaire');
-insert into public.character_categories (name) values ('activiste');
-insert into public.character_categories (name) values ('commerçant');
+insert into public.character_categories (name, color) values ('Joueur', 'white');
+insert into public.character_categories (name, color) values ('Comte', 'emerald');
+insert into public.character_categories (name, color) values ('Scientifique', 'indigo');
+insert into public.character_categories (name, color) values ('Mage', 'cyan');
+insert into public.character_categories (name, color) values ('Professeur', 'teal');
+insert into public.character_categories (name, color) values ('Criminel', 'rose');
+insert into public.character_categories (name, color) values ('Étincelle', 'lime');
+insert into public.character_categories (name, color) values ('Buse blanche', 'yellow');
+insert into public.character_categories (name, color) values ('Ecclésiastique', 'violet');
+insert into public.character_categories (name, color) values ('Militaire', 'orange');
+insert into public.character_categories (name, color) values ('Activiste', 'sky');
+insert into public.character_categories (name, color) values ('Commerçant', 'amber');
 
 -- Worlds
 insert into public.worlds (name, description, color) values ('Léïm', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet congue aliquet. Curabitur eu iaculis diam. Nunc iaculis nibh orci, eu semper nunc congue congue. Praesent euismod tortor eget metus tristique lobortis vel in risus. In volutpat ligula orci, id pharetra lectus egestas at.', 'black');
@@ -239,7 +239,7 @@ insert into public.calendar_events (title, description, location, start_date, en
   1
 );
 insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '1ère disparation',
+  '1ère disparition',
   'Taleb Vaht décède dans une grotte à la suite d''une attaque d''ischiels enragées.',
   'Cantane',
   '{ "day": 28, "month": 7, "year": 3209 }',
@@ -250,7 +250,7 @@ insert into public.calendar_events (title, description, location, start_date, en
   1
 );
 insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '2ème disparation',
+  '2ème disparition',
   'Donovane le mineur kéturien disparait sans laisser de traces.',
   'Cantane',
   '{ "day": 32, "month": 7, "year": 3209 }',
@@ -261,7 +261,7 @@ insert into public.calendar_events (title, description, location, start_date, en
   1
 );
 insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '3ème disparation',
+  '3ème disparition',
   'Disparition de Sébastien, gredin sauride.',
   'Cantane',
   '{ "day": 10, "month": 8, "year": 3209 }',
@@ -272,7 +272,7 @@ insert into public.calendar_events (title, description, location, start_date, en
   1
 );
 insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '4ème disparation',
+  '4ème disparition',
   'Disparition de Thérence, patrouilleur sauride de la Vieille Garde.',
   'Cantane',
   '{ "day": 19, "month": 8, "year": 3209 }',
@@ -283,7 +283,7 @@ insert into public.calendar_events (title, description, location, start_date, en
   1
 );
 insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '5ème disparation',
+  '5ème disparition',
   'Disparition de Mathilda Boulais, vendeuse de pierres.',
   'Cantane',
   '{ "day": 22, "month": 8, "year": 3209 }',

From 87a73e7f432c2d51fb4642fb8090f53a9ee49ded Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 10 Jun 2024 22:46:59 +0200
Subject: [PATCH 05/11] Fixed event details colors

---
 assets/main.css                              | 69 ++++++++++++++
 components/calendar/CalendarEventDetails.vue | 99 ++------------------
 server/api/calendars/events/[id].patch.ts    |  1 -
 3 files changed, 77 insertions(+), 92 deletions(-)

diff --git a/assets/main.css b/assets/main.css
index 8249af6..381e89a 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -136,6 +136,75 @@
   @apply text-slate-900 bg-white hover:bg-yellow-200
 }
 
+.event-details-red {
+  --base-color: var(--color-red-800);
+}
+.event-details-orange {
+  --base-color: var(--color-orange-800);
+}
+.event-details-amber {
+  --base-color: var(--color-amber-800);
+}
+.event-details-yellow {
+  --base-color: var(--color-yellow-800);
+}
+.event-details-lime {
+  --base-color: var(--color-lime-800);
+}
+.event-details-green {
+  --base-color: var(--color-green-800);
+}
+.event-details-emerald {
+  --base-color: var(--color-emerald-800);
+}
+.event-details-teal {
+  --base-color: var(--color-teal-800);
+}
+.event-details-cyan {
+  --base-color: var(--color-cyan-800);
+}
+.event-details-sky {
+  --base-color: var(--color-sky-800);
+}
+.event-details-blue {
+  --base-color: var(--color-blue-800);
+}
+.event-details-indigo {
+  --base-color: var(--color-indigo-800);
+}
+.event-details-violet {
+  --base-color: var(--color-violet-800);
+}
+.event-details-purple {
+  --base-color: var(--color-purple-800);
+}
+.event-details-fuchsia {
+  --base-color: var(--color-fuchsia-800);
+}
+.event-details-pink {
+  --base-color: var(--color-pink-800);
+}
+.event-details-rose {
+  --base-color: var(--color-rose-800);
+}
+.event-details-black {
+  --base-color: var(--color-stone-800);
+}
+.event-details-white {
+  --base-color: var(--color-white);
+}
+
+.event-details {
+  --bg-color: color-mix(in srgb, var(--base-color), var(--color-slate-950) 80%);
+  --border-color: color-mix(in srgb, var(--base-color), var(--color-slate-800) 50%);
+  background-color: var(--bg-color);
+  border-color: var(--border-color);
+
+  hr {
+    border-color: var(--border-color);
+  }
+}
+
 .fade-enter-active,
 .fade-leave-active {
   transition: all .5s ease;
diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue
index 27013ba..3fad43f 100644
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { cn } from '@/lib/utils'
 import type { RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/CalendarEvent'
 import { useCalendar } from '@/stores/CalendarStore'
@@ -62,33 +63,18 @@ function deployDeleteModal() {
 
 <template>
   <UiPopoverContent
-    class="event-details w-96 bg-slate-900"
+    class=" w-96 bg-slate-900 border-slate-800"
     :align="'center'"
     :align-offset="50"
     :side="'left'"
     :collision-padding="60"
     :hide-when-detached="true"
-    :class="{
-      'border-slate-800': !event.category,
-      'border-lime-800': event.category?.name === 'naissance',
-      'border-stone-600': event.category?.name === 'mort',
-      'border-orange-800': event.category?.name === 'catastrophe',
-      'border-pink-800': event.category?.name === 'catastrophe naturelle',
-      'border-sky-800': event.category?.name === 'législation',
-      'border-purple-800': event.category?.name === 'religion',
-      'border-emerald-800': event.category?.name === 'joueurs',
-      'border-amber-800': event.category?.name === 'inauguration',
-      'border-green-800': event.category?.name === 'invention',
-      'border-cyan-800': event.category?.name === 'science',
-      'border-slate-600': event.category?.name === 'bénédiction',
-      'border-purple-700': event.category?.name === 'découverte',
-      'border-indigo-700': event.category?.name === 'exploration',
-      'border-amber-700': event.category?.name === 'construction',
-      'border-violet-700': event.category?.name === 'arcanologie',
-      'border-rose-800': event.category?.name === 'criminalité',
-      'border-stone-700': event.category?.name === 'scandale',
-      'border-yellow-600': event.category?.name === 'commerce'
-    }"
+    :class="cn(
+      event.category ? `event-details-${event.category.color}` : '',
+      {
+        'event-details': event.category
+      }
+    )"
   >
     <div ref="eventDetails" class="grid gap-1">
       <header class="pr-12">
@@ -205,72 +191,3 @@ function deployDeleteModal() {
     </UiTooltipProvider>
   </UiPopoverContent>
 </template>
-
-<style lang="scss">
-.border-slate-800 {
-  --base-color: var(--color-slate-800);
-}
-.border-lime-800 {
-  --base-color: var(--color-lime-800);
-}
-.border-stone-600 {
-  --base-color: var(--color-stone-600);
-}
-.border-orange-800 {
-  --base-color: var(--color-orange-800);
-}
-.border-pink-800 {
-  --base-color: var(--color-pink-800);
-}
-.border-sky-800 {
-  --base-color: var(--color-sky-800);
-}
-.border-purple-800 {
-  --base-color: var(--color-purple-800);
-}
-.border-emerald-800 {
-  --base-color: var(--color-emerald-800);
-}
-.border-amber-800 {
-  --base-color: var(--color-amber-800);
-}
-.border-green-800 {
-  --base-color: var(--color-green-800);
-}
-.border-cyan-800 {
-  --base-color: var(--color-cyan-800);
-}
-.border-slate-600 {
-  --base-color: var(--color-slate-600);
-}
-.border-purple-700 {
-  --base-color: var(--color-purple-700);
-}
-.border-indigo-700 {
-  --base-color: var(--color-indigo-700);
-}
-.border-amber-700 {
-  --base-color: var(--color-amber-700);
-}
-.border-violet-700 {
-  --base-color: var(--color-violet-700);
-}
-.border-rose-800 {
-  --base-color: var(--color-rose-800);
-}
-.border-stone-700 {
-  --base-color: var(--color-stone-700);
-}
-.border-yellow-600 {
-  --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/server/api/calendars/events/[id].patch.ts b/server/api/calendars/events/[id].patch.ts
index 0520f68..adfb7fa 100644
--- a/server/api/calendars/events/[id].patch.ts
+++ b/server/api/calendars/events/[id].patch.ts
@@ -64,7 +64,6 @@ export default defineEventHandler(async (event) => {
 
     return data
   } catch (err) {
-    console.log(err)
     throw createError({
       cause: 'Serveur',
       status: 500,

From 90be6baf42993e2a47c8b906e370237761a0ad3c Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 10 Jun 2024 22:48:28 +0200
Subject: [PATCH 06/11] Fixed reactivity issue with bordered event CTA

---
 components/calendar/CalendarEvent.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue
index 13a869a..43a59f2 100644
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -12,9 +12,9 @@ const { areDatesIdentical } = useCalendar()
 const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents()
 const { lastActiveEvent } = storeToRefs(useCalendarEvents())
 
-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 spansMultipleDays = computed(() => Boolean(props.event.startDate && props.event.endDate))
+const isStartEvent = computed(() => spansMultipleDays.value && areDatesIdentical(props.tileDate, props.event.startDate))
+const isEndEvent = computed(() => spansMultipleDays.value && props.event.endDate && areDatesIdentical(props.tileDate, props.event.endDate))
 
 const titleCharLimit = 50;
 const eventTitle = computed<string>(() => props.event.title.length <= titleCharLimit ? props.event.title : `${props.event.title.slice(0, titleCharLimit)}…`)

From 8c6a60aa40e2db16147c1c252a9b9187962b2d66 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 10 Jun 2024 22:50:21 +0200
Subject: [PATCH 07/11] Lowercase category tags

---
 components/calendar/CalendarEventDetails.vue      | 4 ++--
 components/calendar/search/lists/EventCallout.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue
index 3fad43f..b01ee2b 100644
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -114,13 +114,13 @@ function deployDeleteModal() {
       <template v-if="event.category || event.secondaryCategories">
         <ul class="flex gap-1">
           <li v-if="event.category">
-            <UiBadge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
+            <UiBadge class="mix-blend-luminosity font-bold bg-gray-600 lowercase" variant="secondary">
               {{ event.category?.name }}
             </UiBadge>
           </li>
 
           <li v-for="cat in event.secondaryCategories" :key="cat.id">
-            <UiBadge class="mix-blend-luminosity bg-gray-600" variant="secondary">
+            <UiBadge class="mix-blend-luminosity bg-gray-600 lowercase" variant="secondary">
               {{ cat.name }}
             </UiBadge>
           </li>
diff --git a/components/calendar/search/lists/EventCallout.vue b/components/calendar/search/lists/EventCallout.vue
index 503178f..de7e933 100644
--- a/components/calendar/search/lists/EventCallout.vue
+++ b/components/calendar/search/lists/EventCallout.vue
@@ -81,13 +81,13 @@ const dateDuration: string | null = props.event.endDate
     <div v-if="event.category || event.secondaryCategories" class="absolute top-3 right-4">
       <ul class="flex gap-1">
         <li v-if="event.category">
-          <UiBadge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
+          <UiBadge class="mix-blend-luminosity font-bold bg-gray-600 lowercase" variant="secondary">
             {{ event.category?.name }}
           </UiBadge>
         </li>
 
         <li v-for="cat in event.secondaryCategories" :key="cat.id">
-          <UiBadge class="mix-blend-luminosity bg-gray-600" variant="secondary">
+          <UiBadge class="mix-blend-luminosity bg-gray-600 lowercase" variant="secondary">
             {{ cat.name }}
           </UiBadge>
         </li>

From 9d44b900b046565f8d1f94972a0f37bc1643b366 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 11 Jun 2024 17:08:51 +0200
Subject: [PATCH 08/11] Reverted commit
 15527fd98376722159085fc29ec04f0f0aef82ba

---
 components/calendar/form/CreateEvent.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index 444ffcb..25a238e 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { RPGDate } from '~/models/Date';
-import { PopoverAnchor } from 'radix-vue';
 import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from '@phosphor-icons/vue'
 
 const { eventSkeleton, operationInProgress } = storeToRefs(useCalendarEvents())
@@ -80,9 +79,9 @@ function handleCancel() {
 
 <template>
   <UiPopover v-model:open="popoverOpen">
-    <PopoverAnchor as-child>
-      <button :class="btnClass" @dblclick="openEventCreatePopover()" />
-    </PopoverAnchor>
+    <UiPopoverTrigger as-child>
+      <button :class="btnClass" @click="openEventCreatePopover()" />
+    </UiPopoverTrigger>
     <UiPopoverContent
       :align="'center'"
       :side="'right'"

From 72fa9a982b6a19dd4c821031e2f84b8c03279c47 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 11 Jun 2024 17:16:04 +0200
Subject: [PATCH 09/11] Changed spacing

---
 components/calendar/form/CreateEvent.vue | 4 ++--
 components/calendar/form/UpdateEvent.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index 25a238e..c324cd0 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -107,7 +107,7 @@ function handleCancel() {
               class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
           </div>
 
-          <div class="col-span-2 pl-8">
+          <div class="col-span-2 my-2 pl-8">
             <textarea
               id="new-event-description"
               v-model="eventSkeleton.description"
@@ -146,7 +146,7 @@ function handleCancel() {
             </div>
           </div>
 
-          <div class="col-span-2 mb-4">
+          <div class="col-span-2 mb-2">
             <div class="flex items-center gap-4">
               <PhMapPinArea size="18" weight="fill" />
 
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 77dac87..f1a6c60 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -98,7 +98,7 @@ function handleCancel() {
             </div>
           </div>
 
-          <div class="col-span-2 ml-8">
+          <div class="col-span-2 my-2 ml-8">
             <textarea
               id="new-event-description"
               v-model="eventSkeleton.description"
@@ -137,7 +137,7 @@ function handleCancel() {
             </div>
           </div>
 
-          <div class="col-span-2 mb-4">
+          <div class="col-span-2 mb-2">
             <div class="flex items-center gap-4">
               <PhMapPinArea size="18" weight="fill" />
 

From 23365d632409e933d95a72705e404a0b0f3f6c6b Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 11 Jun 2024 17:51:50 +0200
Subject: [PATCH 10/11] Added filtering of categories

---
 components/calendar/input/EventCategories.vue | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/components/calendar/input/EventCategories.vue b/components/calendar/input/EventCategories.vue
index 5042005..cdd60e1 100644
--- a/components/calendar/input/EventCategories.vue
+++ b/components/calendar/input/EventCategories.vue
@@ -2,23 +2,13 @@
 import { PhCaretDown } from '@phosphor-icons/vue';
 import type { Category } from '~/models/Category';
 
+const isPopoverOpen = ref<boolean>(false)
+
 const props = defineProps<{
   placeholder?: string
   multiple?: boolean
 }>()
 
-const model = defineModel<Category[] | Category>()
-
-const { categories: availableCategories } = useCalendarEvents()
-
-const isPopoverOpen = ref<boolean>(false)
-
-function handleCatSelect() {
-  if (!props.multiple) {
-    isPopoverOpen.value = false
-  }
-}
-
 const computedTextValue = computed(() => {
   if (model.value) {
     if ("name" in model.value) {
@@ -30,6 +20,26 @@ const computedTextValue = computed(() => {
     return props.placeholder
   }
 })
+
+const model = defineModel<Category[] | Category>()
+
+const { categories: availableCategories } = useCalendarEvents()
+
+const searchTerm = ref<string>('')
+
+function handleCatSelect() {
+  if (!props.multiple) {
+    isPopoverOpen.value = false
+  }
+}
+
+const filteredCategories = computed(() =>
+  searchTerm.value === ''
+    ? availableCategories
+    : availableCategories.filter((category) => {
+      return category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
+    })
+)
 </script>
 
 <template>
@@ -51,15 +61,16 @@ const computedTextValue = computed(() => {
       :collision-padding="50"
       class="w-fit h-[33vh] p-0"
     >
-      <UiCommand v-model="model" :multiple>
+      <UiCommand v-model="model" v-model:searchTerm="searchTerm" :multiple>
         <UiCommandInput placeholder="Rechercher les catégories" />
         <UiCommandEmpty>Aucune catégorie trouvée.</UiCommandEmpty>
         <UiCommandList>
           <UiCommandGroup>
             <UiCommandItem
-              v-for="category in availableCategories"
+              v-for="category in filteredCategories"
               :key="category.id"
               :value="category"
+              class="cursor-pointer"
               @select="handleCatSelect"
             >
               {{ category.name }}

From fe8ab76aafc0d7350ffe1164d8d04b6a887cb6e9 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 11 Jun 2024 21:38:47 +0200
Subject: [PATCH 11/11] Separated multi and single category component

I also disabled secondary categories because they shouldn't be used right now, it adds too much complexity
---
 components/calendar/form/CreateEvent.vue      | 10 ++-
 components/calendar/form/UpdateEvent.vue      | 14 +++-
 components/calendar/input/EventCategories.vue | 57 ++++++++-------
 components/calendar/input/EventCategory.vue   | 73 +++++++++++++++++++
 4 files changed, 126 insertions(+), 28 deletions(-)
 create mode 100644 components/calendar/input/EventCategory.vue

diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index c324cd0..755e963 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -142,10 +142,18 @@ function handleCancel() {
             <div class="flex items-center gap-4">
               <PhTag size="18" weight="fill" />
 
-              <CalendarInputEventCategories v-model="eventSkeleton.category" placeholder="Ajouter une catégorie principale" />
+              <CalendarInputEventCategory v-model="eventSkeleton.category" placeholder="Ajouter une catégorie principale" />
             </div>
           </div>
 
+          <!-- <div class="col-span-2">
+            <div class="flex items-center gap-4">
+              <PhTag size="18" weight="fill" />
+
+              <CalendarInputEventCategories v-model="eventSkeleton.secondaryCategories" placeholder="Ajouter des catégories secondaires" />
+            </div>
+          </div> -->
+
           <div class="col-span-2 mb-2">
             <div class="flex items-center gap-4">
               <PhMapPinArea size="18" weight="fill" />
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index f1a6c60..4e4ac16 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -133,10 +133,22 @@ function handleCancel() {
             <div class="flex items-center gap-4">
               <PhTag size="18" weight="fill" />
 
-              <CalendarInputEventCategories v-model="eventSkeleton.category" placeholder="Ajouter une catégorie principale" />
+              <div class="w-1/2">
+                <CalendarInputEventCategory v-model="eventSkeleton.category" placeholder="Ajouter une catégorie principale" />
+              </div>
             </div>
           </div>
 
+          <!-- <div class="col-span-2">
+            <div class="flex items-center gap-4">
+              <PhTag size="18" weight="fill" />
+
+              <div class="w-1/2">
+                <CalendarInputEventCategories v-model="eventSkeleton.secondaryCategories" placeholder="Ajouter des catégories secondaires" />
+              </div>
+            </div>
+          </div> -->
+
           <div class="col-span-2 mb-2">
             <div class="flex items-center gap-4">
               <PhMapPinArea size="18" weight="fill" />
diff --git a/components/calendar/input/EventCategories.vue b/components/calendar/input/EventCategories.vue
index cdd60e1..cfb4bb9 100644
--- a/components/calendar/input/EventCategories.vue
+++ b/components/calendar/input/EventCategories.vue
@@ -1,38 +1,26 @@
 <script lang="ts" setup>
-import { PhCaretDown } from '@phosphor-icons/vue';
+import { cn } from '@/lib/utils'
 import type { Category } from '~/models/Category';
 
+import { PhCaretDown, PhCheck } from '@phosphor-icons/vue';
+
 const isPopoverOpen = ref<boolean>(false)
 
 const props = defineProps<{
   placeholder?: string
-  multiple?: boolean
 }>()
 
-const computedTextValue = computed(() => {
-  if (model.value) {
-    if ("name" in model.value) {
-      return model.value.name
-    } else {
-      return model.value[0].name
-    }
-  } else {
-    return props.placeholder
-  }
-})
+const model = defineModel<Category[]>({ default: [] })
+const modelBuffer = ref<Category[]>([])
 
-const model = defineModel<Category[] | Category>()
+watch(modelBuffer.value, () => {
+  model.value = [ ...modelBuffer.value ]
+})
 
 const { categories: availableCategories } = useCalendarEvents()
 
 const searchTerm = ref<string>('')
 
-function handleCatSelect() {
-  if (!props.multiple) {
-    isPopoverOpen.value = false
-  }
-}
-
 const filteredCategories = computed(() =>
   searchTerm.value === ''
     ? availableCategories
@@ -48,9 +36,20 @@ const filteredCategories = computed(() =>
       <UiButton
         variant="outline"
         role="combobox"
-        class="w-fit max-w-full justify-between"
+        class="relative w-full max-w-full h-fit justify-between"
       >
-        {{ computedTextValue }}
+        <template v-if="!model.length">
+          {{ props.placeholder }}
+        </template>
+        <template v-else>
+          <ul class="flex flex-wrap gap-1">
+            <li v-for="category in model" :key="`selected-cat-${category.id}`">
+              <UiBadge class="lowercase" variant="secondary">
+                {{ category.name }}
+              </UiBadge>
+            </li>
+          </ul>
+        </template>
 
         <PhCaretDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
       </UiButton>
@@ -61,7 +60,7 @@ const filteredCategories = computed(() =>
       :collision-padding="50"
       class="w-fit h-[33vh] p-0"
     >
-      <UiCommand v-model="model" v-model:searchTerm="searchTerm" :multiple>
+      <UiCommand v-model="modelBuffer" v-model:searchTerm="searchTerm" :multiple="true">
         <UiCommandInput placeholder="Rechercher les catégories" />
         <UiCommandEmpty>Aucune catégorie trouvée.</UiCommandEmpty>
         <UiCommandList>
@@ -70,10 +69,16 @@ const filteredCategories = computed(() =>
               v-for="category in filteredCategories"
               :key="category.id"
               :value="category"
-              class="cursor-pointer"
-              @select="handleCatSelect"
+              class="cursor-pointer flex justify-between items-center"
+              :class="cn({
+
+              })"
             >
-              {{ category.name }}
+              <span>
+                {{ category.name }}
+              </span>
+
+              <PhCheck v-if="model.find(cat => cat.id === category.id)" />
             </UiCommandItem>
           </UiCommandGroup>
         </UiCommandList>
diff --git a/components/calendar/input/EventCategory.vue b/components/calendar/input/EventCategory.vue
new file mode 100644
index 0000000..7bf7734
--- /dev/null
+++ b/components/calendar/input/EventCategory.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { PhCaretDown } from '@phosphor-icons/vue';
+import type { Category } from '~/models/Category';
+
+const isPopoverOpen = ref<boolean>(false)
+
+const props = defineProps<{
+  placeholder?: string
+}>()
+
+const model = defineModel<Category>()
+
+const { categories: availableCategories } = useCalendarEvents()
+
+const searchTerm = ref<string>('')
+
+function handleCatSelect() {
+  isPopoverOpen.value = false
+}
+
+const filteredCategories = computed(() =>
+  searchTerm.value === ''
+    ? availableCategories
+    : availableCategories.filter((category) => {
+      return category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
+    })
+)
+</script>
+
+<template>
+  <UiPopover v-model:open="isPopoverOpen">
+    <UiPopoverTrigger as-child>
+      <UiButton
+        variant="outline"
+        role="combobox"
+        class="w-full max-w-full justify-between"
+      >
+        <template v-if="!model">
+          {{ props.placeholder }}
+        </template>
+        <template v-else>
+          {{ model.name }}
+        </template>
+
+        <PhCaretDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+      </UiButton>
+    </UiPopoverTrigger>
+    <UiPopoverContent
+      align="start"
+      side="bottom"
+      :collision-padding="50"
+      class="w-fit h-[33vh] p-0"
+    >
+      <UiCommand v-model="model" v-model:searchTerm="searchTerm">
+        <UiCommandInput placeholder="Rechercher les catégories" />
+        <UiCommandEmpty>Aucune catégorie trouvée.</UiCommandEmpty>
+        <UiCommandList>
+          <UiCommandGroup>
+            <UiCommandItem
+              v-for="category in filteredCategories"
+              :key="category.id"
+              :value="category"
+              class="cursor-pointer"
+              @select="handleCatSelect"
+            >
+              {{ category.name }}
+            </UiCommandItem>
+          </UiCommandGroup>
+        </UiCommandList>
+      </UiCommand>
+    </UiPopoverContent>
+  </UiPopover>
+</template>