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,113 +96,121 @@ async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
 </script>
 
 <template>
-  <div class="flex items-center justify-between">
-    <h2 class="text-2xl">{{ t('page.quest_admin.quests_title') }}</h2>
-    <VaButton
-      icon="add"
-      color="success"
-      :disabled="questLoading"
-      @click="openCreateQuest"
-      >{{ t('page.quest_admin.add_quest') }}</VaButton
-    >
-  </div>
-  <VaCollapse
-    class="mt-2"
-    color="primary"
-    header="Quest list"
-    @update:model-value="(isOpen: boolean) => isOpen && execute()"
-  >
-    <p v-if="pending">pending...</p>
-    <div v-if="quests.length > 0" class="mt-4 flex flex-col gap-2">
-      <VaCard
-        v-for="(quest, index) in quests"
-        :key="quest.id"
-        class="flex items-center"
+  <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
+          icon="add"
+          color="success"
+          :disabled="questLoading"
+          @click="openCreateQuest"
+          >{{ t('page.quest_admin.add_quest') }}</VaButton
+        >
+      </div>
+      <VaCollapse
+        class="mt-2"
+        color="primary"
+        header="Quest list"
+        @update:model-value="(isOpen: boolean) => isOpen && execute()"
       >
-        <VaCardContent class="flex w-full items-center gap-2">
-          <div class="flex flex-col gap-1">
-            <VaButton
-              icon="arrow_upward"
-              size="small"
-              preset="plain"
-              :disabled="index === 0 || questLoading"
-              :title="t('page.quest_admin.move_up')"
-              @click="reorderQuest(quest, 'up')"
-            />
-            <VaButton
-              icon="arrow_downward"
-              size="small"
-              preset="plain"
-              :disabled="index === quests.length - 1 || questLoading"
-              :title="t('page.quest_admin.move_down')"
-              @click="reorderQuest(quest, 'down')"
-            />
-          </div>
-          <VaButton
-            icon="edit"
-            preset="plain"
-            :disabled="questLoading"
-            @click="openEditQuest(quest.id)"
-          />
-          <VaImage
-            v-if="quest.picture"
-            :src="quest.picture.url"
-            lazy
-            alt="Quest picture"
-            class="h-16 w-24 rounded object-cover"
-            ><template #loader><VaProgressCircle indeterminate /></template
-          ></VaImage>
-          <div class="flex-1">
-            <p>
-              <span class="font-bold">{{ quest.title_de }}</span
-              ><span class="text-secondary font-light"> | </span
-              ><span class="font-bold">{{ quest.title_en }}</span>
-            </p>
-            <p class="text-sm text-gray-500">
-              {{ quest.points }} {{ t('page.quest_admin.points') }} ·
-              {{ t('page.quest_admin.answers', quest._count.answers) }}
-            </p>
-          </div>
-          <div class="flex gap-1">
-            <VaChip v-if="quest.optional" size="small" color="secondary"
-              >Opt</VaChip
+        <p v-if="pending">pending...</p>
+        <div v-if="quests.length > 0" class="mt-4 flex flex-col gap-2">
+          <VaCard
+            v-for="(quest, index) in quests"
+            :key="quest.id"
+            class="flex items-center"
+          >
+            <VaCardContent
+              class="flex w-full flex-col items-center gap-2 sm:flex-row"
             >
