Switch to translatable data

app/pages/hunt/[huntSlug]/index.vue

@@ -5,8 +5,8 @@ import { fullDate } from '~~/server/utils/date';
 
 const app = useNuxtApp();
 const { loggedIn } = useUserSession();
-const localePath = useLocalePath();
 const { t, d } = useI18n();
+const { tKey, hasKey, tSluggy } = useI18nKey();
 
 const { name, id } = app.$slugData.huntSlug!;
 
@@ -18,13 +18,13 @@ const hideAnswers = ref(true);
 
 useHead({
   title: t('layouts.title', {
-    title: data.value?.name || name
+    title: hasKey(data.value, 'name') ? tKey(data.value!, 'name').value : name
   })
 });
 
 watch(loggedIn, () => refresh());
 
-titleStore.title = data.value?.name;
+titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;
 
 async function invite() {
   if (!data.value?.ownTeam) {
@@ -34,7 +34,7 @@ async function invite() {
   const clipboardItemData = {
     // TODO: add invite link
     // 'text/plain': `https://pichunt.syma.dev/hunt/${id}/join?id=${data.value.ownTeam.id}&pw=${data.value.ownTeam.password}`
-    'text/plain': `Join team ${data.value.ownTeam.name} with code "${data.value.ownTeam.password}" on hunt "${data.value.name || name}"!`
+    'text/plain': `Join team ${data.value.ownTeam.name} with code "${data.value.ownTeam.password}" on hunt "${data.value ? tKey(data.value, 'name').value : name}"!`
   };
   const clipboardItem = new ClipboardItem(clipboardItemData);
   await navigator.clipboard.write([clipboardItem]);
@@ -43,7 +43,7 @@ async function invite() {
 
 <template>
   <h1 class="text-2xl">
-    {{ data?.name || name }}
+    {{ data ? tKey(data, 'name') : name }}
 
     <VaChip v-if="data?.totalScore" class="float-right" color="success"
       >Total points: {{ data!!.totalScore }}</VaChip
@@ -58,40 +58,43 @@ async function invite() {
       v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
       color="success"
       icon="leaderboard"
-      :to="$localePath(`/hunt/${sluggy(data)}/showcase`)"
+      :to="$localePath(`/hunt/${tSluggy(data).value}/showcase`)"
       >Showcase</VaButton
     >
     <VaButton
       v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
       color="success"
       icon="collections"
-      :to="$localePath(`/hunt/${sluggy(data)}/diashow`)"
+      :to="$localePath(`/hunt/${tSluggy(data).value}/diashow`)"
       >Diashow</VaButton
     >
     <VaButton
       v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
       color="success"
       icon="auto_awesome_mosaic"
-      :to="$localePath(`/hunt/${sluggy(data)}/pictures`)"
+      :to="$localePath(`/hunt/${tSluggy(data).value}/pictures`)"
       >All pictures</VaButton
     >
     <VaButton
       v-if="data?.isMember"
       color="danger"
       icon="edit"
-      :to="$localePath(`/hunt/${sluggy(data)}/admin`)"
+      :to="$localePath(`/hunt/${tSluggy(data).value}/admin`)"
       >Admin</VaButton
     ><VaButton
       v-if="data?.isMember"
       color="danger"
       icon="groups"
-      :to="$localePath(`/hunt/${sluggy(data)}/teams`)"
+      :to="$localePath(`/hunt/${tSluggy(data).value}/teams`)"
       >Teams</VaButton
     >
   </div>
   <div v-if="data">
     <div class="flex flex-col gap-2">
-      <p v-for="(line, i) in data.description.split('\n')" :key="i">
+      <p
+        v-for="(line, i) in tKey(data, 'description').value.split('\n')"
+        :key="i"
+      >
         {{ line }}
       </p>
     </div>
@@ -99,7 +102,7 @@ async function invite() {
       v-if="data?.picture"
       :src="data?.picture?.url"
       class="h-48"
-      :title="data?.name || name"
+      :title="data ? tKey(data, 'name').value : name"
     />
     <p v-if="data.start">
       Start:
@@ -142,7 +145,7 @@ async function invite() {
         <VaButton
           color="info"
           icon="login"
-          :to="$localePath(`/login?to=/hunt/${sluggy(data)}`)"
+          :to="$localePath(`/login?to=/hunt/${tSluggy(data).value}`)"
           >Login first</VaButton
         >
       </VaCardActions>
@@ -180,7 +183,7 @@ async function invite() {
           <template #loader> <VaProgressCircle indeterminate /> </template
         ></VaImage>
         <VaCardContent>
-          <p class="line-clamp-2 h-12">{{ quest.description }}</p>
+          <p class="line-clamp-2 h-12">{{ tKey(quest, 'description') }}</p>
 
           <div v-if="!hideAnswers && quest.answer?.text">
             <VaDivider />
@@ -189,7 +192,11 @@ async function invite() {
         </VaCardContent>
         <VaCardActions>
           <VaButton
-            :to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}`)"
+            :to="
+              $localePath(
+                `/hunt/${tSluggy(data).value}/${tSluggy(quest).value}`
+              )
+            "
             color="primary"
             icon="rate_review"
             class="flex-grow"
@@ -199,7 +206,11 @@ async function invite() {
             v-if="data.isMember"
             color="danger"
             :icon="(quest.unreviewed || 0) > 0 ? 'priority_high' : undefined"
-            :to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}/admin`)"
+            :to="
+              $localePath(
+                `/hunt/${tSluggy(data).value}/${tSluggy(quest).value}/admin`
+              )
+            "
             >Admin ({{ quest.unreviewed || 0 }} unreviewed)</VaButton
           >
         </VaCardActions>