shadcn.io is not affiliated with official shadcn/ui
Mark All Read With Undo Notification Block for Vue
A summary band with a rolling unread count and a mark all read that fades the dots in turn and offers an exact undo, over a list where every row can be marked unread again.
Installation
Overview
Make clearing an inbox feel immediate and safe, with this mark-all-read panel for Vue with Ark UI. A summary band sits over the list in two cells with a shared hairline: the unread count in a Sliding Number with the number of channels it comes from, and a Mark all read Button. Pressing it rolls the count to zero while the unread dots fade out one after another, and the button cell becomes a strip that says how many were marked read, with an Undo that puts back exactly the messages that were unread. Below, six messages each carry a Toggle to mark one unread again. Unread is a dot, a heavier name and the word Unread for a screen reader. A Clear all button empties the list into an Empty state in the same height, with a Restore. It's built from Sliding Number, Toggle, Button, Empty and Guides, with CSS for the fade. For a team chat, a messages page or any list with a mark-all action.
FAQ
How do I fill it with my own messages?
Edit MESSAGES. Each has an id, who sent it (who and its initials), the channel, the text, an ISO at time and whether it starts unread. The count, the "In 3 channels" line and the toggles' states are worked out from the list of unread ids, so nothing is typed twice. Times are written in UTC and shown against AS_OF, so the page reads the same everywhere.
How exact is the Undo?
Mark all read keeps the list of ids that were unread and then clears it; Undo puts that list back, so the same messages are unread again, including ones you had marked unread by hand before. The Undo strip goes away as soon as you change one row by hand, because after that putting the old list back would no longer be exact. Focus moves to Undo when the button goes away and back to Mark all read when Undo is used.
What stays local, and how do I make it real?
Read state lives in the page and resets on reload; nothing is sent. To make it real, send the ids that Mark all read changes and the id of a single toggle, and let Undo send the same list back. The strip is a good place to show a failed request: swap its text for the error and keep Undo as Retry.
What moves, and what happens with reduced motion?
The count rolls like an odometer and each dot fades, with a delay that grows by row so they go out in turn. Both are CSS only. With reduced motion the digits change in place and the dots change at once, with no delay. Nothing else animates, and the list's height never changes: the strip takes the place of the button.
Is it accessible?
The count is read out as a plain number, and the status line, a polite live region present from the start, says what each action did. Every toggle is named for its message and says whether it is pressed, and an unread name is spoken first with the word Unread. The button stays focusable when nothing is unread and answers "Nothing is unread".