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

i18n.config.ts

@@ -93,7 +93,11 @@ export default defineI18nConfig(() => ({
           search: "Search categories",
           notFoundAny: "No categories found.",
           addPrimary: "Add a primary category",
-          addSecondaries: "Add secondary categories"
+          addSecondaries: "Add secondary categories",
+          manageDialog: {
+            title: "Manage categories",
+            subtitle: "Add and change the categories of your calendar",
+          }
         },
         isLoading: "Loading in progress…",
         addDescription: "Add a description",
@@ -397,6 +401,10 @@ export default defineI18nConfig(() => ({
           notFoundAny: "Aucune catégorie trouvée.",
           addPrimary: "Ajouter une catégorie principale",
           addSecondaries: "Ajouter des catégories secondaires",
+          manageDialog: {
+            title: "Gestion des catégories",
+            subtitle: "Créer et modifier les catégories de votre calendrier",
+          }
         },
         isLoading: "Chargement en cours…",
         addDescription: "Ajouter une description",

pages/calendars/[id].vue

@@ -14,7 +14,7 @@ const {
   refresh: calRefresh
 } = await useLazyFetch<{ data: Calendar }>("/api/calendars/query",
   {
-    key: `calendar-${shortId}`,
+    key: "active-calendar",
     query: {
       shortId,
       full: true
@@ -27,7 +27,7 @@ const {
   status: categoriesStatus,
   refresh: catRefresh
 } = await useLazyFetch<{ data: Category[] }>("/api/calendars/categories/query",
-  { key: `categories-${shortId}` }
+  { key: "active-categories" }
 )
 
 const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")

pages/my/calendars/[id].vue

@@ -24,7 +24,7 @@ const {
   status: calendarStatus
 } = await useLazyFetch<{ data: Calendar }>("/api/calendars/query",
   {
-    key: `calendar-${id}`,
+    key: "active-calendar",
     query: {
       id,
       full: true
@@ -36,35 +36,10 @@ const {
   data: categories,
   status: categoriesStatus
 } = await useLazyFetch<{ data: Category[] }>("/api/calendars/categories/query",
-  { key: `categories-${id}` }
+  { key: "active-categories" }
 )
 
 const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")
-
-// Set custom menu
-// This should be reserved for actions, not for breadcrumbs
-//
-// const { t } = useI18n()
-// const { setCurrentMenu } = useUiStore()
-
-// // Set menu once we have the calendar data
-// watch(calendar, (n) => {
-//   if (n?.data) {
-//     setCurrentMenu([
-//       {
-//         tooltip: t("entity.world.backToMy"),
-//         to: "/my",
-//         phIcon: "universe",
-//         phIconWeight: "regular"
-//       },
-//       {
-//         tooltip: t("entity.world.backToSingle", { world: calendar.value?.data.world?.name }),
-//         to: `/my/worlds/${calendar.value?.data.world?.id}`,
-//         phIcon: "world"
-//       },
-//     ])
-//   }
-// }, { immediate: true })
 </script>
 
 <template>

server/api/calendars/categories/query.get.ts

@@ -16,12 +16,13 @@ export default defineEventHandler(async (event) => {
     .from("calendar_event_categories")
     .select(`
       id,
-      name
+      name,
+      color
     `)
 
   if (query.id) {
     return output.eq("id", query.id).limit(1).single<Category>()
   }
 
-  return output.returns<Category[]>()
+  return output.overrideTypes<Category[]>()
 })

stores/CalendarStore.ts

@@ -61,6 +61,8 @@ export const useCalendar = defineStore("calendar", () => {
   const months = ref<CalendarMonth[]>([])
 
   function setActiveCalendar(calendarData: Calendar, categoryData: Category[]) {
+    console.log("proced")
+
     try {
       if (!calendarData.id) return