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

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

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