Refactored some stuff

components/calendar/category/Item.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { Category } from "~/models/Category";
+
+defineProps<{
+  category: Category
+}>()
+</script>
+
+<template>
+  <UiButton variant="secondary" size="sm" class="w-full text-left">
+    {{ category }}
+  </UiButton>
+</template>

components/calendar/category/List.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Category } from "~/models/Category";
+
+defineProps<{
+  categories: Category[]
+}>()
+</script>
+
+<template>
+  <ul>
+    <li v-for="category in categories" :key="category.id">
+      <CalendarCategoryItem :category="category" />
+    </li>
+  </ul>
+</template>

components/calendar/dialog/Categories.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { CalendarFormCategories } from "#components";
 import { PhX } from "@phosphor-icons/vue";
 
 const { toggleCategoriesModal } = useCalendar()
@@ -20,17 +21,23 @@ function handleClosing() {
       @interact-outside="handleClosing"
       @close-auto-focus="(e) => e.preventDefault()"
     >
-      <UiAlertDialogTitle>
-        <span class="text-2xl">
-          <strong class="font-bold">Gestion des catégories</strong>
-        </span>
-      </UiAlertDialogTitle>
+      <header>
+        <UiAlertDialogTitle>
+          <span class="text-2xl">
+            {{ $t('entity.category.manageDialog.title') }}
+          </span>
+        </UiAlertDialogTitle>
+
+        <UiAlertDialogDescription>
+          {{ $t('entity.category.manageDialog.subtitle') }}
+        </UiAlertDialogDescription>
+      </header>
 
       <UiButton size="icon" variant="ghost" class="absolute top-4 right-4" title="Fermer la fenêtre" @click="handleClosing">
         <PhX size="20" />
       </UiButton>
 
-      catégories là
+      <CalendarFormCategories />
     </UiAlertDialogContent>
   </UiAlertDialog>
 </template>

components/calendar/form/Categories.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+const { categories } = storeToRefs(useCalendar())
+</script>
+
+<template>
+  <CalendarCategoryList :categories />
+</template>

components/calendar/state/monthly/DayTile.vue

@@ -5,7 +5,7 @@ import { useElementBounding } from "@vueuse/core"
 import { storeToRefs } from "pinia"
 import { computed, ref, type ComputedRef } from "vue"
 
-import CalendarEventButton from "../../CalendarEvent.vue"
+import CalendarEventButton from "../../event/Event.vue"
 
 const props = defineProps<{
   date: RPGDate