shadcn.io is not affiliated with official shadcn/ui
Flagged Queue Reviews Block for Radix UI
Flagged reviews of a travel-guide series as accordion rows ordered by report count, each opening to the reasons tally, the reporters, the review and two decisions: Dismiss flags, or Remove review behind a confirm dialog.
Installation
Overview
A flagged-review queue for React with Radix UI, for Braeloft, a fictional series of pocket travel guides. A start-aligned header counts what is open from the data ("6 flagged reviews: 6 still open, 23 reports waiting"), and a rail-to-rail accordion lists the flagged reviews, the most reported first. Each row names the title, the reviewer and the guide, with a bar whose length is the report count and a Badge that says it ("5 reports"); no colour marks severity, only the number and the weight. A row opens to the reasons tally (Spam 4, Abusive 1 and so on, each with its own bar), who reported it, the review in full and two decisions: Dismiss flags, the Shine Button, keeps the review up, and Remove review asks first in an AlertDialog that says removal is for abuse, spam and personal data and never for disagreement. A decision shows its outcome in place with a Reopen button, and a polite line logs it. One row, already escalated, carries the block's only status dot. It's built from Accordion, AlertDialog, Badge, Status, Avatar, Rating and Shine Button. On a phone the count moves under the title.
FAQ
How is the order worked out?
By each review's report count, which is the sum of its reasons' counts in FLAGGED; reviews with the same count keep the order they were typed in. The order is fixed when the page loads, so deciding one never moves another row. The line above the list is counted from the same rows and what you have decided.
Why is some of the tally marked
Readers report reviews they disagree with, and an author's fans report criticism. The tally counts those reports honestly, but a reason with ground: false is labelled so a moderator sees that disagreement alone is not a rule broken. Of the six reviews here, two are honest criticism that readers mostly disagreed with, and Dismiss flags is the right decision for them.
What does Remove review do?
It asks first, in an AlertDialog that names the three grounds and says a low rating or a disagreement isn't one. Choosing Remove review marks the row Removed here, says so in the polite log line and offers Reopen; nothing is deleted anywhere and a reload starts afresh. Dismiss flags needs no confirmation because it only leaves the review as it was.
Where does focus go after a decision?
To the Reopen button of the same row, because the two decision buttons it was made with are drawn invisible once the row is decided. The row keeps its height by holding both sets of controls in one cell, so opening and deciding never move the rows below. After the dialog, focus waits a moment so it lands after the dialog has closed.