diff --git a/.claude/project-context.md b/.claude/project-context.md index ca1d06c..fa38026 100644 --- a/.claude/project-context.md +++ b/.claude/project-context.md @@ -182,7 +182,7 @@ sudo docker exec -it redefined-designs-db-syn psql -U redefined -d redefined -c - **Thom does the pushing.** Commit locally and stop; don't `git push` on his behalf. - **When work comes from a Gitea issue, post every clarifying question and its answer back to that issue as a comment** — including the options considered and why the rejected ones were rejected. The issue is the durable record; decisions made in a chat session are invisible to anyone reading it later. Post each round as the answers come in rather than batching everything to the end. - **Design specs live in `docs/superpowers/specs/YYYY-MM-DD--design.md`** and are committed before implementation starts. -- `.superpowers/` (scratch output from brainstorming tooling) is gitignored. +- **`.superpowers/` stays gitignored, but design artifacts inside it must be lifted out before they are lost.** That directory is scratch state belonging to the brainstorming tool and contains a session token, PID files, and absolute local paths — none of which belong in the repo. The mockups it holds *are* worth keeping, so copy them into `docs/superpowers/specs/--mockups/` and wrap them as standalone pages (they are served as fragments inside a tool-provided frame, so they need its style tokens and `toggleSelect` helper inlined to open on their own). Keep the rejected options, not just the chosen one — the value is in the comparison. ## Testing diff --git a/docs/superpowers/specs/2026-08-17-categories-and-tags-design.md b/docs/superpowers/specs/2026-08-17-categories-and-tags-design.md index 97e8fbc..8a2e77c 100644 --- a/docs/superpowers/specs/2026-08-17-categories-and-tags-design.md +++ b/docs/superpowers/specs/2026-08-17-categories-and-tags-design.md @@ -40,6 +40,10 @@ The issue's phrase "rules that dictate how the app automatically organizes items resolved to mean manual tree assignment, matching its own follow-on sentence that categories are "only metadata for organizing the items into a tree-like structure." +The layout decisions were made against wireframes, archived alongside this spec in +[`2026-08-17-categories-and-tags-mockups/`](2026-08-17-categories-and-tags-mockups/) — they record +the rejected options (sidebar rail, dropdown row, bottom sheet) as well as the chosen one. + ## Schema One new migration, created with `npm run migrate:create -- add-categories-and-tags`. diff --git a/docs/superpowers/specs/2026-08-17-categories-and-tags-mockups/README.md b/docs/superpowers/specs/2026-08-17-categories-and-tags-mockups/README.md new file mode 100644 index 0000000..86d45c0 --- /dev/null +++ b/docs/superpowers/specs/2026-08-17-categories-and-tags-mockups/README.md @@ -0,0 +1,27 @@ +# Categories and tags — design mockups + +Wireframes produced while designing [issue #23](https://gitea.bermudalamb.synology.me/bermudalamb/redefined-designs/issues/23), +kept because they record the options that were rejected, not just the one that shipped. + +Open either file directly in a browser — they are self-contained, with no server, +build step, or network access required. + +| File | Question it answered | Outcome | +| --- | --- | --- | +| `filter-layout.html` | Where do the storefront's category / tag / price filters live? | **C — drawer plus removable chips.** A was a permanent sidebar rail (most discoverable, but costs ~25% of grid width); B was a row of dropdowns (full width, but hides the category tree until opened). | +| `filter-layout-mobile.html` | How does that drawer arrive on a phone? | **C1 — side drawer**, entering from the right at near full-screen. C2 was a bottom sheet: better thumb reach, but a deep category tree gets cramped. | + +The reasoning behind each choice is in +[the design spec](../2026-08-17-categories-and-tags-design.md), and the +question-and-answer trail is on the issue itself. + +## Why these are copies + +These began as content fragments inside `.superpowers/brainstorm/`, a scratch +directory belonging to the brainstorming tool. That directory is gitignored and +should stay that way — it also holds a session token, PID files, and absolute +local paths, none of which belong in the repository. + +The mockups themselves are design artifacts, so they were lifted out and wrapped +into standalone pages: the frame's style tokens and its `toggleSelect` helper are +inlined here, which is the only difference from what was reviewed. diff --git a/docs/superpowers/specs/2026-08-17-categories-and-tags-mockups/filter-layout-mobile.html b/docs/superpowers/specs/2026-08-17-categories-and-tags-mockups/filter-layout-mobile.html new file mode 100644 index 0000000..814df68 --- /dev/null +++ b/docs/superpowers/specs/2026-08-17-categories-and-tags-mockups/filter-layout-mobile.html @@ -0,0 +1,378 @@ + + + + + +Mobile drawer variants + + + + +
+ Archived mockup — Mobile drawer variants. + Produced while designing + issue #23. + The option marked as chosen is recorded in + the design spec. +
+ + +

Option C on a phone — and one sub-choice

+

+ The closed state is the same either way. What differs is how the filter panel arrives: a + full-height side drawer or a bottom sheet. Both are one antd Drawer with a + different placement, so this is purely a feel decision. Click the drawer style you prefer. +

+ +
+ + +
+
Closed — browsing
+
Full-width button, applied filters as removable chips, two cards per row.
+
+
+
+
+ Redefined Designs + ☾🛒☰ +
+
⚙ Filters 3
+
+ Coffee Tables × + vintage × + $120–$800 × + Clear all +
+
+
+
Oak coffee table$340 +
vintageoak
+
Elm slab$520 +
vintage
+
Walnut low$690 +
vintagerare
+
Teak round$275 +
vintage
+
+
+
+
+
+ + +
+
C1 — Side drawer
+
Slides in from the right, near full-screen. Reads as "a page of filters".
+
+
+
+
+ Redefined Designs + ☾🛒☰ +
+
+
+
Oak coffee table$340
+
Elm slab$520
+
+
+
+
+
Filters✕
+
+
Category
+
+
All items
+
▾ Furniture
+
  ▾ Tables
