shadcn.io is not affiliated with official shadcn/ui
Pinned Comments Block for Vue
A moderator's thread with a pinned band of up to three comments you can move, unpin and switch to a reader view, over a sortable list of the rest.
Installation
Overview
Keep the comments that matter at the top, with this pinned thread for Vue with Ark UI. A compact header names the thread and holds a Moderator view Switch. Under it a hairline frame has two bands. The first is the pinned band: three fixed slots, each pinned comment showing its author, "Pinned by Wren", the first line of its words and Move up, Move down and Unpin buttons; the band keeps its height whether zero, one or three comments are pinned. The second is a held scroll region of every other comment, ordered by a Native Select (Newest, Oldest, Most reacted) that never touches the pinned band. Each comment ends in a Pin Toggle. When three are pinned, the other Pin toggles stay where they are but refuse, and the count line explains ("Unpin one first"). Turning Moderator view off hides every pin control, so you see what a reader sees. A polite status line names each change. It is built from Switch, Toggle, Native Select, Button, Avatar, Badge and Guides, with a CSS entrance only. For community boards, support forums and any thread with a few comments that must stay visible.
FAQ
How do I fill it with my own thread?
Edit PEOPLE and REMARKS (an id, who wrote it, an ISO at, the body and its reacts count), START_PINS for what is pinned when the page loads, and LIMIT for the most comments that can be pinned. PINNER is the moderator named in "Pinned by". The pinned band is drawn for three slots, so a different limit also needs a different row count in its minimum height.
What happens at the pin limit?
Every Pin toggle that is not pinned stays in place but is marked as unavailable and is described by the count line, "3 of 3 pinned. Unpin one first.", so a keyboard or screen reader user hears the reason when they land on it. Pressing one anyway does nothing except say so in the status line. Nothing disappears, so the list does not jump. Unpin a comment and the toggles work again.
How do Move up and Move down work?
They swap a pin with its neighbour. At the ends the button stays but says "Already the first pin" or "Already the last pin" instead of moving, and after a move focus stays on the same button of the moved comment, so you can press it again to keep going. Sorting the list affects only the unpinned comments; the pinned order is yours.
What stays local?
The pins, their order, the sort and the view. To make it real, save the ordered list of pinned ids on the thread from the pin, unpin and move handlers, and check on the server that the person is a moderator: hiding the buttons in the reader view is not a permission check. Most apps also let several moderators pin at once, so load the pinned list rather than keeping it per tab.
Is it accessible?
The pinned comments are a labelled list and the others a labelled scroll region you can reach with Tab. Every control names its comment ("Pin the comment by Dara Whitlock", "Move up the pin of Wren Castellane"). The Pin toggle reports its state and, at the limit, points at the sentence that explains why it cannot be used. Pinned status is written ("Pinned by Wren"), never only a glyph. The sort and the view announce what they did in the polite status line.
How does it look on a phone?
The Moderator view switch drops under the sentence. Each pinned slot keeps one line of the comment, with the controls beside it; "Pinned by Wren" stays available to screen readers. The sort select sits on its own line under the "All comments" heading when there is no room beside it, and the list scrolls inside its region.