Feature request: shopping list overview as a dashboard with item previews #32

New issue

Closed

opened 2026-10-03 06:45:18 +00:00 by araemer · 1 comment

araemer commented

2026-10-03 06:45:18 +00:00

Owner

Idea

Turn the shopping list overview from a list of titles into a dashboard of cards that also show what's on each list, similar to note-keeping apps (e.g. Google Keep).

Each card:

list name, the "Standard" badge, and the owner for lists shared with the user
the first ~5 open items with amount and unit, and "+ n weitere" when there are more
the existing actions (set as default, rename, delete), as permissions allow
tapping the card opens the list

Layout: one column on phones, two or three columns on wider screens. On desktop this also puts the width to use that the centred list column (recipe-app#47) leaves empty.

Why it needs a contract change

GET /shopping-list/all returns only id, name, owner, effective permission and version per list (CompactShoppingListDto in api-contract/src/shopping-lists.ts), no items. Two ways to get them:

Load every list separately in the app (GET /shopping-list/:id per card). No contract change, but one extra request per list, each carrying the full list including ticked items and shares, only to show a few names. It gets slower with every list, and the overview would need its own refresh logic. Not recommended.
Extend the overview response (recommended). CompactShoppingListDto gains e.g. previewItems (the first N open items in list order: name, amount, unit) and openItemCount. Still one request; an additive change.

Notes

Contract change affecting both siblings: needs an ADR in recipe-platform (preview size N, which fields, whether ticked items count) and a small addition to spec 001's overview description, or a small spec of its own.
Backend: one query for the first N open items per list, ordered like openItems on GET.
App: the overview page and its row component become a card grid. Whether the overview refreshes while open (like the list page) is a separate decision; without it the preview updates on every visit.

Raised during manual testing of spec 001 (recipe-app#47); postponed to a follow-up.

🤖 Generated with Claude Code

## Idea Turn the shopping list overview from a list of titles into a dashboard of cards that also show what's on each list, similar to note-keeping apps (e.g. Google Keep). Each card: - list name, the "Standard" badge, and the owner for lists shared with the user - the first ~5 open items with amount and unit, and "+ n weitere" when there are more - the existing actions (set as default, rename, delete), as permissions allow - tapping the card opens the list Layout: one column on phones, two or three columns on wider screens. On desktop this also puts the width to use that the centred list column (recipe-app#47) leaves empty. ## Why it needs a contract change `GET /shopping-list/all` returns only id, name, owner, effective permission and version per list (`CompactShoppingListDto` in `api-contract/src/shopping-lists.ts`), no items. Two ways to get them: - **Load every list separately in the app** (`GET /shopping-list/:id` per card). No contract change, but one extra request per list, each carrying the full list including ticked items and shares, only to show a few names. It gets slower with every list, and the overview would need its own refresh logic. Not recommended. - **Extend the overview response** *(recommended)*. `CompactShoppingListDto` gains e.g. `previewItems` (the first N open items in list order: name, amount, unit) and `openItemCount`. Still one request; an additive change. ## Notes - Contract change affecting both siblings: needs an ADR in recipe-platform (preview size N, which fields, whether ticked items count) and a small addition to spec 001's overview description, or a small spec of its own. - Backend: one query for the first N open items per list, ordered like `openItems` on GET. - App: the overview page and its row component become a card grid. Whether the overview refreshes while open (like the list page) is a separate decision; without it the preview updates on every visit. Raised during manual testing of spec 001 (recipe-app#47); postponed to a follow-up. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

araemer referenced this issue

2026-10-03 11:27:42 +00:00

feat(contract) #002 Shopping list overview with item previews: spec, contract and ADR (spec G of E01) #35

araemer commented

2026-10-04 06:16:37 +00:00

Author

Owner

Done with PR 43

araemer closed this issue

2026-10-04 06:16:37 +00:00

No labels

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

araemer/recipe-platform#32

No description provided.

Rows
Columns