refactor(hunt): Style hunt admin

app/components/HuntList.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { fullDate } from '~~/server/utils/date';
+
+const { loggedIn } = useUserSession();
+const { data, pending, refresh } = await useFetch('/api/home');
+const { t, d } = useI18n();
+const localePath = useLocalePath();
+const { tKey, tSluggy } = useI18nKey();
+watch(loggedIn, () => refresh());
+</script>
+
+<template>
+  <div class="mx-auto max-w-6xl">
+    <VaButton
+      icon="refresh"
+      :disabled="pending"
+      class="mb-6"
+      @click="refresh"
+      >{{ t('layouts.refresh') }}</VaButton
+    >
+
+    <div v-if="data">
+      <div v-if="data.own !== null">
+        <h2 class="mb-6 text-2xl font-bold">
+          {{ t('page.home.joined_hunts') }}
+        </h2>
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <VaCard
+            v-for="hunt in data.own"
+            :key="hunt.id"
+            stripe
+            :to="localePath(`/hunt/${tSluggy(hunt).value}`)"
+          >
+            <VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
+
+            <ClickableImage
+              v-if="hunt.picture"
+              :src="hunt.picture?.url"
+              :title="tKey(hunt, 'name').value"
+            />
+            <VaCardContent>
+              <h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
+              <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>
+                <p v-if="hunt.start">
+                  {{
+                    t('page.home.start', {
+                      start: d(hunt.start, fullDate)
+                    })
+                  }}
+                </p>
+                <p v-if="hunt.end">
+                  {{
+                    t('page.home.end', {
+                      start: d(hunt.end, fullDate)
+                    })
+                  }}
+                </p>
+                <p>
+                  {{ t('page.home.n_teams_joined', hunt._count.teams) }}
+                </p>
+              </div>
+            </VaCardContent>
+          </VaCard>
+          <VaCard v-if="data.own.length <= 0">
+            <VaCardTitle>{{ t('page.home.no_hunt_joined') }}</VaCardTitle>
+            <VaCardContent>{{
+              t('page.home.click_hunt_below_to_join')
+            }}</VaCardContent>
+          </VaCard>
+        </div>
+      </div>
+      <div v-else class="text-center">
+        <p class="text-secondary mb-4">
+          {{ t('page.landing.login_to_see_hunts') }}
+        </p>
+        <VaButton color="info" icon="login" :to="localePath(`/login`)">{{
+          t('page.home.login_first')
+        }}</VaButton>
+      </div>
+      <div class="mt-12">
+        <VaDivider />
+        <h2 class="mb-6 mt-8 text-2xl font-bold">
+          {{ t('page.home.open_to_join') }}
+        </h2>
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <VaCard
+            v-for="hunt in data.others"
+            :key="hunt.id"
+            :to="localePath(`/hunt/${tSluggy(hunt).value}`)"
+          >
+            <VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
+            <ClickableImage
+              v-if="hunt.picture"
+              :src="hunt.picture?.url"
+              :title="tKey(hunt, 'name').value"
+            />
+            <VaCardContent>
+              <h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
+              <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>
+                <p v-if="hunt.start">
+                  {{
+                    t('page.home.start', {
+                      start: d(hunt.start, fullDate)
+                    })
+                  }}
+                </p>
+                <p v-if="hunt.end">
+                  {{
+                    t('page.home.end', {
+                      start: d(hunt.end, fullDate)
+                    })
+                  }}
+                </p>
+                <p>
+                  {{ t('page.home.n_teams_joined', hunt._count.teams) }}
+                </p>
+              </div>
+            </VaCardContent>
+          </VaCard>
+          <VaCard v-if="data.others.length <= 0">
+            <VaCardTitle>{{ t('page.home.no_hunt_created') }}</VaCardTitle>
+            <VaCardContent>{{ t('page.home.new_hunts_soon') }}</VaCardContent>
+          </VaCard>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/components/admin/QuestList.vue

