# Epic 22 — UI-Redesign Runde 2 (Patterns aus ai-coding-starter-kit-v2)

Ausgangspunkt: Subagenten-Analyse von `gitea.perlbach24.de/scripte/ai-coding-starter-kit-v2`
(2026-09-08), reines shadcn/ui-Komponenten-Skelett (Vite/React/TS, Tailwind v3, Radix,
react-hook-form+zod). Kein Framework-Wechsel, kein Neubau — Epic 20 (UI-001..008) bleibt
Grundlage, hier werden zusätzliche, im Code konkret nachgewiesene Lücken geschlossen.
**Kein kompletter Frontend-Neubau** — bewusste Entscheidung, siehe Chat 2026-09-08.

---

## UI2-001 — Granularere Design-Tokens (Card/Popover/Sidebar)

- **Ziel:** Card-/Popover-/Sidebar-Hintergründe über eigene Tokens statt generischem
  `--color-primary`/`bg-white`.
- **Beschreibung:** `--color-card`, `--color-card-foreground`, `--color-popover` etc.
  in `frontend/src/styles/global/tokens.css` ergänzen (Light+Dark), bestehende
  Komponenten schrittweise umstellen.
- **Benutzerwert:** Konsistentere Flächenhierarchie, einfacheres Dark-Mode-Feintuning.
- **Abhängigkeiten:** UI-001 (bereits erledigt)
- **Backend:** keins
- **Frontend:** `styles/global/tokens.css`
- **Rechte:** keine Änderung
- **Akzeptanzkriterien:** neue Tokens vorhanden, mind. Card-Komponente nutzt sie statt
  Hardcoded-Werten.
- **Tests:** keine (reines Styling).
- **DoD:** offen.

## UI2-002 — AdminPage Sidebar/Sheet-Umschaltung

- **Ziel:** Touch-taugliche Navigation für AdminPage-Tabs — Desktop Sidebar, Mobile
  Sheet-Overlay statt aktuellem Tab-Leisten-Umbruch.
- **Beschreibung:** Pattern aus Starter-Kit (`useIsMobile`-Hook + Radix-Dialog-Sheet),
  MABEA hat bereits `useIsDesktop` — Umschaltung analog, kein natives Drag&Drop.
- **Benutzerwert:** Bessere Bedienbarkeit auf Tablet im Feld.
- **Abhängigkeiten:** UI2-001
- **Backend:** keins
- **Frontend:** `AdminPage.tsx`, ggf. neue `components/ui/sheet.tsx`
- **Mobile:** Priorität — Zielgerät Tablet
- **Rechte:** keine Änderung
- **Akzeptanzkriterien:** AdminPage-Tabs auf schmalem Viewport über Sheet erreichbar,
  bestehende Tab-Inhalte unverändert.
- **Tests:** keine neuen (reines UI/Routing).
- **DoD:** offen.

## UI2-003 — Formular-Feld-Komposition

- **Ziel:** Wiederverwendbarer Feld-Baustein (Label+Input+Fehlermeldung) statt
  individueller State-Verdrahtung pro Feld in Formularen.
- **Beschreibung:** Leichtgewichtiges `FormField`-Pattern (kein react-hook-form/zod
  nötig, MABEA nutzt bereits einfache `useState`-Formulare — nur Layout/Fehler-
  Darstellung vereinheitlichen), zuerst in `ObjektAnlegenFormular.tsx` und
  `ObjekttypSection.tsx` angewendet.
- **Benutzerwert:** Einheitliche Fehlerdarstellung, weniger Boilerplate bei neuen
  Formularen.
- **Abhängigkeiten:** UI2-001
- **Backend:** keins
- **Frontend:** neue `components/ui/form-field.tsx`, `ObjektAnlegenFormular.tsx`,
  `ObjekttypSection.tsx` darauf umgestellt
- **Rechte:** keine Änderung
- **Akzeptanzkriterien:** beide Formulare nutzen den neuen Baustein, Verhalten
  unverändert.
- **Tests:** bestehende Vitest-Tests bleiben grün.
- **DoD:** offen.

## UI2-004 — Skeleton-Loading für Dashboard-Kacheln

- **Ziel:** Skeleton-Platzhalter statt Spinner/nichts beim Nachladen von
  Dashboard-Kacheln.
- **Beschreibung:** Einfache `animate-pulse`-Komponente (`components/ui/skeleton.tsx`),
  in Dashboard-Tiles während Ladezustand eingesetzt.
- **Benutzerwert:** Wahrgenommene Ladezeit sinkt, weniger Layout-Sprung.
- **Abhängigkeiten:** UI2-001
- **Backend:** keins
- **Frontend:** neue `components/ui/skeleton.tsx`, Dashboard-Tiles (`*Tile.tsx`)
- **Rechte:** keine Änderung
- **Akzeptanzkriterien:** sichtbarer Skeleton-Zustand vor Dateneintreffen, kein
  Layout-Sprung beim Einblenden der echten Daten.
- **Tests:** keine neuen.
- **DoD:** offen.

## UI2-005 — Scrollbarer Table-Wrapper für Materiallisten

- **Ziel:** Materiallisten/Kontroll-Tabellen brechen auf schmalem Tablet-Viewport
  nicht das Seiten-Layout, sondern scrollen innerhalb eines eigenen Containers.
- **Beschreibung:** Gemeinsamer Table-Wrapper (`overflow-x: auto`) statt Ad-hoc-Lösung
  je Seite, zuerst in `KontrollPage.tsx`-Listen angewendet.
- **Benutzerwert:** Kein horizontales Seiten-Scrollen mehr auf kleinen Screens.
- **Abhängigkeiten:** UI2-001
- **Backend:** keins
- **Frontend:** `KontrollPage.tsx` bzw. betroffene Listen-Komponenten
- **Mobile:** Priorität — Tablet-Ziel
- **Rechte:** keine Änderung
- **Akzeptanzkriterien:** Tabelle scrollt intern, Seite selbst nie horizontal.
- **Tests:** keine neuen.
- **DoD:** offen.

---

**Reihenfolge (empfohlen, nicht blockierend zwischen 002-005):** UI2-001 zuerst
(Basis für alle), danach UI2-002..005 in beliebiger Reihenfolge nach Nutzerpriorität.

**Nicht-Ziele:** kein Wechsel auf react-hook-form/zod/Radix, kein kompletter
Frontend-Neubau, keine Breaking Changes an bestehender Fachlogik/API.

## Referenzen
Subagenten-Analyse `ai-coding-starter-kit-v2`, Chat 2026-09-08 (kein Frontend-Neubau,
Patterns schrittweise als Kacheln übernehmen).