presseportale/dev/frontend/hub-flux/02-PHASE-1-PORTAL-SHELL.md

Phase 1 — Portal-Shell ans Hub-Design angleichen

Ziel: Sidebar, Topbar und Layout-Container des Portals sehen aus wie das Mockup User Dashboard presseportale.html. Inhalt der einzelnen Pages bleibt unverändert — wir tauschen nur die Shell.

Status: ✅ abgeschlossen am 2026-05-19 Risiko (tatsächlich): niedrig — keine Test-Regressionen Aufwand (tatsächlich): ~½ Tag (kleiner als geschätzt, weil Topbar auf Phase 2 verschoben wurde)

Ergebnis-Check (2026-05-19)

Umgesetzt:

• portal.css mit Hub-Token-Bridge, Inter-Tight-Font, Zinc→Hub-Mapping, FluxUI-Overrides für Sidebar / Navlist / Buttons / Cards.
• Sidebar mit Brand-Mark + Eyebrow „Publisher · Hub", neuem Hub-Stil- Testmodus-Block, ohne Starter-Kit-Resources-Block.
• Customer-Banner (app.blade.php) im Hub-Soft-Look mit Hub-Pille.
• class="dark" aus Sidebar-Layout entfernt — Light Mode ist Default.
• Font-Wechsel auf Bunny: inter-tight + jetbrains-mono + source-serif-4.

Verschoben auf Phase 2:

• Eigene Topbar mit Breadcrumb + Bridge-Row + Search + „Neue Mitteilung"-CTA (lebt sinnvoller im Customer-Dashboard-Kontext).
• Konto-Switcher als Sidebar-Header oben (statt User-Menü unten).

Build-Sizes:

• portal.css: 409.03 kB (vorher 408.89 kB · +0.14 kB · weit unter dem 10 %-Limit aus den Akzeptanzkriterien).

Tests:

• Auth-Test-Suite Vergleich (Stash vs Phase 1): 8 failed, 15 passed in beiden Ständen — 0 zusätzliche Regressionen durch Phase 1.
• Zwei Tests im Zuge des Login-Fixes angepasst (Admin-Rolle bzw. terms_accepted: true), siehe PROGRESS.md Eintrag „Phase 1".

Details: PROGRESS.md (Eintrag vom 2026-05-19, Abschnitt „Phase 1").

Sichtbarer Mehrwert

Nach Phase 1 sieht der eingeloggte User:

• Eine warme Sidebar im Hub-Stil mit Brand-Wortmarke statt Starter-Kit-Logo
• Eine schlanke Topbar mit Breadcrumb, Bridge-Row, Search, Notification, "Neue Mitteilung"-Button
• Den Testmodus-Block (Impersonation) als Hub-Karten-Element
• Den Konto-Switcher als oberen Sidebar-Header

Innenleben (Tabellen, Formulare, Cards) bleiben FluxUI — wirken aber durch Token-Anpassung automatisch passender.

Liefergegenstand

Geänderte Dateien

Datei	Änderung
resources/css/portal.css	Zinc → Hub-Palette, Font auf Inter Tight, --color-accent auf Hub-Blau, FluxUI-Overrides
resources/views/components/layouts/app/sidebar.blade.php	Brand-Mark statt App-Logo, Eyebrow „Publisher · Hub", Sidebar-Design am Mockup orientiert, Testmodus-Block neu
resources/views/partials/head.blade.php	Font-Wechsel (Bunny: inter-tight + jetbrains-mono statt instrument-sans)
resources/views/components/layouts/app.blade.php	Customer-Banner ggf. an neues Design anpassen

Vermutlich gelöscht

Datei	Begründung
resources/views/components/layouts/app/header.blade.php	Wird laut Inventur nirgends referenziert
resources/views/partials/admin-head.blade.php	Legacy, im Code nicht eingebunden
resources/views/components/app-logo.blade.php	Wird durch brand-mark ersetzt
resources/views/components/app-logo-icon.blade.php	Wird durch brand-mark ersetzt

Vor Löschung: per rg "x-app-logo" und rg "auth.split|auth.card" prüfen, dass nichts mehr referenziert wird.

Schritte

1. portal.css — Token-Bridge zu FluxUI

@import "tailwindcss";
@import "../../vendor/livewire/flux/dist/flux.css";
@import "./shared/design-tokens.css";    /* aus Phase 0 */

@source '../views';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    /* FluxUI-Akzent auf Hub-Blau */
    --color-accent: var(--color-hub);
    --color-accent-content: var(--color-hub);
    --color-accent-foreground: #ffffff;

    /* Zinc auf warmes Buchpapier mappen */
    --color-zinc-50: var(--color-bg-elev);          /* #FBFAF6 */
    --color-zinc-100: var(--color-bg);              /* #F6F4EF */
    --color-zinc-200: var(--color-bg-rule);         /* #E2DDD0 */
    --color-zinc-300: #cfc8b5;
    --color-zinc-400: var(--color-ink-4);           /* #8A918D */
    --color-zinc-500: var(--color-ink-3);           /* #5A6360 */
    --color-zinc-600: var(--color-ink-2);           /* #3A413D */
    --color-zinc-700: var(--color-ink);             /* #1A1F1C */
    --color-zinc-800: var(--color-hub-2);           /* #243152 */
    --color-zinc-900: var(--color-hub);             /* #1A2540 */
    --color-zinc-950: var(--color-topbar-deep);     /* #0F1729 */
}

