Improve admin navigation and local API reachability

frontend/src/views/admin/AdminSeasonsView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue'
 
+import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
 import AdminSeasonToolbar from '../../components/admin/AdminSeasonToolbar.vue'
 import Button from '../../components/ui/Button.vue'
 import Card from '../../components/ui/Card.vue'
@@ -37,6 +38,17 @@ const editForms = reactive<Record<number, {
 
 const seasonDetail = computed(() => store.adminSeasonDetail)
 const selectedSeasonId = computed(() => store.adminSelectedSeasonId)
+const categoryFilter = ref('')
+const filteredCategories = computed(() => {
+  const query = categoryFilter.value.trim().toLowerCase()
+  if (!query) return seasonDetail.value.categories
+  return seasonDetail.value.categories.filter((category) =>
+    [category.groupName, category.name, category.slug, category.description]
+      .join(' ')
+      .toLowerCase()
+      .includes(query),
+  )
+})
 
 watch(
   seasonDetail,
@@ -123,6 +135,12 @@ async function createCategory() {
 
 <template>
   <div class="space-y-6">
+    <AdminPageHeader
+      eyebrow="Seasons"
+      title="Season und Kategorien verwalten"
+      description="Hier steuerst du die aktive Phase, legst neue Kategorien an und pflegst bestehende Gruppen, Limits und Beschreibungen."
+    />
+
     <AdminSeasonToolbar />
 
     <div class="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
@@ -190,13 +208,25 @@ async function createCategory() {
           <p class="mt-2 text-sm text-slate-500">Sortierung, Slugs und Limits werden hier pro Jahr gepflegt.</p>
         </div>
         <span class="text-sm uppercase tracking-[0.2em] text-slate-500">
-          {{ seasonDetail.categories.length }} Kategorien
+          {{ filteredCategories.length }} / {{ seasonDetail.categories.length }} Kategorien
         </span>
       </div>
 
+      <div class="mt-6 grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
+        <input
+          v-model="categoryFilter"
+          type="text"
+          class="rounded-2xl border border-violet-200 px-4 py-3"
+          placeholder="Kategorien nach Name, Gruppe oder Slug filtern"
+        />
+        <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.
+        </div>
+      </div>
+
       <div class="mt-6 space-y-4">
         <div
-          v-for="category in seasonDetail.categories"
+          v-for="category in filteredCategories"
           :key="category.id"
           class="rounded-[26px] border border-violet-100 bg-white/90 p-5"
         >
@@ -223,6 +253,10 @@ async function createCategory() {
             </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>