TasksPanel

Shell for the Tasks tab with toolbar slots, viewport, empty, and loading states.

GitHub

Preview#

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

#139

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.

#137

Connect keyboard drag feedback

Announce allowed and blocked status targets.

#126LEGACY

Retire the legacy task inspector

#121

Review task filter empty states

Compare empty, filtered empty, loading, and failure structures.

#118

Document the consumer-owned workflow boundary

Anatomy#

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>

Usage#

Creator filter#

The current-user shortcut uses the current user's identity value and replaces their duplicate avatar row.

Assignee filter#

Assignee uses the same external identity data and adds explicit Assigned to me and Unassigned options.

Panel empty states#

TasksPanelEmpty hosts consumer EmptyState for unfiltered and filtered-empty. Column/section empties live on TaskBoard and TaskList.

No tasks yet

Create one with the New Task button.

No tasks match this filter

Try a different combination or clear the current selection.

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.

#raft-ui-migrationTask #1 · LEGACY

In Progress

Title

Migrate legacy task records into the Raft UI board

Description

Imported from the pre-migration store. Metadata is read-only here; open a message task when you need thread replies.

Created by@Legacy Bot

Created atJul 12, 2026, 9:18 AM

Assignee@Legacy Bot

CompletedNot done

Read-only panel

Legacy tasks do not map to a message thread. This panel shows task metadata only, and posting is disabled.

API#WIP

TasksPanelRoot#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"section">	—	Tasks tab panel root. Product data and routing remain outside.

TasksPanelToolbar#

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.

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Primary create-task action slot. Sits left on both breakpoints.

TasksPanelToolbarFilters#

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.

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Board/List view switcher slot. Trails on desktop; top-right on mobile.

TasksPanelToolbarGroup#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Generic toolbar cluster. Prefer NewTask / Filters / View for the responsive layout; Group remains for custom groupings.

TasksPanelToolbarLabel#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"span">	—	Non-interactive visual label for toolbar context or static filter summaries. Consumers provide visible content.

TasksPanelViewport#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Scroll boundary for board, list, loading, and empty states.

TasksPanelEmpty#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Panel-level empty-state host.

TaskLoadingList#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Loading skeleton list. Sets aria-busy. Own recipe under tasks/task-loading.

TaskLoadingRow#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Single loading skeleton row. Compose Skeleton line children directly.