5.4 (Teil 1): <x-portal.page-header> + categories/create umgestellt

Erste Seiten-Struktur-Component fuer das Admin-Backend: buendelt den 35-fach
kopierten page-header-Block (Hub-Badge + Eyebrow + H1 + Beschreibung, dazu
Slots :meta und :actions fuer die variablen Teile). Muster wie <x-portal.
stat-card>.

Bewusst nur EINE Seite (categories/create) umgestellt, damit die Optik
einzeln im Browser gegengeprueft werden kann, bevor die restlichen 34 Header
folgen. AdminCategoryManagement-Tests gruen.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

resources/views/components/portal/page-header.blade.php

@@ -0,0 +1,51 @@
+@props([
+    /** Seitentitel (H1). Bereits übersetzt übergeben: :title="__('…')" */
+    'title' => '',
+
+    /** Eyebrow-Text rechts neben dem Hub-Badge, z. B. "Administration · Kategorien" */
+    'eyebrow' => '',
+
+    /** Label des Hub-Badges links oben (Standard: Admin Backend) */
+    'badge' => 'Admin Backend',
+
+    /** Optionaler Beschreibungstext unter dem Titel */
+    'description' => '',
+])
+
+{{--
+    Einheitlicher Seitenkopf des Admin-Backends. Ersetzt den 35-fach kopierten
+    page-header-Block. Variable Teile über Slots:
+      <x-slot:meta>    – zusätzliche Badges hinter dem Eyebrow (ID, Zähler …)
+      <x-slot:actions> – Buttons rechts (Zurück, Speichern …)
+--}}
+<header {{ $attributes->class('page-header') }}>
+    <div class="min-w-0">
+        <div class="flex items-center gap-3 mb-3 flex-wrap">
+            @if (filled($badge))
+                <span class="badge hub dot">{{ $badge }}</span>
+            @endif
+
+            @if (filled($eyebrow))
+                <span class="eyebrow muted">{{ $eyebrow }}</span>
+            @endif
+
+            {{ $meta ?? '' }}
+        </div>
+
+        <h1 class="text-[30px] font-bold tracking-[-0.6px] leading-[1.15] m-0 text-[color:var(--color-ink)]">
+            {{ $title }}
+        </h1>
+
+        @if (filled($description))
+            <p class="text-[13px] leading-[1.55] mt-2 m-0 max-w-[640px] text-[color:var(--color-ink-2)]">
+                {{ $description }}
+            </p>
+        @endif
+    </div>
+
+    @isset($actions)
+        <div class="flex items-center gap-2 flex-shrink-0">
+            {{ $actions }}
+        </div>
+    @endisset
+</header>

resources/views/livewire/admin/categories/create.blade.php

@@ -108,26 +108,18 @@ new #[Layout('components.layouts.app'), Title('Kategorie anlegen')] class extend
 
 <div class="space-y-8">
     {{-- ============== PAGE HEADER ============== --}}
-    <header class="page-header">
-        <div class="min-w-0">
-            <div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
-                <span class="badge hub dot">{{ __('Admin Backend') }}</span>
-                <span class="eyebrow muted">{{ __('Administration · Kategorien') }}</span>
-            </div>
-            <h1 class="text-[30px] font-bold tracking-[-0.6px] leading-[1.15] m-0 text-[color:var(--color-ink)]">
-                {{ __('Kategorie anlegen') }}
-            </h1>
-            <p class="text-[13px] leading-[1.55] mt-2 m-0 max-w-[640px] text-[color:var(--color-ink-2)]">
-                {{ __('Neue Themen-Kategorie mit deutscher und englischer Übersetzung.') }}
-            </p>
-        </div>
-
-        <div class="flex items-center gap-2 flex-shrink-0">
+    <x-portal.page-header
+        :badge="__('Admin Backend')"
+        :eyebrow="__('Administration · Kategorien')"
+        :title="__('Kategorie anlegen')"
+        :description="__('Neue Themen-Kategorie mit deutscher und englischer Übersetzung.')"
+    >
+        <x-slot:actions>
             <flux:button variant="filled" icon="arrow-left" :href="route('admin.categories.index')" wire:navigate>
                 {{ __('Zurück') }}
             </flux:button>
-        </div>
-    </header>
+        </x-slot:actions>
+    </x-portal.page-header>
 
     @if (session('success'))
         <div class="px-4 py-3 rounded-[5px] border text-[12.5px] flex items-center gap-2