diff --git a/specs/frontend/e1-settings-kachel.html b/specs/frontend/e1-settings-kachel.html new file mode 100644 index 0000000..e7aea6a --- /dev/null +++ b/specs/frontend/e1-settings-kachel.html @@ -0,0 +1,700 @@ + + + + + + E1 — Einstellungen · Kachel-Ansicht · Finale Spezifikation + + + + + +
+ + +
+
+

E1 — Einstellungen

+

Kachel-Ansicht · Finale Spezifikation · Route: /settings → /household/staples?ctx=settings

+
+
+ screens: E1, D3
+ journey: J8
+ variation: Kachel (V2)
+ version: 1.0
+ date: 2026-04-09 +
+
+ +

+ Die Einstellungsseite dient als Hub mit drei Kacheln: Vorräte (primäre Aktion, navigiert zu D3), + Mitglieder (navigiert zu E2) und Profil. Die Vorräte-Kachel zeigt die aktive Zutatenanzahl als + Display-Font-Zahl. D3 verwendet die bestehende StaplesManager-Komponente mit context="settings". +

+ + +
S1 — Hub-Ansicht (E1 /settings)
+ +
+
+
S1
+
+
Einstellungs-Hub — drei Kacheln
+
Vorräte-Kachel (2fr, primär mit grünem Akzentstreifen), Mitglieder-Kachel (1fr), Profil-Kachel (1fr). Desktop 2-spaltig oben, dann 2-spaltig unten.
+
+
+ +
+
+
Desktop
+
+
+
+
+
+
Mealplan
+
Familie Raddatz
+
+
+
Plan
+ 📅Planer + 🍽Rezepte + 🛒Einkauf +
Haushalt
+ 👥Mitglieder + ⚙️Einstellungen +
+
+
+
Einstellungen
+
Familie Raddatz
+ +
+ + +
🥫
+
14
+
von 32 Zutaten als Vorrat markiert
+
Vorräte
+
Lege fest, welche Zutaten immer zu Hause sind. Sie werden beim Einkaufen automatisch herausgefiltert.
+
Vorräte bearbeiten →
+ + + +
👥
+
Mitglieder
+
3 Mitglieder
+
Haushaltsmitglieder einladen, Rollen verwalten.
+
Mitglieder verwalten →
+ +
+ +
+ + +
👤
+
Profil
+
Marcel R.
+
Name und E-Mail-Adresse anpassen.
+
Profil bearbeiten →
+ + +
Weitere Einstellungen folgen
+
+
+
+
+
+
+ +
+
Mobile
+
+
+
+
Einstellungen
+
+
+
14
+
von 32 Vorräten aktiv
+
Vorräte
+
Welche Zutaten hast du immer zu Hause?
+
Vorräte bearbeiten →
+
+
+
👥 Mitglieder
+
3 Mitglieder · Einladen & Rollen
+
Verwalten →
+
+
+
👤 Profil
+
Marcel R.
+
Bearbeiten →
+
+
+
+
📅
Planer
+
🍽
Rezepte
+
🛒
Einkauf
+
⚙️
Einstellungen
+
+
+
+
+
+
+ +
+
Notizen
+
    +
  • Vorräte-Kachel: grid-column: span 1 aber 2fr Spaltenbreite im 2-Spalten-Grid. Grüner Linksstreifen (border-left: 3px solid --green-dark).
    • +
  • Stat-Zahl: Anzahl Zutaten mit isStaple === true, aus dem gleichen Load-Call der D3-Seite
    • +
  • Mitglieder-Karte: Anzahl aus locals.haushalt oder separatem API-Call; navigiert zu /members
    • +
  • Profil-Karte: Name aus locals.benutzer.name; Zielseite /profile (noch nicht implementiert — Link disabled oder Placeholder)
    • +
  • Hover: box-shadow: --shadow-raised, leicht dunklerer Border
    • +
  • Alle Kacheln sind <a>-Tags für korrekte Navigation und Accessibility
    • +
  • Mobile: Kacheln stapeln sich vertikal in voller Breite, kein Grid
    • +
+
+
+ + +
S2 — Vorräte-Seite (D3 /household/staples?ctx=settings)
+ +
+
+
S2
+
+
D3 — Vorräte bearbeiten (StaplesManager, context="settings")
+
Navigiert man von der Vorräte-Kachel aus, erscheint die bestehende StaplesManager-Komponente mit Breadcrumb zurück zu Einstellungen.
+
+
+ +
+
+
Desktop
+
+
+
+
+
Mealplan
Familie Raddatz
+
+
Plan
+ 📅Planer + 🍽Rezepte + 🛒Einkauf +
Haushalt
+ 👥Mitglieder + ⚙️Einstellungen +
+
+
+ +
+ ← Einstellungen + / + Vorräte +
+
Vorräte
+
Markierte Zutaten werden beim Einkaufen herausgefiltert.
+ + +
+
Gewürze & Öle
+
+ Salz + Pfeffer + Olivenöl + Paprika + Kreuzkümmel + Knoblauch + Chili +
+
+
+
Grundnahrung
+
+ Reis + Nudeln + Mehl + Zucker + Linsen + Hülsenfrüchte +
+
+
+
Kühlschrank
+
+ Butter + Eier + Milch + Käse + Joghurt +
+
+
Änderungen werden automatisch gespeichert. Gilt ab der nächsten Einkaufsliste.
+
+
+
+
+
+ +
+
Mobile
+
+
+
+
+
← Einstellungen
+
Vorräte
+
+
+
+
Gewürze & Öle
+
+ Salz + Pfeffer + Olivenöl + Paprika + Knoblauch +
+
+
+
Grundnahrung
+
+ Reis + Nudeln + Mehl + Zucker +
+
+
+
+
📅
Planer
+
🍽
Rezepte
+
🛒
Einkauf
+
⚙️
Einstellungen
+
+
+
+
+
+
+ +
+
Notizen
+
    +
  • Breadcrumb "← Einstellungen" navigiert zurück zu /settings
    • +
  • "Einstellungen" bleibt in der Sidebar aktiv (kein eigener Nav-Eintrag für Vorräte)
    • +
  • StaplesManager-Komponente unverändert mit context="settings" (3-spaltig auf md+)
    • +
  • Kein Speichern-Button. Hinweistext "Änderungen werden automatisch gespeichert." unter den Chips
    • +
  • Mobile: Chips statt 3-spaltig 1-spaltig (volle Breite), Flex-Wrap bleibt bestehen
    • +
  • D3 hat eigene +page.server.ts die +page.svelte bei /household/staples gibt es bereits
    • +
+
+
+ + +
S3 — Hover-Zustand der Kacheln
+ +
+
+
S3
+
+
Kachel-Hover — visuelles Feedback
+
Alle Kacheln sind anklickbare Links. Hover hebt die Kachel visuell an.
+
+
+ +
+
+
Desktop — Vorräte-Kachel im Hover
+
+
+
+
+
Mealplan
Familie Raddatz
+
+
Haushalt
+ 👥Mitglieder + ⚙️Einstellungen +
+
+
+
Einstellungen
+
Familie Raddatz
+
+ + +
🥫
+
14
+
von 32 Zutaten als Vorrat markiert
+
Vorräte
+
Lege fest, welche Zutaten immer zu Hause sind.
+
Vorräte bearbeiten →
+ + +
👥
+
Mitglieder
+
3 Mitglieder
+
Haushaltsmitglieder einladen, Rollen verwalten.
+
Mitglieder verwalten →
+ +
+
+
👤
Profil
Marcel R.
Name und E-Mail anpassen.
Profil bearbeiten →
 +
