Skip to content

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

Motir · Work items

MOTIR-170Done

3.2.6 Board completeness — empty state, unmapped-statuses tray, responsive + a11y

Estimate: 16m · Depends on: 3.2.1, 3.2.2

The real-product states that keep the board from being a green-path-only prototype — drawn per design/boards/.

Empty board. A project with no issues (all columns empty) shows the board empty state (EmptyState) with a create-issue affordance (reuse the existing CreateIssueButton / create modal), not just six blank columns.

Unmapped-statuses tray. 3.1's projection returns unmappedStatuses — project statuses mapped to no board column (e.g. a custom status added after the board was seeded; the Jira behaviour). Surface them as a tray/banner (the 3.2.1 treatment) listing the unmapped statuses with a link to act on them — never silently drop them. When unmappedStatuses is empty the tray does not render. (NB: the column↔status mapping admin is Story 3.6, not yet built when this ships — so the tray CTA is the honest INTERIM "Manage statuses →" to the workflow editor (2.2.5, where a stray status can be reviewed/removed); Story 3.6.3 repoints it to "Map columns →" once the mapping surface exists.)

Responsive + a11y polish. Horizontal column scroll on desktop with a usable mobile layout (per 3.2.1); the board exposes the right landmark/roles so the column structure is navigable by assistive tech (complementing the 3.2.4 drag announcements); focus order is sane across columns.

Out of scope here: the loading/error shells (3.2.2 ships those); WIP/swimlanes (3.3).

Acceptance criteria

  • A project with no issues shows the board empty state with a working create-issue affordance (reusing the shipped create flow), not blank columns.
  • unmappedStatuses from the projection renders as a tray/banner (with a link to map them) when non-empty, and is absent when empty; unmapped statuses are never shown as columns and never dropped.
  • The board is responsive (desktop horizontal scroll + a usable mobile layout per 3.2.1) and exposes sane landmarks/roles + focus order for assistive tech.
  • Colours via --el-*, shape via element tokens, AA-safe; matches design/boards/.
  • Component tests assert the empty state (with create affordance) and the unmapped-tray present/absent branches.

Context refs

  • components/ui/EmptyState; app/(authed)/_components/CreateIssueButton.tsx / CreateIssueModal.tsx — the create flow to reuse
  • Story 3.1.4 — the unmappedStatuses field on BoardProjectionDto; Story 2.2.5 — the workflow editor the tray links to (interim); Story 3.6 — the column↔status mapping admin that resolves an unmapped status (3.6.3 repoints this tray)
  • design/boards/board.mock.html + design-notes.md (3.2.1) — the empty + unmapped-tray + responsive specs
  • finding #57 (completeness/states in scope); motir-core/CLAUDE.md — token rules