From 178f014a4a2d80bfc6ba00387dd501a238396a84 Mon Sep 17 00:00:00 2001
From: AzuTear <vmbao62@hotmail.com>
Date: Thu, 18 Jun 2026 00:09:25 +0200
Subject: [PATCH] Make admin reviews scalable

---
 frontend/src/views/admin/AdminReviewsView.vue | 224 ++++++++++++------
 1 file changed, 148 insertions(+), 76 deletions(-)

diff --git a/frontend/src/views/admin/AdminReviewsView.vue b/frontend/src/views/admin/AdminReviewsView.vue
index 1296311..d54c956 100644
--- a/frontend/src/views/admin/AdminReviewsView.vue
+++ b/frontend/src/views/admin/AdminReviewsView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue'
+import { CheckCircle2, Search, Sparkles, Trash2 } from '@lucide/vue'
 
 import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
 import AdminSeasonToolbar from '../../components/admin/AdminSeasonToolbar.vue'
@@ -21,6 +22,7 @@ const reviewForms = reactive<Record<number, {
 const seasonDetail = computed(() => store.adminSeasonDetail)
 const selectedSeasonId = computed(() => store.adminSelectedSeasonId)
 const reviewFilter = ref('')
+const selectedNominationId = ref<number | null>(null)
 const filteredNominations = computed(() => {
   const query = reviewFilter.value.trim().toLowerCase()
   if (!query) return seasonDetail.value.pendingNominations
@@ -31,6 +33,14 @@ const filteredNominations = computed(() => {
       .includes(query),
   )
 })
+const selectedNomination = computed(() =>
+  filteredNominations.value.find((nomination) => nomination.id === selectedNominationId.value) ?? filteredNominations.value[0] ?? null,
+)
+const reviewStats = computed(() => [
+  { label: 'Offen', value: seasonDetail.value.pendingNominations.length },
+  { label: 'Sichtbar', value: filteredNominations.value.length },
+  { label: 'Kategorien', value: new Set(seasonDetail.value.pendingNominations.map((nomination) => nomination.categoryName)).size },
+])
 
 watch(
   seasonDetail,
@@ -42,6 +52,20 @@ watch(
         platform: 'Twitch',
       }
     }
+
+    if (!detail.pendingNominations.some((nomination) => nomination.id === selectedNominationId.value)) {
+      selectedNominationId.value = detail.pendingNominations[0]?.id ?? null
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  filteredNominations,
+  (nominations) => {
+    if (!nominations.some((nomination) => nomination.id === selectedNominationId.value)) {
+      selectedNominationId.value = nominations[0]?.id ?? null
+    }
   },
   { immediate: true },
 )
@@ -87,96 +111,144 @@ async function rejectNomination(nominationId: number) {
       eyebrow="Reviews"
       title="Freitext-Nominierungen sichten"
       description="Alle uneindeutigen oder noch nicht gemappten Nominierungen laufen hier zusammen. Suche nach User, Kategorie oder Kandidat und entscheide dann direkt im Kontext."
+      :icon="Sparkles"
     />
 
     <AdminSeasonToolbar />
 
-    <Card class="p-7">
-      <div class="flex items-center justify-between gap-4">
-        <div>
-          <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Review-Liste</h2>
-          <p class="mt-2 text-sm text-slate-500">Freitext-Nominierungen und Alias-Faelle, die das Team direkt in Kandidaten ueberfuehren oder verwerfen kann.</p>
+    <Card class="overflow-hidden">
+      <div class="border-b border-violet-100 bg-white/75 p-6">
+        <div class="flex flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
+          <div>
+            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Review Queue</p>
+            <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Offene Nominierungen</h2>
+            <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
+              Kompakte Liste fuer viele Freitext-Faelle. Waehle links einen Fall aus und entscheide rechts, ob daraus ein Kandidat wird.
+            </p>
+          </div>
+          <div class="grid gap-2 sm:grid-cols-3 xl:min-w-[360px]">
+            <div v-for="stat in reviewStats" :key="stat.label" class="rounded-2xl border border-violet-50 bg-violet-50/50 px-3 py-2">
+              <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">{{ stat.label }}</p>
+              <strong class="mt-1 block text-lg text-violet-800">{{ stat.value }}</strong>
+            </div>
+          </div>
         </div>
-        <span class="text-sm uppercase tracking-[0.2em] text-slate-500">
-          {{ filteredNominations.length }} / {{ seasonDetail.pendingNominations.length }} offen
-        </span>
-      </div>
 
-      <p v-if="adminMessage" class="mt-6 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
-        {{ adminMessage }}
-      </p>
-      <p v-if="adminError" class="mt-6 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
-        {{ adminError }}
-      </p>
-
-      <div class="mt-6 grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
-        <input
-          v-model="reviewFilter"
-          type="text"
-          class="rounded-2xl border border-violet-200 px-4 py-3"
-          placeholder="Nach Kategorie, Nominierung oder Nutzer filtern"
-        />
-        <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm text-slate-600">
-          Tipp: Suche erst nach dem Problemfall, dann entscheide uebernehmen oder verwerfen.
+        <div class="mt-5 grid gap-3 md:grid-cols-[minmax(0,1fr)_220px]">
+          <label class="relative block">
+            <Search class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-violet-400" />
+            <input
+              v-model="reviewFilter"
+              type="text"
+              class="h-12 w-full rounded-2xl border border-violet-200 bg-white/90 pl-11 pr-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+              placeholder="Nach Kategorie, Kandidat oder Nutzer suchen"
+            />
+          </label>
+          <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm text-slate-600">
+            {{ filteredNominations.length }} / {{ seasonDetail.pendingNominations.length }} sichtbar
+          </div>
         </div>
       </div>
 
-      <div class="mt-6 space-y-4">
-        <div
-          v-for="nomination in filteredNominations"
-          :key="nomination.id"
-          class="rounded-[26px] border border-violet-100 bg-white/90 p-5"
-        >
-          <div class="flex flex-wrap items-start justify-between gap-4">
-            <div>
-              <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">{{ nomination.categoryName }}</p>
-              <h3 class="mt-2 font-[Cormorant_Garamond] text-3xl text-violet-800">{{ nomination.candidateText }}</h3>
-              <p class="mt-2 text-sm text-slate-500">
-                Von {{ nomination.submittedByTwitchId }} · {{ new Date(nomination.createdAt).toLocaleString('de-DE') }}
-              </p>
-            </div>
-            <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm text-slate-600">
-              ID {{ nomination.id }}
-            </div>
+      <div class="space-y-4 p-6">
+        <p v-if="adminMessage" class="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">{{ adminMessage }}</p>
+        <p v-if="adminError" class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{{ adminError }}</p>
+
+        <div class="grid gap-5 xl:grid-cols-[minmax(320px,0.85fr)_minmax(0,1.15fr)]">
+          <div class="space-y-2 xl:max-h-[680px] xl:overflow-y-auto xl:pr-2">
+            <button
+              v-for="nomination in filteredNominations"
+              :key="nomination.id"
+              type="button"
+              class="w-full rounded-2xl border p-3 text-left transition"
+              :class="selectedNomination?.id === nomination.id ? 'border-violet-200 bg-violet-50/80 shadow-[0_12px_30px_rgba(168,145,214,0.12)]' : 'border-violet-100 bg-white/85 hover:border-violet-200 hover:bg-violet-50/50'"
+              @click="selectedNominationId = nomination.id"
+            >
+              <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span class="rounded-full bg-violet-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-violet-700">
+                      {{ nomination.categoryName }}
+                    </span>
+                    <span class="rounded-full bg-slate-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-600">
+                      ID {{ nomination.id }}
+                    </span>
+                  </div>
+                  <h3 class="mt-2 truncate text-base font-semibold text-slate-900">{{ nomination.candidateText }}</h3>
+                  <p class="mt-1 truncate text-sm text-slate-500">
+                    {{ nomination.submittedByTwitchId }} · {{ new Date(nomination.createdAt).toLocaleString('de-DE') }}
+                  </p>
+                </div>
+              </div>
+            </button>
+
+            <p v-if="seasonDetail.pendingNominations.length === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
+              Keine offenen Review-Faelle im aktuell gewaehlten Award-Jahr.
+            </p>
+            <p v-else-if="filteredNominations.length === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
+              Keine Review-Faelle passen zum aktuellen Filter.
+            </p>
           </div>
 
-          <div class="mt-5 grid gap-4 md:grid-cols-3">
-            <input
-              v-model="reviewForms[nomination.id].displayName"
-              type="text"
-              class="rounded-2xl border border-violet-200 px-4 py-3"
-              placeholder="Anzeigename"
-            />
-            <input
-              v-model="reviewForms[nomination.id].channelSlug"
-              type="text"
-              class="rounded-2xl border border-violet-200 px-4 py-3"
-              placeholder="@channel"
-            />
-            <input
-              v-model="reviewForms[nomination.id].platform"
-              type="text"
-              class="rounded-2xl border border-violet-200 px-4 py-3"
-              placeholder="Plattform"
-            />
-          </div>
+          <div v-if="selectedNomination" class="rounded-[26px] border border-violet-100 bg-white/90 p-5 shadow-[0_14px_36px_rgba(168,145,214,0.08)]">
+            <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+              <div class="min-w-0">
+                <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">{{ selectedNomination.categoryName }}</p>
+                <h3 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">{{ selectedNomination.candidateText }}</h3>
+                <p class="mt-2 text-sm text-slate-500">
+                  Eingereicht von {{ selectedNomination.submittedByTwitchId }} · {{ new Date(selectedNomination.createdAt).toLocaleString('de-DE') }}
+                </p>
+              </div>
+              <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm font-semibold text-violet-800">
+                ID {{ selectedNomination.id }}
+              </div>
+            </div>
 
-          <div class="mt-4 flex flex-wrap justify-end gap-3">
-            <Button :disabled="reviewSaving === nomination.id" variant="secondary" @click="rejectNomination(nomination.id)">
-              {{ reviewSaving === nomination.id ? 'Speichert ...' : 'Verwerfen' }}
-            </Button>
-            <Button :disabled="reviewSaving === nomination.id" @click="approveNomination(nomination.id)">
-              {{ reviewSaving === nomination.id ? 'Speichert ...' : 'Als Kandidat uebernehmen' }}
-            </Button>
+            <div class="mt-5 rounded-2xl border border-violet-100 bg-violet-50/50 p-4">
+              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Als Kandidat uebernehmen</p>
+              <div class="mt-4 grid gap-4 md:grid-cols-3">
+                <label class="space-y-2">
+                  <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Anzeigename</span>
+                  <input
+                    v-model="reviewForms[selectedNomination.id].displayName"
+                    type="text"
+                    class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+                    placeholder="Anzeigename"
+                  />
+                </label>
+                <label class="space-y-2">
+                  <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Handle</span>
+                  <input
+                    v-model="reviewForms[selectedNomination.id].channelSlug"
+                    type="text"
+                    class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+                    placeholder="@channel"
+                  />
+                </label>
+                <label class="space-y-2">
+                  <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Plattform</span>
+                  <input
+                    v-model="reviewForms[selectedNomination.id].platform"
+                    type="text"
+                    class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+                    placeholder="Twitch"
+                  />
+                </label>
+              </div>
+            </div>
+
+            <div class="mt-4 flex flex-wrap justify-end gap-3">
+              <Button :disabled="reviewSaving === selectedNomination.id" variant="secondary" @click="rejectNomination(selectedNomination.id)">
+                <Trash2 class="mr-2 h-4 w-4" />
+                {{ reviewSaving === selectedNomination.id ? 'Speichert ...' : 'Verwerfen' }}
+              </Button>
+              <Button :disabled="reviewSaving === selectedNomination.id" @click="approveNomination(selectedNomination.id)">
+                <CheckCircle2 class="mr-2 h-4 w-4" />
+                {{ reviewSaving === selectedNomination.id ? 'Speichert ...' : 'Als Kandidat uebernehmen' }}
+              </Button>
+            </div>
           </div>
         </div>
-
-        <p v-if="seasonDetail.pendingNominations.length === 0" class="rounded-[26px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
-          Keine offenen Review-Faelle im aktuell gewaehlten Award-Jahr.
-        </p>
-        <p v-else-if="filteredNominations.length === 0" class="rounded-[26px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
-          Keine Review-Faelle passen zum aktuellen Filter.
-        </p>
       </div>
     </Card>
   </div>