5 Design-Variationen · Desktop-first · Routes /settings + /household/staples · Journey J8
Two pages, one journey. E1 is the settings hub at /settings — currently a placeholder. D3 is the StaplesManager component at /household/staples, rendered with context="settings". The component uses StapleChip — ingredient pills in flex-wrap grids per category, not a checklist. Five variations explore how the hub and staples editing relate: from navigating to a sub-page, to showing staples inline on the settings page itself. The recommended variation for v1 is V3 (Accordion) — one page, no navigation, staples always one tap away.
<StaplesManager categories={data.categories} context="settings" />). Keine Seiten-Navigation erforderlich.Authoritative implementation reference for /settings and /household/staples?ctx=settings. Use before building either page.
/* E1 Settings + D3 Staples — implementation rules
* 1. Recommended variation: V3 (Accordion). Vorräte section is open by default. No navigation to sub-page required.
* 2. D3 = A3: StaplesManager is the same component. context="settings" removes the onboarding sidebar and "Weiter" button.
* 3. StapleChip renders as a pill button, NOT a checkbox. Selected = --green-dark bg + white text. Unselected = transparent bg + --color-border border + --color-text-muted text.
* 4. Auto-save on toggle. No explicit save button. The component already implements debounced PATCH to /household/staples.
* 5. Category label: font-size 10px · font-weight 500 · letter-spacing 0.08em · text-transform uppercase · color --color-text-muted.
* 6. Staple count display ("14 von 32 aktiv"): derive from categories prop — count isStaple=true vs total ingredients.
* 7. Sidebar active item: "Einstellungen" (not "Vorräte" — there is no separate Vorräte sidebar item). Active style: --green-tint bg + --green-dark text.
* 8. Mobile bottom nav active tab: "Einstellungen". Same for both /settings and /household/staples routes.
* 9. Accordion trigger shows current stat in collapsed state: "14 aktiv" for Vorräte. Stat updates reactively as user toggles chips.
* 10. Changes to staples (J8) do NOT retroactively update an already-generated shopping list. If the current list should reflect changes, the planner must regenerate it via J5. Consider a note in the UI: "Gilt ab der nächsten Einkaufsliste."
* 11. Profile section: show name + email. Edit action navigates to /profile or opens an inline form. Not in scope for J8 — implement minimally.
*/
| Element | Value / Rule | Notes |
|---|---|---|
| StapleChip | ||
| Shape | border-radius: --radius-full · padding: 6px 14px | font-size: 13px (desktop) · 12px (mobile) |
| Selected state | background: --green-dark · color: #fff · font-weight: 500 | Toggle off: PATCH ingredient isStaple=false |
| Unselected state | background: transparent · border: 1px solid --color-border · color: --color-text-muted · font-weight: 400 | Toggle on: PATCH ingredient isStaple=true |
| Debounce | 300ms after last toggle before PATCH fires | Already implemented in StaplesManager. Do not add extra debounce layers. |
| Error state | Revert chip to previous state · show inline error message | StaplesManager already handles rollback on API error |
| Category section | ||
| Label | 10px · weight 500 · tracking 0.08em · uppercase · --color-text-muted | German category names from API |
| Chip grid | display: flex · flex-wrap: wrap · gap: 7px (desktop) · 6px (mobile) | No fixed column count — chips wrap naturally |
| Settings page (E1) — V3 Accordion | ||
| Vorräte section | Open by default on page load | Use Svelte derived state or URL hash to control. Default open state. |
| Collapsed stat | Show "N aktiv" reactively next to chevron | Derive from stapleState in StaplesManager — count true values |
| Accordion trigger min-height | 48px (desktop) · 44px (mobile) | WCAG: interactive controls must have 44px min touch target |
| Accordion chevron | ▲ (open) / ▼ (closed) · color: --color-text-muted | Or use CSS transform on a single chevron SVG |
| Responsive | ||
| Desktop (≥1024px) | 224px app sidebar + content area (max-width ~680px centered) | Active sidebar: "Einstellungen" (Haushalt section) |
| Mobile (<768px) | No sidebar · bottom nav "Einstellungen" active · accordion stacks full-width | Chips wrap to multiple lines — no truncation |