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>

components/ui/alert-dialog/AlertDialogContent.vue

@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <AlertDialogPortal>
     <AlertDialogOverlay
-      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <AlertDialogContent
       v-bind="forwarded"

components/ui/button/index.ts

@@ -10,7 +10,7 @@ export const buttonVariants = cva(
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline: "border border-input hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-primary/20",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
       },

components/ui/dialog/DialogContent.vue

@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogContent
       v-bind="forwarded"

components/ui/dialog/DialogScrollContent.vue

@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     >
       <DialogContent
         :class="

components/ui/dropdown-menu/DropdownMenuArrow.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { DropdownMenuArrow, type DropdownMenuArrowProps, useForwardProps } from "radix-vue"
+
+const props = defineProps<DropdownMenuArrowProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuArrow class="fill-border" v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuArrow>
+</template>

components/ui/dropdown-menu/index.ts

@@ -1,6 +1,7 @@
 export { DropdownMenuPortal } from "radix-vue"
 
 export { default as DropdownMenu } from "./DropdownMenu.vue"
+export { default as DropdownMenuArrow } from "./DropdownMenuArrow.vue"
 export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue"
 export { default as DropdownMenuContent } from "./DropdownMenuContent.vue"
 export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue"