Nested Thread Notification Block for React

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.

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.

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.

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.

The column at the start comes first, as one stack: topic, people, then the Mute thread toggle and its line, with the thread under it. The status line reserves three lines so a longer sentence never moves the toggle.