From e40a3d5e1abbdd56a908fce74ee066f530745a3d Mon Sep 17 00:00:00 2001 From: Thom Lamb Date: Mon, 17 Aug 2026 11:12:32 -0500 Subject: [PATCH] docs: archive the categories and tags design mockups (#23) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The wireframes behind the storefront filter layout decisions lived only in .superpowers/brainstorm/, which is gitignored, so they were lost to anyone reading the repo. That directory stays ignored — it also holds a brainstorming-session token, PID files, and absolute local paths, none of which belong in the repo. The mockups themselves are design artifacts, so they are copied into the specs directory and wrapped as standalone pages: the tool serves them as fragments inside its own frame, so its style tokens and toggleSelect helper are inlined to make them open in a browser with no server and no network. Both rejected layouts and the rejected mobile variant are kept alongside the chosen ones — the comparison is the part worth preserving. Co-Authored-By: Claude Opus 5 (1M context) --- .claude/project-context.md | 2 +- .../2026-08-17-categories-and-tags-design.md | 4 + .../README.md | 27 ++ .../filter-layout-mobile.html | 378 +++++++++++++++++ .../filter-layout.html | 394 ++++++++++++++++++ 5 files changed, 804 insertions(+), 1 deletion(-) create mode 100644 docs/superpowers/specs/2026-08-17-categories-and-tags-mockups/README.md create mode 100644 docs/superpowers/specs/2026-08-17-categories-and-tags-mockups/filter-layout-mobile.html create mode 100644 docs/superpowers/specs/2026-08-17-categories-and-tags-mockups/filter-layout.html 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. +

+
+ + + +