Einheitliche Mengen-Darstellung (Präfix, Farbe, Größe) für Einkaufsliste & Speisekammer #175

Closed
opened 2026-09-07 10:06:27 +02:00 by lena · 3 comments
Collaborator

Story: Einheitliche Mengen-Darstellung für Einkaufsliste & Speisekammer

As a Nutzer, der beide Listentypen parallel nutzt,
I want to die Mengenangabe an derselben Stelle, in derselben Farbe und Größe sehen,
so that sich beide Listentypen gleich anfühlen und die Menge nicht wie eine untergeordnete Nebeninfo wirkt.

Kontext (verifiziert im Code):

  • ShoppingProductItem.tsx: Menge wird bereits als Präfix vor dem Produktnamen angezeigt, aber mit className="shrink-0 text-muted-foreground" — also gedimmt/grau statt in normaler Textfarbe.
  • PantryProductItem.tsx: Menge wird als Zähler (className="w-6 text-center text-sm tabular-nums") zwischen den +/- Check-in/Check-out-Buttons angezeigt, nicht als Präfix vor dem Namen. Farbe ist bereits normal (kein text-muted-foreground), aber die Position/Struktur unterscheidet sich komplett von der Einkaufsliste.
  • Entscheidung mit dem Menschen (2026-09-07): Speisekammer wird auf die Präfix-Position der Einkaufsliste umgestellt; die +/- Buttons entfallen dabei.

