shadcn.io is not affiliated with official shadcn/ui
Moderation Console Comments Block for Ark UI
A moderation window with a queue of six flagged comments, each shown in context with its flag tally, and Keep, Remove with a required reason and Warn author decisions that move to the next one and can be undone.
Installation
Overview
Decide on a flagged comment with the conversation around it, with this moderation console for React with Ark UI. It is the console of Wardhurst, a neighbourhood forum, in a framed window with no header above it. The top bar holds the title and "2 of 6 reviewed" beside a thin Progress bar. The queue lists the six flagged comments with their top reason and number of reports; choosing one shows the thread around it, two comments before and after with the flagged one outlined and tagged, over a tally of the flags ("Spam 3") and the three decisions. Keep is the only Shine Button. Remove asks first in an Alert Dialog that needs a reason from a Native Select and takes an optional note; Warn author sends a canned note chosen from another select. Each decision moves on to the next unreviewed comment and an Undo puts the last one back. The keys K, R and W choose the same decisions, written out with Kbd chips, while focus is inside the window and not in a field. Below the large breakpoint the window shows one pane at a time with a Back button. It is built from Alert Dialog, Native Select, Shine Button, Button, Progress, Badge, Avatar, Kbd and Guides, with a CSS entrance only. For forums, comment sections and review desks.
FAQ
How do I load my own flagged comments?
Edit THREADS and QUOTE_LINES (one line per comment: thread, id, author, date, time, words, separated by bars) and FLAG_LINES (the id of a flagged comment and its spam, abusive and off-topic report counts). The context is the two comments before and after in the same thread. CANNED holds the warning notes and CAUSES the removal reasons. Keep each list short enough to read in the queue.
What do the decisions do?
Keep marks the comment as reviewed and leaves it up. Remove needs a reason, can carry a note for the author and marks it removed; the confirm button stays unavailable until a reason is chosen, with the sentence beside it saying so. Warn author marks it warned with the note you chose. Each one jumps to the next comment without a decision, wrapping round, and the top bar and status line update. Undo returns to the last comment you decided and clears its decision.
How do the keyboard shortcuts work?
While focus is anywhere inside the window, K keeps, R opens the removal dialog and W warns. They are ignored while you type in a field, while a dialog is open and when Ctrl, Alt or Cmd is held, so they never get in the way of typing or of the browser. Every shortcut has a button, and the hint under the buttons is hidden on phones where there is no keyboard.
What stays local?
Every decision. Nothing is removed and no author is told. To wire it up, send the decision, the reason and the note from keep, remove and warn, take the next queue item from the server, and write the decision into an audit log. Do the permission check on the server; hiding the buttons is not one.
Is it accessible?
The queue is a navigation list whose current item is marked with aria-current, the comment in context is a labelled scroll region, and the flagged comment is tagged "Flagged" in words as well as outlined. The removal dialog starts with focus on Keep the comment, and focus goes back to the Remove button when you cancel. The title of the open comment takes focus after a decision so a screen reader starts reading the next one. Results are read from one polite status line.
How does it look on a phone?
The window keeps its height and shows one pane: the queue first, then the comment after you choose one, with a Back button that returns to the queue and focuses the row you came from. The progress count in the top bar hides to leave room for the title; the status line at the foot still says "2 of 6 reviewed".