Remember uploaded images

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

@@ -1,6 +1,11 @@
 <script setup lang="ts">
+import ClickableImage from '~/components/ClickableImage.vue';
 import { useTitleStore } from '~/stores/title';
 
+definePageMeta({
+  middleware: ['auth']
+});
+
 const app = useNuxtApp();
 const { huntSlug, questSlug } = app.$slugData;
 
@@ -8,7 +13,7 @@ const { t, locale } = useI18n();
 
 const titleStore = useTitleStore();
 
-const { data, pending, refresh } = await useFetch(
+const { data, pending, refresh, error } = await useFetch(
   `/api/quest/${questSlug?.id}`
 );
 
@@ -69,14 +74,10 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
 </script>
 
 <template>
-  <div v-if="data">
-    <h1>
-      {{ data.hunt.name || huntSlug!.name }} -
-      {{ data.title || questSlug!.name }}
-    </h1>
+  <VaButtonGroup>
     <VaButton
       icon="arrow_back"
-      :to="$localePath(`/hunt/${sluggy(data.hunt || huntSlug!)}`)"
+      :to="$localePath(`/hunt/${sluggy(data?.hunt || huntSlug!)}`)"
       >Back to Hunt</VaButton
     >
     <VaButton
@@ -85,8 +86,10 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
       :loading="pending"
       color="success"
       >{{ $t('layouts.refresh') }}</VaButton
-    >
-    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+    ></VaButtonGroup
+  >
+  <div v-if="data">
+    <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
       <VaCard
         :stripe="data.answer !== null"
         :stripe-color="
@@ -94,6 +97,11 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
         "
       >
         <VaCardTitle><QuestTags :quest="data" /></VaCardTitle>
+        <ClickableImage
+          v-if="data?.picture"
+          :src="data?.picture?.url"
+          :title="data?.title || questSlug?.name || ''"
+        />
         <VaCardContent>
           <div class="flex flex-col gap-4">
             <p class="text-lg">{{ data.description }}</p>
@@ -158,7 +166,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
             />
             <VaImage
               v-else-if="data.answer?.picture"
-              :src="data.answer?.picture"
+              :src="data.answer?.picture?.url"
               class="max-h-60 w-full"
               fit="contain"
               lazy
@@ -198,6 +206,9 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
       </VaCard>
     </div>
   </div>
+  <div v-if="error" class="mt-8 text-3xl">
+    {{ $t(parseError(error)) }}
+  </div>
 </template>
 
 <style scoped></style>