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

2.5.7 Design — flat sortable List view + the `[Tree ▾]` switcher menu

Estimate: 40m

The design asset the view-switcher's List mode needs — the surface tree.png does NOT specify it (it draws only the Tree view and a disabled [Tree ▾] control, which 2.5.3 ships as a forward-compatible seam). Without this asset, 2.5.8 would be improvising UI — the planning-time design gate. Produce, under design/work-items/, a list.mock.html (built from the live design system — components/ui/* + --el-* tokens, preferred so the coding agent composes the same primitives) OR a .pen+PNG, plus a design-notes.md section, covering:

  • The flat List table: the same TITLE / ASSIGNEE / STATUS columns as the tree but un-nested (no indent, no chevrons), rows in the active sort order. Specify any extra sortable columns the List earns over the Tree (e.g. Updated / Priority) — or none if TITLE/ASSIGNEE/STATUS suffice.
  • Sortable column headers: the hover affordance, the active-sort indicator + asc/desc caret, and the default sort (e.g. key asc).
  • The [Tree ▾] switcher menu open: the Tree / List options + the active/selected treatment.
  • The List view's empty + loading states (reuse the tree's EmptyState + skeleton, or note the deltas).

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.4.8). Colour only through --el-*; status via Pill tones; type icons take their type hue.

Acceptance criteria

  • A design/work-items/list.mock.html (or .pen+PNG) + a design-notes.md entry exist, naming the composing primitives, copy, the column set, the sort affordance + active indicator, and the switcher-menu states.
  • The List table reuses the tree's row vocabulary (IssueTypeIcon · identifier · Pill · avatar) — no new visual primitive invented; consistent with tree.png.
  • Empty + loading + the open switcher menu 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 design this extends
  • design/work-items/relationships.mock.html (2.4.7) — the in-repo HTML-mockup convention to mirror
  • components/ui/* primitive inventory + app/globals.css --el-* tiers + the /tokens route