Store: client-side product search and type filter on /products #21

New issue

Open

opened 2026-07-25 13:45:49 +00:00 by yuris · 0 comments

yuris commented

2026-07-25 13:45:49 +00:00

Owner

Target

apps/store/app/products/page.tsx and a new client component (e.g. apps/store/app/products/product-browser.tsx).

Change

Keep the server component fetching the catalog at build time (fetchCatalog()), then pass items into a client component.
Add a text search input filtering by name and description (case-insensitive).
Add type filter chips/tabs for Part / Consumable / Accessory using the existing typeLabels map, plus an "All" option.
Combine search + type as an AND filter; preserve the current card markup and empty-state copy.
No URL/query-param state required; local useState is enough.

Constraints

Must remain compatible with output: "export" (all filtering client-side over already-fetched data).
No new dependencies; no catalog contract change.

Acceptance

/products renders all items by default.
Typing filters the grid live; clearing restores the full list.
Selecting a type narrows results; "All" resets it.
Empty result shows the existing empty-state message.
Verify at http://localhost:3001/products via devenv up.

Non-goals

Server-side search, pagination, or sorting.
Exposing price or stock.

## Target `apps/store/app/products/page.tsx` and a new client component (e.g. `apps/store/app/products/product-browser.tsx`). ## Change - Keep the server component fetching the catalog at build time (`fetchCatalog()`), then pass `items` into a client component. - Add a text search input filtering by `name` and `description` (case-insensitive). - Add type filter chips/tabs for `Part` / `Consumable` / `Accessory` using the existing `typeLabels` map, plus an "All" option. - Combine search + type as an AND filter; preserve the current card markup and empty-state copy. - No URL/query-param state required; local `useState` is enough. ## Constraints - Must remain compatible with `output: "export"` (all filtering client-side over already-fetched data). - No new dependencies; no catalog contract change. ## Acceptance - `/products` renders all items by default. - Typing filters the grid live; clearing restores the full list. - Selecting a type narrows results; "All" resets it. - Empty result shows the existing empty-state message. - Verify at http://localhost:3001/products via `devenv up`. ## Non-goals - Server-side search, pagination, or sorting. - Exposing price or stock.

yuris referenced this issue from a pull request that will close it,

2026-07-25 14:01:25 +00:00

feat(store): marketplace browse UX — search/filter, gallery, related products, featured #25

yuris referenced this issue from a commit

2026-07-25 14:01:27 +00:00

feat(store): marketplace browse UX — search/filter, gallery, related, featured