Variety Page — Rework

3 Design-Variationen · Route: /planner/variety

screen: C2
journey: J4
version: 1.0
date: 2026-04-09

Zwei Kernprobleme werden adressiert: (1) Warnungen zeigen aktuell Wochentag-Kürzel ("MON, WED") statt Rezeptnamen — rein frontend-seitig lösbar über weekPlan.slots-Mapping. (2) Es gibt keine Swap-Aktion direkt aus den Warnungen heraus. Das Protein-Score-Problem für vegetarische Haushalte ist ein Backend-Thema und separat zu behandeln.

Protein-Score: Vegetarische Haushalte — Backend TBD

Die aktuelle Formel proteinDiversity = 10 − repeats × 2 bestraft vegetarische Proteinquellen (Tofu, Linsen, Ei) stärker als in omnivoren Haushalten üblich. Frontend-seitig ändert sich das Label "Protein-Vielfalt" ggf. zu "Quellen-Vielfalt" sobald das Backend die Score-Gewichtung anpasst. Bis dahin: keine Änderung an ScoreBreakdownList.

V1 — Rezept-Pills in Warnkarten
1
Rezept-Pills in Warnkarten
Minimale Änderung an der bestehenden Seitenstruktur. Warnkarten zeigen statt "MON, WED" konkrete Rezept-Pills mit Tauschen-Button. Seitenaufbau und Score-Hero bleiben identisch.
Vertraut · Geringer Aufwand
Desktop
Planer / Abwechslungs-Analyse
6.5/10
Verbesserbar
Bewertung im Detail
Quellen-Vielfalt6/10
Zutaten-Überlappung8/10
Aufwandsbalance9/10
Hinweise
Tofu mehrfach diese Woche
MoTofu-Curry MiTofu-Bowl
Linsen in mehreren Gerichten
DiLinsen-Suppe FrLinsen-Dal
Quellen-Verteilung
Mo
TOF
Di
LIN
Mi
TOF
Do
GEM
Fr
LIN
Sa
So
Aufwandsverteilung
Einfach ×3Mittel ×2
Mobile
Abwechslungs-Analyse
6.5/10
Verbesserbar
Hinweise
Tofu mehrfach diese Woche
MoTofu-Curry MiTofu-Bowl
Linsen in mehreren Gerichten
DiLinsen-Suppe FrLinsen-Dal
📅
Planer
🍽
Rezepte
🛒
Einkauf
⚙️
Einstellungen
Notizen
  • Kein Backend-Change nötig. Frontend mappt tagRepeat.days[]weekPlan.slots.find(s => s.dayOfWeek === day)recipe.name
  • Pill-Swap-Button (↔): navigiert zu /planner?week={weekStart}&swap={slotId} — öffnet RecipePicker für den betreffenden Slot
  • Pill-Label links: Wochentag-Kürzel (Mo, Di, …) aus dayOfWeek-Mapping
  • Wenn ein Slot leer ist (Rezept wurde bereits entfernt): Pill zeigt nur den Wochentag, kein Swap-Button
  • Geringe Änderung: nur VarietyWarningCards.svelte + variety.ts anpassen; Rest der Seite bleibt
V2 — Aktions-Zeilen (Action-first)
2
Aktions-Zeilen
Warnungen stehen oben, Score-Hero wird kompakt. Pro Warnung gibt es eine vollständige Rezept-Zeile mit Wochentag und dediziertem "Tauschen"-Button. Fokus auf sofortige Handlung statt auf Metrik-Verständnis.
Empfohlen · Aktionsfokus
Desktop
Planer / Abwechslungs-Analyse
6.5/10
Verbesserbar — 2 Hinweise
Empfehlenswerte Tausche
🔄
Tofu mehrfach diese Woche
Tofu-Curry· Montag
Tofu-Bowl· Mittwoch
🔄
Linsen in mehreren Gerichten
Linsen-Suppe· Dienstag
Linsen-Dal· Freitag
Bewertung im Detail ▾
Quellen-Vielfalt6/10
Zutaten-Überlappung8/10
Aufwandsbalance9/10
Quellen-Verteilung
Mo
TOF
Di
LIN
Mi
TOF
Do
GEM
Fr
LIN
Sa
So
Mobile
Abwechslungs-Analyse
6.5/10
Verbesserbar
Empfehlenswerte Tausche
🔄 Tofu mehrfach diese Woche
Tofu-Curry Mo
Tofu-Bowl Mi
🔄 Linsen in mehreren Gerichten
Linsen-Suppe Di
Linsen-Dal Fr
📅
Planer
🍽
Rezepte
🛒
Einkauf
⚙️
Einstellungen
Notizen
  • Score-Hero wird kompakt: Zahl + Label + Balken in einer horizontal komprimierten Leiste oben
  • Sub-Scores in aufklappbarem <details>-Element — zugänglich, kein JavaScript nötig
  • Jeder "Tauschen"-Button navigiert zum Planer mit dem spezifischen Slot vorselektiert
  • Wochentag als ausgeschriebenes Wort ("Montag") — nicht Kürzel — für bessere Lesbarkeit
  • Mobile: Score-Hero bleibt kompakt oben, Action-Rows nehmen den Hauptraum ein
  • Größerer Aufwand als V1: VarietyWarningCards grundlegend neu strukturieren
V3 — Wochenraster mit Kontext-Panel
3
Wochenraster mit Kontext-Panel
Das bestehende Protein-Raster wird zum Haupt-Interface. Alle 7 Tage zeigen das vollständige Rezept. Problematische Slots sind gelb markiert — Klick öffnet das rechte Panel mit Erklärung und Swap-CTA.
Ambitiös · Meiste Übersicht
Desktop
Planer / Abwechslungs-Analyse
Abwechslung 6.5 /10
Wochenübersicht — gelb markierte Gerichte haben Hinweise
Mo
Tofu-Curry
Di
Linsen-Suppe
Mi
Tofu-Bowl
Do
Gemüse-Stir-Fry
Fr
Linsen-Dal
Sa
So
Aufwandsverteilung
Einfach ×3Mittel ×2
Quellen-Vielfalt6/10
Zutaten-Überlappung8/10
Aufwandsbalance9/10
6.5 /10
Tofu-Curry — Montag
Tofu taucht diese Woche auch am Mittwoch auf (Tofu-Bowl). Ein Tausch würde die Quellen-Vielfalt verbessern.
Andere betroffene Gerichte
Tofu-Bowl
Mittwoch
Öffnet den Rezept-Picker für Montag.
Mobile (Tab-Navigation)
Abwechslungs-Analyse6.5/10
Tofu mehrfach diese Woche
Tofu-Curry Mo
Tofu-Bowl Mi
Linsen in mehreren Gerichten
Linsen-Suppe Di
Linsen-Dal Fr
📅
Planer
🍽
Rezepte
🛒
Einkauf
⚙️
Einstellungen
Notizen
  • Wochenraster ersetzt das bisherige Protein-Grid (7 Spalten, Rezeptname statt Kürzel, größere Zellen)
  • Gelber Slot = mindestens ein Hinweis vorhanden. Klick selektiert den Slot, Panel rechts aktualisiert sich.
  • Panel zeigt: betroffenes Rezept + Wochentag + Erklärung + andere betroffene Slots + primären "Tauschen"-Button
  • Score-Zahl wandert in die Topbar-Leiste (kompakt, immer sichtbar)
  • Mobile: kein Panel — stattdessen Tab-Switcher "Übersicht | Hinweise (N)" mit aufklappbaren Einträgen
  • Größter Umbau: +page.svelte Struktur und alle beteiligten Komponenten müssen neu aufgebaut werden

Maschinen-lesbare Spezifikation

Gilt für alle drei Variationen. Implementierungs-Details werden nach Variantenwahl konkretisiert.

/* spec:rules — Variety Page Rework (alle Variationen)
 *
 * RECIPE NAME MAPPING (frontend, no backend change)
 *   Source: weekPlan.slots[] → { dayOfWeek: "MON"|"TUE"|..., recipe: { id, name } }
 *   tagRepeats[].days[] contains dayOfWeek keys (e.g. "MON")
 *   slotsByDay = Object.fromEntries(weekPlan.slots.map(s => [s.dayOfWeek, s]))
 *   recipeName = slotsByDay[day]?.recipe?.name ?? day
 *   slotId = slotsByDay[day]?.id
 *
 * SWAP NAVIGATION
 *   "Tauschen" button href: /planner?week={weekStart}&swap={slotId}
 *   weekStart available in page data
 *   slotId from weekPlan.slots mapping above
 *   Opens RecipePicker for that slot (existing functionality in planner page)
 *
 * DAY LABEL MAPPING (for display)
 *   MON → "Montag"  TUE → "Dienstag"  WED → "Mittwoch"  THU → "Donnerstag"
 *   FRI → "Freitag" SAT → "Samstag"   SUN → "Sonntag"
 *   Short: Mo, Di, Mi, Do, Fr, Sa, So
 *
 * EMPTY SLOT HANDLING
 *   If slotsByDay[day] is undefined: show day key only, no swap button
 *   This can happen if slot was deleted since varietyScore was computed
 *
 * PROTEIN SCORE — VEGETARIAN NOTE
 *   Label "Protein-Vielfalt" in ScoreBreakdownList may change to "Quellen-Vielfalt"
 *   pending backend decision on scoring weight adjustment.
 *   No frontend change required until backend ships the updated score.
 *
 * VARIATION-SPECIFIC
 *   V1: Modify VarietyWarningCards + Warning type (add slots: { day, recipeName, slotId }[])
 *       computeWarnings() now returns slots[] instead of string days[]
 *   V2: Restructure VarietyWarningCards to ActionRows; VarietyScoreHero → compact variant
 *       
for sub-scores (no JS needed) * V3: Replace protein grid with full week grid (recipe names); add side panel component * Mobile: tab switcher (Übersicht | Hinweise) using $state activeTab */
PropertyValueNotes
Shared: Recipe Mapping
data-sourceweekPlan.slots[].dayOfWeek + recipealready in page data
swap-url/planner?week={weekStart}&swap={slotId}RecipePicker pre-selects slot
day-longMON→Montag, TUE→Dienstag…for V2 display
day-shortMON→Mo, TUE→Di…for V1 pills + V3 grid
V1 Recipe Pills
pill-padding5px 10px 5px 12pxleft more for text
swap-btn-size22×22px, border-radius 50%within pill
pill-bgwhite, border --yellow-lighton yellow-tint card
V2 Action Rows
score-compact-height~64pxreplaces 180px hero
details-summarynative <details>, no JSsub-scores hidden by default
recipe-row-bg--color-subtlewithin white action card
V3 Week Grid
slot-height52px minenough for 2-line recipe name
warn-slot-ring2px solid --yellow + yellow-tint bgproblem indicator
selected-slot-ring2px solid --green-darkactive selection
panel-width280pxfixed, right side
mobile-tab-active-bg--green-darkselected tab button