Remember uploaded images

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

@@ -11,7 +11,7 @@ const { name, id } = app.$slugData.huntSlug!;
 
 const titleStore = useTitleStore();
 
-const { data, pending, refresh } = await useFetch(`/api/hunt/${id}`);
+const { data, pending, refresh, error } = await useFetch(`/api/hunt/${id}`);
 
 const hideAnswers = ref(true);
 
@@ -50,6 +50,12 @@ async function invite() {
   </h1>
   <div v-if="data">
     <p>{{ data.description }}</p>
+    <ClickableImage
+      v-if="data?.picture"
+      :src="data?.picture?.url"
+      class="h-48"
+      :title="data?.name || name"
+    />
     <p v-if="data.start">
       Start:
       {{
@@ -110,7 +116,10 @@ async function invite() {
       <VaSwitch v-model="hideAnswers" icon="image">Hide answers</VaSwitch>
     </div>
     <VaDivider />
-    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+    <div
+      v-if="data.revealQuests"
+      class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4"
+    >
       <VaCard
         v-for="quest in data.quests"
         :key="`q-${quest.id}`"
@@ -123,7 +132,7 @@ async function invite() {
         <VaCardTitle><QuestTags :quest="quest" /></VaCardTitle>
         <VaImage
           v-if="!hideAnswers && quest?.answer?.picture"
-          :src="quest?.answer?.picture"
+          :src="quest?.answer?.picture?.url"
           class="h-32"
           fit="cover"
           lazy
@@ -141,6 +150,18 @@ async function invite() {
         </VaCardContent>
       </VaCard>
     </div>
+    <VaCard v-else color="warning" class="mt-4"
+      ><VaCardTitle>Quests not revealed yet!</VaCardTitle>
+      <VaCardContent
+        >Soon all {{ data._count.quests }} quests will be
+        revealed!</VaCardContent
+      >
+    </VaCard>
+  </div>
+
+  <div v-if="error">
+    <h1 class="mt-8 text-3xl">{{ $t(parseError(error)) }}</h1>
+    <VaButton icon="arrow_back" :to="$localePath(`/`)">Back home</VaButton>
   </div>
 </template>