MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-441

6.15.1 Design — board filter surface: the enabled toolbar Filter affordance, the builder + saved-filter picker on the board, active-filter chips, filtered/filtered-empty states (design/boards/)

Done
Description

Estimate: 40m

The board-filter surface is net-new board chrome the existing design/boards/ mocks do NOT depict (they draw the [Filter] button only as a DISABLED seam). Per the design gate, produce the design asset BEFORE the UI code subtask (6.15.3 dependsOn this).

Deliver the THREE-file design-asset set under design/boards/ (CLAUDE.md design-asset rule): board-filter.mock.html (a self-contained mock built from the real design system — components/ui/* primitives + --el-* / shape tokens, NEVER Tier-0), a same-basename board-filter.png full-page export (Playwright chromium, light theme, deviceScaleFactor: 2, width ~1200), and an update to design/boards/design-notes.md indexing the surface.

Specify, REUSING the shipped filter primitives (do not redesign them): the enabled Filter affordance in the board toolbar (replacing the disabled seam, beside the 3.3 group-by Segmented + "New issue"); the filter builder + saved-filter picker opened from it (the SAME IssueFilterBar / 6.2 saved-filter picker the /issues navigator uses — show its anchoring on the board, not a new control); the active-filter summary/chips + Clear; the filtered board and the filtered-EMPTY board state (no card matches — an EmptyState, distinct from the 3.2 brand-new-board empty state); and coexistence with the 3.8 over-cap banner (whose "refine filter" CTA opens this) and the group-by control. Multi-panel (closed · open builder · saved-filter picker · active/chips · filtered-empty · over-cap-with-filter).

Acceptance criteria

  • design/boards/board-filter.mock.html + board-filter.png + a design-notes.md entry all land, naming every composing primitive (IssueFilterBar, the saved-filter picker, Pill/chip, EmptyState, Button, the toolbar) and the --el-* colour + shape-token role for each element.
  • The mock reuses the existing filter builder + saved-filter picker (no hand-rolled filter UI); colour strictly via --el-*, shape via element-semantic tokens; AA holds; it shows the closed, open, active, filtered-empty, and over-cap-coexistence panels.
  • No app code in this subtask — it ships on a design/PROD-6.15.1-* branch (CI skips E2E + integration + Vercel preview, per the design-prefix gate).

Context refs

  • design/boards/ (the board mocks + design-notes.md; the disabled [Filter] seam placement) — THE layout authority to extend
  • The 6.1 / 6.2 filter design (the IssueFilterBar + saved-filter picker mock + design-notes — the primitive to reuse, not redraw) + app/(authed)/issues/_components/IssueFilterBar.tsx (the shipped markup)
  • app/(authed)/boards/_components/OverCapBanner.tsx (the 3.8 banner the filter coexists with) + the 3.3 group-by Segmented
  • motir-core/CLAUDE.md (the colour / shape token rules + the THREE-file design-asset DoD)