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.
unmappedStatusesfrom 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; matchesdesign/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
unmappedStatusesfield onBoardProjectionDto; 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