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-120

2.5.9 Design — Filter bar (kind · status · assignee · text) popover + active-count + clear

Done
Description

Estimate: 35m

The design asset the [Filter] control needs — tree.png draws only the disabled [Filter] button (a forward-compatible seam, exactly like the [Tree ▾] control that got 2.5.7); it does NOT specify the open filter surface. Without this asset, 2.5.4 would be improvising UI — the planning-time design gate (notes.html mistake #31), the same gap 2.5.7 closed for the List view. Produce, under design/work-items/, a filter.mock.html (built from the live design system — components/ui/* + --el-* tokens, preferred so the coding agent composes the same primitives) plus a design-notes.md section, covering:

  • The Filter trigger: its resting state, the active treatment, and the active-filter count badge (e.g. Filter · 3) shown when filters apply.
  • The open Popover (anchored to the trigger): the layout of the four filter groups — kind (issue-type multi-select, type icon + name), status (the project workflow statuses, Pill tones), assignee (workspace members + an explicit "Unassigned" option), and a text quick-filter (identifier + title) — composed from the shared Combobox / StatusPicker option source / member combobox; no new picker primitive.
  • The selected-state vocabulary (how a chosen kind/status/assignee reads — checks, chips, or selected rows) and the "Clear filters" affordance.
  • States: closed-inactive · closed-active (with count) · open-empty · open-populated (multi-panel).

Mirror the output convention of the prior design subtasks (1.0.5 / 1.2.1 / 1.3.3 / 1.5.1 / 2.4.7 / 2.5.7). Colour only through --el-*; status via Pill tones; type icons take their type hue. The popover reuses Popover + Combobox so 2.5.4 composes the same primitives.

Acceptance criteria

  • A design/work-items/filter.mock.html + a design-notes.md entry exist, naming the composing primitives, copy, the four filter groups, the active-count badge, the selected-state treatment, and the clear affordance.
  • The filter controls reuse the shared pickers (Combobox / StatusPicker options / member combobox) + "Unassigned" — no new visual primitive; consistent with tree.png's toolbar.
  • Closed-inactive, closed-active (count), open-empty, and open-populated are all specified (multi-panel).
  • Colour flows only through --el-*; AA-safe (finding #35).

Context refs

  • design/work-items/tree.png (+ tree.pen) + design-notes.md — the tree/toolbar design this extends (the disabled [Filter] seam)
  • design/work-items/list.mock.html (2.5.7) + relationships.mock.html (2.4.7) — the in-repo HTML-mockup convention to mirror
  • components/ui/Popover / Combobox; StatusPicker option source; the workspace-member combobox used by AssigneePicker; ISSUE_TYPE_META
  • app/(authed)/settings/workspace/jobs/_components/JobsDashboard.tsx StatusFilter — prior art for an in-app, URL-driven filter affordance
Status
Done
Type
Sub-task