Blocks
My Tasks
A full working screen assembled from the library — saved view tabs, a faceted filter bar, and the grouped task list, wired together: switching a view applies its grouping and filters, editing them marks the view dirty, and selecting rows raises the bulk-action toolbar. Composition only; every visual is a registry component.
npx shadcn@latest add @orbit/my-tasksThe assembled screen
Live — switch a saved view, add or edit filters (then Save or Reset the view), regroup from the list toolbar, drag rows, quick-add, and click a row's background to select it for bulk actions.
My Tasks
7 openEverything assigned to you across projects
Composed from
Seven registry components, imported as-is — the block adds layout and state glue only.
How it's assembled
The saved view owns the list configuration; the block keeps one working copy (groupBy + filters) that the SavedViews, FilterBar, and List all read and write. The List renders the filtered subset, and its change reports are merged back into the master tree so hidden rows survive edits.
<MyTasks> // registry/blocks/my-tasks.tsx
├─ header
│ ├─ <Badge tone="blue"> // {openCount} open — live
│ ├─ <AvatarGroup size="sm" max={4}> // collaborator stack
│ └─ <Button iconLeft={<Icon plus>}> // New task → prepends a row
├─ <SavedViews // tabs = views + live counts
│ views · activeId · dirty // config drift raises Save / Reset
│ onActiveChange → apply view // sets groupBy + filters
│ onSave / onReset /> // persist / restore the view config
├─ <FilterBar // fields from people + List scales
│ filters · match // controlled by the block
│ count={visibleTasks.length} /> // live result count
└─ relative wrapper
├─ <List // sees only the filtered rows
│ items={visibleTasks} // changes merge back into the master
│ groupBy ↔ onGroupByChange // grouping is part of the view config
│ onItemClick → toggle select />
└─ <BulkActionToolbar // renders while selection > 0
count={selected}
actions=[status / assign / delete] />Props
The block ships with the spec's seed data (people, tasks, views) as exported defaults — MY_TASKS_PEOPLE, myTasksSeedTasks(), MY_TASKS_VIEWS, myTasksFilterFields() — so it renders complete out of the box and re-seeds from your data.
| Prop | Type | Default | Description |
|---|---|---|---|
| tasks / defaultTasks | ListItem[] | myTasksSeedTasks() | Controlled / uncontrolled task tree, same shape the List takes. |
| onTasksChange | (tasks: ListItem[]) => void | — | Fires with the full updated tree on every list mutation, New task, and bulk action. |
| people | ListPerson[] | MY_TASKS_PEOPLE | Directory behind the avatar stack, the assignee filter options, and the assign bulk menu. |
| defaultViews | MyTasksView[] | MY_TASKS_VIEWS | Saved views — each carries the groupBy + filters it applies when selected. |
| fields | FilterField[] | myTasksFilterFields(people) | FilterBar fields. The default derives status / assignee / priority from the List scales and people. |
| title / subtitle | string | "My Tasks" / … | Header copy. The open-count Badge is computed live from the tasks. |
| extraCollaborators | number | 3 | The “+N collaborators” label after the avatar stack; 0 hides it. |
| …rest | HTMLAttributes | — | Forwarded to the root <div> — size it with className (the block fills its container). |
Keyboard & accessibility
The block is composition only, so every interaction keeps the semantics of the component it comes from: the saved-view tabs are a real tablist of tab buttons, the filter chips and their menus are real buttons with Base UI menus behind them, the List's checkboxes, headers, cells and names are focusable controls (Enter activates, Escape cancels an edit or popover), and the bulk-action toolbar's buttons are reachable with Tab while a selection is active. See each source component's page for its full keyboard reference.