Forum Thread Replies Features Block for React

The post is POST and the replies are REPLIES at the top of the file. Each reply has an author, initials, time, body, vote count and its own replies list, which the block renders one level deep. The reply count under the post is computed from the data, so it stays right when you add or remove one.

Each upvote is a Toggle. The component keeps the ids you have voted for in one list, and every count is the stored number plus one for a voted id, formatted with a fixed en-US number format so server and browser agree. Nothing is sent anywhere: wire vote to your API and keep the same shape.

Each top-level reply wraps its button and its nested replies in a Collapsible, open by default. The button's words change with its state ("Hide 2 replies" or "Show 2 replies") through the aria-expanded attribute, so there is no extra state. With reduced motion the height change is instant.

The heading is an h2, each feature is an h3 under it, and the post's title is an h3. Replies are nested lists, so the hierarchy is announced. Each vote button's name says what it votes for ("Upvote maria_k's post, 1,284") and is exposed as a pressed or unpressed toggle; each fold button is a real button with aria-expanded. Everything works with Tab, Enter and Space, with a visible focus ring.

Yes. The thread sits on bg-card, the indent rail is a hairline in your border colour, and a pressed vote takes bg-foreground with text-background, so it is dark on a light page and light on a dark one. The initials circles are outlined, not coloured.

The header and the three features come first and the thread follows in one column. The nested replies keep their rail and indent at 320 pixels, long words wrap, and the buttons are the size of a thumb. The thread has no fixed height, so folding a branch just shortens the page.