-            <VaChip v-if="quest.pictureRequired" size="small" color="info"
-              >Pic!</VaChip
-            >
-            <VaChip v-if="quest.textRequired" size="small" color="warning"
-              >Txt!</VaChip
-            >
-          </div>
-          <VaButton
-            icon="edit"
-            size="small"
-            preset="plain"
-            :disabled="questLoading"
-            @click="openEditQuest(quest.id)"
-          />
-          <VaButton
-            icon="delete"
-            size="small"
-            preset="plain"
-            color="danger"
-            :disabled="questLoading"
-            @click="deleteQuest(quest)"
-          />
-        </VaCardContent>
-      </VaCard>
-    </div>
-    <p v-else class="mt-4 text-gray-500">
-      {{ t('page.quest_admin.no_quests') }}
-    </p>
-  </VaCollapse>
+              <div class="flex flex-row gap-1 sm:flex-col">
+                <VaButton
+                  icon="arrow_upward"
+                  size="small"
+                  preset="plain"
+                  :disabled="index === 0 || questLoading"
+                  :title="t('page.quest_admin.move_up')"
+                  @click="reorderQuest(quest, 'up')"
+                />
+                <VaButton
+                  icon="arrow_downward"
+                  size="small"
+                  preset="plain"
+                  :disabled="index === quests.length - 1 || questLoading"
+                  :title="t('page.quest_admin.move_down')"
+                  @click="reorderQuest(quest, 'down')"
+                />
+              </div>
+              <VaButton
+                icon="edit"
+                preset="plain"
+                :disabled="questLoading"
+                @click="openEditQuest(quest.id)"
+              />
+              <VaImage
+                v-if="quest.picture"
+                :src="quest.picture.url"
+                lazy
+                alt="Quest picture"
+                class="h-16 w-24 rounded object-cover"
+                ><template #loader><VaProgressCircle indeterminate /></template
+              ></VaImage>
+              <div class="flex-1">
+                <p>
+                  <span class="font-bold">{{ quest.title_de }}</span
+                  ><span class="text-secondary font-light"> | </span
+                  ><span class="font-bold">{{ quest.title_en }}</span>
+                </p>
+                <p class="text-sm text-gray-500">
+                  {{ quest.points }} {{ t('page.quest_admin.points') }} ·
+                  {{ t('page.quest_admin.answers', quest._count.answers) }}
+                </p>
+              </div>
+              <div class="flex gap-1">
+                <VaChip v-if="quest.optional" size="small" color="secondary"
+                  >Opt</VaChip
+                >
+                <VaChip v-if="quest.pictureRequired" size="small" color="info"
+                  >Pic!</VaChip
+                >
+                <VaChip v-if="quest.textRequired" size="small" color="warning"
+                  >Txt!</VaChip
+                >
+              </div>
+              <div class="flex flex-row gap-1 sm:flex-col">
+                <VaButton
+                  icon="edit"
+                  size="small"
+                  preset="plain"
+                  :disabled="questLoading"
+                  @click="openEditQuest(quest.id)"
+                />
+                <VaButton
+                  icon="delete"
+                  size="small"
+                  preset="plain"
+                  color="danger"
+                  :disabled="questLoading"
+                  @click="deleteQuest(quest)"
+                />
+              </div>
+            </VaCardContent>
+          </VaCard>
+        </div>
+        <p v-else class="mt-4 text-gray-500">
+          {{ t('page.quest_admin.no_quests') }}
+        </p>
+      </VaCollapse>
 
-  <AdminQuestModal
-    v-model="questModalOpen"
-    :hunt-id="Number(props.huntId)"
-    :quest-id="editingQuestId"
-    @saved="refreshQuests"
-  />
+      <AdminQuestModal
+        v-model="questModalOpen"
+        :hunt-id="Number(props.huntId)"
+        :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,207 +222,257 @@ 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">
-        <VaInput
-          v-model="formData.cloned.value.name_de"
-          label="Name DE"
-          clearable
-          :clear-value="data.name_de"
-          clearable-icon="replay"
-        />
-        <VaInput
-          v-model="formData.cloned.value.name_en"
-          label="Name EN"
-          clearable
-          :clear-value="data.name_en"
-          clearable-icon="replay"
-        />
-        <VaTextarea
-          v-model="formData.cloned.value.description_de"
-          label="Description DE"
-          clearable
-          :clear-value="data.description_de"
-          clearable-icon="replay"
-        />
-        <VaTextarea
-          v-model="formData.cloned.value.description_en"
-          label="Description EN"
-          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" />
-        <VaCheckbox
-          v-model="formData.cloned.value.allowJoin"
-          label="Allow Join"
-        />
-        <VaCheckbox
-          v-model="formData.cloned.value.revealQuests"
-          label="Reveal Quests"
-        />
-        <VaCheckbox
-          v-model="formData.cloned.value.revealAnswers"
-          label="Reveal Answers"
-        />
-        <div class="flex flex-row gap-2">
-          <VaCheckbox
-            label="Start?"
-            :model-value="!!formData.cloned.value.start"
-            @update:model-value="
-              (newVal: boolean) =>
-                (formData.cloned.value!.start = newVal ? new Date() : null)
-            "
-          />
-          <VaDateInput
-            v-if="formData.cloned.value.start"
-            v-model="formData.cloned.value.start"
-            label="Start"
-            manual-input
-          />
-          <VaTimeInput
-            v-if="formData.cloned.value.start"
-            v-model="formData.cloned.value.start"
-            label="Start"
-            view="seconds"
-            manual-input
-          />
-        </div>
-        <div class="flex flex-row gap-2">
-          <VaCheckbox
-            label="End?"
-            :model-value="!!formData.cloned.value.end"
-            @update:model-value="
-              (newVal: boolean) =>
-                (formData.cloned.value!.end = newVal ? new Date() : null)
-            "
-          />
-          <VaDateInput
-            v-if="formData.cloned.value.end"
-            v-model="formData.cloned.value.end"
-            label="End"
-            manual-input
-          />
-          <VaTimeInput
-            v-if="formData.cloned.value.end"
-            v-model="formData.cloned.value.end"
-            label="End"
-            view="seconds"
-            manual-input
-          />
-        </div>
-        <p>
-          Last update:
-          {{ d(data.updatedAt, fullDate) }}
-        </p>
-        <VaButtonGroup :loading="pending" :disabled="pending">
-          <VaButton
-            icon="replay"
-            :disabled="!formData.isModified.value"
-            @click.prevent="formData.sync()"
-            >Reset all values</VaButton
+    <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"
           >
