shadcn.io is not affiliated with official shadcn/ui
Social Feed Music Block for Vue
A friends' activity feed of listens, playlist adds, likes and shares over two days, where consecutive listens by one friend collapse into a line that opens to the track list, with a kind filter, like toggles and copy-link buttons.
Installation
Overview
Show listeners what their friends are playing without the noise, with this friends' feed for Vue with Ark UI. It lists eighteen typed events from six friends over two days in a fixed-height scrolling region inside a hairline frame with a plus mark on each corner: listens, playlist adds, likes and shares, newest first. When one friend plays several tracks in a row, the feed folds them into a single line, "Tobin listened to 4 tracks", that opens in place with a Collapsible to the list and its times. A Toggle Group with several buttons on at once filters by kind, and the grouping follows the filter. Times are worked out from each event's typed instant against a fixed "now" ("20 min before now", "Yesterday, 22:10"). Each event has a like Toggle whose count rises by one, once, and a button that copies the event's link. Turning every kind off shows an Empty state with a way back. It's built from Toggle Group, Collapsible, Toggle, Avatar, Empty, Button and Guides, with a CSS entrance only. For social listening, shared playlists and any activity feed.
FAQ
How do I fill it with my friends' activity?
Edit FRIENDS (an id, a first name and initials) and LINES, one event a line, newest first, as id|friend|kind|instant|track|playlist|likes. The kind is listen, add, like or share, and the instant is an ISO time. Everything else, including the groups, the times and the counts, is worked out from those lines and the AS_OF_AT constant.
How do the groups form?
After the filter is applied, any run of listens by the same friend with nothing else between them becomes one group, and a group of one goes back to being a plain row. Because the filter comes first, turning off Playlist adds can join two listen runs that an add used to separate. The group's time is its newest track's, and opening it lists every track with its own time.
Why does the feed say before now instead of ago?
The feed has no clock. Every time is measured from one typed instant, 12 October at 11:00 UTC, so the same text appears on every load and in every time zone. Events from the same day read "N min before now" or "N h before now", and older ones show their UTC time with "Yesterday".
What do like and the link button really do?
Like is local state: it flips the toggle, adds or removes one from that event's count and says so in the status line; nothing is saved. The link button copies a typed example address to your clipboard and says "Link copied. Nothing was posted." To make them real, post the like to your API and build the link from the event's id.
Does the feed update by itself?
No. Nothing arrives, because there is no live connection, and no polling timer runs. A real feed would add new events at the top and announce them through the same status line; the list's fixed-height region keeps the panel from moving when it does.
How do I use it from the keyboard?
Tab runs the four kind buttons (Space or Enter flips each), then every group trigger, like toggle and link button in the feed in order. A group's trigger opens and closes it with Space or Enter, and its tracks are skipped while it is closed. Each control is named with the event it belongs to, such as "Like: Odell added Window Seat to Rainy commute".