Weitere folgen
+
+
+
+
+
+
+
+ +
+
Notizen
+
    +
  • Hover: box-shadow: --shadow-raised + border-color: #C0BFB8
    • +
  • Vorräte-Kachel behält den grünen Linksstreifen auch im Hover
    • +
  • Transition: box-shadow 150ms ease, border-color 150ms ease
    • +
  • Cursor: pointer auf allen Kacheln
    • +
  • Focus-visible: outline: 2px solid --green-dark; outline-offset: 2px
    • +
+
+
+ + +
S4 — Leerer Zustand (kein Vorrat gesetzt)
+ +
+
+
S4
+
+
Vorräte-Kachel bei 0 aktiven Vorräten
+
Wenn noch kein Vorrat gesetzt wurde, zeigt die Kachel eine Einladung zur Aktion statt der Zahl.
+
+
+ +
+
+
Desktop — 0 Vorräte
+
+
+
+
+
Mealplan
Familie Raddatz
+
+
Haushalt
+ 👥Mitglieder + ⚙️Einstellungen +
+
+
+
Einstellungen
+
Familie Raddatz
+
+ +
🥫
+ +
Noch keine Vorräte eingerichtet
+
Vorräte
+
Lege fest, welche Zutaten immer zu Hause sind. Sie werden beim Einkaufen automatisch herausgefiltert.
+
Jetzt einrichten →
+ + +
👥
+
Mitglieder
+
1 Mitglied
+
Haushaltsmitglieder einladen, Rollen verwalten.
+
Mitglieder verwalten →
+ +
+
+
👤
Profil
Marcel R.
Bearbeiten →
 +
Weitere folgen
+
+
+
+
+
+
+
+ +
+
Notizen
+
    +
  • Wenn stapleCount === 0: Stat-Zahl weglassen, stattdessen "Noch keine Vorräte eingerichtet" in muted
    • +
  • CTA-Text ändert sich: "Jetzt einrichten →" statt "Vorräte bearbeiten →"
    • +
  • Kachel navigiert weiterhin zu D3 — StaplesManager lädt immer, unabhängig vom Count
    • +
+
+
+ + +
+

Maschinen-lesbare Spezifikation

+

Diese Sektion enthält verbindliche Implementierungsregeln für den Coding-Agenten.

