Inbox Bulk Actions

Accessibility

• Every checkbox names its sender.
• The bulk bar is a labelled toolbar.
• Select all goes indeterminate for a partial selection.

Motion

• The header crossfades into the bulk bar with a 4 px slide over 200 ms.
• The panel fades in and rises 8 px over 400 ms, once.
• Rows fade in over 240 ms with a 40 ms stagger.
• Numbers and bars tween over 240 ms by writing text and transforms, so React does not render per frame.
• With reduced motion, the panel appears in place and values swap at once.

Responsive behavior

• Past 50 messages the list scrolls in a window and only nearby rows render.
• Mobile stacks the subject under the sender and drops labels and Mark read.
• 760 wide on Web and 358 on Mobile, filling narrower parents.
• Collapses by its own width with a container query, so it adapts in a sidebar too.
• Touch targets stay at 44 on Mobile.

Performance

• Past 50 messages the list renders a window of rows with spacers for the rest.
• The filtered list is memoized, and scroll updates wait for an animation frame.

• Import InboxBulkActions and the InboxMessage type. Props: messages, title, defaultSelected, onArchive, onMarkRead, onDelete, animated.
• Selecting rows swaps the header for the bulk toolbar. Callbacks receive ids.
• Removals and read state are local, so update messages on your side.