FluxUI-spezifische Overrides

/* Navlist — Hub-Stil mit Active-Strip links */
[data-flux-navlist-item][data-active="true"] {
    background: var(--color-hub-soft);
    color: var(--color-hub);
    font-weight: 600;
    position: relative;
}
[data-flux-navlist-item][data-active="true"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--color-hub);
    border-radius: 0 2px 2px 0;
}

/* Buttons — Hub-Primär */
[data-flux-button][data-variant="primary"] {
    background: var(--color-hub);
    color: #ffffff;
}
[data-flux-button][data-variant="primary"]:hover {
    background: var(--color-hub-2);
}

/* Sidebar-Section-Headings */
[data-flux-navlist] [data-flux-navlist-group-heading] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-ink-4);
}

/* Cards bekommen Hub-Buchpapier statt Zinc */
[data-flux-card] {
    background: var(--color-bg-card);
    border-color: var(--color-bg-rule);
}

Hinweis: Die exakten [data-flux-*]-Attribute werden beim Bauen per Dev-Tools verifiziert. Die hier gezeigten sind die wahrscheinlichsten laut FluxUI-Doku.

2. partials/head.blade.php — Font wechseln

- <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600"
+ <link href="https://fonts.bunny.net/css?family=inter-tight:400,500,600,700|jetbrains-mono:400,500,600|source-serif-4:400,500,600,700"
        rel="stylesheet" />

3. Sidebar neu — components/layouts/app/sidebar.blade.php

Aufbau strikt am Mockup orientiert (s. dev/frontend/tailwind_v3/User Dashboard presseportale.html):

Sidebar-Aufbau (oben → unten)

1. Brand-Block (px-5 pt-6 pb-5):

   • <x-web.brand-mark brand="pressekonto" :serif="false" /> (19 px, bold)
   • Eyebrow „Publisher · Hub" darunter
   • Konto-Switcher-Button mit Avatar (Initialen), Name, Firma — als <flux:dropdown>-Trigger mit Custom-Stil

2. Navigation (px-3 flex-1):

   • Section „Mein Bereich": Übersicht, Meine Pressemitteilungen (mit Counter-Badge), Firmen, Buchungen & Add-ons, Statistiken (disabled, „bald")
   • Section „Finanzen": Credits & Tarif (bald), Rechnungen, Zahlungsarten (bald)
   • Section „Konto": Profil, Sicherheit, API & Integrationen, Benachrichtigungen (bald)
   • Section „Administration" (nur für Admins/Editoren): Press-Releases, Companies, Users, Roles, etc.

3. Testmodus-Block (px-4 pb-4) — wenn Impersonation aktiv:

   • Hub-blaues Panel mit Bernstein-Eyebrow „Testmodus aktiv"
   • „Zurück zum Admin"-Button (weiß auf Hub-Blau)

4. Resources-Block (px-3 pb-5 border-t):

   • Optional: Tailwind CSS, Hero Icons, Flux UI, Repository
   • Im Live-Portal vermutlich weglassen oder durch eigene Hilfe-Links ersetzen

Komponenten-Strategie