+ + 
+/* spec:rules — E1 Einstellungen Kachel
+ *
+ * ROUTE: /settings (E1 hub)
+ * DATA LOAD (page.server.ts):
+ *   - GET /v1/ingredient-categories to count stapleCount
+ *     stapleCount = sum of ingredients where isStaple === true
+ *   - member count available from layout data (locals.haushalt)
+ *     or fetch GET /v1/households/mine/members and count length
+ *   - profile name from locals.benutzer.name
+ *
+ * LAYOUT: E1 HUB
+ *   grid: 2 columns (2fr 1fr) top row + 2 columns (1fr 1fr) bottom row; gap 16px
+ *   mobile: single column, full-width cards, gap 12px
+ *
+ * CARD: all cards are  tags (href to target route)
+ *   border-radius: --radius-xl
+ *   border: 1px solid --color-border
+ *   bg: white
+ *   padding: 24px desktop / 16px mobile
+ *   hover: box-shadow --shadow-raised, border-color #C0BFB8
+ *   transition: box-shadow 150ms ease, border-color 150ms ease
+ *   cursor: pointer
+ *   focus-visible: outline 2px solid --green-dark, offset 2px
+ *
+ * VORRÄTE CARD (primary)
+ *   border-left: 3px solid --green-dark
+ *   stat number: font-family --font-display, font-size 36px, color --green-dark
+ *   stat label: "von {total} Zutaten als Vorrat markiert", 11px, --color-text-muted
+ *   empty state (stapleCount === 0): hide stat, show "Noch keine Vorräte eingerichtet"
+ *   cta: "Vorräte bearbeiten →" (empty: "Jetzt einrichten →")
+ *   href: /household/staples?ctx=settings
+ *
+ * MITGLIEDER CARD
+ *   meta: "{memberCount} Mitglieder"
+ *   href: /members
+ *
+ * PROFIL CARD
+ *   meta: locals.benutzer.name
+ *   href: /profile (not yet implemented — render as disabled or placeholder)
+ *
+ * ROUTE: /household/staples?ctx=settings (D3)
+ *   component: StaplesManager with context="settings" (already exists)
+ *   breadcrumb: "← Einstellungen" linking back to /settings
+ *   sidebar: "Einstellungen" stays active (no separate nav item for staples)
+ *   no save button — StaplesManager auto-saves via debounced PATCH 300ms
+ *   hint text below grid: "Änderungen werden automatisch gespeichert. Gilt ab der nächsten Einkaufsliste."
+ *   grid: 3-col on md+ (context="settings" already sets this in StaplesManager)
+ *
+ * CHIP STYLES (for reference — rendered by StapleChip, do NOT reimplement)
+ *   selected:   bg --green-dark, color white, border-color --green-dark
+ *   unselected: bg transparent, color --color-text-muted, border 1px solid --color-border
+ *   hover unselected: border-color --green-light, color --green-dark
+ *
+ * CATEGORY LABEL TYPOGRAPHY
+ *   font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase
+ *   color: --color-text-muted; margin-bottom: 10px
+ */
+
+ + + + + + + + + + + + + + + + + + + + + + + +
PropertyValueNotes
E1 Hub Layout
grid-desktop2fr 1fr / 1fr 1frtop row / bottom row
grid-mobile1frfull-width stack
gap16px desktop / 12px mobile—
Vorräte Card
stat-font--font-display, 36px, --green-darkFraunces
accent-borderborder-left: 3px solid --green-darkprimary indicator
stat-sourcecount isStaple=true from /v1/ingredient-categoriesload in page.server.ts
empty-statehide stat; show muted textwhen stapleCount === 0
href/household/staples?ctx=settingsD3 route
D3 Staples Page
componentStaplesManager context="settings"existing, do not modify
breadcrumb← Einstellungen → /settingsabove page title
active-navEinstellungen in sidebarnot a separate nav entry
save-hint"Änderungen werden automatisch gespeichert."below chip grid
debounce300ms (in StaplesManager)do not add extra debounce
+
+ +
+ + diff --git a/specs/frontend/e2-members-kachel.html b/specs/frontend/e2-members-kachel.html new file mode 100644 index 0000000..3d78901 --- /dev/null +++ b/specs/frontend/e2-members-kachel.html @@ -0,0 +1,905 @@ + + + + + + E2 — Mitglieder · Kachel-Ansicht · Finale Spezifikation + + + + + +
+ + +
+
+

E2 — Mitglieder

+

Kachel-Ansicht · Finale Spezifikation · Route: /members

+
+
+ screen: E2
+ journey: J7
+ variation: Kachel (V2)
+ version: 1.0
+ date: 2026-04-09 +
+
+ +

+ Die Mitgliederseite zeigt alle Haushaltsmitglieder als Kacheln. Der Planer kann Rollen ändern und Mitglieder + entfernen über ein Kebab-Menü auf jeder Kachel. Eine Einladekachel ermöglicht das Generieren und Kopieren des + Einlade-Links. Mitglieder sehen alle Kacheln nur lesend. +

+ +
+

Backend-Lücken — vor Implementierung schließen

+
    +
  • DELETE /v1/households/mine/members/{userId} — Mitglied entfernen
    • +
  • PATCH /v1/households/mine/members/{userId} — Rolle ändern (body: { role })
    • +
  • GET /v1/households/mine/invites — aktive Einladungen auflisten (inkl. expiresAt)
    • +
