Add line breaks to description

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

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import ClickableImage from '~/components/ClickableImage.vue';
+import MultilineString from '~/components/MultilineString.vue';
 import { useI18nKey } from '~/composables/useI18nKey';
 import { useTitleStore } from '~/stores/title';
 import { fullDate } from '~~/server/utils/date';
 
 definePageMeta({
-  middleware: ['auth']
+  middleware: ['auth'],
+  keepalive: false
 });
 
 const app = useNuxtApp();
@@ -155,7 +157,10 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
           />
           <VaCardContent>
             <div class="flex flex-col gap-4">
-              <p class="text-lg">{{ tKey(data, 'description') }}</p>
+              <MultilineString
+                :text="tKey(data, 'description').value"
+                css="text-lg"
+              />
               <p v-if="hasKey(data, 'question')" class="text-xl font-bold">
                 {{ data.textRequired ? '❓' : '❔' }}:
                 {{ tKey(data, 'question') }}
@@ -163,6 +168,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
               <p v-if="hasKey(data, 'question')">
                 🖋: {{ t(`enums.text_type.${data.textType}`) }}
               </p>
+              <VaDivider v-if="hasKey(data, 'extraText')" />
               <p v-if="hasKey(data, 'extraText')">
                 <span class="uppercase">{{
                   t('page.quest.extra_points')
@@ -191,13 +197,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
               v-if="data.answer.review.review"
               class="flex max-h-[60dvh] flex-col gap-2 overflow-y-auto pr-4"
             >
-              <p
-                v-for="(line, i) in data.answer.review.review.split('\n')"
-                :key="i"
-                class="italic"
-              >
-                {{ line }}
-              </p>
+              <MultilineString :text="data.answer.review.review" css="italic" />
             </div>
           </VaCardContent>
         </VaCard>

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

@@ -5,7 +5,8 @@ import { useTitleStore } from '~/stores/title';
 import { fullDate } from '~~/server/utils/date';
 
 definePageMeta({
-  middleware: ['admin']
+  middleware: ['admin'],
+  keepalive: false
 });
 
 const app = useNuxtApp();

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

@@ -120,12 +120,7 @@ ${document.location.href}`
         />
         <VaCardContent>
           <div class="mb-4 flex flex-col gap-2">
-            <p
-              v-for="(line, i) in tKey(data, 'description').value.split('\n')"
-              :key="i"
-            >
-              {{ line }}
-            </p>
+            <MultilineString :text="tKey(data, 'description').value" />
           </div>
           <p v-if="data.start" class="text-xl">
             {{
@@ -246,6 +241,10 @@ ${document.location.href}`
             <VaButton
               v-if="data.isMember"
               color="danger"
+              :preset="(quest.unreviewed || 0) <= 0 ? 'secondary' : undefined"
+              :border-color="
+                (quest.unreviewed || 0) <= 0 ? 'danger' : undefined
+              "
               :icon="(quest.unreviewed || 0) > 0 ? 'priority_high' : undefined"
               :to="
                 $localePath(

app/pages/index.vue

@@ -37,7 +37,7 @@ watch(loggedIn, () => refresh());
             />
             <VaCardContent>
               <h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
-              {{ tKey(hunt, 'description') }}
+              <p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
               <VaDivider />
               <div class="flex flex-col gap-2">
                 <p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
@@ -91,7 +91,7 @@ watch(loggedIn, () => refresh());
             />
             <VaCardContent>
               <h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
-              {{ tKey(hunt, 'description') }}
+              <p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
               <VaDivider />
               <div class="flex flex-col gap-2">
                 <p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>