Added option menu for calendar

components/calendar/CalendarMenu.vue

@@ -2,6 +2,7 @@
 import { useCalendar } from "@/stores/CalendarStore"
 
 import { PhMagnifyingGlass } from "@phosphor-icons/vue"
+import CalendarOptions from "./CalendarOptions.vue"
 
 const { revealAdvancedSearch } = useCalendar()
 const { isReadOnly } = storeToRefs(useCalendar())
@@ -26,13 +27,13 @@ const { isReadOnly } = storeToRefs(useCalendar())
         <li>
           <UiButton search-slash @click="revealAdvancedSearch()">
             <PhMagnifyingGlass size="20" weight="light" />
-            {{ $t('entity.advancedSearch.title') }}
+            <span>
+              {{ $t('entity.advancedSearch.title') }}
+            </span>
           </UiButton>
         </li>
         <li>
-          <ClientOnly>
-            <CalendarSwitch />
-          </ClientOnly>
+          <CalendarOptions />
         </li>
       </menu>
     </div>

components/calendar/CalendarOptions.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils"
+import { useCalendar } from "@/stores/CalendarStore"
+import { PhCalendarBlank, PhCheckCircle, PhGear, PhTag } from "@phosphor-icons/vue"
+import { computed } from "vue"
+
+const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
+
+const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
+</script>
+
+<template>
+  <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">
+      <UiDropdownMenuLabel>
+        {{ $t('entity.calendar.seeOptions') }}
+      </UiDropdownMenuLabel>
+      <UiDropdownMenuSub>
+        <UiDropdownMenuSubTrigger arrow-direction="left" class="p-0 rounded-none">
+          <UiDropdownMenuItem class="flex gap-[1ch] justify-end items-center pointer-events-none">
+            {{ $t('ui.displayMode') }}
+
+            <PhCalendarBlank size="18" weight="fill" />
+          </UiDropdownMenuItem>
+        </UiDropdownMenuSubTrigger>
+        <UiDropdownMenuPortal>
+          <UiDropdownMenuSubContent>
+            <UiDropdownMenuItem
+              v-for="option in viewTypeOptions"
+              :key="option"
+              class="flex gap-[.5ch] items-center rounded-none transition-colors"
+              :class="cn({ 'text-emerald-600': viewTypeTitle === getViewTypeTitle(option) })"
+              @click="setViewType(option)"
+            >
+              <PhCheckCircle v-if="viewTypeTitle === getViewTypeTitle(option)" size="20" weight="fill" />
+
+              {{ getViewTypeTitle(option) }}
+            </UiDropdownMenuItem>
+          </UiDropdownMenuSubContent>
+        </UiDropdownMenuPortal>
+      </UiDropdownMenuSub>
+
+      <UiDropdownMenuSeparator />
+
+      <UiDropdownMenuItem class="flex gap-[1ch] justify-end items-center">
+        {{ $t('entity.category.namePlural') }}
+
+        <PhTag size="18" weight="fill" />
+      </UiDropdownMenuItem>
+    </UiDropdownMenuContent>
+  </UiDropdownMenu>
+</template>

components/calendar/CalendarSwitch.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { useCalendar } from "@/stores/CalendarStore"
-import { PhCalendarBlank } from "@phosphor-icons/vue"
-import { computed } from "vue"
-
-const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
-
-const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
-</script>
-
-<template>
-  <UiDropdownMenu>
-    <UiDropdownMenuTrigger as-child>
-      <UiButton size="sm" variant="secondary">
-        <PhCalendarBlank size="18" weight="fill" />
-
-        {{ viewTypeTitle }}
-      </UiButton>
-    </UiDropdownMenuTrigger>
-    <UiDropdownMenuContent :side="'bottom'" :collision-padding="30">
-      <UiDropdownMenuLabel>
-        {{ $t('ui.displayMode') }}
-      </UiDropdownMenuLabel>
-      <UiDropdownMenuSeparator />
-      <UiDropdownMenuItem
-        v-for="option in viewTypeOptions"
-        :key="option"
-        @click="setViewType(option)"
-      >
-        {{ getViewTypeTitle(option) }}
-      </UiDropdownMenuItem>
-    </UiDropdownMenuContent>
-  </UiDropdownMenu>
-</template>

components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -5,10 +5,10 @@ import {
   type DropdownMenuSubTriggerProps,
   useForwardProps
 } from "radix-vue"
-import { ChevronRight } from "lucide-vue-next"
 import { cn } from "@/lib/utils"
