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

3.2.3 Column + card components — `BoardColumn` / `BoardCard` reusing issue primitives

Estimate: 22m · Depends on: 3.2.1, 3.2.2

The presentational layer the board container renders — the columns and cards, drawn per design/boards/board.mock.html, REUSING the shipped issue primitives rather than a parallel set.

BoardColumn — a column header (name, the per-column card count, and a reserved slot/prop for the Story-3.3 WIP indicator drawn as a count display only — NOT enforced here) over a scrollable card stack, with an empty-column state. Takes the column meta + its current card page from the board state; emits the drop-target hooks 3.2.4 wires and the "load more" seam 3.2.5 fills.

BoardCard — the compact card for a BoardCardDto, composed from the existing primitives: IssueTypeIcon (kind hue via --el-type-*), the key/identifier chip, the clamped title, the assignee avatar, the priority Pill, the estimate/points chip, and the ReadinessBadge blocked/ready signal (the 3.1.4 BoardCardDto carries the finding-#21 readiness signal). Clicking a card opens the existing IssueQuickView panel (Story 2.5) — do not build a new detail surface. The card is keyboard-focusable (it becomes a drag handle in 3.2.4).

Reuse rule. Pull the type icon, pills, readiness badge, and avatar from app/(authed)/issues/_components/issueCellPrimitives.tsx + components/ui/*; if a piece needs extracting to share between the list and the board, extract it (do not fork). Colour via --el-* (the palette, not grey-only — finding #54); shape (radius/padding/ shadow) via the element-shape tokens; AA-safe.

Out of scope here: drag-drop behaviour (3.2.4); the load-more/virtualization that feeds the stack (3.2.5); the board-level empty + unmapped tray (3.2.6). This subtask is static rendering + the quick-view click + the seams for DnD and paging.

Acceptance criteria

  • BoardColumn renders the header (name + count + a WIP-placeholder slot, not enforced), the card stack, and the empty-column state, matching design/boards/.
  • BoardCard renders type icon (hue via --el-type-*), key, title, assignee, priority, points, and the readiness/blocked badge from the BoardCardDto, reusing the issue-list primitives (no forked card markup).
  • Clicking a card opens the existing IssueQuickView; the card is keyboard-focusable.
  • Colours via --el-* (not grey + one accent — finding #54), shape via element tokens; render checklist clean (icon viewBox, no nested buttons, prettier); AA-safe.
  • Component tests assert card field rendering (incl. the blocked indicator) and the empty-column state.

Context refs

  • app/(authed)/issues/_components/issueCellPrimitives.tsx + issueColumns.tsx + IssueTypeIcon — the card primitives to reuse/extract
  • components/ui/Pill / ReadinessBadge / Tooltip; app/(authed)/issues/_components/IssueQuickView*.tsx — the quick view a card opens
  • Story 3.1.4 — BoardCardDto (lib/dto/boards.ts) the card binds to (incl. the finding-#21 readiness signal)
  • design/boards/board.mock.html + design-notes.md (3.2.1) — the column/card spec; motir-core/CLAUDE.md — --el-* + element-shape rules