feat(#112): Einkaufen-Modus — distraction-free shopping UI (Part 2) #340

Merged

admin-mrrm merged 1 commit from feat/112-einkaufen-modus into main

2026-05-19 19:30:27 +02:00

admin-mrrm commented

2026-05-19 19:25:45 +02:00

Owner

Summary

Neuer Einkaufen-Modus: fullscreen, große Tap-Targets, kein Edit/Add-UI; gedacht für die tatsächliche Nutzung im Laden.
Antippen einer Zeile toggelt checked. Erledigte Items rutschen nach unten (grau, durchgestrichen, sortiert nach updatedAt desc).
Fehlende Artikel (⚠) bleiben oben innerhalb der noch nicht erledigten.
Einstieg über Button „🛒 Einkaufen-Modus" auf der Shopping-List-Detail (nur sichtbar, wenn die Liste Artikel hat).
Web-Route /lists/$listId/einkaufen, Mobile-Route app/lists/[listId]/einkaufen.tsx.

Was nicht enthalten ist (Follow-ups)

Wake-Lock (kein neues expo-keep-awake in diesem Slice, web Wake Lock API ebenfalls deferred — bewusst, um die Abhängigkeitsfläche dieses Slices klein zu halten).
Kategorie-Gruppierung — separates Issue.

TDD

Pure Helper sortForShoppingMode extrahiert und mit 5 Vitest-Cases (red → green) abgedeckt: checked-to-bottom, unchecked nach position asc, checked nach updatedAt desc, missing oben unter unchecked, no-mutate.
Komponenten-Smoke-Tests sind in diesem Package noch nicht eingerichtet; folgen als eigene Infrastruktur-Aufgabe.

Test plan

Web: shopping list mit ≥1 Item öffnen → Button „🛒 Einkaufen-Modus" sichtbar.
Klick → /lists/<id>/einkaufen rendert ShoppingModeScreen.
Zeile antippen → wird grau, rutscht nach unten, Zähler oben aktualisiert sich.
„Beenden" → zurück auf Detail-Screen.
Mobile: identisches Verhalten über router.push(...einkaufen) / router.back().
Leere Liste: kein Mode-Button auf Detail; ShoppingModeScreen-Route zeigt Leertext, wenn direkt aufgerufen.

Closes #112 (Part 2).

🤖 Generated with Claude Code

## Summary - Neuer **Einkaufen-Modus**: fullscreen, große Tap-Targets, kein Edit/Add-UI; gedacht für die tatsächliche Nutzung im Laden. - Antippen einer Zeile toggelt `checked`. Erledigte Items rutschen nach unten (grau, durchgestrichen, sortiert nach `updatedAt` desc). - Fehlende Artikel (⚠) bleiben oben innerhalb der noch nicht erledigten. - Einstieg über Button **„🛒 Einkaufen-Modus"** auf der Shopping-List-Detail (nur sichtbar, wenn die Liste Artikel hat). - Web-Route `/lists/$listId/einkaufen`, Mobile-Route `app/lists/[listId]/einkaufen.tsx`. ## Was nicht enthalten ist (Follow-ups) - Wake-Lock (kein neues `expo-keep-awake` in diesem Slice, web Wake Lock API ebenfalls deferred — bewusst, um die Abhängigkeitsfläche dieses Slices klein zu halten). - Kategorie-Gruppierung — separates Issue. ## TDD - Pure Helper `sortForShoppingMode` extrahiert und mit 5 Vitest-Cases (red → green) abgedeckt: checked-to-bottom, unchecked nach position asc, checked nach updatedAt desc, missing oben unter unchecked, no-mutate. - Komponenten-Smoke-Tests sind in diesem Package noch nicht eingerichtet; folgen als eigene Infrastruktur-Aufgabe. ## Test plan - [ ] Web: shopping list mit ≥1 Item öffnen → Button „🛒 Einkaufen-Modus" sichtbar. - [ ] Klick → `/lists/<id>/einkaufen` rendert ShoppingModeScreen. - [ ] Zeile antippen → wird grau, rutscht nach unten, Zähler oben aktualisiert sich. - [ ] „Beenden" → zurück auf Detail-Screen. - [ ] Mobile: identisches Verhalten über `router.push(...einkaufen)` / `router.back()`. - [ ] Leere Liste: kein Mode-Button auf Detail; ShoppingModeScreen-Route zeigt Leertext, wenn direkt aufgerufen. Closes #112 (Part 2). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

admin-mrrm added 1 commit

2026-05-19 19:25:46 +02:00

feat(#112 ): Einkaufen-Modus — distraction-free shopping UI (Part 2)

continuous-integration/drone/push Build is passing

Details

continuous-integration/drone/pr Build is passing

Details

a35cb1de9d

Dedicated full-screen mode for use while actually shopping: large tap-targets,
tap-to-toggle, no edit/add UI. Checked items move to bottom and gray out, missing
items float to the top of unchecked items.

- New `ShoppingModeScreen` + pure `sortForShoppingMode` helper in feature-shopping-list
- Entry button "🛒 Einkaufen-Modus" on `ShoppingListScreen` (shown when list has items)
- Web route `/lists/$listId/einkaufen`; mobile route `app/lists/[listId]/einkaufen.tsx`
- Wake-lock and category grouping deferred to follow-up

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>