+import { PhCaretLeft, PhCaretRight } from "@phosphor-icons/vue";
 
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"], arrowDirection?: "left" | "right" }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -29,7 +29,17 @@ const forwardedProps = useForwardProps(delegatedProps)
       )
     "
   >
-    <slot />
-    <ChevronRight class="ml-auto h-4 w-4" />
+    <template v-if="props.arrowDirection === 'left'">
+      <PhCaretLeft class="mr-auto h-4 w-4" />
+
+      <span class="inline-block">
+        <slot />
+      </span>
+    </template>
+    <template v-else>
+      <slot />
+
+      <PhCaretRight class="ml-auto h-4 w-4" />
+    </template>
   </DropdownMenuSubTrigger>
 </template>

i18n.config.ts

@@ -79,7 +79,7 @@ export default defineI18nConfig(() => ({
         dark: "Dark",
         light: "Light",
         system: "System",
-        displayMode: "Display mode"
+        displayMode: "Display"
       },
       common: {
         title: "Title",
@@ -148,6 +148,7 @@ export default defineI18nConfig(() => ({
           backToList: "Go back to calendars",
           isLoading: "Calendar is loading…",
           hasXEvents: "{count} available events",
+          seeOptions: "Calendar options",
           date: {
             start: "Start date",
             end: "End date",
@@ -242,26 +243,31 @@ export default defineI18nConfig(() => ({
           },
           millennia: {
             nameSingular: "Millennia",
+            displayMode: "Millennial",
             nextSingular: "Next millennia",
             prevSingular: "Last millennia",
           },
           centuries: {
             nameSingular: "Century",
+            displayMode: "Centuries",
             nextSingular: "Next century",
             prevSingular: "Last century",
           },
           decades: {
             nameSingular: "Decade",
+            displayMode: "Decadal",
             nextSingular: "Next decade",
             prevSingular: "Last decade",
           },
           years: {
             nameSingular: "Year",
+            displayMode: "Yearly",
             nextSingular: "Next year",
             prevSingular: "Last year",
           },
           months: {
             nameSingular: "Month",
+            displayMode: "Monthly",
             nextSingular: "Next month",
             prevSingular: "Last month",
             inputName: "Month's name",
@@ -375,7 +381,7 @@ export default defineI18nConfig(() => ({
         dark: "Sombre",
         light: "Clair",
         system: "Système",
-        displayMode: "Mode d'affichage",
+        displayMode: "Affichage",
       },
       common: {
         title: "Titre",
@@ -444,6 +450,7 @@ export default defineI18nConfig(() => ({
           backToList: "Retourner aux calendriers",
           isLoading: "Chargement du calendrier…",
           hasXEvents: "{count} évènements disponibles",
+          seeOptions: "Options du calendrier",
           date: {
             start: "Date de début",
             end: "Date de fin",
@@ -541,26 +548,31 @@ export default defineI18nConfig(() => ({
           },
           millennia: {
             nameSingular: "Millénaire",
+            displayMode: "Par millénaire",
             nextSingular: "Millénaire suivant",
             prevSingular: "Millénaire précédent",
           },
           centuries: {
             nameSingular: "Siècle",
+            displayMode: "Par siècle",
             nextSingular: "Siècle suivant",
             prevSingular: "Siècle précédent",
           },
           decades: {
             nameSingular: "Décennie",
+            displayMode: "Par décennie",
             nextSingular: "Décennie suivante",
             prevSingular: "Décennie précédente",
           },
           years: {
             nameSingular: "Année",
+            displayMode: "Annuel",
             nextSingular: "Année suivante",
             prevSingular: "Année précédente",
           },
           months: {
             nameSingular: "Mois",
+            displayMode: "Mensuel",
             nextSingular: "Mois suivant",
             prevSingular: "Mois précédent",
             inputName: "Nom du mois",

stores/CalendarStore.ts

@@ -345,17 +345,17 @@ export const useCalendar = defineStore("calendar", () => {
   function getViewTypeTitle(viewType: CalendarViewType): string {
     switch (viewType) {
       case "year":
-        return t("entity.calendar.years.nameSingular")
+        return t("entity.calendar.years.displayMode")
 
       case "decade":
-        return "Décennie"
+        return t("entity.calendar.decades.displayMode")
 
       case "century":
-        return "Siècle"
+        return t("entity.calendar.centuries.displayMode")
 
       case "month":
       default:
-        return t("entity.calendar.months.nameSingular")
+        return t("entity.calendar.months.displayMode")
     }
   }