Acceptance criteria:

  • Einkaufsliste: Die Mengen-Präfix-Farbe wechselt von text-muted-foreground auf die normale Textfarbe des Produktnamens.
  • Speisekammer: Die Menge wird als Präfix vor dem Produktnamen angezeigt (gleiche Position wie Einkaufsliste), in derselben Farbe und Schriftgröße wie der Produktname — nicht mehr als separater Zähler zwischen zwei Buttons.
  • Die bestehenden +/- Check-in/Check-out-Buttons (checkInAria/checkOutAria) entfallen aus der Zeilen-Darstellung.
  • Nach dem Entfernen der +/- Buttons gibt es weiterhin einen schnellen Weg, die Menge direkt aus der normalen Speisekammer-Listenansicht zu ändern (z. B. Klick auf die Menge öffnet einen Dialog/Popover, analog zur Einkaufsliste) — ersatzloses Streichen ohne alternative Bedienung ist nicht Ziel dieser Story, da schnelles Anpassen der Speisekammer-Menge ein Kernanwendungsfall ist.
  • Barcode-Scan (Kamera, Hardware-Scan-Station, #171) bleibt als Weg zum Ändern der Menge unverändert nutzbar — betrifft nur die manuelle Bedienung direkt in der Listenzeile.

Out of scope for this story:

  • Änderungen an der Kamera-Scan- oder Hardware-Scan-Station-Logik selbst.
  • Die "Zielmenge festlegen"-Funktion (SetPantryProductTargetQuantityCommand) bleibt unverändert erreichbar, nur nicht mehr über die wegfallenden +/- Buttons.

Open questions: (escalate to human if unanswered)

  • Konkrete Interaktion für den Ersatz der +/- Buttons (Dialog beim Antippen der Menge? Ein kleines Stepper-Popover? Swipe-Aktion?) — Frontend-Engineer-Entscheidung, aber bitte AC oben (schneller Weg muss erhalten bleiben) beachten.
## Story: Einheitliche Mengen-Darstellung für Einkaufsliste & Speisekammer **As a** Nutzer, der beide Listentypen parallel nutzt, **I want to** die Mengenangabe an derselben Stelle, in derselben Farbe und Größe sehen, **so that** sich beide Listentypen gleich anfühlen und die Menge nicht wie eine untergeordnete Nebeninfo wirkt. **Kontext (verifiziert im Code):** - `ShoppingProductItem.tsx`: Menge wird bereits als Präfix vor dem Produktnamen angezeigt, aber mit `className="shrink-0 text-muted-foreground"` — also gedimmt/grau statt in normaler Textfarbe. - `PantryProductItem.tsx`: Menge wird als Zähler (`className="w-6 text-center text-sm tabular-nums"`) zwischen den +/- Check-in/Check-out-Buttons angezeigt, nicht als Präfix vor dem Namen. Farbe ist bereits normal (kein `text-muted-foreground`), aber die Position/Struktur unterscheidet sich komplett von der Einkaufsliste. - Entscheidung mit dem Menschen (2026-09-07): Speisekammer wird auf die Präfix-Position der Einkaufsliste umgestellt; die +/- Buttons entfallen dabei. **Acceptance criteria:** - [ ] Einkaufsliste: Die Mengen-Präfix-Farbe wechselt von `text-muted-foreground` auf die normale Textfarbe des Produktnamens. - [ ] Speisekammer: Die Menge wird als Präfix vor dem Produktnamen angezeigt (gleiche Position wie Einkaufsliste), in derselben Farbe und Schriftgröße wie der Produktname — nicht mehr als separater Zähler zwischen zwei Buttons. - [ ] Die bestehenden +/- Check-in/Check-out-Buttons (`checkInAria`/`checkOutAria`) entfallen aus der Zeilen-Darstellung. - [ ] Nach dem Entfernen der +/- Buttons gibt es weiterhin einen schnellen Weg, die Menge direkt aus der normalen Speisekammer-Listenansicht zu ändern (z. B. Klick auf die Menge öffnet einen Dialog/Popover, analog zur Einkaufsliste) — ersatzloses Streichen ohne alternative Bedienung ist nicht Ziel dieser Story, da schnelles Anpassen der Speisekammer-Menge ein Kernanwendungsfall ist. - [ ] Barcode-Scan (Kamera, Hardware-Scan-Station, `#171`) bleibt als Weg zum Ändern der Menge unverändert nutzbar — betrifft nur die manuelle Bedienung direkt in der Listenzeile. **Out of scope for this story:** - Änderungen an der Kamera-Scan- oder Hardware-Scan-Station-Logik selbst. - Die "Zielmenge festlegen"-Funktion (`SetPantryProductTargetQuantityCommand`) bleibt unverändert erreichbar, nur nicht mehr über die wegfallenden +/- Buttons. **Open questions:** (escalate to human if unanswered) - Konkrete Interaktion für den Ersatz der +/- Buttons (Dialog beim Antippen der Menge? Ein kleines Stepper-Popover? Swipe-Aktion?) — Frontend-Engineer-Entscheidung, aber bitte AC oben (schneller Weg muss erhalten bleiben) beachten.
lena self-assigned this 2026-09-07 12:43:58 +02:00
Author
Collaborator

Claiming this for the current go-loop cycle (retroactively - implementation was already underway when this comment was posted; verified no one else touched it in the meantime). Decision on the open question (fast-adjust replacement for the removed +/- buttons): a small stepper popover, opened by tapping the quantity prefix, reusing the existing atomic CheckIn/CheckOut commands unchanged - avoids adding a new backend command for arbitrary quantity setting, which would need its own concurrency design (the existing commands are deliberately single-step atomic UPDATEs for concurrent-scan safety, per their own comments).

Claiming this for the current go-loop cycle (retroactively - implementation was already underway when this comment was posted; verified no one else touched it in the meantime). Decision on the open question (fast-adjust replacement for the removed +/- buttons): a small stepper popover, opened by tapping the quantity prefix, reusing the existing atomic CheckIn/CheckOut commands unchanged - avoids adding a new backend command for arbitrary quantity setting, which would need its own concurrency design (the existing commands are deliberately single-step atomic UPDATEs for concurrent-scan safety, per their own comments).
Author
Collaborator

Done.

Shopping list: the quantity prefix now uses the normal text color instead of text-muted-foreground, matching the product name's emphasis.

Pantry: quantity moved from a counter between +/- buttons to a prefix before the name - same position, color, and size as the shopping list's. The always-visible +/- buttons are gone from the row itself. Tapping the quantity prefix opens a small stepper popover (product name as title, - and + buttons around the current quantity) that calls the exact same CheckInPantryProductCommand/CheckOutPantryProductCommand the old row buttons used - no new backend command, so the existing atomic-�1-update concurrency guarantee (see those handlers' own comments on why: concurrent scans across household members) is untouched.

