Iteration 2 — Lieferumfang

Der Lesepläne-Komponenten-Showcase, Android-only. Iteration 2 fügt dem in Iteration 1 etablierten Komponenten-Set fünf weitere Karten-/Hero-Komponenten hinzu, die über die leseplan-Seite der Playlist-API ausgeliefert werden. iOS und Web folgen in späteren Iterationen — die Design-System-Spezifikation ist plattform-unabhängig formuliert.

Plattform
Android (Produktion)
Aufbauend auf
Iteration 1 (Home + Burger-Menü)
Komponenten in Scope
5 (siehe unten)
Branch
086-plan-and-prep
Design-System-Referenz
design-system.html
Token-API
figma/resolved
Composition-API
/api/v1/pages/leseplan

Live-Composition-Payload (Stand jetzt)

Die leseplan-Seite der Playlist-API ist der Iteration-2-Showcase. Sie exerziert jede neue Komponente in mehreren Zuständen und Edge-Cases durch (lange/kurze Titel, mit/ohne Eyebrow, mit/ohne Footer, fehlende Bilder). Was die Payload nicht anfordert, muss in Iteration 2 nicht ausgeliefert werden.

Sektionen in dieser Reihenfolge:
  1. hero_carousel — rotiert u. a. einen image-only Poster-Hero (zwei Asset-URLs) und einen Generic-Hero (Video-Look, Link auf eine externe URL)
  2. button_group — Einzel-AI-Button "Die Bibel erkunden"
  3. button_groupMulti-Button-Gruppe (≥6 Buttons) → Overflow-Dropdown
  4. playlist_row · OVERLAY — Overlay-Karten
  5. playlist_row · SPLIT — Split-Karten
  6. playlist_row · POSTER_PORTRAIT — Poster-Karten
  7. playlist_row · IMAGE_ONLY_LANDSCAPE in SMALL / MEDIUM / LARGE
  8. playlist_row · AVATAR — Personen / Sendereihen

Komponenten in Iteration 2

voller Vertrag (alles im Design-System bauen) NEU in dieser Iteration neu spezifiziert

HeroGenericCard (generic) Voller Vertrag. Identischer Look wie die HeroVideoCard (Shell, Gradient-Scrim, Eyebrow/Titel/Beschreibung, Primary-CTA, Badge) — aber das CTA-Ziel ist eine beliebige URL (z. B. ein WhatsApp-Kanal) statt eines Videos. CTA-Icon: Pfeil-nach-rechts statt Play. http(s)-Ziele öffnen extern. Mobile (Portrait) + Tablet (Landscape).
Design System →
HeroPosterCard — image-only Hero (poster) Voller Vertrag. Bild-only Hero ohne Gradient/Text-Overlay: zwei Asset-URLs (imagePosterUrl portrait für Mobile, imageCoverUrl landscape für Tablet). Titel erscheint nur als Fallback bei fehlendem Bild (wie bei der Poster-Karte).
Design System →
CardLandscape (IMAGE_ONLY_LANDSCAPE, S / M / L) Voller Vertrag. Bild-only 16:9-Karte in drei Größen-Tiers (token-getrieben: cardImageOnly.widthSmall/Medium/Large). Optionaler Fortschrittsbalken, Fallback-Titel bei fehlendem Bild, gemeinsame Karten-Border.
Design System →
ButtonGroupSection — voller Umfang Voller Vertrag aller drei Modi: Einzel-AI-CTA (Iteration 1), Multi-Button-Chip-Reihe und Overflow → "Mehr"-Dropdown (gemessenes Overflow-Verhalten). In Iteration 1 war nur der Einzel-AI-Modus aktiv.
Design System →
CardAvatar (AVATAR) Voller Vertrag. Kreisförmiges Bild (Face-Crop) + Titel-Label darunter, Initialen-Fallback. Border teilt sich die gemeinsamen cardLandscape-Border-Tokens mit den übrigen Karten.
Design System →

Token-Architektur (Iteration 2)

Vollständige, individuelle Tokenisierung pro Komponente. In Iteration 2 wurde der Karten-Token-Bestand bereinigt, sodass jede Karte ihre eigene Typografie besitzt (statt Tokens einer anderen Karte zu „leihen"). Komponenten dürfen weiterhin dieselben semantischen/primitiven Tokens aliasen — aber als eigenes, benanntes Token, das unabhängig divergieren kann.

  1. Split-Karte: Eyebrow + Footer haben jetzt eigene cardSplit.subtitle*/metadata*-Font-Tokens (vorher cardOverlay.* geliehen) — gleiche Primitive, gleiches Rendering.
  2. Landscape- + Poster-Hero-Fallback: eigener Fallback-Titel-Font (cardLandscape.fallbackTitle* / cardHero.fallbackTitle*) statt cardSplit.
  3. Karten-Border-Radius: 16dp, aliast die semantische radius.lg über alle Karten.

Quelle der Wahrheit ist die Design-Tokens-API; die DTCG-Quelle (tokens/component/card.json) wird über den Regenerator nach tokens.json propagiert. Android-Defaults sind nur Fallback.

Explizit NICHT in Iteration 2

Komponenten, die im Code existieren oder im Design-System spezifiziert sind, aber in Iteration 2 NICHT angefordert werden:

Bekannte Implementierungs-Gaps

Punkte, die vor Iteration-2-Launch geschlossen werden müssen:

  1. Generic-Hero geht erst live, wenn die Playlist-API (Branch 072-the-detail-view) neu deployed ist — der generic-Hero-Eintrag wurde der leseplan-Assembly hinzugefügt; bis zum Coolify-Redeploy liefert die Live-API ihn noch nicht aus.
  2. Poster-Hero ingestiert die zwei Asset-URLs noch nicht — der BFF liefert imagePosterUrl (3:4, Mobile) + imageCoverUrl (16:9, Tablet), aber PosterHeroItem (PlaylistCollectionModels.kt:157) liest nur das Fallback-Feld imageUrl. Der Client muss beide Felder aufnehmen und orientierungsabhängig wählen (FR-006). Feld-Vertrag: Design System → HeroPosterCard.

Querverweise