ActivityInbox

ActivityInbox lays out Activity: the panel that lists what happened elsewhere and waits for the person, as InboxItem rows. Selecting an item opens it beside the list. The panel has views (Active, Saved, Done), filters, a search field and a toolbar for acting on several items at once.

PageLightDarkBoth

When to use

Where a product puts the way into Activity is on the product's own page.

Anatomy

• ActivityInboxPanel: the panel. It holds a Panel header with the title Activity. Required.
• ActivityInboxSidebar: the column of views and filters on the left, as sidebar rows (Sidebar). Hidden on a phone.
• ActivityInboxControls: the row above the list: All / Unread and a search field.
• ActivityInboxSelectionToolbar: a select-all checkbox, then either the sort menu or ActivityInboxSelectionCount and the actions for the selected items.
• ActivityInboxViewport: the scrolling list of InboxItem rows.
• ActivityInboxLoadingMore: one line at the end of the list while more items load.

States

PageLightDarkBoth

PageLightDarkBoth

PageLightDarkBoth

Behavior

• Open a selected item beside the list, and mark it active on its row.
• On a phone, replace the sidebar with one button in the panel header that opens the views and filters.
• When items are selected, replace the sort menu with the count and the actions for them.
• Put Mark All Read in the panel header as a small ghost button, when the panel offers it.

Accessibility

• The parts are plain layout elements; raft-ui adds no Base UI primitive. The views and filters are sidebar rows, the read filter is Tabs, and the sort is a DropdownMenu.
• Give the panel title a heading level (render={<h2 />}).
• Mark the current view with aria-current="page" and a pressed filter with aria-pressed.
• Name the select-all checkbox (aria-label="Select all visible activity") and the search field (aria-label="Search activity").
• Set aria-busy on ActivityInboxPanel while it loads.