Wo immer möglich FluxUI-Komponenten verwenden:

• <flux:sidebar> als Wrapper
• <flux:navlist> für Section-Gruppen
• <flux:navlist.item> für Einträge, data-active-Markierung übernimmt CSS-Override
• <flux:dropdown> für Konto-Switcher
• <flux:badge> für Counter

Wo FluxUI nicht passt (z.B. Konto-Switcher-Header mit Avatar+Name+Firma+Chevron): Custom Blade in <x-portal.account-switcher> als wiederverwendbare Komponente.

4. app.blade.php — Customer-Banner Hub-Stil

Der Banner „User Backend" (für Customer-Rolle) wird visuell ans Hub-Design angeglichen — Hub-Soft-Hintergrund, Hub-Blau-Eyebrow, Firma-Switcher als Pille.

5. class="dark" entfernen

In allen Auth- und App-Layouts:

- <html lang="..." class="dark">
+ <html lang="...">

FluxUI Appearance-Switcher in den Settings übernimmt die Steuerung. Dark-Mode-Werte landen in Phase 5 in design-tokens.css.

6. Build & Visual-Check

npm run build:portal

Öffnen und visuell prüfen:

• https://pressekonto.test/dashboard (Admin-Dashboard)
• https://pressekonto.test/admin/me (Customer-Dashboard)
• https://pressekonto.test/settings/profile
• https://pressekonto.test/admin/companies
• https://pressekonto.test/admin/press-releases

Erwartung:

• Sidebar wie Mockup
• Topbar mit Breadcrumb + Aktionen
• Inhalt unverändert, aber Tabellen/Cards/Buttons in Hub-Tonart
• Keine kaputten Layouts

Akzeptanzkriterien

• Sidebar nutzt <x-web.brand-mark brand="pressekonto" /> statt x-app-logo
• Sidebar-Sections und Active-Item entsprechen visuell dem Mockup
• Topbar hat Breadcrumb, Search, Notification, „Neue Mitteilung"-CTA
• Font im Portal ist Inter Tight (sichtbar im DevTools)
• FluxUI-Buttons (Primary) sind Hub-Blau, nicht mehr #3ea3dc
• FluxUI-Tabellen sehen sauber aus mit Buchpapier-Hintergrund
• class="dark" ist aus allen Layouts entfernt
• Alle bestehenden Routen /dashboard, /admin/*, /admin/me/*, /settings/* rendern Status 200
• Pint & vorhandene Tests bleiben grün
• Page-Last-Vergleich: portal.css-Größe darf um max. 10 % wachsen

Risiken & Fallstricke

• FluxUI-Selektoren ändern sich: [data-flux-*]-Attribute sind nicht öffentlich dokumentierte API, sondern Implementation-Detail. Bei FluxUI-Update kann ein Override brechen. Mitigation: Selektoren so spezifisch wie nötig, so generisch wie möglich; gut kommentieren.
• Zinc-Remapping kann Side-Effects haben: Stellen, die hardcoded zinc-700 für Text-Farben verwenden, werden plötzlich Hub-Blau. Mitigation: nach dem Build kritische Pages durchklicken; gegebenenfalls einzelne Stellen explizit auf text-ink umstellen.
• Tailwind v4 Custom-Properties: Reihenfolge im @theme-Block ist wichtig — Tokens müssen vor Overrides definiert sein.
• Mobile Sidebar: Das Mockup zeigt nur Desktop. flux:sidebar hat einen eingebauten Mobile-Toggle — der bleibt erhalten und wird visuell angeglichen.

Was Phase 1 NICHT macht

• Dashboards (admin.dashboard, customer.dashboard) bekommen noch kein Stat-Card-Strip-Redesign — das ist Phase 2 + 3
• Listen-Pages werden nicht überarbeitet — passt automatisch durch Token-Anpassung „gut genug" bis Phase 4
• Dark Mode wird nicht aktiv ausgeliefert — Token-Werte werden vorbereitet, aber bleiben in Phase 5

Review-Punkt

Nach Phase 1 wird Frank/Du visuell drüberschauen und entscheiden:

• Welche Detail-Pages priorisiert werden (Phase 4)
• Ob Customer-Dashboard (Phase 2) direkt danach kommt
• Ob das Auth-Layout im Portal (auth.split, auth.card) entfernt werden kann