shadcn.io is not affiliated with official shadcn/ui
Activity Feed Dashboard Block for Vue
A workspace activity feed of fourteen updates under day headings with unread dots that clear on press, view and unread toggles with counts, and a band of who is active and what is pinned.
Installation
Overview
Keep track of what you have and have not read, with this workspace activity feed for Vue with Ark UI. A hairline frame with a plus mark on each corner holds fourteen Emberpost updates under day headings, each with the person's initials, a sentence (who, what, which page), a short quote for a comment and the time. An unread update carries a dot and the word Unread; pressing a row marks it read and every count falls. A Toggle Group picks the view (Everything, Mentions, Mine), each with its unread count, and a second one limits the feed to the unread updates. The header's "Mark all as read" clears the lot. When nothing remains to show, an Empty state says you are caught up. A closing band lists who is active now, with a presence word, and two pinned pages. It's built from Toggle Group, Button, Empty and Guides, with CSS entrances only. For team workspaces, project tools and shared notebooks.
FAQ
How does read state work?
Each update in UPDATES says whether it arrived unread. The page keeps a list of the ones you have read, and an update counts as unread while it arrived that way and is not in the list. Every count in the toggles, the header sentence and the status line comes from that one check.
What do Mentions and Mine mean here?
Mentions are updates that mention you; Mine are updates on pages you own. An update can be both. The counts next to each view are its unread updates, so Everything is never smaller than the other two.
What stays local, and how do I wire it for real?
Everything: the updates and the people are typed, read state lives in this tab and a reload starts again, and nothing is sent anywhere. To wire it up, load the feed with each update's read flag, send a read receipt when a row is pressed, and fill the active list from your presence service.
How do I reach the empty state?
Choose Unread, then press every unread row or use Mark all as read. The feed keeps its height and offers a button that shows all updates again.