shadcn.io is not affiliated with official shadcn/ui
Nested Thread Notification Block for Solid
A followed thread with the facts at the start (topic, five people, a Mute thread toggle) and the replies in the frame in two levels, each branch folding its answers.
Installation
Overview
Tell people what is new in a thread they follow, with this thread notification for Solid with Ark UI. A compact header sits over two columns. The column at the start is quiet and sits outside the frame: the topic, who started it, the five people in the thread as a stack of initials with their names in words under it, and a Mute thread Toggle whose line says exactly what changes ("Muted: you won't be notified of new replies in this thread", or the reverse). The framed column at the end holds the replies in two levels, the second under a rail; every reply with answers has a button, "Hide 2 replies", that folds them with a Collapsible. New replies carry a dot, a heavier name and a spoken word. Folding keeps the frame's height by holding an unseen copy of the whole thread. It's built from Toggle, Collapsible, Avatar and Avatar Group and Guides, with a CSS entrance only. For a forum, an issue tracker or any place where people follow a conversation.
FAQ
How do I fill it with my own thread?
Edit TOPIC, STARTER and POSTS. Each post has an id, who wrote it (by), an ISO at, its text, whether it is fresh (new since you last looked) and the parent it answers (empty for a reply to the topic). The people, the counts ("6 replies, 3 new") and the "Hide 2 replies" labels are worked out from that list. The block draws two levels, as the forum it is written for does; a deeper level would need another nested list.
What does Mute thread do, and what stays local?
It flips a flag in the page and rewrites one line, so the reader sees what will change: with the thread muted, new replies no longer notify you, and the replies already here stay in place, new ones still marked. Nothing is saved. To make it real, store the flag per person and thread in the toggle's handler and send it to your notification service.
How does folding work?
Each reply that has answers owns a collapsible. Its button says "Hide 2 replies" while they show and "Show 2 replies" while they are folded, and the status line names whose answers moved. The folded state lives in the page. The unseen copy of the unfolded thread keeps the frame at its full height, so the page below does not jump; replies under a folded branch do move up inside the frame, since that is what folding is.
Is it accessible?
The thread is an ordered list of replies with a nested list per branch, each branch's button reports whether it is expanded, and the mute toggle reports whether it is pressed. The stack of initials is decoration; the same five names are a real list under it. A new reply says "New" to a screen reader as well as showing a dot and a heavier name.