Switch to translatable data

app/pages/profile.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useI18nKey } from '~/composables/useI18nKey';
+
 definePageMeta({
   middleware: ['auth']
 });
@@ -8,6 +10,7 @@ const { t } = useI18n();
 const { loggedIn, fetch } = useUserSession();
 const localePath = useLocalePath();
 const validation = useValidation();
+const { tKey, tSluggy } = useI18nKey();
 watch(loggedIn, (isLoggedIn) => {
   if (!isLoggedIn) {
     router.push(localePath('/login'));
@@ -234,9 +237,8 @@ async function submitPassword() {
     </VaCard>
     <VaCard stripe stripe-color="primary">
       <VaCardTitle>Uploaded pictures</VaCardTitle>
-      <VaCardContent>
+      <VaCardContent v-if="data && data.uploadedFiles.length > 0">
         <VaCarousel
-          v-if="data"
           stateful
           :items="data.uploadedFiles"
           arrows
@@ -248,22 +250,23 @@ async function submitPassword() {
           <template #default="{ item }"
             ><ClickableImage
               :src="item.url"
-              :title="`${item.answer.quest.title} — ${item.answer.quest.hunt.name}`"
+              :title="`${tKey(item.answer.quest, 'title').value} — ${tKey(item.answer.quest.hunt, 'name').value}`"
             />
             <NuxtLink
               :to="
                 $localePath(
-                  `/hunt/${sluggy(item.answer.quest.hunt)}/${sluggy(item.answer.quest)}`
+                  `/hunt/${tSluggy(item.answer.quest.hunt).value}/${tSluggy(item.answer.quest).value}`
                 )
               "
               class="absolute top-2 mx-auto rounded bg-gray-200/75 px-2 py-1 text-center text-xl hover:underline"
             >
-              {{ item.answer.quest.title }} —
-              {{ item.answer.quest.hunt.name }}
+              {{ tKey(item.answer.quest, 'title') }} —
+              {{ tKey(item.answer.quest.hunt, 'name') }}
             </NuxtLink></template
           >
         </VaCarousel>
       </VaCardContent>
+      <VaCardContent v-else> No pictures uploaded yet. </VaCardContent>
     </VaCard>
   </div>
 </template>