+
+ + +
S1 — Standardansicht (Planer)
+ +
+
+
S1
+
+
Standardansicht — Planer sieht vollständige Kacheln
+
Alle Mitglieder als Kacheln, dahinter die Einladekachel. Kebab-Button erscheint on hover.
+
+
+ +
+
+
Desktop
+
+
+
+
+
+
+ + Mealplan +
+
Familie Raddatz
+
+
+
Plan
+ 📅Planer + 🍽Rezepte + 🛒Einkauf +
Haushalt
+ 👥Mitglieder + ⚙️Einstellungen +
+
+
+
Mitglieder
+
3 Mitglieder · Familie Raddatz
+
+ +
+
MR
+
Marcel R.
+ Planer +
seit 02.04.2026
+
Du
+
+ +
+ +
SR
+
Sandra R.
+ Mitglied +
seit 03.04.2026
+
+ +
+ +
LR
+
Lena R.
+ Mitglied +
seit 05.04.2026
+
+ +
+
+
+
Mitglied einladen
+
+
+
+
+
+
+
+
+
Mobile
+
+
+
+
+ Mitglieder + +
+
+
+
+
MR
+
Marcel R.
+ Planer +
Du
+
+
+ +
SR
+
Sandra R.
+ Mitglied +
+
+ +
LR
+
Lena R.
+ Mitglied +
+
+
+
+
Einladen
+
+
+
+
+
📅
Planer
+
🍽
Rezepte
+
🛒
Einkauf
+
⚙️
Einstellungen
+
+
+
+
+
+
+ +
+
Notizen
+
    +
  • Eigene Kachel (Du): grüner Kartenrahmen (border: var(--green-light)), "Du"-Badge statt Kebab
    • +
  • Kebab-Button (⋯): immer im DOM, opacity:0 bis hover/focus, dann opacity:1. Auf Touch-Geräten immer sichtbar.
    • +
  • Avatar-Initialen: erste zwei Buchstaben des displayName. Planer = green-dark, Mitglied = blue
    • +
  • Kachel-Reihenfolge: eigene Kachel immer zuerst, dann joinedAt aufsteigend, Einladekachel immer zuletzt
    • +
  • Mobile: "+" Button in der Header-Zeile öffnet Einlade-Panel. Einladekachel bleibt zusätzlich im Grid.
    • +
+
+
+ + +
S2 — Kebab-Menü offen
+ +
+
+
S2
+
+
Kebab-Menü geöffnet
+
Klick auf ⋯ öffnet Dropdown mit zwei Aktionen. Klick außerhalb schließt das Menü.
+
+
+ +
+
+
Desktop — Menü offen auf "Sandra R."
+
+
+
+
+
Mealplan
Familie Raddatz
+
+
Plan
+ 📅Planer + 🍽Rezepte + 🛒Einkauf +
Haushalt
+ 👥Mitglieder + ⚙️Einstellungen +
+
+
+
Mitglieder
+
3 Mitglieder · Familie Raddatz
+
+
+
MR
+
Marcel R.
+ Planer +
seit 02.04.2026
+
Du
+
+ +
+ +
+
🔄Rolle ändern
+
+
✕Entfernen
+
+
SR
+
Sandra R.
+ Mitglied +
seit 03.04.2026
+
+
+ +
LR
+
Lena R.
+ Mitglied +
seit 05.04.2026
+
+
+
+
+
Mitglied einladen
+
+
+
+
+
+
+
+ +
+ +
+
Notizen
+
    +
  • Dropdown: position: absolute; top: 44px; right: 12px relativ zur Kachel
    • +
  • Zwei Einträge: "Rolle ändern" (neutrales Icon 🔄) und "Entfernen" (rot, Icon ✕)
    • +
  • Klick außerhalb des Dropdowns schließt diesen (click-away listener)
    • +
  • Nur ein Menü gleichzeitig offen. ESC schließt ebenfalls.
    • +
  • Mobile: Tap auf ⋯ öffnet Bottom Sheet mit denselben zwei Einträgen (44px min-height pro Eintrag)
    • +
