TasksPanel
Shell for the Tasks tab with toolbar slots, viewport, empty, and loading states.
Match the Tasks tab toolbar and board spacing
Preserve the source hierarchy before connecting product state.
Verify a deliberately long task title wraps to three lines without pushing the status control outside the card
The description also wraps and clamps so dense board columns remain scannable at the source width.
Connect keyboard drag feedback
Announce allowed and blocked status targets.
Retire the legacy task inspector
Review task filter empty states
Compare empty, filtered empty, loading, and failure structures.
Document the consumer-owned workflow boundary
import {
Button,
Skeleton,
TaskLoadingList,
TaskLoadingRow,
TasksPanelEmpty,
TasksPanelRoot,
TasksPanelToolbar,
TasksPanelToolbarFilters,
TasksPanelToolbarLabel,
TasksPanelToolbarNewTask,
TasksPanelToolbarView,
TasksPanelViewport,
} from "raft-ui";
<TasksPanelRoot>
<TasksPanelToolbar>
<TasksPanelToolbarNewTask>
<Button variant="accent" size="sm">New Task</Button>
</TasksPanelToolbarNewTask>
<TasksPanelToolbarFilters>
{/* Creator / Assignee filters; ghost Clear when any filter is active */}
<TasksPanelToolbarLabel>{/* non-interactive filter chrome */}</TasksPanelToolbarLabel>
<Button variant="ghost" size="sm">Clear</Button>
</TasksPanelToolbarFilters>
<TasksPanelToolbarView>
{/* Board / List view switcher */}
</TasksPanelToolbarView>
</TasksPanelToolbar>
<TasksPanelViewport>
<TasksPanelEmpty />
<TaskLoadingList>
<TaskLoadingRow>
<Skeleton />
</TaskLoadingRow>
</TaskLoadingList>
{/* Compose TaskBoard / TaskList / TaskDnd / TaskCard here */}
</TasksPanelViewport>
</TasksPanelRoot>The current-user shortcut uses the current user's identity value and replaces their duplicate avatar row.
Assignee uses the same external identity data and adds explicit Assigned to me and Unassigned options.
TasksPanelEmpty hosts consumer EmptyState for unfiltered and filtered-empty. Column/section empties live on TaskBoard and TaskList.
Legacy tasks do not map to a message thread. Open them in the same right-hand slot as ThreadPanel, composing LegacyTaskPanel (Root / Header / Title / Actions / Body) with a consumer metadata body — no OriginalMessage, replies, search, or composer. Mutually exclusive with a real thread: if task.isLegacy, close the thread and show this panel instead.
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"section"> | — | Tasks tab panel root. Product data and routing remain outside. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Toolbar shell. Desktop keeps New Task + Filters on the left and View on the right; mobile stacks View beside New Task, then Filters on a second row. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Primary create-task action slot. Sits left on both breakpoints. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Filter controls cluster (and ghost Clear when active). Full-width second row on mobile; follows New Task on desktop. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Board/List view switcher slot. Trails on desktop; top-right on mobile. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Generic toolbar cluster. Prefer NewTask / Filters / View for the responsive layout; Group remains for custom groupings. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Non-interactive visual label for toolbar context or static filter summaries. Consumers provide visible content. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Scroll boundary for board, list, loading, and empty states. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Panel-level empty-state host. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Loading skeleton list. Sets aria-busy. Own recipe under tasks/task-loading. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Single loading skeleton row. Compose Skeleton line children directly. |