-          <VaButton
-            :disabled="formData.isModified.value"
-            @click.prevent="refresh()"
-            >Refresh</VaButton
+            <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="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="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="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="t('page.create_hunt.description_en')"
+                max-length="1000"
+                counter
+                clearable
+                :clear-value="data.description_en"
+                clearable-icon="replay"
+              />
+            </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="t('page.create_hunt.allow_join')"
+            />
+            <VaCheckbox
+              v-model="formData.cloned.value.revealQuests"
+              :label="t('page.create_hunt.reveal_quests')"
+            />
+            <VaCheckbox
+              v-model="formData.cloned.value.revealAnswers"
+              :label="t('page.create_hunt.reveal_answers')"
+            />
+            <div class="date-holder">
+              <VaCheckbox
+                :label="t('page.create_hunt.has_start')"
+                :model-value="!!formData.cloned.value.start"
+                @update:model-value="
+                  (newVal: boolean) =>
+                    (formData.cloned.value!.start = newVal ? new Date() : null)
+                "
+              />
+              <VaDateInput
+                v-if="formData.cloned.value.start"
+                v-model="formData.cloned.value.start"
+                :label="t('page.create_hunt.start')"
+                manual-input
+              />
+              <VaTimeInput
+                v-if="formData.cloned.value.start"
+                v-model="formData.cloned.value.start"
+                :label="t('page.create_hunt.start')"
+                view="seconds"
+                manual-input
+              />
+            </div>
+            <div class="date-holder">
+              <VaCheckbox
+                :label="t('page.create_hunt.has_end')"
+                :model-value="!!formData.cloned.value.end"
+                @update:model-value="
+                  (newVal: boolean) =>
+                    (formData.cloned.value!.end = newVal ? new Date() : null)
+                "
+              />
+              <VaDateInput
+                v-if="formData.cloned.value.end"
+                v-model="formData.cloned.value.end"
+                :label="t('page.create_hunt.end')"
+                manual-input
+              />
+              <VaTimeInput
+                v-if="formData.cloned.value.end"
+                v-model="formData.cloned.value.end"
+                :label="t('page.create_hunt.end')"
+                view="seconds"
+                manual-input
+              />
+            </div>
+            <VaDivider />
+            <p>
+              Last update:
+              {{ d(data.updatedAt, fullDate) }}
+            </p>
+            <VaButtonGroup :loading="pending" :disabled="pending">
+              <VaButton
+                icon="replay"
+                :disabled="!formData.isModified.value"
+                @click.prevent="formData.sync()"
+                >Reset all values</VaButton
+              >
+              <VaButton
+                :disabled="formData.isModified.value"
+                @click.prevent="refresh()"
+                >Refresh</VaButton
+              >
+              <VaButton
+                :disabled="!formData.isModified.value"
+                @click.prevent="submit"
+                >Save</VaButton
+              >
+            </VaButtonGroup>
+          </VaForm>
+        </VaCardContent>
+      </VaCard>
+      <VaCard stripe stripe-color="success">
+        <VaCardContent>
+          <h2 class="text-2xl">Image</h2>
+          <div>
+            <VaImage
+              v-if="newImage"
+              :src="createImageURL(newImage)"
+              class="max-h-60 w-full"
+              fit="contain"
+              lazy
+            />
+            <VaImage
+              v-else-if="data?.picture"
+              :src="data?.picture?.url"
+              class="max-h-60 w-full"
+              fit="contain"
+              lazy
+            >
+              <template #loader> <VaProgressCircle indeterminate /> </template
+            ></VaImage>
+            <VaFileUpload
+              v-model="newImage"
+              :disabled="uploading || pending"
+              type="single"
+              file-types="jpg,png,jpeg"
+            />
+            <VaAlert
+              v-if="imageError.length > 0"
+              color="danger"
+              class="w-full text-center"
+              >{{ t(imageError) }}</VaAlert
+            >
+            <VaButtonGroup :disabled="uploading || pending">
+              <VaButton
+                color="success"
+                :disabled="!newImage"
+                @click="updateImage"
+              >
+                Upload new image
+              </VaButton>
+              <VaButton
+                color="danger"
+                icon="delete"
+                :disabled="!data?.picture"
+                @click="deleteImage"
+                >Delete image</VaButton
+              >
+            </VaButtonGroup>
+          </div>
+          <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-2 lg:grid-cols-3"
           >
