Added extra translations to display mode

components/calendar/CalendarSwitch.vue

@@ -18,7 +18,9 @@ const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
       </UiButton>
     </UiDropdownMenuTrigger>
     <UiDropdownMenuContent :side="'bottom'" :collision-padding="30">
-      <UiDropdownMenuLabel>Mode d'affichage</UiDropdownMenuLabel>
+      <UiDropdownMenuLabel>
+        {{ $t('ui.displayMode') }}
+      </UiDropdownMenuLabel>
       <UiDropdownMenuSeparator />
       <UiDropdownMenuItem
         v-for="option in viewTypeOptions"

components/calendar/search/CalendarSearch.vue

@@ -298,7 +298,7 @@ function handleCategorySelect(e: (Category)) {
                 class="w-full"
               >
                 <ComboboxAnchor as-child>
-                  <ComboboxInput placeholder="Catégories" as-child>
+                  <ComboboxInput :placeholder="$t('entity.categoriesNamePlural')" as-child>
                     <UiTagsInputInput
                       class="w-full px-3"
                       :class="selectedCategories.length > 0 ? 'mt-2' : ''"

i18n.config.ts

@@ -27,11 +27,14 @@ export default defineI18nConfig(() => ({
         dark: "Dark",
         light: "Light",
         system: "System",
+        displayMode: "Display mode"
       },
       common: {
         title: "Title"
       },
       entity: {
+        categoriesNameSingular: "Category",
+        categoriesNamePlural: "Categories",
         searchCategories: "Search categories",
         noCategoriesFound: "No categories found.",
         addDescription: "Add a description",
@@ -101,6 +104,7 @@ export default defineI18nConfig(() => ({
             nameSingular: "Year",
           },
           months: {
+            nameSingular: "Month",
             inputName: "Month's name",
             daysNb: "Number of days",
             daysNameSingular: "Day",
@@ -144,11 +148,14 @@ export default defineI18nConfig(() => ({
         dark: "Sombre",
         light: "Clair",
         system: "Système",
+        displayMode: "Mode d'affichage",
       },
       common: {
         title: "Titre"
       },
       entity: {
+        categoriesNameSingular: "Catégorie",
+        categoriesNamePlural: "Catégories",
         searchCategories: "Rechercher les catégories",
         noCategoriesFound: "Aucune catégorie trouvée.",
         addDescription: "Ajouter une description",
@@ -218,12 +225,13 @@ export default defineI18nConfig(() => ({
             nameSingular: "Année",
           },
           months: {
+            nameSingular: "Mois",
             inputName: "Nom du mois",
             daysNb: "Nombre de jours",
             daysNameSingular: "Jour",
             daysNamePlural: "Jours",
             daysMaybePlural: "jour(s)",
-            yearsSingular: "Année",
+            Singular: "Année",
             available: "Mois disponibles",
             none: "Aucun mois pour l'instant",
             noneAvailable: "Aucun mois disponible",

stores/CalendarStore.ts

@@ -25,6 +25,8 @@ type CalendarCurrentDate = {
 }
 
 export const useCalendar = defineStore("calendar", () => {
+  const { t } = useI18n()
+
   /**
    * Static calendar config
    */
@@ -326,7 +328,7 @@ export const useCalendar = defineStore("calendar", () => {
   function getViewTypeTitle(viewType: CalendarViewType): string {
     switch (viewType) {
       case "year":
-        return "Année"
+        return t("entity.calendar.years.nameSingular")
 
       case "decade":
         return "Décennie"
@@ -336,7 +338,7 @@ export const useCalendar = defineStore("calendar", () => {
 
       case "month":
       default:
-        return "Mois"
+        return t("entity.calendar.months.nameSingular")
     }
   }