@@ -96,6 +96,8 @@ async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
 </script>
 
 <template>
+  <VaCard stripe stripe-color="info" class="">
+    <VaCardContent>
       <div class="flex items-center justify-between">
         <h2 class="text-2xl">{{ t('page.quest_admin.quests_title') }}</h2>
         <VaButton
@@ -119,8 +121,10 @@ async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
             :key="quest.id"
             class="flex items-center"
           >
-        <VaCardContent class="flex w-full items-center gap-2">
-          <div class="flex flex-col gap-1">
+            <VaCardContent
+              class="flex w-full flex-col items-center gap-2 sm:flex-row"
+            >
+              <div class="flex flex-row gap-1 sm:flex-col">
                 <VaButton
                   icon="arrow_upward"
                   size="small"
@@ -174,6 +178,7 @@ async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
                   >Txt!</VaChip
                 >
               </div>
+              <div class="flex flex-row gap-1 sm:flex-col">
                 <VaButton
                   icon="edit"
                   size="small"
@@ -189,6 +194,7 @@ async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
                   :disabled="questLoading"
                   @click="deleteQuest(quest)"
                 />
+              </div>
             </VaCardContent>
           </VaCard>
         </div>
@@ -203,6 +209,8 @@ async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
         :quest-id="editingQuestId"
         @saved="refreshQuests"
       />
+    </VaCardContent>
+  </VaCard>
 </template>
 
 <style scoped></style>

app/components/admin/Team.vue

@@ -150,6 +150,7 @@ async function deleteTeam() {
 <template>
   <VaCollapse
     :key="team.id"
+    color="info"
     :header="`${team.name} — ${team.members.length} members — ${team._count.answers} answers — ${team.score} points`"
   >
     <div class="flex flex-col gap-2">

app/lang/de.json

@@ -139,7 +139,8 @@
       "no_hunt_created": "Bisher wurde kein Hunt erstellt",
       "no_hunt_joined": "Noch keinem Hunt beigetreten!",
       "open_to_join": "Bereit zum Beitreten:",
-      "start": "Start: {start}"
+      "start": "Start: {start}",
+      "title": "Startseite"
     },
     "hunt": {
       "admin_unreviewed": "Admin ({count} unbewertet)",
@@ -162,6 +163,7 @@
       "team_count_joined": "Keine Teams beigetreten, so wie du! | Ein Team ist beigetreten, du auch! | {count} Teams sind beigetreten, du auch!",
       "team_settings": "Team-Einstellungen",
       "teams": "Teams",
+      "title": "Hunts",
       "total_points": "Punktestand: {score}",
       "your_team": "Dein Team:"
     },

app/lang/en.json

@@ -139,7 +139,8 @@
       "no_hunt_created": "No hunt created yet",
       "no_hunt_joined": "No hunt joined yet!",
       "open_to_join": "Open to join hunts:",
-      "start": "Start: {start}"
+      "start": "Start: {start}",
+      "title": "Home"
     },
     "hunt": {
       "admin_unreviewed": "Admin ({count} unreviewed)",
@@ -162,6 +163,7 @@
       "team_count_joined": "No teams joined, just like you! | One team joined, just like you! | {count} teams joined, just like you!",
       "team_settings": "Team settings",
       "teams": "Teams",
+      "title": "Hunts",
       "total_points": "Total points: {score}",
       "your_team": "Your team:"
     },

app/layouts/default.vue

