Switch to translatable data

app/pages/index.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { useI18nKey } from '~/composables/useI18nKey';
 import { fullDate } from '~~/server/utils/date';
 
 const { loggedIn } = useUserSession();
 const { data, pending, refresh } = await useFetch('/api/home');
 const { t, d } = useI18n();
+const { tKey, tSluggy } = useI18nKey();
 watch(loggedIn, () => refresh());
 </script>
 
@@ -23,18 +25,18 @@ watch(loggedIn, () => refresh());
           v-for="hunt in data.own"
           :key="hunt.id"
           stripe
-          :to="$localePath(`/hunt/${sluggy(hunt)}`)"
+          :to="$localePath(`/hunt/${tSluggy(hunt).value}`)"
         >
-          <VaCardTitle>{{ hunt.name }}</VaCardTitle>
+          <VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
 
           <ClickableImage
             v-if="hunt.picture"
             :src="hunt.picture?.url"
-            :title="hunt.name"
+            :title="tKey(hunt, 'name').value"
           />
           <VaCardContent>
-            <h3 class="text-xl">{{ hunt.name }}</h3>
-            {{ hunt.description }}
+            <h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
+            {{ tKey(hunt, 'description') }}
             <VaDivider />
             <div class="flex flex-col gap-2">
               <p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
@@ -78,17 +80,17 @@ watch(loggedIn, () => refresh());
         <VaCard
           v-for="hunt in data.others"
           :key="hunt.id"
-          :to="$localePath(`/hunt/${sluggy(hunt)}`)"
+          :to="$localePath(`/hunt/${tSluggy(hunt).value}`)"
         >
-          <VaCardTitle>{{ hunt.name }}</VaCardTitle>
+          <VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
           <ClickableImage
             v-if="hunt.picture"
             :src="hunt.picture?.url"
-            :title="hunt.name"
+            :title="tKey(hunt, 'name').value"
           />
           <VaCardContent>
-            <h3 class="text-xl">{{ hunt.name }}</h3>
-            {{ hunt.description }}
+            <h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
+            {{ tKey(hunt, 'description') }}
             <VaDivider />
             <div class="flex flex-col gap-2">
               <p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>