Add line breaks to description

app/components/MultilineString.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    tag?: string;
+    text: string;
+    css?: string;
+  }>(),
+  {
+    tag: 'p',
+    css: ''
+  }
+);
+</script>
+
+<template>
+  <component
+    :is="tag"
+    v-for="(line, i) in text.split('\n')"
+    :key="i"
+    :class="css"
+  >
+    {{ line }}
+  </component>
+</template>
+
+<style scoped></style>

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
+              <MultilineString :text="data.answer.review.review" css="italic" />
-                v-for="(line, i) in data.answer.review.review.split('\n')"
-                :key="i"
-                class="italic"
-              >
-                {{ line }}
-              </p>
             </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
+            <MultilineString :text="tKey(data, 'description').value" />
-              v-for="(line, i) in tKey(data, 'description').value.split('\n')"
-              :key="i"
-            >
-              {{ line }}
-            </p>
           </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>

nuxt.config.ts

@@ -3,6 +3,9 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
   devServer: { port: 3080 },
+  app: {
+    keepalive: true
+  },
   modules: [
     '@nuxt/devtools',
     'nuxt-auth-utils',

shared/utils/sluggy.ts

@@ -26,7 +26,12 @@ export function sluggy(object: {
       }) + '-';
   }
 
-  string += `${id}`;
+  const stringId = `${id}`;
+  // prevent '-' strings on weird Unicode names
+  if (string.length === 1) {
+    return stringId;
+  }
+  string += stringId;
 
   return string;
 }