Make admin categories scalable

frontend/src/views/admin/AdminSeasonsView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue'
+import { CalendarCog, Layers3, PlusCircle, Search } from '@lucide/vue'
 
 import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
 import AdminSeasonToolbar from '../../components/admin/AdminSeasonToolbar.vue'
@@ -39,6 +40,12 @@ const editForms = reactive<Record<number, {
 const seasonDetail = computed(() => store.adminSeasonDetail)
 const selectedSeasonId = computed(() => store.adminSelectedSeasonId)
 const categoryFilter = ref('')
+const selectedCategoryId = ref<number | null>(null)
+const categoryStats = computed(() => [
+  { label: 'Kategorien', value: seasonDetail.value.categories.length },
+  { label: 'Kandidaten', value: seasonDetail.value.candidates.length },
+  { label: 'Reviews offen', value: seasonDetail.value.pendingNominations.length },
+])
 const filteredCategories = computed(() => {
   const query = categoryFilter.value.trim().toLowerCase()
   if (!query) return seasonDetail.value.categories
@@ -49,6 +56,9 @@ const filteredCategories = computed(() => {
       .includes(query),
   )
 })
+const selectedCategory = computed(() =>
+  filteredCategories.value.find((category) => category.id === selectedCategoryId.value) ?? filteredCategories.value[0] ?? null,
+)
 
 watch(
   seasonDetail,
@@ -68,6 +78,20 @@ watch(
     }
 
     newCategoryForm.sortOrder = detail.categories.length + 1
+
+    if (!detail.categories.some((category) => category.id === selectedCategoryId.value)) {
+      selectedCategoryId.value = detail.categories[0]?.id ?? null
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  filteredCategories,
+  (categories) => {
+    if (!categories.some((category) => category.id === selectedCategoryId.value)) {
+      selectedCategoryId.value = categories[0]?.id ?? null
+    }
   },
   { immediate: true },
 )
@@ -139,6 +163,7 @@ async function createCategory() {
       eyebrow="Jahre"
       title="Jahr und Kategorien verwalten"
       description="Hier steuerst du die aktive Phase, legst neue Kategorien an und pflegst bestehende Gruppen, Limits und Beschreibungen."
+      :icon="CalendarCog"
     />
 
     <AdminSeasonToolbar />
@@ -213,80 +238,195 @@ async function createCategory() {
         </div>
       </Card>
 
-      <Card class="p-7">
+      <Card class="overflow-hidden">
-        <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Neue Kategorie</h2>
+        <div class="border-b border-violet-100 bg-gradient-to-br from-white via-[#f7f2ff] to-[#f7eef8] p-6">
-        <div class="mt-6 space-y-4">
+          <div class="flex items-start gap-4">
-          <input v-model="newCategoryForm.groupName" type="text" class="w-full rounded-2xl border border-violet-200 px-4 py-3" placeholder="Gruppenname" />
+            <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
-          <input v-model="newCategoryForm.name" type="text" class="w-full rounded-2xl border border-violet-200 px-4 py-3" placeholder="Kategorie-Name" />
+              <PlusCircle class="h-5 w-5" />
-          <input v-model="newCategoryForm.slug" type="text" class="w-full rounded-2xl border border-violet-200 px-4 py-3" placeholder="Slug" />
-          <textarea v-model="newCategoryForm.description" class="min-h-28 w-full rounded-2xl border border-violet-200 px-4 py-3" placeholder="Beschreibung" />
-          <div class="grid gap-4 sm:grid-cols-2">
-            <input v-model="newCategoryForm.sortOrder" type="number" class="rounded-2xl border border-violet-200 px-4 py-3" placeholder="Sortierung" />
-            <input v-model="newCategoryForm.maxNomineesPerUser" type="number" class="rounded-2xl border border-violet-200 px-4 py-3" placeholder="Max. Nominierungen" />
             </div>
+            <div>
+              <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Neue Kategorie</p>
+              <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Kategorie planen</h2>
+              <p class="mt-2 text-sm leading-6 text-slate-500">
+                Lege zuerst Gruppe, Namen und Limit fest. Slug und Sortierung bestimmen spaeter URL, Anzeige und Reihenfolge im Voting.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="space-y-4 p-6">
+          <div class="grid gap-4 sm:grid-cols-2">
+            <label class="space-y-2">
+              <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Gruppe</span>
+              <input v-model="newCategoryForm.groupName" type="text" class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="z.B. Hauptpreise" />
+            </label>
+            <label class="space-y-2">
+              <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Kategorie</span>
+              <input v-model="newCategoryForm.name" type="text" class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="z.B. VTuber des Jahres" />
+            </label>
+          </div>
+
+          <label class="space-y-2">
+            <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Beschreibung</span>
+            <textarea v-model="newCategoryForm.description" class="min-h-28 w-full rounded-2xl border border-violet-200 px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Kurz erklaeren, wofuer diese Kategorie steht." />
+          </label>
+
+          <div class="grid gap-4 sm:grid-cols-3">
+            <label class="space-y-2 sm:col-span-1">
+              <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Slug</span>
+              <input v-model="newCategoryForm.slug" type="text" class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="vtuber-des-jahres" />
+            </label>
+            <label class="space-y-2">
+              <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Reihenfolge</span>
+              <input v-model="newCategoryForm.sortOrder" type="number" class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="1" />
+            </label>
+            <label class="space-y-2">
+              <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Nominierungslimit</span>
+              <input v-model="newCategoryForm.maxNomineesPerUser" type="number" class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="3" />
+            </label>
+          </div>
+
+          <div class="flex flex-col gap-3 border-t border-violet-100 pt-5 sm:flex-row sm:items-center sm:justify-between">
+            <p class="text-sm leading-6 text-slate-500">
+              Neue Kategorien sind sofort Teil des gewaehlten Award-Jahres und koennen danach unten weiter bearbeitet werden.
+            </p>
             <Button :disabled="categorySaving === 'new' || !selectedSeasonId" @click="createCategory">
               {{ categorySaving === 'new' ? 'Erstellt ...' : 'Kategorie anlegen' }}
             </Button>
           </div>
+        </div>
       </Card>
     </div>
 
-    <Card class="p-7">
+    <Card class="overflow-hidden">
-      <div class="flex items-center justify-between gap-4">
+      <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>
-          <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Kategorien des Jahres</h2>
+            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Kategorien</p>
-          <p class="mt-2 text-sm text-slate-500">Sortierung, Slugs und Limits werden hier pro Jahr gepflegt.</p>
+            <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Kategorien dieses Jahres</h2>
+            <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
+              Pruefe Struktur, Slug, Limit und Kandidatenzahl pro Kategorie. Erst filtern, dann gezielt bearbeiten.
+            </p>
+          </div>
+          <div class="grid gap-2 sm:grid-cols-3 xl:min-w-[380px]">
+            <div v-for="stat in categoryStats" :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>
-        <span class="text-sm uppercase tracking-[0.2em] text-slate-500">
-          {{ filteredCategories.length }} / {{ seasonDetail.categories.length }} Kategorien
-        </span>
         </div>
 
-      <div class="mt-6 grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
+        <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="categoryFilter"
               type="text"
-          class="rounded-2xl border border-violet-200 px-4 py-3"
+              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="Kategorien nach Name, Gruppe oder Slug filtern"
+              placeholder="Nach Name, Gruppe oder Slug suchen"
             />
+          </label>
           <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm text-slate-600">
-          Tipp: Erst filtern, dann die passende Kategorie direkt bearbeiten.
+            {{ filteredCategories.length }} / {{ seasonDetail.categories.length }} sichtbar
+          </div>
         </div>
       </div>
 
-      <div class="mt-6 space-y-4">
+      <div class="grid gap-5 p-6 xl:grid-cols-[minmax(320px,0.85fr)_minmax(0,1.15fr)]">
-        <div
+        <div class="space-y-2 xl:max-h-[680px] xl:overflow-y-auto xl:pr-2">
+          <button
             v-for="category in filteredCategories"
             :key="category.id"
-          class="rounded-[26px] border border-violet-100 bg-white/90 p-5"
+            type="button"
+            class="w-full rounded-2xl border p-3 text-left transition"
+            :class="selectedCategory?.id === category.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="selectedCategoryId = category.id"
           >
-          <div class="grid gap-4 md:grid-cols-2">
+            <div class="flex items-start justify-between gap-3">
-            <input v-model="editForms[category.id].groupName" type="text" class="rounded-2xl border border-violet-200 px-4 py-3" placeholder="Gruppe" />
+              <div class="min-w-0">
-            <input v-model="editForms[category.id].name" type="text" class="rounded-2xl border border-violet-200 px-4 py-3" placeholder="Name" />
+                <div class="flex flex-wrap items-center gap-2">
-            <input v-model="editForms[category.id].slug" type="text" class="rounded-2xl border border-violet-200 px-4 py-3" placeholder="Slug" />
+                  <span class="inline-flex items-center gap-1.5 rounded-full bg-white px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-violet-700">
-            <input v-model="editForms[category.id].sortOrder" type="number" class="rounded-2xl border border-violet-200 px-4 py-3" placeholder="Sortierung" />
+                    <Layers3 class="h-3 w-3" />
-            <input v-model="editForms[category.id].maxNomineesPerUser" type="number" class="rounded-2xl border border-violet-200 px-4 py-3" placeholder="Limit" />
+                    {{ category.groupName }}
-            <div class="flex items-center rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm text-slate-600">
+                  </span>
-              {{ category.candidateCount }} Kandidaten in dieser Kategorie
+                  <span class="rounded-full bg-emerald-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-emerald-700">
+                    {{ category.candidateCount }} Kandidaten
+                  </span>
+                  <span class="rounded-full bg-slate-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-600">
+                    Limit {{ category.maxNomineesPerUser }}
+                  </span>
+                </div>
+                <h3 class="mt-2 truncate text-base font-semibold text-slate-900">{{ category.name }}</h3>
+                <p class="mt-1 line-clamp-2 text-sm leading-5 text-slate-500">{{ category.description }}</p>
+              </div>
+              <span class="shrink-0 rounded-xl border border-violet-100 bg-white px-2.5 py-1 text-xs font-semibold text-violet-800">
+                #{{ category.sortOrder }}
+              </span>
+            </div>
+          </button>
+
+          <p v-if="filteredCategories.length === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
+            Keine Kategorien passen zum aktuellen Filter.
+          </p>
+        </div>
+
+        <div v-if="selectedCategory" 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">Kategorie bearbeiten</p>
+              <h3 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">{{ selectedCategory.name }}</h3>
+              <p class="mt-2 text-sm leading-6 text-slate-500">{{ selectedCategory.description }}</p>
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <span class="rounded-full border border-emerald-100 bg-emerald-50 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-emerald-700">
+                {{ selectedCategory.candidateCount }} Kandidaten
+              </span>
+              <span class="rounded-full border border-slate-100 bg-slate-50 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-600">
+                Limit {{ selectedCategory.maxNomineesPerUser }}
+              </span>
             </div>
           </div>
 
+          <div class="mt-5 grid gap-4 md:grid-cols-2">
+            <label class="space-y-2">
+              <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Gruppe</span>
+              <input v-model="editForms[selectedCategory.id].groupName" type="text" class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Gruppe" />
+            </label>
+            <label class="space-y-2">
+              <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Name</span>
+              <input v-model="editForms[selectedCategory.id].name" type="text" class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Name" />
+            </label>
+            <label class="space-y-2">
+              <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Slug</span>
+              <input v-model="editForms[selectedCategory.id].slug" type="text" class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="slug" />
+            </label>
+            <div class="grid gap-4 sm:grid-cols-2">
+              <label class="space-y-2">
+                <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Reihenfolge</span>
+                <input v-model="editForms[selectedCategory.id].sortOrder" type="number" class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="1" />
+              </label>
+              <label class="space-y-2">
+                <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Limit</span>
+                <input v-model="editForms[selectedCategory.id].maxNomineesPerUser" type="number" class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="3" />
+              </label>
+            </div>
+          </div>
+
+          <label class="mt-4 block space-y-2">
+            <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Beschreibung</span>
             <textarea
-            v-model="editForms[category.id].description"
+              v-model="editForms[selectedCategory.id].description"
-            class="mt-4 min-h-28 w-full rounded-2xl border border-violet-200 px-4 py-3"
+              class="min-h-24 w-full rounded-2xl border border-violet-200 px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
               placeholder="Beschreibung"
             />
+          </label>
 
           <div class="mt-4 flex justify-end">
-            <Button :disabled="categorySaving === category.id" @click="saveCategory(category.id)">
+            <Button :disabled="categorySaving === selectedCategory.id" @click="saveCategory(selectedCategory.id)">
-              {{ categorySaving === category.id ? 'Speichert ...' : 'Kategorie speichern' }}
+              {{ categorySaving === selectedCategory.id ? 'Speichert ...' : 'Kategorie speichern' }}
             </Button>
           </div>
         </div>
-
-        <p v-if="filteredCategories.length === 0" class="rounded-[26px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
-          Keine Kategorien passen zum aktuellen Filter.
-        </p>
       </div>
     </Card>
   </div>