# 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 ```css @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 ```css /* 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 ```diff - ``` ### 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`): - `` (19 px, bold) - Eyebrow „Publisher · Hub" darunter - **Konto-Switcher-Button** mit Avatar (Initialen), Name, Firma — als ``-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: - `` als Wrapper - `` für Section-Gruppen - `` für Einträge, `data-active`-Markierung übernimmt CSS-Override - `` für Konto-Switcher - `` für Counter Wo FluxUI nicht passt (z.B. Konto-Switcher-Header mit Avatar+Name+Firma+Chevron): **Custom Blade** in `` 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: ```diff - + ``` FluxUI Appearance-Switcher in den Settings übernimmt die Steuerung. Dark-Mode-Werte landen in Phase 5 in `design-tokens.css`. ### 6. Build & Visual-Check ```bash 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 `` 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