Barcode scan (camera dialog, hardware scan station, #171) is unaffected - it never routed through the row's +/- buttons.

Verified live in the rebuilt review container (not just tests): added a product, opened the stepper via the quantity prefix, checked it in, watched both the popover and the row prefix update to the new quantity together; also confirmed the shopping-list quantity prefix now renders in the same color as the product name.

Tests: added a stepper-popover test plus updated the existing check-in/check-out tests (they now open the popover first, since those buttons no longer live in the row). All 21 PantryProductItem tests pass, plus the full frontend suite (1212 tests) and npm run build/tsc -b clean. No backend changes.

Commit: e6c00c8b.

Done. **Shopping list:** the quantity prefix now uses the normal text color instead of `text-muted-foreground`, matching the product name's emphasis. **Pantry:** quantity moved from a counter between +/- buttons to a prefix before the name - same position, color, and size as the shopping list's. The always-visible +/- buttons are gone from the row itself. Tapping the quantity prefix opens a small stepper popover (product name as title, - and + buttons around the current quantity) that calls the exact same `CheckInPantryProductCommand`/`CheckOutPantryProductCommand` the old row buttons used - no new backend command, so the existing atomic-�1-update concurrency guarantee (see those handlers' own comments on why: concurrent scans across household members) is untouched. Barcode scan (camera dialog, hardware scan station, #171) is unaffected - it never routed through the row's +/- buttons. Verified live in the rebuilt review container (not just tests): added a product, opened the stepper via the quantity prefix, checked it in, watched both the popover and the row prefix update to the new quantity together; also confirmed the shopping-list quantity prefix now renders in the same color as the product name. Tests: added a stepper-popover test plus updated the existing check-in/check-out tests (they now open the popover first, since those buttons no longer live in the row). All 21 `PantryProductItem` tests pass, plus the full frontend suite (1212 tests) and `npm run build`/`tsc -b` clean. No backend changes. Commit: e6c00c8b.
lena closed this issue 2026-09-07 12:44:32 +02:00
Author
Collaborator

Follow-up (2026-09-07, human feedback after the shipped stepper popover): replaced the tap-to-open +/- stepper with the same quantity/name/category edit dialog the shopping list already uses, so both list types behave identically end to end - not just position/color/size as originally scoped here.

Backend: new SetPantryProductQuantityCommand for the direct overwrite (dialog's Save commits quantity, and optionally name/category, together) - a plain read-then-write, unlike CheckIn/CheckOut's atomic +/-1 (those stay untouched, still used elsewhere). Newly created products now default to quantity 1 instead of 0.

Also fixed in the same commit: the Pantry Scan Station's hardware-scanner "confirm name" prompt could swallow a fast follow-up scan into the previous item's name field; a burst of keystrokes arriving faster than human typing speed is now detected and routed to a new scan instead.

Tests: 3 new backend handler tests (66 total Pantry backend tests green), updated PantryProductItem/PantryScanStationPage/ShoppingProductQuantityDialog frontend tests, full suite green (846 backend, 1229 frontend), npm run build/tsc -b clean.

Commits: c3b2a93e (feature), c5e4b6cc (merge with concurrent #170/#178 work), 1092f409 (coverage), cb29c8a4 (team-memory note on a stale-generated-file gotcha hit while merging).

Note: could not rebuild the local Docker review container this cycle - mcr.microsoft.com failed to resolve/respond (network EOF) on two attempts, unrelated to this change.

Follow-up (2026-09-07, human feedback after the shipped stepper popover): replaced the tap-to-open +/- stepper with the same quantity/name/category edit dialog the shopping list already uses, so both list types behave identically end to end - not just position/color/size as originally scoped here. **Backend:** new `SetPantryProductQuantityCommand` for the direct overwrite (dialog's Save commits quantity, and optionally name/category, together) - a plain read-then-write, unlike CheckIn/CheckOut's atomic +/-1 (those stay untouched, still used elsewhere). Newly created products now default to quantity 1 instead of 0. **Also fixed in the same commit:** the Pantry Scan Station's hardware-scanner "confirm name" prompt could swallow a fast follow-up scan into the previous item's name field; a burst of keystrokes arriving faster than human typing speed is now detected and routed to a new scan instead. Tests: 3 new backend handler tests (66 total Pantry backend tests green), updated PantryProductItem/PantryScanStationPage/ShoppingProductQuantityDialog frontend tests, full suite green (846 backend, 1229 frontend), `npm run build`/`tsc -b` clean. Commits: c3b2a93e (feature), c5e4b6cc (merge with concurrent #170/#178 work), 1092f409 (coverage), cb29c8a4 (team-memory note on a stale-generated-file gotcha hit while merging). Note: could not rebuild the local Docker review container this cycle - `mcr.microsoft.com` failed to resolve/respond (network EOF) on two attempts, unrelated to this change.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
robert/todo#175
No description provided.