From e2c74a7378846039cf4a69ecc7d1851ab06792c2 Mon Sep 17 00:00:00 2001
From: AzuTear <vmbao62@hotmail.com>
Date: Wed, 17 Jun 2026 13:30:27 +0200
Subject: [PATCH] Compact admin layout and preserve admin scroll

---
 frontend/src/components/AppShell.vue          | 19 ++--
 .../src/components/admin/AdminPageHeader.vue  |  8 +-
 .../components/admin/AdminSeasonToolbar.vue   | 20 ++--
 frontend/src/router.ts                        | 10 +-
 frontend/src/views/admin/AdminLayoutView.vue  | 96 ++++++++-----------
 5 files changed, 73 insertions(+), 80 deletions(-)

diff --git a/frontend/src/components/AppShell.vue b/frontend/src/components/AppShell.vue
index 52bc3d9..4d35d6f 100644
--- a/frontend/src/components/AppShell.vue
+++ b/frontend/src/components/AppShell.vue
@@ -31,6 +31,7 @@ const currentLabel = computed(
 const visibleNavItems = computed(() =>
   navItems.filter((item) => item.to !== '/admin' || authStore.isAdmin),
 )
+const isAdminRoute = computed(() => route.path.startsWith('/admin'))
 
 async function login(role: 'viewer' | 'admin') {
   loginError.value = ''
@@ -56,15 +57,21 @@ async function login(role: 'viewer' | 'admin') {
         <span>{{ currentLabel }}</span>
       </div>
 
-      <header class="mb-10 flex flex-col gap-6 rounded-[34px] border border-white/70 bg-white/72 px-5 py-5 shadow-[0_24px_80px_rgba(93,63,135,0.08)] backdrop-blur lg:px-7">
-        <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
+      <header
+        class="flex flex-col rounded-[24px] border border-white/70 bg-white/72 shadow-[0_18px_55px_rgba(93,63,135,0.08)] backdrop-blur lg:px-7"
+        :class="isAdminRoute ? 'mb-5 gap-3 px-4 py-3' : 'mb-10 gap-6 px-5 py-5'"
+      >
+        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between" :class="isAdminRoute ? 'gap-3' : 'gap-5'">
           <RouterLink to="/" class="flex items-center gap-4 text-slate-800 no-underline">
-            <div class="grid h-12 w-12 place-items-center rounded-[1.4rem] bg-[linear-gradient(135deg,#f6e3b2,#f5c877)] text-amber-950 shadow-[0_16px_28px_rgba(245,200,119,0.35)]">
-              <Star class="h-5 w-5" />
+            <div
+              class="grid place-items-center rounded-[1.1rem] bg-[linear-gradient(135deg,#f6e3b2,#f5c877)] text-amber-950 shadow-[0_16px_28px_rgba(245,200,119,0.35)]"
+              :class="isAdminRoute ? 'h-10 w-10' : 'h-12 w-12'"
+            >
+              <Star :class="isAdminRoute ? 'h-4 w-4' : 'h-5 w-5'" />
             </div>
             <div>
               <strong class="block text-sm tracking-[0.35em]">VTUBER</strong>
-              <span class="block text-[11px] tracking-[0.45em] text-slate-500">STAR AWARDS</span>
+              <span v-if="!isAdminRoute" class="block text-[11px] tracking-[0.45em] text-slate-500">STAR AWARDS</span>
             </div>
           </RouterLink>
 
@@ -96,7 +103,7 @@ async function login(role: 'viewer' | 'admin') {
           <p v-if="loginError" class="mt-3 text-sm text-rose-700">{{ loginError }}</p>
         </div>
 
-        <div class="flex flex-col gap-4 border-t border-black/6 pt-4 lg:flex-row lg:items-center lg:justify-between">
+        <div class="flex flex-col gap-3 border-t border-black/6 pt-3 lg:flex-row lg:items-center lg:justify-between">
           <nav class="flex flex-wrap items-center gap-2 text-sm text-slate-600">
             <RouterLink
               v-for="item in visibleNavItems"
diff --git a/frontend/src/components/admin/AdminPageHeader.vue b/frontend/src/components/admin/AdminPageHeader.vue
index 0a2cb35..d9f53f5 100644
--- a/frontend/src/components/admin/AdminPageHeader.vue
+++ b/frontend/src/components/admin/AdminPageHeader.vue
@@ -7,9 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <div class="space-y-3">
+  <div class="flex flex-col gap-2 border-b border-violet-100 pb-4 md:flex-row md:items-end md:justify-between">
+    <div>
     <p v-if="eyebrow" class="text-xs font-semibold uppercase tracking-[0.28em] text-violet-500">{{ eyebrow }}</p>
-    <h2 class="font-[Cormorant_Garamond] text-5xl leading-[0.95] text-violet-800">{{ title }}</h2>
-    <p class="max-w-3xl text-base leading-7 text-slate-600">{{ description }}</p>
+      <h2 class="mt-1 text-2xl font-semibold text-slate-900">{{ title }}</h2>
+    </div>
+    <p class="max-w-xl text-sm leading-6 text-slate-500">{{ description }}</p>
   </div>
 </template>
diff --git a/frontend/src/components/admin/AdminSeasonToolbar.vue b/frontend/src/components/admin/AdminSeasonToolbar.vue
index 73cc792..2ef61f5 100644
--- a/frontend/src/components/admin/AdminSeasonToolbar.vue
+++ b/frontend/src/components/admin/AdminSeasonToolbar.vue
@@ -26,22 +26,18 @@ const currentSeason = computed(() => store.adminSeasonDetail)
 </script>
 
 <template>
-  <div class="flex flex-col gap-4 rounded-[26px] border border-violet-100 bg-white/80 px-5 py-5 lg:flex-row lg:items-center lg:justify-between">
-    <div class="space-y-3">
-      <p class="text-xs font-semibold uppercase tracking-[0.28em] text-violet-500">Arbeitskontext</p>
-      <p class="mt-2 text-sm text-slate-500">Die gewaehlte Season steuert Kategorien, Kandidaten und Review-Queues im gesamten Admin-Bereich.</p>
-      <div class="flex flex-wrap gap-3">
-        <span class="rounded-full border border-violet-100 bg-violet-50/70 px-3 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-600">
+  <div class="flex flex-col gap-3 rounded-lg border border-violet-100 bg-white/80 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
+    <div class="flex flex-wrap items-center gap-2">
+      <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Season</p>
+      <span class="rounded-full border border-violet-100 bg-violet-50/70 px-3 py-1.5 text-xs font-semibold text-slate-600">
           {{ currentSeason.currentPhase || 'Kein Status' }}
-        </span>
-        <span class="rounded-full border border-violet-100 bg-white px-3 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-600">
+      </span>
+      <span class="rounded-full border border-violet-100 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600">
           {{ currentSeason.isCurrent ? 'Public Season' : 'Nicht aktiv' }}
-        </span>
-      </div>
+      </span>
     </div>
 
-    <div class="grid gap-3 lg:min-w-[330px]">
-      <label class="text-sm font-semibold text-slate-600">Season</label>
+    <div class="lg:min-w-[330px]">
       <Select
         v-model="selectedSeasonId"
         :options="seasonOptions"
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index cb1c6cb..57c61c5 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -14,7 +14,15 @@ import WinnersView from './views/WinnersView.vue'
 
 const router = createRouter({
   history: createWebHistory(),
-  scrollBehavior() {
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    }
+
+    if (to.path.startsWith('/admin') && from.path.startsWith('/admin')) {
+      return false
+    }
+
     return { top: 0 }
   },
   routes: [
diff --git a/frontend/src/views/admin/AdminLayoutView.vue b/frontend/src/views/admin/AdminLayoutView.vue
index 771c2c2..a17738f 100644
--- a/frontend/src/views/admin/AdminLayoutView.vue
+++ b/frontend/src/views/admin/AdminLayoutView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted } from 'vue'
 import { RouterLink, RouterView, useRoute } from 'vue-router'
-import { Activity, AlertTriangle, CalendarCog, LayoutDashboard, Sparkles, Users } from '@lucide/vue'
+import { AlertTriangle, CalendarCog, LayoutDashboard, Sparkles, Users } from '@lucide/vue'
 
 import Card from '../../components/ui/Card.vue'
 import { useAwardsStore } from '../../stores/awards'
@@ -34,72 +34,55 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="space-y-8 pb-14">
-    <div class="space-y-4">
-      <p class="text-xs font-semibold uppercase tracking-[0.35em] text-amber-500">Admin</p>
-      <h1 class="max-w-[13ch] font-[Cormorant_Garamond] text-6xl leading-[0.92] text-violet-800">
-        Betriebswerkzeug fuer Awards, Moderation und Risiko-Sichtung
-      </h1>
-      <p class="max-w-3xl text-lg leading-8 text-slate-600">
-        Der Admin-Bereich ist in klar getrennte Arbeitszonen aufgeteilt, damit Season-Pflege, Review und Monitoring nicht mehr auf einer einzigen Seite kollidieren.
-      </p>
+  <div class="space-y-5 pb-10">
+    <Card class="p-3">
+      <div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+        <div class="flex min-w-0 items-center gap-3 px-2">
+          <div class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-violet-100 text-violet-700">
+            <component :is="currentNavItem.icon" class="h-5 w-5" />
+          </div>
+          <div class="min-w-0">
+            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Admin</p>
+            <h1 class="truncate text-xl font-semibold text-slate-900">{{ currentNavItem.label }}</h1>
+          </div>
+        </div>
 
-      <div class="grid gap-4 md:grid-cols-[1.1fr_0.9fr]">
-        <Card class="p-5">
-          <div class="flex items-start gap-4">
-            <div class="grid h-12 w-12 place-items-center rounded-[1.2rem] bg-violet-100 text-violet-700">
-              <component :is="currentNavItem.icon" class="h-5 w-5" />
-            </div>
-            <div>
-              <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Aktueller Bereich</p>
-              <h2 class="mt-2 font-[Cormorant_Garamond] text-3xl text-violet-800">{{ currentNavItem.label }}</h2>
-              <p class="mt-2 text-sm leading-6 text-slate-500">{{ currentNavItem.description }}</p>
-            </div>
+        <div class="grid gap-2 sm:grid-cols-3 xl:w-[420px]">
+          <div
+            v-for="item in seasonSummary"
+            :key="item.label"
+            class="rounded-lg border border-violet-100 bg-violet-50/60 px-3 py-2"
+          >
+            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">{{ item.label }}</p>
+            <strong class="mt-1 block text-lg text-violet-800">{{ item.value }}</strong>
           </div>
-        </Card>
-
-        <Card class="p-5">
-          <div class="flex items-center gap-3">
-            <Activity class="h-5 w-5 text-violet-600" />
-            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Season Snapshot</p>
-          </div>
-          <div class="mt-4 grid gap-3 sm:grid-cols-3">
-            <div
-              v-for="item in seasonSummary"
-              :key="item.label"
-              class="rounded-[20px] border border-violet-100 bg-violet-50/60 px-4 py-4"
-            >
-              <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{{ item.label }}</p>
-              <strong class="mt-2 block text-2xl text-violet-800">{{ item.value }}</strong>
-            </div>
-          </div>
-        </Card>
+        </div>
       </div>
-    </div>
+    </Card>
 
-    <div class="grid gap-6 xl:grid-cols-[280px_minmax(0,1fr)]">
-      <Card class="h-fit p-4 xl:sticky xl:top-6">
-        <nav class="space-y-2">
+    <div class="grid gap-5 xl:grid-cols-[220px_minmax(0,1fr)]">
+      <Card class="h-fit p-2 xl:sticky xl:top-4">
+        <nav class="space-y-1">
           <RouterLink
             v-for="item in navItems"
             :key="item.to"
             :to="item.to"
-            class="block rounded-[24px] border px-4 py-4 transition"
+            class="block rounded-lg border px-3 py-2.5 transition"
             :class="route.path === item.to ? 'border-violet-200 bg-violet-100/80 text-violet-900' : 'border-transparent bg-white/70 text-slate-700 hover:border-violet-100 hover:bg-violet-50/70'"
           >
-            <div class="flex items-start justify-between gap-3">
-              <div class="flex items-start gap-3">
-                <div class="mt-0.5 grid h-10 w-10 place-items-center rounded-[1rem] bg-white/80 text-violet-700">
+            <div class="flex items-center justify-between gap-2">
+              <div class="flex min-w-0 items-center gap-2">
+                <div class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-white/80 text-violet-700">
                   <component :is="item.icon" class="h-4 w-4" />
                 </div>
-                <div>
-                  <p class="text-sm font-semibold uppercase tracking-[0.18em]">{{ item.label }}</p>
-                  <p class="mt-2 text-sm leading-6 text-slate-500">{{ item.description }}</p>
+                <div class="min-w-0">
+                  <p class="truncate text-sm font-semibold">{{ item.label }}</p>
+                  <p class="truncate text-xs text-slate-500">{{ item.description }}</p>
                 </div>
               </div>
               <span
                 v-if="item.badge()"
-                class="rounded-full border border-violet-200 bg-white/90 px-3 py-1 text-[11px] font-semibold text-violet-700"
+                class="shrink-0 rounded-full border border-violet-200 bg-white/90 px-2 py-0.5 text-[11px] font-semibold text-violet-700"
               >
                 {{ item.badge() }}
               </span>
@@ -107,13 +90,10 @@ onMounted(async () => {
           </RouterLink>
         </nav>
 
-        <div class="mt-6 rounded-[24px] border border-violet-100 bg-violet-50/60 px-4 py-4">
-          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Aktive Season</p>
-          <h2 class="mt-3 font-[Cormorant_Garamond] text-3xl text-violet-800">
-            {{ currentSeason.year ? `${currentSeason.year}` : 'Keine Season' }}
-          </h2>
-          <p class="mt-2 text-sm text-slate-600">{{ currentSeason.name || 'Bitte Season auswaehlen.' }}</p>
-          <p class="mt-3 text-xs uppercase tracking-[0.2em] text-slate-500">{{ currentSeason.currentPhase || 'Kein Status' }}</p>
+        <div class="mt-3 rounded-lg border border-violet-100 bg-violet-50/60 px-3 py-3">
+          <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-violet-500">Aktive Season</p>
+          <p class="mt-1 truncate text-sm font-semibold text-violet-800">{{ currentSeason.year || 'Keine Season' }} · {{ currentSeason.currentPhase || 'Kein Status' }}</p>
+          <p class="mt-1 truncate text-xs text-slate-500">{{ currentSeason.name || 'Bitte Season auswaehlen.' }}</p>
         </div>
       </Card>