shadcn.io is not affiliated with official shadcn/ui
Batch Actions Comments Block for React
A comment inbox where Shift-click ticks a range, a Quick select menu picks spam-like or week-old comments, and Resolve, Move to and Delete act on the ticked ones with an Undo.
Installation
Overview
Clear a busy queue in one pass, with this comment inbox for React with Base UI. It is the inbox of Sweepley, a tool for community managers. A band at the top holds a Quick select Dropdown Menu (Spam-like, Older than 7 days, All, Clear) and the count of ticked comments. Under it ten comments sit in a held scroll region, each a row with a Checkbox, the author, a line of the comment, the date and where it sits. Click one box and Shift-click another and every row between them takes the state of the box you clicked; Shift and Space do the same from the keyboard, and the status line says what the range was ("Selected 4, from 3 to 6."). The action foot is always there: Resolve selected is the only Shine Button and stays in place while nothing is ticked, saying why instead of vanishing; a Native Select moves the ticked comments to Inbox, Triage or Archive; Delete asks first in an Alert Dialog that reads "for spam and abuse, not disagreement". Every action leaves an Undo. It is built from Checkbox, Dropdown Menu, Alert Dialog, Native Select, Shine Button, Button, Badge and Guides, with a CSS entrance only. For moderation queues, support inboxes and any list where people act on many items at once.
FAQ
How do I fill it with my own comments?
Edit START (an id, the author, an ISO at, the body, its folder and whether it is resolved), SPAM_WORDS for the Spam-like rule and OLD_DAYS for the age rule. AS_OF is the fixed day the age is counted from, so "Older than 7 days" never changes between visits. FOLDERS lists the places Move to offers.
How does the Shift range work?
The block remembers the last box you pressed. Press another with Shift held and every row between the two takes the state of the one you pressed, whichever way round they are; without Shift it changes one row. Shift and Space on a focused box does the same, and the status line reads out the range ("Selected 4, from 3 to 6.") so a screen reader hears it. Plain text is not selected by the Shift press, so the page does not flicker.
What do the Quick select rules do?
Spam-like ticks every comment containing a whole word from the SPAM_WORDS list, in any case; the same rows carry a Spam-like badge so you can see why. Older than 7 days ticks comments more than seven days older than AS_OF. All and Clear do what they say. Each rule replaces the selection and says how many comments it ticked. These are word lists and dates in this page, not a model.
What happens when I resolve, move or delete?
The change applies to the ticked comments at once, the selection clears, and the status line says what happened. Undo restores the list as it was before the last action. Delete asks first; the dialog starts with focus on Keep them, cannot be dismissed by clicking outside and only deletes when you press Delete comments. Nothing is saved or sent in this demo.
What stays local, and how do I make it real?
All of it. To wire it up, send the ticked ids to your server from resolve, the move handler and remove, apply the server's answer to the list, and keep Undo as a server call (a short-lived soft delete is the usual way). Check permissions on the server: hiding Delete for some roles is not a permission check.
Is it accessible?
Each box is named by the author, the whole row is its label, and the list is a scroll region you can reach with Tab. The primary action never disappears: while nothing is ticked it is marked unavailable and pressing it says "Tick one or more comments to resolve." The count, the ranges and every result are read from one polite status line.