@@ -58,11 +58,23 @@ const isHuntAdmin = computed(
         >
           <VaSidebarItemContent>
             <VaIcon name="home" />
-            <VaSidebarItemTitle>Home</VaSidebarItemTitle>
+            <VaSidebarItemTitle>{{ t('page.home.title') }}</VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem
+          :to="localePath('/hunt')"
+          :active="localePath('/hunt') === route.path"
+        >
+          <VaSidebarItemContent>
+            <VaIcon name="cases" />
+            <VaSidebarItemTitle>{{ t('page.hunt.title') }}</VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
         <VaSidebarItem
           v-if="user?.role === 'CREATOR' || user?.role === 'ADMIN'"
+          text-color="success"
+          hover-color="success"
+          active-color="onSuccess"
           :to="localePath('/admin/hunt/create')"
           :active="localePath('/admin/hunt/create') === route.path"
         >
@@ -73,24 +85,13 @@ const isHuntAdmin = computed(
             }}</VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
-        <VaSidebarItem
-          :to="localePath('/impressum')"
-          :active="localePath('/impressum') === route.path"
-        >
-          <VaSidebarItemContent>
-            <VaIcon name="balance" />
-            <VaSidebarItemTitle>{{
-              t('page.imprint.title')
-            }}</VaSidebarItemTitle>
-          </VaSidebarItemContent>
-        </VaSidebarItem>
         <VaSidebarItem
           v-if="slugs?.huntSlug"
           :to="localePath(`/hunt/${sluggy(slugs.huntSlug)}`)"
           :active="localePath(`/hunt/${sluggy(slugs.huntSlug)}`) === route.path"
         >
           <VaSidebarItemContent>
-            <VaIcon name="camera_indoor" />
+            <VaIcon name="camera" />
             <VaSidebarItemTitle>{{
               slugs.huntSlug.name || 'Hunt'
             }}</VaSidebarItemTitle>