-          <VaButton
-            :disabled="!formData.isModified.value"
-            @click.prevent="submit"
-            >Save</VaButton
-          >
-        </VaButtonGroup>
-      </VaForm>
-      <VaDivider />
-      <h2 class="text-2xl">Image</h2>
-      <div>
-        <VaImage
-          v-if="newImage"
-          :src="createImageURL(newImage)"
-          class="max-h-60 w-full"
-          fit="contain"
-          lazy
-        />
-        <VaImage
-          v-else-if="data?.picture"
-          :src="data?.picture?.url"
-          class="max-h-60 w-full"
-          fit="contain"
-          lazy
-        >
-          <template #loader> <VaProgressCircle indeterminate /> </template
-        ></VaImage>
-        <VaFileUpload
-          v-model="newImage"
-          :disabled="uploading || pending"
-          type="single"
-          file-types="jpg,png,jpeg"
-        />
-        <VaAlert
-          v-if="imageError.length > 0"
-          color="danger"
-          class="w-full text-center"
-          >{{ t(imageError) }}</VaAlert
-        >
-        <VaButtonGroup :disabled="uploading || pending">
-          <VaButton color="success" :disabled="!newImage" @click="updateImage">
-            Upload new image
-          </VaButton>
-          <VaButton
-            color="danger"
-            icon="delete"
-            :disabled="!data?.picture"
-            @click="deleteImage"
-            >Delete image</VaButton
-          >
-        </VaButtonGroup>
-      </div>
+            <VaButton
+              v-for="member in data.members"
+              :key="member.member.id"
+              color="danger"
+              :disabled="loading"
+              :loading="loading"
+              @click="kick(member)"
+              >Kick {{ member.member.name }} ({{
+                member.member.email
+              }})</VaButton
+            >
+            <VaChip v-if="data.members.length <= 0">No members yet</VaChip>
+          </div>
+          <div v-if="data" class="mt-8 flex flex-col gap-2 md:flex-row">
+            <VaSelect
+              v-model="newUser"
+              v-model:search="search"
+              label="New Admin Member"
+              placeholder="Start typing their email..."
+              autocomplete
+              highlight-matched-text
+              :options="users"
+              :loading="searchPending"
+              track-by="id"
+              text-by="email"
+            /><VaButton
+              icon="add"
+              color="danger"
+              :disabled="!newUser || loading"
+              :loading="loading"
+              @click="addUser"
+              >Add admin</VaButton
+            >
+          </div>
+        </VaCardContent>
+      </VaCard>
 
-      <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"
-      >
-        <VaButton
-          v-for="member in data.members"
-          :key="member.member.id"
-          color="danger"
-          :disabled="loading"
-          :loading="loading"
-          @click="kick(member)"
-          >Kick {{ member.member.name }} ({{ member.member.email }})</VaButton
-        >
-        <VaChip v-if="data.members.length <= 0">No members yet</VaChip>
-      </div>
-      <div v-if="data" class="mt-8 flex flex-col gap-2 md:flex-row">
-        <VaSelect
-          v-model="newUser"
-          v-model:search="search"
-          label="New Admin Member"
-          placeholder="Start typing their email..."
-          autocomplete
-          highlight-matched-text
-          :options="users"
-          :loading="searchPending"
-          track-by="id"
-          text-by="email"
-        /><VaButton
-          icon="add"
-          color="danger"
-          :disabled="!newUser || loading"
-          :loading="loading"
-          @click="addUser"
-          >Add admin</VaButton
-        >
-      </div>
-    </template>
+    </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>
-      <VaButton color="success" icon="replay" @click="refresh"
-        >Refresh</VaButton
-      >
-      <VaAccordion v-if="data" stateful>
+      <h1 class="mb-4 text-3xl">
+        Teams
+        <VaButton color="success" icon="replay" @click="refresh"
+          >Refresh</VaButton
+        >
+      </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,14 +40,18 @@ useHead({
         {{ t('page.landing.hero_subtitle') }}
       </p>
       <div class="flex flex-wrap justify-center gap-4">
-        <VaButton
-          v-if="!loggedIn"
-          size="large"
-          color="success"
-          :to="localePath('/register')"
-        >
-          {{ t('page.landing.get_started') }}
-        </VaButton>
+        <AuthState>
+          <template #default="{ loggedIn }">
+            <VaButton
+              v-if="!loggedIn"
+              size="large"
+              color="success"
+              :to="localePath('/register')"
+            >
+              {{ 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',