+
    Coffee Tables
+
    Side Tables
+
▸ Decor
+
+
Tags — must have all
+
+ vintage ✓ + handmade + oak + restored +
+
Price
+
+
+
+
+
$120$800
+
+
+
+
Clear all
+
Show 12 items
+
+
+
+
+
+ + +
+
C2 — Bottom sheet
+
Rises from the bottom, ~78% height. Controls sit within thumb reach; grid stays partly visible.
+
+
+
+
+ Redefined Designs + ☾🛒☰ +
+
⚙ Filters 3
+
+
+
Oak coffee table$340
+
Elm slab$520
+
+
+
+
+
+
Filters✕
+
+
Category
+
+
All items
+
▾ Furniture  ▸ Tables
+
  Coffee Tables
+
▸ Decor
+
+
Tags — must have all
+
+ vintage ✓ + handmade + oak +
+
Price
+
+
+
+
+
$120$800
+
+
+
+
Clear all
+
Show 12 items
+
+
+
+
+
+ +
+ +
+

What carries over from desktop

+

+ Identical component tree at both sizes — the drawer just changes placement and + width/height at the antd md breakpoint, so there is no second + implementation to keep in sync. The chip row is the only piece that behaves differently: on desktop it + sits inline next to the Filters button, on mobile it wraps onto its own line beneath it. +

+

+ Tags now confirmed as AND — an item must carry every selected tag to show up. The panel + labels this explicitly ("must have all") so a user who selects two tags and sees the grid shrink to + nothing understands why. +

+
+ + + + diff --git a/docs/superpowers/specs/2026-08-17-categories-and-tags-mockups/filter-layout.html b/docs/superpowers/specs/2026-08-17-categories-and-tags-mockups/filter-layout.html new file mode 100644 index 0000000..d9c8af4 --- /dev/null +++ b/docs/superpowers/specs/2026-08-17-categories-and-tags-mockups/filter-layout.html @@ -0,0 +1,394 @@ + + + + + +Storefront filter layout options + + + + +
+ Archived mockup — Storefront filter layout options. + Produced while designing + issue #23. + The option marked as chosen is recorded in + the design spec. +
+ + +

Storefront filter layout — which shape fits?

+

+ Three filters land on the storefront: category (a tree), tags (multi-select, color-coded), + and price range. They differ mainly in how much screen they take from the item grid, and how well + they survive on a phone. Click the one you prefer. +

+ +
+ + +
+
A Sidebar filter rail
+
+
+
+ Redefined Designs + + DarkCartSign up + +
+
+
+
Category
+
+
All items
+
▾ Furniture
+
  ▾ Tables
+
    Coffee
+
    Side
+
▸ Decor
+
+
Tags
+
+ vintage + handmade + oak + restored +
+
Price
+
+
+
+
+
$120$800
+
+
+
+
Oak table$340 +
+
Elm slab$520 +
+
Walnut$690 +
+
Teak low$275 +
+
Ash round$410 +
+
Pine box$180 +
+
+
+
+
+
+ Everything visible at once — the tree reads as actual folders, tag colors are on display, no clicking to + discover what's filterable. Costs ~25% of the grid width, so cards drop from 4 to 3 per row on desktop. + On mobile the rail has to collapse into an accordion above the grid. +
+
+ + +
+
B Horizontal filter bar
+
+
+
+ Redefined Designs + + DarkCartSign up + +
+
+ Furniture / Tables / Coffee ▾ + + vintageoak + ▾ + + $120 – $800 ▾ + Clear +
+
+
+
Oak table$340 +
+
Elm slab$520 +
+
Walnut$690 +
+
Teak low$275 +
+
Ash round$410 +
+
Pine box$180 +
+
Cedar$230 +
+
Maple$610 +
+
+
+
+
+
+ Three compact controls in one row — an antd Cascader for the category tree, a tag multi-select, + and a price-range dropdown. Full grid width is preserved (4 cards per row), and the same row wraps + naturally on a phone. The tree is only visible once you open the cascader, so the category structure + is less discoverable. +
+
+ + +
+
C Drawer + active-filter chips
+
+
+
+ Redefined Designs + + Filters (3)Cart + +
+
+ Coffee Tables × + vintage × + $120–$800 × +
+
+
+
Oak table$340
+
Elm slab$520
+
Walnut$690
+
Teak low$275
+
Ash round$410
+
Pine box$180
+
Cedar$230
+
Maple$610
+
+
+
+
+
Filters
+
Category
+
+
All items
+
▾ Furniture
+
  ▾ Tables
+
    Coffee
+
▸ Decor
+
+
Tags
+
+ vintage + handmade + oak +
+
Price
+
+
+
+
+
$120$800
+
+
+
+
+
+ A "Filters" button opens a slide-over panel holding the full tree, tag pills, and price slider; what's + currently applied stays visible as removable chips above the grid. Full grid width, and identical + behaviour on desktop and mobile. Trade-off: filtering is a two-step interaction, and nothing hints at + the category structure until you open the drawer. +
+
+ +
+ +
+

Same for all three

+

+ Filters combine with AND (category and tags and price). Multiple selected tags are the one + open sub-question — "has any of these tags" vs "has all of them" — I'll ask that next. + Filtering happens server-side via query params on /api/items, so the result set stays correct + no matter how many items exist. +

+
+ + + +