Switch to translatable data

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

@@ -7,13 +7,14 @@ definePageMeta({
 const app = useNuxtApp();
 const { loggedIn } = useUserSession();
 const { t } = useI18n();
+const { tKey, hasKey } = useI18nKey();
 
 const { name, id } = app.$slugData.huntSlug!;
 
 const titleStore = useTitleStore();
 
 type Picture = {
-  quest: { id: number; title: string };
+  quest: { id: number; title_de: string; title_en: string };
   team: {
     name: string;
     id: number;
@@ -47,7 +48,7 @@ const { data, refresh, error } = await useFetch(`/api/hunt/${id}/diashow`, {
 
     const cols = pictures.reduce(
       (c, p, i) => {
-        c[i % 4].push(p);
+        c[i % 4]!.push(p);
         return c;
       },
       new Array(4).fill(0).map(() => [] as Picture[])
@@ -59,14 +60,14 @@ const { data, refresh, error } = await useFetch(`/api/hunt/${id}/diashow`, {
 
 useHead({
   title: t('layouts.two_title', {
-    title: data.value?.name || name,
+    title: hasKey(data.value, 'name') ? tKey(data.value!, 'name').value : name,
     subtitle: 'Diashow'
   })
 });
 
 watch(loggedIn, () => refresh());
 
-titleStore.title = data.value?.name;
+titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;
 </script>
 
 <template>
@@ -81,7 +82,7 @@ titleStore.title = data.value?.name;
           :key="pic.picture.url"
           :src="pic.picture.url"
           class="h-auto max-w-full rounded-lg"
-          :title="`${pic.quest.title} — ${pic.team.name} — ${pic.picture.creator.name}`"
+          :title="`${tKey(pic.quest, 'title')} — ${pic.team.name} — ${pic.picture.creator.name}`"
         />
       </div>
       <VaAlert