Added sample behaviour for category modal

components/calendar/Calendar.vue

@@ -52,6 +52,7 @@ onMounted(() => {
       <component :is="currentViewComponent" />
 
       <LazyCalendarSearch />
+      <LazyCalendarDialogCategories v-if="!isReadOnly" />
       <LazyCalendarDialogUpdateEvent v-if="!isReadOnly" />
       <LazyCalendarDialogDeleteEvent v-if="!isReadOnly" />
     </div>

components/calendar/CalendarMenu.vue

@@ -2,7 +2,6 @@
 import { useCalendar } from "@/stores/CalendarStore"
 
 import { PhMagnifyingGlass } from "@phosphor-icons/vue"
-import CalendarOptions from "./CalendarOptions.vue"
 
 const { revealAdvancedSearch } = useCalendar()
 const { isReadOnly } = storeToRefs(useCalendar())
@@ -13,7 +12,7 @@ const { isReadOnly } = storeToRefs(useCalendar())
     <div class="px-8 flex items-center justify-between gap-2">
       <menu class="flex items-center gap-2">
         <li v-if="!isReadOnly">
-          <CalendarDialogQuickCreateEvent />
+          <LazyCalendarDialogQuickCreateEvent />
         </li>
         <li>
           <CalendarMenuToday />
@@ -33,7 +32,10 @@ const { isReadOnly } = storeToRefs(useCalendar())
           </UiButton>
         </li>
         <li>
-          <CalendarOptions />
+          <CalendarCategoriesCTA />
+        </li>
+        <li>
+          <CalendarOptionsCTA />
         </li>
       </menu>
     </div>

components/calendar/CategoriesCTA.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { PhTag } from "@phosphor-icons/vue"
+
+const { toggleCategoriesModal } = useCalendar()
+const { isReadOnly } = storeToRefs(useCalendar())
+</script>
+
+<template>
+  <UiTooltipProvider :delay-duration="250">
+    <UiTooltip>
+      <UiTooltipTrigger as-child>
+        <UiButton v-if="!isReadOnly" variant="secondary" size="icon" @click="toggleCategoriesModal(true)">
+          <PhTag size="20" weight="light" />
+        </UiButton>
+      </UiTooltipTrigger>
+      <UiTooltipContent>
+        <p>
+          {{ $t('entity.calendar.seeCategories') }}
+        </p>
+      </UiTooltipContent>
+    </UiTooltip>
+  </UiTooltipProvider>
+</template>

components/calendar/OptionsCTA.vue

@@ -1,32 +1,23 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils"
 import { useCalendar } from "@/stores/CalendarStore"
-import { PhCalendarBlank, PhCheckCircle, PhGear, PhTag } from "@phosphor-icons/vue"
+import { PhCalendarBlank, PhCheckCircle, PhGear } from "@phosphor-icons/vue"
 import { computed } from "vue"
 
-const optionsOpened = ref<boolean>(false)
-
-const user = useSupabaseUser()
-
-function closeMenu() {
-  optionsOpened.value = false
-}
-watch(user, closeMenu)
-
 const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
-const { isReadOnly } = storeToRefs(useCalendar())
-
 const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
 </script>
 
 <template>
-  <UiDropdownMenu v-model:open="optionsOpened">
+  <UiDropdownMenu>
     <UiDropdownMenuTrigger as-child>
       <UiButton variant="secondary" size="icon">
         <PhGear size="20" weight="fill" />
       </UiButton>
     </UiDropdownMenuTrigger>
+
     <UiDropdownMenuContent :side="'bottom'" :align="'start'" :side-offset="10" :align-offset="25" :collision-padding="40" class="text-right">
+      <UiDropdownMenuArrow />
       <UiDropdownMenuLabel>
         {{ $t('entity.calendar.seeOptions') }}
       </UiDropdownMenuLabel>
@@ -54,16 +45,6 @@ const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
           </UiDropdownMenuSubContent>
         </UiDropdownMenuPortal>
       </UiDropdownMenuSub>
-
-      <template v-if="!isReadOnly">
-        <UiDropdownMenuSeparator />
-
-        <UiDropdownMenuItem class="flex gap-[1ch] justify-end items-center">
-          {{ $t('entity.category.namePlural') }}
-
-          <PhTag size="18" weight="fill" />
-        </UiDropdownMenuItem>
-      </template>
     </UiDropdownMenuContent>
   </UiDropdownMenu>
 </template>

components/calendar/dialog/Categories.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { PhX } from "@phosphor-icons/vue";
+
+const { toggleCategoriesModal } = useCalendar()
+const { isCategoriesModalOpen } = storeToRefs(useCalendar())
+
+function handleClosing() {
+  toggleCategoriesModal(false)
+}
+</script>
+
+<template>
+  <UiAlertDialog :open="isCategoriesModalOpen">
+    <UiAlertDialogContent
+      class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl gap-6"
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
+      @escape-key-down="handleClosing"
+      @focus-outside="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>
+
+      <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à
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>