@@ -168,6 +169,17 @@ const isHuntAdmin = computed(
           </VaSidebarItemContent>
         </VaSidebarItem>
         <VaSpacer />
+        <VaSidebarItem
+          :to="localePath('/impressum')"
+          :active="localePath('/impressum') === route.path"
+        >
+          <VaSidebarItemContent>
+            <VaIcon name="balance" />
+            <VaSidebarItemTitle>{{
+              t('page.imprint.title')
+            }}</VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
         <VaSidebarItem
           v-if="user"
           :to="localePath('/profile')"

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

@@ -13,6 +13,7 @@ definePageMeta({
 
 const app = useNuxtApp();
 const { loggedIn } = useUserSession();
+const validation = useValidation();
 const localePath = useLocalePath();
 const { t, d } = useI18n();
 const { tKey, hasKey } = useI18nKey();
@@ -221,53 +222,89 @@ async function deleteImage() {
         >{{ t('page.common.back_to_hunt') }}</VaButton
       >
     </div>
-    <template v-else>
-      <VaForm v-if="formData.cloned.value && data" class="flex flex-col gap-4">
+    <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <VaCard stripe stripe-color="success">
+        <VaCardTitle>Edit this Hunt</VaCardTitle>
+        <VaCardContent>
+          <VaForm
+            v-if="formData.cloned.value && data"
+            class="flex flex-col gap-4"
+          >
+            <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
+              <h3 class="hidden text-center md:block">
+                {{ t('page.create_hunt.de') }}
+              </h3>
+              <h3 class="hidden text-center md:block">
+                {{ t('page.create_hunt.en') }}
+              </h3>
               <VaInput
                 v-model="formData.cloned.value.name_de"
-          label="Name DE"
+                :label="t('page.create_hunt.name_de')"
+                :rules="[
+                  validation.required(t('page.create_hunt.name_de')),
+                  validation.max(t('page.create_hunt.name_de'), 256)
+                ]"
+                counter
+                max-length="256"
                 clearable
                 :clear-value="data.name_de"
                 clearable-icon="replay"
               />
               <VaInput
                 v-model="formData.cloned.value.name_en"
-          label="Name EN"
+                :label="t('page.create_hunt.name_en')"
+                :rules="[
+                  validation.required(t('page.create_hunt.name_en')),
+                  validation.max(t('page.create_hunt.name_en'), 256)
+                ]"
+                counter
+                max-length="256"
                 clearable
                 :clear-value="data.name_en"
                 clearable-icon="replay"
               />
               <VaTextarea
                 v-model="formData.cloned.value.description_de"
-          label="Description DE"
+                :label="t('page.create_hunt.description_de')"
+                max-length="1000"
+                counter
                 clearable
                 :clear-value="data.description_de"
                 clearable-icon="replay"
               />
               <VaTextarea
                 v-model="formData.cloned.value.description_en"
-          label="Description EN"
+                :label="t('page.create_hunt.description_en')"
+                max-length="1000"
+                counter
                 clearable
                 :clear-value="data.description_en"
                 clearable-icon="replay"
               />
-        <VaCheckbox v-model="formData.cloned.value.virtual" label="Virtual" />
-        <VaCheckbox v-model="formData.cloned.value.public" label="Public" />
+            </div>
+            <VaCheckbox
+              v-model="formData.cloned.value.virtual"
+              :label="t('page.create_hunt.virtual')"
+            />
+            <VaCheckbox
+              v-model="formData.cloned.value.public"
+              :label="t('page.create_hunt.public')"
+            />
             <VaCheckbox
               v-model="formData.cloned.value.allowJoin"
-          label="Allow Join"
+              :label="t('page.create_hunt.allow_join')"
             />
             <VaCheckbox
               v-model="formData.cloned.value.revealQuests"
-          label="Reveal Quests"
+              :label="t('page.create_hunt.reveal_quests')"
             />
             <VaCheckbox
               v-model="formData.cloned.value.revealAnswers"
-          label="Reveal Answers"
+              :label="t('page.create_hunt.reveal_answers')"
             />
-        <div class="flex flex-row gap-2">
+            <div class="date-holder">
               <VaCheckbox
-            label="Start?"
+                :label="t('page.create_hunt.has_start')"
                 :model-value="!!formData.cloned.value.start"
                 @update:model-value="
                   (newVal: boolean) =>
@@ -277,20 +314,20 @@ async function deleteImage() {
               <VaDateInput
                 v-if="formData.cloned.value.start"
                 v-model="formData.cloned.value.start"
-            label="Start"
+                :label="t('page.create_hunt.start')"
                 manual-input
               />
               <VaTimeInput
                 v-if="formData.cloned.value.start"
                 v-model="formData.cloned.value.start"
-            label="Start"
+                :label="t('page.create_hunt.start')"
                 view="seconds"
                 manual-input
               />
             </div>
-        <div class="flex flex-row gap-2">
+            <div class="date-holder">
               <VaCheckbox
-            label="End?"
+                :label="t('page.create_hunt.has_end')"
                 :model-value="!!formData.cloned.value.end"
                 @update:model-value="
                   (newVal: boolean) =>
@@ -300,17 +337,18 @@ async function deleteImage() {
               <VaDateInput
                 v-if="formData.cloned.value.end"
                 v-model="formData.cloned.value.end"
-            label="End"
+                :label="t('page.create_hunt.end')"
                 manual-input
               />
               <VaTimeInput
                 v-if="formData.cloned.value.end"
                 v-model="formData.cloned.value.end"
-            label="End"
+                :label="t('page.create_hunt.end')"
                 view="seconds"
                 manual-input
               />
             </div>
+            <VaDivider />
             <p>
               Last update:
               {{ d(data.updatedAt, fullDate) }}
@@ -334,7 +372,10 @@ async function deleteImage() {
               >
             </VaButtonGroup>
           </VaForm>
-      <VaDivider />
+        </VaCardContent>
+      </VaCard>
+      <VaCard stripe stripe-color="success">
+        <VaCardContent>
           <h2 class="text-2xl">Image</h2>
           <div>
             <VaImage
@@ -366,7 +407,11 @@ async function deleteImage() {
               >{{ t(imageError) }}</VaAlert
             >
             <VaButtonGroup :disabled="uploading || pending">
-          <VaButton color="success" :disabled="!newImage" @click="updateImage">
+              <VaButton
+                color="success"
+                :disabled="!newImage"
+                @click="updateImage"
+              >
                 Upload new image
               </VaButton>
               <VaButton
@@ -378,15 +423,11 @@ async function deleteImage() {
               >
             </VaButtonGroup>
           </div>
-
-      <VaDivider />
-      <AdminQuestList :hunt-id="id" />
-
           <VaDivider />
           <h2 class="text-2xl">Hunt admin members:</h2>
           <div
             v-if="data"
-        class="mt-8 grid grid-cols-1 gap-2 md:grid-cols-3 lg:grid-cols-5"
+            class="mt-8 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3"
           >
             <VaButton
               v-for="member in data.members"
@@ -395,7 +436,9 @@ async function deleteImage() {
               :disabled="loading"
               :loading="loading"
               @click="kick(member)"
-          >Kick {{ member.member.name }} ({{ member.member.email }})</VaButton
+              >Kick {{ member.member.name }} ({{
+                member.member.email
+              }})</VaButton
             >
             <VaChip v-if="data.members.length <= 0">No members yet</VaChip>
           </div>
@@ -420,8 +463,16 @@ async function deleteImage() {
               >Add admin</VaButton
             >
           </div>
-    </template>
+        </VaCardContent>
+      </VaCard>
+
+      <AdminQuestList :hunt-id="id" />
+    </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.date-holder {
+  @apply flex flex-col gap-2 sm:flex-row sm:items-center md:flex-col md:items-start lg:flex-row lg:items-center;
+}
+</style>

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

@@ -54,11 +54,14 @@ export type Team = Data['teams'][number];
       >
     </div>
     <template v-else>
-      <h1>teams</h1>
+      <h1 class="mb-4 text-3xl">
+        Teams
         <VaButton color="success" icon="replay" @click="refresh"
           >Refresh</VaButton
         >
-      <VaAccordion v-if="data" stateful>
+      </h1>
+
+      <VaAccordion v-if="data" stateful inset>
         <Team
           v-for="team in data.teams"
           :key="team.id"
@@ -70,5 +73,3 @@ export type Team = Data['teams'][number];
     </template>
   </div>
 </template>
-
-<style scoped></style>

app/pages/hunt/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <HuntList />
+</template>

app/pages/index.vue

@@ -1,18 +1,10 @@
 <script setup lang="ts">
-import { useI18nKey } from '~/composables/useI18nKey';
-import { fullDate } from '~~/server/utils/date';
-
 definePageMeta({
   layout: 'landing'
 });
 
-const { loggedIn } = useUserSession();
-const { data, pending, refresh } = await useFetch('/api/home');
-const { t, d } = useI18n();
+const { t } = useI18n();
 const localePath = useLocalePath();
-const { tKey, tSluggy } = useI18nKey();
-watch(loggedIn, () => refresh());
-
 const steps = [
   { icon: 'login', key: 'step_register' },
   { icon: 'groups', key: 'step_team' },
@@ -48,6 +40,8 @@ useHead({
         {{ t('page.landing.hero_subtitle') }}
       </p>
       <div class="flex flex-wrap justify-center gap-4">
+        <AuthState>
+          <template #default="{ loggedIn }">
             <VaButton
               v-if="!loggedIn"
               size="large"
@@ -56,6 +50,8 @@ useHead({
             >
               {{ t('page.landing.get_started') }}
             </VaButton>
+          </template>
+        </AuthState>
         <VaButton
           size="large"
           preset="secondary"
@@ -99,129 +95,7 @@ useHead({
     </section>
 
     <section class="bg-background-element px-4 py-16">
-      <div class="mx-auto max-w-6xl">
-        <VaButton
-          icon="refresh"
-          :disabled="pending"
-          class="mb-6"
-          @click="refresh"
-          >{{ t('layouts.refresh') }}</VaButton
-        >
-
-        <div v-if="data">
-          <div v-if="data.own !== null">
-            <h2 class="mb-6 text-2xl font-bold">
-              {{ t('page.home.joined_hunts') }}
-            </h2>
-            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-              <VaCard
-                v-for="hunt in data.own"
-                :key="hunt.id"
-                stripe
-                :to="localePath(`/hunt/${tSluggy(hunt).value}`)"
-              >
-                <VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
-
-                <ClickableImage
-                  v-if="hunt.picture"
-                  :src="hunt.picture?.url"
-                  :title="tKey(hunt, 'name').value"
-                />
-                <VaCardContent>
-                  <h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
-                  <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>
-                    <p v-if="hunt.start">
-                      {{
-                        t('page.home.start', {
-                          start: d(hunt.start, fullDate)
-                        })
-                      }}
-                    </p>
-                    <p v-if="hunt.end">
-                      {{
-                        t('page.home.end', {
-                          start: d(hunt.end, fullDate)
-                        })
-                      }}
-                    </p>
-                    <p>
-                      {{ t('page.home.n_teams_joined', hunt._count.teams) }}
-                    </p>
-                  </div>
-                </VaCardContent>
-              </VaCard>
-              <VaCard v-if="data.own.length <= 0">
-                <VaCardTitle>{{ t('page.home.no_hunt_joined') }}</VaCardTitle>
-                <VaCardContent>{{
-                  t('page.home.click_hunt_below_to_join')
-                }}</VaCardContent>
-              </VaCard>
-            </div>
-          </div>
-          <div v-else class="text-center">
-            <p class="text-secondary mb-4">
-              {{ t('page.landing.login_to_see_hunts') }}
-            </p>
-            <VaButton color="info" icon="login" :to="localePath(`/login`)">{{
-              t('page.home.login_first')
-            }}</VaButton>
-          </div>
-          <div class="mt-12">
-            <VaDivider />
-            <h2 class="mb-6 mt-8 text-2xl font-bold">
-              {{ t('page.home.open_to_join') }}
-            </h2>
-            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-              <VaCard
-                v-for="hunt in data.others"
-                :key="hunt.id"
-                :to="localePath(`/hunt/${tSluggy(hunt).value}`)"
-              >
-                <VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
-                <ClickableImage
-                  v-if="hunt.picture"
-                  :src="hunt.picture?.url"
-                  :title="tKey(hunt, 'name').value"
-                />
-                <VaCardContent>
-                  <h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
-                  <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>
-                    <p v-if="hunt.start">
-                      {{
-                        t('page.home.start', {
-                          start: d(hunt.start, fullDate)
-                        })
-                      }}
-                    </p>
-                    <p v-if="hunt.end">
-                      {{
-                        t('page.home.end', {
-                          start: d(hunt.end, fullDate)
-                        })
-                      }}
-                    </p>
-                    <p>
-                      {{ t('page.home.n_teams_joined', hunt._count.teams) }}
-                    </p>
-                  </div>
-                </VaCardContent>
-              </VaCard>
-              <VaCard v-if="data.others.length <= 0">
-                <VaCardTitle>{{ t('page.home.no_hunt_created') }}</VaCardTitle>
-                <VaCardContent>{{
-                  t('page.home.new_hunts_soon')
-                }}</VaCardContent>
-              </VaCard>
-            </div>
-          </div>
-        </div>
-      </div>
+      <HuntList />
     </section>
 
     <footer class="px-4 py-8 text-center">

nuxt.config.ts

@@ -6,6 +6,11 @@ export default defineNuxtConfig({
   app: {
     keepalive: true
   },
+  vite: {
+    optimizeDeps: {
+      holdUntilCrawlEnd: true
+    }
+  },
   modules: [
     '@nuxt/devtools',
     'nuxt-auth-utils',