Kevin Adametz
0a3e52d603
Umbenennung presseportale → pressekonto in Domains, Themes und Dokumentation. Design-Tokens, Portal-Shell, Customer-Dashboard, Auth- und Admin-PM-Views. Artisan-Befehl migrate:legacy-media mit Tests und Hub-Flux-Entwicklungsdocs. Co-authored-by: Cursor <cursoragent@cursor.com>
290 lines
11 KiB
Markdown
290 lines
11 KiB
Markdown
# 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
|
|
- <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:
|
|
|
|
```diff
|
|
- <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
|
|
|
|
```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 `<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
|