Add diashow and styling

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

@@ -44,38 +44,57 @@ async function invite() {
 <template>
   <h1 class="text-2xl">
     {{ data?.name || name }}
-    <VaButton
-      icon="replay"
-      @click="refresh"
-      :disabled="pending"
-      title="Refresh"
-    />
-    <VaButtonGroup v-if="data?.isMember">
-      <VaButton
-        color="danger"
-        icon="edit"
-        :to="$localePath(`/hunt/${sluggy(data)}/admin`)"
-        >Admin</VaButton
-      ><VaButton
-        color="danger"
-        icon="groups"
-        :to="$localePath(`/hunt/${sluggy(data)}/teams`)"
-        >Teams</VaButton
-      >
-      <VaButton
-        color="success"
-        icon="leaderboard"
-        :to="$localePath(`/hunt/${sluggy(data)}/showcase`)"
-        >Showcase</VaButton
-      >
-    </VaButtonGroup>
 
     <VaChip v-if="data?.totalScore" class="float-right" color="success"
       >Total points: {{ data!!.totalScore }}</VaChip
     >
   </h1>
+  <div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-6">
+    <VaButton icon="replay" @click="refresh" :disabled="pending" title="Refresh"
+      >Refresh</VaButton
+    >
+
+    <VaButton
+      v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
+      color="success"
+      icon="leaderboard"
+      :to="$localePath(`/hunt/${sluggy(data)}/showcase`)"
+      >Showcase</VaButton
+    >
+    <VaButton
+      v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
+      color="success"
+      icon="collections"
+      :to="$localePath(`/hunt/${sluggy(data)}/diashow`)"
+      >Diashow</VaButton
+    >
+    <VaButton
+      v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
+      color="success"
+      icon="auto_awesome_mosaic"
+      :to="$localePath(`/hunt/${sluggy(data)}/pictures`)"
+      >All pictures</VaButton
+    >
+    <VaButton
+      v-if="data?.isMember"
+      color="danger"
+      icon="edit"
+      :to="$localePath(`/hunt/${sluggy(data)}/admin`)"
+      >Admin</VaButton
+    ><VaButton
+      v-if="data?.isMember"
+      color="danger"
+      icon="groups"
+      :to="$localePath(`/hunt/${sluggy(data)}/teams`)"
+      >Teams</VaButton
+    >
+  </div>
   <div v-if="data">
-    <p>{{ data.description }}</p>
+    <div class="flex flex-col gap-2">
+      <p v-for="(line, i) in data.description.split('\n')" :key="i">
+        {{ line }}
+      </p>
+    </div>
     <ClickableImage
       v-if="data?.picture"
       :src="data?.picture?.url"
@@ -139,7 +158,6 @@ async function invite() {
       <VaCard
         v-for="quest in data.quests"
         :key="`q-${quest.id}`"
-        :to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}`)"
         stripe
         :stripe-color="
           (quest.answer?.review?.score && quest.answer?.review?.score > 0) ||
@@ -152,8 +170,9 @@ async function invite() {
       >
         <VaCardTitle><QuestTags :quest="quest" /></VaCardTitle>
         <VaImage
-          v-if="!hideAnswers && quest?.answer?.picture"
-          :src="quest?.answer?.picture?.url"
+          v-if="!hideAnswers"
+          :src="quest?.answer?.picture?.url ?? ''"
+          fallback-text="No picture uploaded"
           class="h-32"
           fit="cover"
           lazy
@@ -161,17 +180,23 @@ async function invite() {
           <template #loader> <VaProgressCircle indeterminate /> </template
         ></VaImage>
         <VaCardContent>
-          <p class="line-clamp-1">{{ quest.description }}</p>
+          <p class="line-clamp-2 h-12">{{ quest.description }}</p>
 
           <div v-if="!hideAnswers && quest.answer?.text">
             <VaDivider />
-            <p class="line-clamp-1">
-              {{ quest.answer?.text }}
-            </p>
+            <p class="line-clamp-1">{{ quest.answer?.text }}</p>
           </div>
         </VaCardContent>
-        <VaCardActions v-if="data.isMember">
+        <VaCardActions>
           <VaButton
+            :to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}`)"
+            color="primary"
+            icon="rate_review"
+            class="flex-grow"
+            >Open</VaButton
+          >
+          <VaButton
+            v-if="data.isMember"
             color="danger"
             :icon="(quest.unreviewed || 0) > 0 ? 'priority_high' : undefined"
             :to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}/admin`)"