Added more translations to meta and delete modals

app.vue

@@ -9,7 +9,6 @@ useHead({
     { name: "charset", content: "UTF-8" },
     { name: "viewport", content: "width=device-width, initial-scale=1.0" },
     { name: "author", content: "Alexis Pelé" },
-    { name: "description", content: "Tools destined to players and game master, helping them visualize their worlds better." },
     { name: "generator", content: "Nuxt" },
     { name: "msapplication-TileColor", content: "00aba9" },
     { name: "theme-color", content: "00aba9" },

components/calendar/dialog/Delete.vue

@@ -53,10 +53,12 @@ function handleClosing() {
       @interact-outside="handleClosing"
       @pointer-down-outside="handleClosing"
     >
-      <UiAlertDialogTitle> Êtes-vous sûr de supprimer ce calendrier ?</UiAlertDialogTitle>
+      <UiAlertDialogTitle>
+        {{ $t('entity.calendar.deleteDialog.title') }}
+      </UiAlertDialogTitle>
 
       <UiAlertDialogDescription>
-        Les évènements ne seront plus accessibles et vous ne pourrez plus récupérer les données !
+        {{ $t('entity.calendar.deleteDialog.subtitle') }}
       </UiAlertDialogDescription>
 
       <form @submit.prevent="handleAction">
@@ -70,13 +72,13 @@ function handleClosing() {
 
         <footer class="flex gap-2 justify-between">
           <UiButton type="button" size="sm" variant="outline" @click="handleClosing">
-            Retour
+            {{ $t('ui.action.back') }}
           </UiButton>
 
           <div class="flex gap-2 justify-end">
             <Transition name="fade-delay">
               <UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
-                Annuler
+                {{ $t('ui.action.cancel') }}
               </UiButton>
             </Transition>
 
@@ -85,7 +87,7 @@ function handleClosing() {
                 <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
               </Transition>
 
-              Supprimer "{{ calendar?.name }}"
+              {{ $t('entity.deleteOne', { entity: calendar?.name }) }}
             </UiButton>
           </div>
         </footer>

i18n.config.ts

@@ -3,7 +3,16 @@ export default defineI18nConfig(() => ({
   locale: "fr",
   messages: {
     en: {
+      head: {
+        title: "Fantasy calendars for TTRPGs",
+        description: "Tools for players and game masters to help them visualize fantasy worlds better."
+      },
       ui: {
+        action: {
+          back: "Back",
+          cancel: "Cancel",
+          save: "Save"
+        },
         greeting: "Connected as {user}",
         sidebarMenu: {
           appearance: "Appearance",
@@ -18,14 +27,34 @@ export default defineI18nConfig(() => ({
         system: "System",
       },
       entity: {
+        deleteOne: "Delete \"{entity}\"",
         world: {
           nameSingular: "World",
           namePlural: "Worlds",
+        },
+        calendar: {
+          nameSingular: "Calendar",
+          namePlural: "Calendars",
+          addSingle: "Add a calendar",
+          notFoundForWorld: "No calendar for this world… yet !",
+          deleteDialog: {
+            title: "Are you sure you want to delete this calendar ?",
+            subtitle: "Its events won't be accessible anymore and you won't be able to retrieve the deleted data !",
+          },
         }
       }
     },
     fr: {
+      head: {
+        title: "Calendriers fantasies pour JDR",
+        description: "Outils destinés aux joueurs et maîtres de jeux pour visualiser plus facilement leurs univers."
+      },
       ui: {
+        action: {
+          back: "Retour",
+          cancel: "Annuler",
+          save: "Sauvegarder"
+        },
         greeting: "Connecté en tant que {user}",
         sidebarMenu: {
           appearance: "Apparence",
@@ -40,9 +69,20 @@ export default defineI18nConfig(() => ({
         system: "Système",
       },
       entity: {
+        deleteOne: "Supprimer \"{entity}\"",
         world: {
           nameSingular: "Monde",
           namePlural: "Mondes",
+        },
+        calendar: {
+          nameSingular: "Calendriers",
+          namePlural: "Calendrier",
+          addSingle: "Ajouter un calendrier",
+          notFoundForWorld: "Aucun calendrier pour ce monde… pour l'instant !",
+          deleteDialog: {
+            title: "Êtes-vous sûr de supprimer ce calendrier ?",
+            subtitle: "Les évènements ne seront plus accessibles et vous ne pourrez plus récupérer les données !",
+          },
         }
       }
     }

pages/index.vue

@@ -1,12 +1,18 @@
 <script lang="ts" setup>
 useHead({
-  title: "TTTools — Calendriers de JDR",
   titleTemplate: null
 })
 </script>
 
 <template>
   <main class="p-8">
+    <Head>
+      <Title>
+        TTTools — {{ $t('head.title') }}
+      </Title>
+      <Meta name="description" :content="$t('head.description')" />
+    </Head>
+
     <Heading>TTTools</Heading>
   </main>
 </template>

pages/my/calendars/[id].vue

@@ -23,27 +23,25 @@ const { data: catData, pending: catPending } = await useLazyFetch("/api/calendar
 
 const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
 const categories = computed<Category[]>(() => catData?.value?.data as Category[])
-
-if (cal.value) {
-  useHead({
-    title: cal.value.name
-  })
-}
-
-watch(cal, (n) => {
-  useHead({
-    title: n.name
-  })
-})
 </script>
 
 <template>
   <div v-if="calPending || catPending" class="h-full w-full grid place-items-center">
+    <Head>
+      <Title>{{ $t("entity.calendar.nameSingular") }}</Title>
+    </Head>
+
     <div class="grid gap-2 justify-items-center opacity-50">
       <p>Chargement du calendrier</p>
       <PhCircleNotch size="50" class="animate-spin"/>
     </div>
   </div>
 
-  <Calendar v-else-if="cal && categories" :calendar-data="cal" :categories />
+  <div v-else-if="cal && categories" class="h-full w-full">
+    <Head>
+      <Title>{{ cal.name }}</Title>
+    </Head>
+
+    <Calendar :calendar-data="cal" :categories />
+  </div>
 </template>

pages/my/index.vue

@@ -2,10 +2,6 @@
 import type { RealtimeChannel } from "@supabase/supabase-js"
 import type { World } from "~/models/World";
 
-useHead({
-  title: "Mondes"
-})
-
 const supabase = useSupabaseClient()
 
 const { data: res } = await useFetch("/api/worlds/query")
@@ -85,12 +81,16 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <main class="p-8 after:fill-red-400">
+  <main class="p-8 after:fill-red-400">
+    <Head>
+      <Title>{{ $t("entity.world.namePlural") }}</Title>
+    </Head>
+
     <Heading>{{ user?.user_metadata.full_name }}</Heading>
 
     <section v-if="worlds" class="mt-4">
       <h2 class="mb-4 text-lg font-bold">
-        Mondes
+        {{ $t('entity.world.namePlural') }}
       </h2>
 
       <ul class="grid lg:grid-cols-2 gap-2">

pages/my/worlds/[id].vue

@@ -12,20 +12,6 @@ const { data: res, pending } = await useFetch("/api/worlds/query", { query: { id
 
 const world = ref<World>(res.value?.data as World)
 
-if (world.value) {
-  useHead({
-    title: world.value.name
-  })
-}
-
-watch(world, (n) => {
-  if (n) {
-    useHead({
-      title: n.name
-    })
-  }
-}, { deep: true })
-
 definePageMeta({
   middleware: ["auth-guard"]
 })
@@ -116,9 +102,17 @@ function hideDeleteModal() {
 <template>
   <main class="p-8">
     <template v-if="pending">
+      <Head>
+        <Title>{{ $t("entity.world.namePlural") }}</Title>
+      </Head>
+
       <Heading>Chargement...</Heading>
     </template>
     <template v-else-if="world">
+      <Head>
+        <Title>{{ world.name }}</Title>
+      </Head>
+
       <header class="lg:w-1/2 mb-8">
         <Spacing>
           <Heading>{{ world.name }}</Heading>
@@ -130,7 +124,9 @@ function hideDeleteModal() {
       <section>
         <Spacing size="lg">
           <div class="flex items-center gap-3">
-            <Heading>Calendriers</Heading>
+            <Heading>
+              {{ $t('entity.calendar.namePlural') }}
+            </Heading>
 
             <UiTooltipProvider :delay-duration="250">
               <UiTooltip>
@@ -140,7 +136,9 @@ function hideDeleteModal() {
                   </UiButton>
                 </UiTooltipTrigger>
                 <UiTooltipContent :side-offset="10">
-                  <p>Ajouter un calendrier</p>
+                  <p>
+                    {{ $t('entity.calendar.addSingle') }}
+                  </p>
                 </UiTooltipContent>
               </UiTooltip>
             </UiTooltipProvider>
@@ -168,7 +166,7 @@ function hideDeleteModal() {
           </ul>
           <template v-else>
             <p class="pl-6 opacity-75 italic">
-              Aucun calendrier pour ce monde
+              {{ $t('entity.calendar.notFoundForWorld') }}
             </p>
           </template>
         </Spacing>