Overview

Build a threaded comments UI: render comments recursively and add reply, edit, delete, and collapse with immutable tree updates.

Requirements

Render

• Render the full thread from initialComments in App.tsx; the provided CommentCard.tsx and data.ts are read-only.
• Root comments appear in array order and replies are nested inside their parent, so a parent comment container also contains its descendants in the DOM.
• Each comment container has data-testid="comment-<id>". The seed order is c1, c2, c3, c4, c5, where c1 contains c2 and c4, and c2 contains c3.
• Each comment shows its author and text. The text element has data-testid="comment-text-<id>".

Collapse

• Only comments that have replies render a collapse control data-testid="toggle-<id>" with an aria-expanded attribute.
• Clicking the collapse control hides or shows only that comment's replies. The comment itself stays visible.

Reply

• Every comment renders data-testid="reply-<id>", data-testid="edit-<id>", and data-testid="delete-<id>" controls.
• Clicking reply-<id> opens a reply form under that comment with data-testid="reply-input-<id>", data-testid="reply-submit-<id>", and data-testid="reply-cancel-<id>".
• Submitting a non-empty reply appends it to that comment's replies with author "You", and closes the form.
• Reply text is trimmed, and empty or whitespace-only submissions are rejected: the form stays open and nothing is added.

Edit

• Clicking edit-<id> replaces the comment text with a prefilled editor: data-testid="edit-input-<id>", data-testid="edit-save-<id>", and data-testid="edit-cancel-<id>".
• Saving an edit trims the text and updates only that comment, then closes the editor.
• Cancelling an edit restores the original text and closes the editor.

Delete

• Deleting a comment removes it together with its entire subtree while leaving siblings intact.
• Deleting every comment renders data-testid="empty-state".

Immutability

• All updates are immutable: neither initialComments nor any node's replies array is mutated.

Notes

• The card UI and its recursive rendering are already provided by the read-only CommentCard; you own the state, the handlers, and the two tree helpers.

• The single most important idea is a recursive tree update. map over the current level, recurse into replies when the target is not the current node, and rebuild only the nodes on the path:

  Use it for both reply (the update fn appends a new reply) and edit (the update fn returns { ...comment, text }).

• Never mutate initialComments or a node's replies array. Create new arrays with spread; the seed is shared across renders and across tests.

• Collapse is UI state, separate from the tree. Keep the collapsed ids in a Set; CommentCard reads it to hide replies.

• Delete drops the whole subtree: filter out the node and recurse into the remaining replies so the deleted branch never renders.

• Make the reply and edit textareas controlled and trim() before saving; reject empty or whitespace-only text so the form stays open.

• A reply added to a collapsed parent stays hidden until you expand it — that is expected and fine.

• APIs: Updating objects in state, Rendering lists, aria-expanded.

Tests

1. renders all seed comments with replies nested under their parent
2. shows the author and text of every comment
3. collapses a comment's replies and keeps the comment visible
4. expands a collapsed comment again
5. opens the reply form under the correct comment
6. adds a reply with the author You and closes the form
7. rejects an empty or whitespace-only reply and keeps the form open
8. prefills the editor with the current comment text
9. saves an edited comment and closes the editor
10. cancels an edit and restores the original text
11. deletes a comment and its replies, keeping siblings intact
12. shows the empty state when every comment is deleted
13. never mutates the imported seed tree