Added a bunch of translations on calendar components

components/calendar/CalendarEventDetails.vue

@@ -87,8 +87,14 @@ function deployDeleteModal() {
           </template>
           <template v-else>
             <p class="font-semibold">
-              Du {{ getFormattedDateTitle(event.startDate, true) }} au
+              {{
-              {{ getFormattedDateTitle(event.endDate, true) }}
+                $t('entity.calendar.date.fromTo',
+                  {
+                    startDate: getFormattedDateTitle(event.startDate, true),
+                    endDate: getFormattedDateTitle(event.endDate, true)
+                  }
+                )
+              }}
             </p>
           </template>
         </div>
@@ -105,7 +111,8 @@ function deployDeleteModal() {
         </p>
         <template v-if="dateDuration">
           <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
-            <PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
+            <PhHourglassMedium size="16" weight="fill" />
+            {{ $t('entity.calendar.date.while', { duration: dateDuration } )}}
           </p>
         </template>
       </div>
@@ -146,8 +153,8 @@ function deployDeleteModal() {
           <UiCommand>
             <UiCommandList>
               <UiCommandGroup>
-                <UiCommandItem value="edit-event" @select="deployEditModal"> Modifier </UiCommandItem>
+                <UiCommandItem value="edit-event" @select="deployEditModal"> {{ $t('ui.action.edit') }} </UiCommandItem>
-                <UiCommandItem value="delete-event" @select="deployDeleteModal"> Supprimer </UiCommandItem>
+                <UiCommandItem value="delete-event" @select="deployDeleteModal"> {{ $t('ui.action.delete') }} </UiCommandItem>
               </UiCommandGroup>
             </UiCommandList>
           </UiCommand>
@@ -162,7 +169,7 @@ function deployDeleteModal() {
           title="Naviguer au début"
           @click="handleJumpToDate(event.startDate!)"
         >
-          <PhHourglassHigh size="16" weight="fill" /> Début
+          <PhHourglassHigh size="16" weight="fill" /> {{ $t('entity.calendar.event.isStart') }}
         </button>
       </UiBadge>
       <UiBadge class="hover:bg-indigo-400 dark:hover:bg-slate-300" as-child title="Naviguer à la fin">
@@ -171,7 +178,7 @@ function deployDeleteModal() {
           title="Naviguer à la fin"
           @click="handleJumpToDate(event.endDate!)"
         >
-          <PhHourglassLow size="16" weight="fill" /> Fin
+          <PhHourglassLow size="16" weight="fill" /> {{ $t('entity.calendar.event.isEnd') }}
         </button>
       </UiBadge>
     </nav>
@@ -180,11 +187,13 @@ function deployDeleteModal() {
       <UiTooltip>
         <UiTooltipTrigger as-child>
           <UiBadge class="absolute -top-2 right-2 flex gap-1">
-            <PhEye size="16" weight="fill" /> Évènement privé
+            <PhEye size="16" weight="fill" /> {{ $t('entity.calendar.event.isHidden') }}
           </UiBadge>
         </UiTooltipTrigger>
         <UiTooltipContent>
-          <p>Cet évènement est uniquement visible pour vous</p>
+          <p>
+            {{ $t('entity.calendar.event.hiddenTooltip') }}
+          </p>
         </UiTooltipContent>
       </UiTooltip>
     </UiTooltipProvider>

components/calendar/CalendarMenu.vue

@@ -25,7 +25,7 @@ const { revealAdvancedSearch } = useCalendar()
         <li>
           <UiButton search-slash @click="revealAdvancedSearch()">
             <PhMagnifyingGlass size="20" weight="light" />
-            Recherche avancée
+            {{ $t('entity.advancedSearch.title') }}
           </UiButton>
         </li>
         <li>

components/calendar/CalendarMenuToday.vue

@@ -14,17 +14,9 @@ const isDefaultDate: ComputedRef<boolean> = computed<boolean>(() => areDatesIden
   <UiTooltipProvider :delay-duration="250">
     <UiTooltip>
       <UiTooltipTrigger as-child>
-        <ClientOnly>
         <UiButton size="sm" :disabled="isDefaultDate" @click="jumpToDefaultDate">
-            Aujourd'hui
+          {{ $t('entity.calendar.date.today') }}
         </UiButton>
-
-          <template #fallback>
-            <UiButton size="sm">
-              Aujourd'hui
-            </UiButton>
-          </template>
-        </ClientOnly>
       </UiTooltipTrigger>
       <UiTooltipContent>
         <p>{{ defaultDateFormatted }}</p>

components/calendar/form/UpdateEvent.vue

@@ -70,10 +70,12 @@ function handleCancel() {
       @pointer-down-outside="(e) => e.preventDefault()"
     >
       <header class="pl-8 grid gap-y-2">
-        <UiDialogTitle> Modifier l'évènement</UiDialogTitle>
+        <UiDialogTitle>
+          {{ $t('entity.calendar.event.editDialog.title') }}
+        </UiDialogTitle>
 
         <UiDialogDescription>
-          Mettre à jour les données de l'évènement
+          {{ $t('entity.calendar.event.editDialog.subtitle') }}
         </UiDialogDescription>
       </header>
 
@@ -89,7 +91,7 @@ function handleCancel() {
                 type="text"
                 name="new-event-title"
                 required
-                placeholder="Titre de l'évènement"
+                :placeholder="$t('entity.calendar.event.title')"
                 class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
               >
             </div>
@@ -100,7 +102,7 @@ function handleCancel() {
               id="new-event-description"
               v-model="eventSkeleton.description"
               name="new-event-description"
-              placeholder="Ajouter une description"
+              :placeholder="$t('entity.addDescription')"
               class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
             />
           </div>
@@ -111,7 +113,7 @@ function handleCancel() {
 
               <CalendarInputRPGDate
                 v-model:model-value="eventSkeleton.startDate"
-                placeholder="Date de début"
+                :placeholder="$t('entity.calendar.date.start')"
                 :initial-date="lastActiveEvent?.startDate"
                 :required="true"
               />
@@ -120,7 +122,7 @@ function handleCancel() {
 
               <CalendarInputRPGDate
                 v-model:model-value="eventSkeleton.endDate"
-                placeholder="Date de fin"
+                :placeholder="$t('entity.calendar.date.end')"
                 :initial-date="lastActiveEvent?.endDate"
               />
             </div>
@@ -155,7 +157,7 @@ function handleCancel() {
                 v-model="eventSkeleton.location"
                 type="text"
                 name="new-event-location"
-                placeholder="Ajouter un endroit"
+                :placeholder="$t('entity.calendar.event.addLocation')"
                 class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
             </div>
           </div>
@@ -169,10 +171,10 @@ function handleCancel() {
                 <UiSwitch id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
                 <UiLabel for="new-event-visibility">
                   <template v-if="!eventSkeleton.hidden">
-                    Évènement visible par tous
+                    {{ $t('entity.calendar.event.isPublic') }}
                   </template>
                   <template v-else>
-                    Évènement caché
+                    {{ $t('entity.calendar.event.isHidden') }}
                   </template>
                 </UiLabel>
               </div>
@@ -189,7 +191,7 @@ function handleCancel() {
         <footer class="flex gap-2 justify-end">
           <Transition name="fade-delay">
             <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
-              Annuler
+              {{ $t('ui.action.cancel') }}
             </UiButton>
           </Transition>
 
@@ -198,7 +200,7 @@ function handleCancel() {
               <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
             </Transition>
 
-            Enregistrer
+            {{ $t('ui.action.save') }}
           </UiButton>
         </footer>
       </form>

components/calendar/input/EventCategories.vue

@@ -60,8 +60,8 @@ const filteredCategories = computed(() =>
       class="w-fit h-[33vh] p-0"
     >
       <UiCommand v-model="modelBuffer" v-model:searchTerm="searchTerm" :multiple="true">
-        <UiCommandInput placeholder="Rechercher les catégories" />
+        <UiCommandInput :placeholder="$t('entity.searchCategories')" />
-        <UiCommandEmpty>Aucune catégorie trouvée.</UiCommandEmpty>
+        <UiCommandEmpty>{{ $t('entity.noCategoriesFound') }}</UiCommandEmpty>
         <UiCommandList>
           <UiCommandGroup>
             <UiCommandItem

components/calendar/input/EventCategory.vue

@@ -52,8 +52,8 @@ const filteredCategories = computed(() =>
       class="w-fit h-[33vh] p-0"
     >
       <UiCommand v-model="model" v-model:searchTerm="searchTerm">
-        <UiCommandInput placeholder="Rechercher les catégories" />
+        <UiCommandInput :placeholder="$t('entity.searchCategories')" />
-        <UiCommandEmpty>Aucune catégorie trouvée.</UiCommandEmpty>
+        <UiCommandEmpty>{{ $t('entity.noCategoriesFound') }}</UiCommandEmpty>
         <UiCommandList>
           <UiCommandGroup>
             <UiCommandItem

components/calendar/search/CalendarSearch.vue

@@ -241,11 +241,11 @@ function handleCategorySelect(e: (Category)) {
       }"
     >
       <VisuallyHidden>
-        <UiDialogTitle> Recherche avancée </UiDialogTitle>
+        <UiDialogTitle> {{ $t('entity.advancedSearch.title') }} </UiDialogTitle>
       </VisuallyHidden>
       <VisuallyHidden>
         <UiDialogDescription>
-          Rechercher les données disponibles sur le calendrier
+          {{ $t('entity.advancedSearch.title') }}
         </UiDialogDescription>
       </VisuallyHidden>
 
@@ -256,7 +256,7 @@ function handleCategorySelect(e: (Category)) {
             id="search"
             v-model:model-value="searchQuery"
             type="text"
-            placeholder="Rechercher le calendrier"
+            :placeholder="$t('entity.advancedSearch.ctaPlaceholder')"
             class="pl-10 py-6 text-lg"
             autocomplete="off"
           />
@@ -274,10 +274,10 @@ function handleCategorySelect(e: (Category)) {
               @update:model-value="handleEntitySwitch()"
             >
               <UiToggleGroupItem value="events" aria-label="Uniquement les évènements">
-                Évènements
+                {{ $t('entity.calendar.event.namePlural') }}
               </UiToggleGroupItem>
               <UiToggleGroupItem value="characters" aria-label="Uniquement les personnages">
-                Personnages
+                {{ $t('entity.character.namePlural') }}
               </UiToggleGroupItem>
             </UiToggleGroup>
           </div>
@@ -341,7 +341,7 @@ function handleCategorySelect(e: (Category)) {
                   </UiButton>
                 </UiTooltipTrigger>
                 <UiTooltipContent>
-                  <p>Plus ancien</p>
+                  <p>{{ $t('entity.advancedSearch.older') }}</p>
                 </UiTooltipContent>
               </UiTooltip>
             </UiTooltipProvider>
@@ -358,7 +358,7 @@ function handleCategorySelect(e: (Category)) {
                   </UiButton>
                 </UiTooltipTrigger>
                 <UiTooltipContent>
-                  <p>Plus récent</p>
+                  <p>{{ $t('entity.advancedSearch.newer') }}</p>
                 </UiTooltipContent>
               </UiTooltip>
             </UiTooltipProvider>

components/calendar/search/lists/EventCallout.vue

@@ -53,8 +53,14 @@ const dateDuration: string | null = props.event.endDate
       </template>
       <template v-else>
         <p class="font-semibold text-sm opacity-75">
-          Du {{ getFormattedDateTitle(event.startDate, true) }} au
+          {{
-          {{ getFormattedDateTitle(event.endDate, true) }}
+            $t('entity.calendar.date.fromTo',
+              {
+                startDate: getFormattedDateTitle(event.startDate, true),
+                endDate: getFormattedDateTitle(event.endDate, true)
+              }
+            )
+          }}
         </p>
       </template>
       <div v-if="event.hidden" class="flex justify-end">
@@ -62,11 +68,13 @@ const dateDuration: string | null = props.event.endDate
           <UiTooltip>
             <UiTooltipTrigger as-child>
               <UiBadge class="flex gap-1">
-                <PhEye size="16" weight="fill" /> Évènement privé
+                <PhEye size="16" weight="fill" /> {{ $t('entity.calendar.event.isHidden') }}
               </UiBadge>
             </UiTooltipTrigger>
             <UiTooltipContent>
-              <p>Cet évènement est uniquement visible pour vous</p>
+              <p>
+                {{ $t('entity.calendar.event.hiddenTooltip') }}
+              </p>
             </UiTooltipContent>
           </UiTooltip>
         </UiTooltipProvider>
@@ -84,7 +92,7 @@ const dateDuration: string | null = props.event.endDate
       </p>
       <template v-if="dateDuration">
         <p class="w-fit text-sm italic opacity-75 flex items-center gap-1">
-          <PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
+          <PhHourglassMedium size="16" weight="fill" /> {{ $t('entity.calendar.date.while', { duration: dateDuration } )}}
         </p>
       </template>
     </div>

i18n.config.ts

@@ -11,7 +11,9 @@ export default defineI18nConfig(() => ({
         action: {
           back: "Back",
           cancel: "Cancel",
-          save: "Save"
+          save: "Save",
+          delete: "Delete",
+          edit: "Edit",
         },
         greeting: "Connected as {user}",
         sidebarMenu: {
@@ -30,7 +32,17 @@ export default defineI18nConfig(() => ({
         title: "Title"
       },
       entity: {
+        searchCategories: "Search categories",
+        noCategoriesFound: "No categories found.",
+        addDescription: "Add a description",
         deleteOne: "Delete \"{entity}\"",
+        advancedSearch: {
+          title: "Advanced search",
+          subtitle: "Search through calendar and world data",
+          older: "Older",
+          newer: "Newer",
+          ctaPlaceholder: "Search an event, characters…"
+        },
         world: {
           nameSingular: "World",
           namePlural: "Worlds",
@@ -40,6 +52,33 @@ export default defineI18nConfig(() => ({
           namePlural: "Calendars",
           addSingle: "Add a calendar",
           notFoundForWorld: "No calendar for this world… yet !",
+          isLoading: "Calendar is loading…",
+          date: {
+            start: "Start date",
+            end: "End date",
+            today: "Today",
+            fromTo: "From {startDate} to {endDate}",
+            while: "During {duration}",
+          },
+          event: {
+            nameSingular: "Event",
+            namePlural: "Events",
+            title: "Event title",
+            isStart: "Start",
+            isEnd: "End",
+            isHidden: "Hidden event",
+            isPublic: "Public event",
+            hiddenTooltip: "This event is visible only to game masters.",
+            addLocation: "Add a place",
+            editDialog: {
+              title: "Edit event",
+              subtitle: "Update event data",
+            },
+            deleteDialog: {
+              title: "Delete this event",
+              subtitle: "Data associated with this event will be lost and you won't be able to retrieve it !",
+            }
+          },
           createDialog: {
             title: "New calendar",
             tabs: {
@@ -73,6 +112,10 @@ export default defineI18nConfig(() => ({
             chooseOne: "Choose a month",
             deleteOne: "Remove {month} from this calendar"
           }
+        },
+        character: {
+          nameSingular: "Character",
+          namePlural: "Characters",
         }
       }
     },
@@ -85,7 +128,9 @@ export default defineI18nConfig(() => ({
         action: {
           back: "Retour",
           cancel: "Annuler",
-          save: "Sauvegarder"
+          save: "Sauvegarder",
+          delete: "Supprimer",
+          edit: "Modifier",
         },
         greeting: "Connecté en tant que {user}",
         sidebarMenu: {
@@ -104,7 +149,17 @@ export default defineI18nConfig(() => ({
         title: "Titre"
       },
       entity: {
+        searchCategories: "Rechercher les catégories",
+        noCategoriesFound: "Aucune catégorie trouvée.",
+        addDescription: "Ajouter une description",
         deleteOne: "Supprimer \"{entity}\"",
+        advancedSearch: {
+          title: "Recherche avancée",
+          subtitle: "Rechercher les données disponibles sur le calendrier",
+          older: "Plus ancien",
+          newer: "Plus récent",
+          ctaPlaceholder: "Rechercher un évènement, personnage…"
+        },
         world: {
           nameSingular: "Monde",
           namePlural: "Mondes",
@@ -114,6 +169,33 @@ export default defineI18nConfig(() => ({
           namePlural: "Calendrier",
           addSingle: "Ajouter un calendrier",
           notFoundForWorld: "Aucun calendrier pour ce monde… pour l'instant !",
+          isLoading: "Chargement du calendrier…",
+          date: {
+            start: "Date de début",
+            end: "Date de fin",
+            today: "Aujourd'hui",
+            fromTo: "Du {startDate} au {endDate}",
+            while: "Pendant {duration}",
+          },
+          event: {
+            nameSingular: "Évènement",
+            namePlural: "Évènements",
+            title: "Titre de l'évènement",
+            isStart: "Début",
+            isEnd: "Fin",
+            isHidden: "Évènement privé",
+            isPublic: "Évènement public",
+            hiddenTooltip: "Cet évènement est uniquement visible pour les maîtres du jeu.",
+            addLocation: "Ajouter un endroit",
+            editDialog: {
+              title: "Modifier l'évènement",
+              subtitle: "Mettre à jour les données de l'évènement",
+            },
+            deleteDialog: {
+              title: "Supprimer l'évènement",
+              subtitle: "Les données associés à cet évènement seront supprimées et vous ne pourrez plus les récupérer !",
+            }
+          },
           createDialog: {
             title: "Nouveau calendrier",
             tabs: {
@@ -148,6 +230,10 @@ export default defineI18nConfig(() => ({
             chooseOne: "Choisir un mois",
             deleteOne: "Supprimer {month} du calendrier"
           }
+        },
+        character: {
+          nameSingular: "Personnage",
+          namePlural: "Personnages",
         }
       }
     }

nuxt.config.ts

@@ -15,7 +15,11 @@ export default defineNuxtConfig({
   css: ["~/assets/main.css"],
 
   i18n: {
-    vueI18n: "./i18n.config.ts"
+    vueI18n: "./i18n.config.ts",
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: "tttools_lang"
+    },
   },
 
   supabase: {

pages/my/calendars/[id].vue

@@ -32,7 +32,9 @@ const categories = computed<Category[]>(() => catData?.value?.data as Category[]
     </Head>
 
     <div class="grid gap-2 justify-items-center opacity-50">
-      <p>Chargement du calendrier</p>
+      <p>
+        {{ $t('entity.calendar.isLoading') }}
+      </p>
       <PhCircleNotch size="50" class="animate-spin"/>
     </div>
   </div>