shadcn.io is not affiliated with official shadcn/ui
Follow Thread Comments Block for Svelte
Five discussion threads each with a follow level of All activity, Mentions only or Muted, a follower count that gains one when you follow, and a filter with counts.
Installation
Overview
Let readers decide how loud each conversation is, with this followed-threads list for Svelte with Ark UI. A compact header names the list and the frame holds one band and five rows. The band has a segmented control, All, Following and Muted, each with its count. Each row shows a thread's title, the board it lives on, an Avatar group of followers with their count, and what is new since you looked. A Popover of three radios sets the follow level; its button reads "Following: Mentions only" or "Muted". The numbers are worked out from the level: All activity counts every new comment, Mentions only counts the ones that mention you, and Muted counts none. Following adds you to the follower count and Muted takes you out. Filtering keeps the panel's height with an unseen copy of the full list, and a filter that matches nothing shows an Empty state in place. For forums, issue trackers and any place where people follow threads.
FAQ
How do I fill it with my own threads?
Edit THREADS: an id, a title, the place it lives in, the followers it has before you, how many comments are fresh, how many of those are mentions, three follower initials in marks, and the start level. The new-comment text and the follower count are worked out from the level, so a thread has one number for each, not one per level.
What do the three levels mean?
All activity tells you about every new comment. Mentions only tells you about the ones that mention you. Muted tells you about nothing, and the row says "Muted, 0 new". The words on the button and in the popover are the same, so the choice can be read before it is pressed.
Why doesn't the panel change height when I filter?
A copy of the full list is drawn in the same grid cell, unseen and inert, so the frame is always as tall as five rows. The filtered list sits on top of it and an empty state fills the cell when nothing matches.
What stays local?
The levels and the filter. The status line names each change, and nothing is saved or sent. To make it real, store one level per person and thread, send it from the pick handler, and count new comments on the server with the same rule.
Is it accessible?
Each level button is named after its thread and says the current level, "Follow level of Release notes for 4.2: All activity. Change.". The popover is a labelled group of radios you can move through with the arrow keys; a mouse press closes it, the keyboard keeps it open. The filter is a labelled segmented control and the status line is read out politely.