Composed
Task row
A task with its status, priority, due date and assignee — plus the filter bar above it.
T-241Notion renewal — negotiate the 12% upliftApr 16PS
T-238SOC 2 evidence pack for Datadog reviewApr 18AK
T-236Consolidate three Figma seatsApr 21RS
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/task-row.jsonStatus and priority are separate glyphs
Status is a shape; priority is a count of bars. They occupy different columns because they answer different questions, and merging them into one badge loses one of the two.
The filter bar floats
It sits over the list rather than in the header, so the counts stay visible while the list scrolls under it.
| Prop | Type | Default | Description |
|---|---|---|---|
| task | Task | — | id, title, priority, status, due, assignee. |
| selected | boolean | — | Row selection, distinct from the task's own status. |
| onCycleStatus | (id, next) => void | — | Advances the status from the row itself. |
| counts | { key, count }[] | — | StatusFilterBar. 'all' plus any TaskStatus. |