Skip to content
Motir
Start free

moooon

Motir

Vibe your whole project. Bring an idea — Motir's three AI layers plan it, track it, and ship it, end to end. You're looking at Motir, built in Motir.

  • Vibe Project
  • Open Source
  • AI Agent
  • AI Loop
1
requests
0
upvotes
145
planned
1,361
shipped
Follow  — continues on app.motir.co
Request a featureAtom feed

← Motir · Work items

MOTIR-441Done

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/)

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)