+
+
+ + +
S3 — Rolle ändern (inline auf der Kachel)
+ +
+
+
S3
+
+
Rolle ändern — Segmented Control erscheint
+
Wahl von "Rolle ändern" ersetzt das Rolle-Badge durch einen 2-Button-Schalter [Planer | Mitglied]. Aktive Rolle vorausgewählt. Bestätigung sofort mit PATCH-Request.
+
+
+ +
+
+
Desktop — Rolle-Control auf "Sandra R." aktiv
+
+
+
+
+
Mealplan
Familie Raddatz
+
+
Haushalt
+ 👥Mitglieder + ⚙️Einstellungen +
+
+
+
Mitglieder
+
3 Mitglieder · Familie Raddatz
+
+
+
MR
+
Marcel R.
+ Planer +
seit 02.04.2026
+
Du
+
+ +
+
SR
+
Sandra R.
+ +
+ + +
+
seit 03.04.2026
+ +
+
+ +
LR
+
Lena R.
+ Mitglied +
seit 05.04.2026
+
+
+
+
+
Mitglied einladen
+
+
+
+
+
+
+
+
+ +
+
Notizen
+
    +
  • Role-Control ersetzt das Badge in-place auf der Kachel. Kein Dialog, kein Page-Change.
    • +
  • Klick auf die inaktive Rolle → optimistisches Update → PATCH /v1/households/mine/members/{userId} { role }
    • +
  • Bei Erfolg: Role-Control durch neues Badge ersetzen
    • +
  • Bei Fehler: Rollback + Toast "Rolle konnte nicht geändert werden."
    • +
  • "Abbrechen" bringt ohne PATCH-Call das Badge zurück
    • +
  • Der Planer kann seinen eigenen Planer-Status nicht abgeben, solange er der einzige Planer ist
    • +
  • Kachel bekommt blauen Rahmen (border-color: #B5D4F4) als Editier-Indikator
    • +
+
+
+ + +
S4 — Entfernen-Bestätigung (Dialog)
+ +
+
+
S4
+
+
Bestätigungsdialog "Mitglied entfernen"
+
Klick auf "Entfernen" im Dropdown öffnet einen modalen Dialog. Kein direktes Löschen ohne Bestätigung.
+
+
+ +
+
+
Desktop — Dialog über der Seite
+
+
+
+
+
Mealplan
Familie Raddatz
+
+
Haushalt
+ 👥Mitglieder +
+
+
+
Mitglieder
+
+
MR
Marcel R.
Planer
+
SR
Sandra R.
Mitglied
+
LR
Lena R.
Mitglied
+
+
Mitglied einladen
+
+
+ +
+
+
Mitglied entfernen?
+
Sandra R. wird aus dem Haushalt entfernt und verliert sofort den Zugang zu allen Plänen und Rezepten.
+
+ + +
+
+
+
+
+
+
+
+
Mobile
+
+
+
+
Mitglieder
+
+
+
MR
Marcel R.
Planer
+
SR
Sandra R.
Mitglied
+
+
+ +
+
+
Mitglied entfernen?
+
Sandra R. wird aus dem Haushalt entfernt.
+
+ + +
+
+
+
+
+
+
+
+ +
+
Notizen
+
    +
  • Dialog zeigt den displayName des Mitglieds explizit
    • +
  • Bestätigung → DELETE /v1/households/mine/members/{userId} → Kachel aus Grid entfernen
    • +
  • Planer kann sich nicht selbst entfernen (eigene Kachel hat kein Kebab-Menü)
    • +
  • Letzter verbleibender Planer kann nicht entfernt werden → Fehlermeldung im Dialog
    • +
  • Mobile: Dialog als Bottom Sheet (border-radius nur oben, kein max-width)
    • +
  • Hintergrund leicht gedimmt: rgba(28,28,24,.45), Klick außerhalb schließt nicht (explizite Bestätigung erforderlich)
    • +
+
+
+ + +
S5 — Einladekachel: Einlade-Panel
+ +
+
+
S5
+
+
Einlade-Panel — nach Klick auf die Einladekachel
+
Kachel expandiert zum Panel unterhalb der Grid-Reihe. Zeigt generierten Link + Ablaufdatum + Regenerieren-Option.
+
+
+ +
+
+
Desktop
+
+
+
+
+
Mealplan
Familie Raddatz
+
+
Haushalt
+ 👥Mitglieder + ⚙️Einstellungen +
+
+
+
Mitglieder
+
3 Mitglieder · Familie Raddatz
+
+
MR
Marcel R.
Planer
seit 02.04.2026
Du
+
SR
Sandra R.
Mitglied
seit 03.04.2026
+
LR
Lena R.
Mitglied
seit 05.04.2026
+
+
+
+
Mitglied einladen
+
+
+ +
+
Einladelink teilen
+
Wer diesen Link öffnet, kann dem Haushalt als Mitglied beitreten.
+
+
https://mealplan.app/join/X4K9-RZMQ
+ +
+
Läuft ab: 12.04.2026
+ +
+
+
+
+
+
+
+ +
+
Notizen
+
    +
  • Klick auf Einladekachel → POST /v1/households/mine/invites (falls kein aktiver Code vorhanden) oder GET /v1/households/mine/invites
    • +
  • Invite-Panel erscheint unterhalb der Grid-Reihe (kein Modal, kein Page-Change)
    • +
  • "Kopieren" → navigator.clipboard.writeText(shareUrl) → Button zeigt kurz "Kopiert ✓"
    • +
  • "Neuen Link generieren" → POST /v1/households/mine/invites → alten Code invalidieren → neuen Code anzeigen
    • +
  • Ablaufdatum expiresAt in gelbem Badge wenn ≤ 24h verbleibend
    • +
  • Nur Planer sehen den Einlade-CTA. Mitglied sieht keine Einladekachel.
    • +
+
+
+ + +
S6 — Mitglied-Perspektive (read-only)
+ +
+
+
S6
+
+
Ansicht als Haushaltsmitglied (rolle = mitglied)
+
Mitglieder sehen die Kacheln ohne Kebab-Menü und ohne Einladekachel.
+
+
+ +
+
+
Desktop — Mitglied-Perspektive
+
+
+
+
+
Mealplan
Familie Raddatz
+
+
Plan
+ 📅Planer + 🍽Rezepte + 🛒Einkauf +
Haushalt
+ 👥Mitglieder + ⚙️Einstellungen +
+
+
+
Mitglieder
+
3 Mitglieder · Familie Raddatz
+
+
+
SR
+
Sandra R.
+ Mitglied +
seit 03.04.2026
+
Du
+
+
+
MR
+
Marcel R.
+ Planer +
seit 02.04.2026
+
+
+
LR
+
Lena R.
+ Mitglied +
seit 05.04.2026
+
+ +
+
+
+
+
+
+
+ +
+
Notizen
+
    +
  • Mitglied sieht keine Einladekachel und keine Kebab-Buttons auf anderen Kacheln
    • +
  • Eigene Kachel zeigt "Du"-Badge (grüner Rahmen), aber kein Kebab
    • +
  • Grid passt sich an: bei 3 Kacheln → grid-template-columns: repeat(3, 1fr) (kein leerer Slot für Einladen)
    • +
  • Server-seitige Prüfung: Aktionen (DELETE, PATCH) geben 403 für nicht-Planer zurück
    • +
+
+
+ + + + +
+

Maschinen-lesbare Spezifikation

+

Diese Sektion enthält verbindliche Implementierungsregeln für den Coding-Agenten.

+ + 
+/* spec:rules — E2 Mitglieder Kachel
+ *
+ * LAYOUT
+ *   grid: repeat(4, 1fr) gap 16px desktop; repeat(2, 1fr) gap 12px mobile
+ *   card: bg white, border 1px solid --color-border, border-radius --radius-xl
+ *   card padding: 24px 20px 20px desktop; 16px mobile
+ *
+ * AVATAR
+ *   size: 56px desktop / 44px mobile; border-radius 50%
+ *   initials: first two chars of displayName, uppercase
+ *   planer color: --green-dark (#2E6E39)
+ *   mitglied color: --blue (#185FA5)
+ *
+ * ROLE BADGE
+ *   planer:  bg --green-tint, color --green-dark
+ *   mitglied: bg --blue-tint,  color --blue-dark
+ *   font-size 10px, font-weight 500, padding 2px 8px, border-radius --radius-full
+ *
+ * OWN CARD (benutzer.id === member.userId)
+ *   border-color: --green-light
+ *   show "Du" badge below join-date
+ *   hide kebab button entirely
+ *
+ * KEBAB BUTTON
+ *   position absolute, top 12px, right 12px
+ *   opacity 0 by default; 1 on card:hover, card:focus-within, touch devices always 1
+ *   opens dropdown: [Rolle ändern, divider, Entfernen(danger)]
+ *   click-away closes; ESC closes
+ *
+ * ROLE CHANGE (S3)
+ *   replaces badge in-place with segmented control [Planer | Mitglied]
+ *   active button: bg --green-dark, color white
+ *   inactive button: bg white, color --color-text-muted
+ *   on select: PATCH /v1/households/mine/members/{userId} body { role }
+ *   optimistic update; on error: rollback + toast
+ *   Abbrechen link below control: reverts to badge without API call
+ *   guard: planer cannot demote self if sole planer
+ *
+ * REMOVE CONFIRM (S4)
+ *   modal dialog, backdrop rgba(28,28,24,.45), backdrop does NOT close on click
+ *   shows member displayName in body text
+ *   confirm → DELETE /v1/households/mine/members/{userId}
+ *   on success: remove card from grid with fade-out
+ *   mobile: bottom-sheet (border-radius top only)
+ *
+ * INVITE (S5)
+ *   invite card always last in grid, only visible to planer
+ *   click → POST /v1/households/mine/invites OR GET /v1/households/mine/invites
+ *   panel below grid (not modal)
+ *   copy: navigator.clipboard.writeText(shareUrl) → button text "Kopiert ✓" for 2s
+ *   regenerate: POST new invite → invalidate old
+ *   expiresAt badge yellow if ≤ 24h remaining
+ *
+ * MEMBER VIEW (S6)
+ *   rolle === 'mitglied': hide all kebab buttons, hide invite card
+ *   grid auto-adjusts columns (no empty slot)
+ *
+ * CARD ORDER
+ *   1. own card (benutzer.id === userId)
+ *   2. other members sorted by joinedAt ASC
+ *   3. invite card (planer only)
+ *
+ * BACKEND GAPS (must exist before page ships)
+ *   DELETE /v1/households/mine/members/{userId}
+ *   PATCH  /v1/households/mine/members/{userId}  body: { role: "planer"|"mitglied" }
+ *   GET    /v1/households/mine/invites
+ */
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyValueNotes
Component: MemberCard
card-width1fr (grid)4-col desktop, 2-col mobile
card-min-height180pxdesktop; auto mobile
avatar-size56px / 44pxdesktop / mobile
avatar-radius50%full circle
kebab-target44×44pxWCAG 2.2 minimum touch target
dropdown-min-width160pxright-aligned to kebab
Role Control
control-height32pxsegmented, full card width
active-bg--green-darkselected role button
api-endpointPATCH /v1/households/mine/members/{userId}body: { role }
Remove Dialog
confirm-btn-bg--color-error (#DC4C3E)danger action
api-endpointDELETE /v1/households/mine/members/{userId}—
backdroprgba(28,28,24,.45)click-outside does NOT close
Invite
api-createPOST /v1/households/mine/invitesreturns InviteResponse
api-listGET /v1/households/mine/invitesbackend gap
copy-feedback"Kopiert ✓" for 2000msthen revert to "Kopieren"
+
+ +
+ +