Basic Comments Block for Radix UI

Edit PEOPLE and START. Each comment has an id, who wrote it (by, a person's id), an ISO at, its body, whether it was edited and the parent it answers (empty for a comment on the ticket). ME names the person using the page: their comments say "You" and are the only ones with Edit and Delete. Ages such as "3 h ago" are worked out from AS_OF and the typed times, never from the clock, so the server and the browser print the same words. The block draws two levels; deeper conversations belong in Nested Threads.

Everything. Posting, editing, deleting and undoing change a list in the page, and the status line says "Posted in this demo. Nothing was sent." To make it real, call your API from post, save and remove, then replace the item in the list with what the server returns (its id and time). A real app should also check on the server that the person owns the comment before it edits or deletes it: hiding the buttons is not a permission check.

Delete collapses the row to "Comment deleted. Undo" and moves focus to Undo. The deletion becomes final on your next action: posting, replying, editing or deleting another comment. Until then Undo puts the comment back and returns focus to its Delete button. The count in the heading leaves out a comment that is waiting for Undo. Nothing expires on a timer, so a keyboard or screen reader user never loses the chance to undo.

The thread is a labelled region you can reach with Tab and scroll with the arrow keys. Comments are an ordered list with a nested list of replies per comment; every action says whose comment it is for ("Reply to Linnea Aberg") while showing a short visible word. Time is a real time element. The composer has a label, a problem line tied to the field and a Ctrl or ⌘ + Enter shortcut that is described to screen readers; the status region is present from load and is read out politely when something changes. Character counts are spoken only at 20, 10 and 0 left.

An empty comment says "Write something first." and one under three characters says how many more it needs, in a line that is always in place so the Comment button never moves. A comment can be 600 characters; the count shows in the last 100. A posted comment lands at the end of the thread (at the start in Newest order), marked You and "just now", and the region scrolls to it. Choosing Reply changes the label above the box to "Replying to ..." and the button to Post reply; Cancel reply goes back to a comment on the ticket.

The sort control drops under the sentence and fills the width. Avatars shrink to a small size and the reply rail thins to two pixels. Actions stay on one wrapping row under the text, and the composer's button goes full width under the shortcut hint. The thread region keeps its height and scrolls on its own.