File Comments Notification Block for React

Edit DOCS and REMARKS at the top of the file. A document has an id and a path; a comment has the document id it belongs to, who wrote it (by), an ISO at time, the line number, the quote (the text of that line) and its text. Every count, the "N open" on a file, the resolved total and the sentences come from those lists and from one list of resolved ids, so nothing is typed twice. Times are worked out from one AS_OF constant, never from the clock.

The comment's id joins a list of resolved ids kept in the page, the comment leaves its file's list and appears in the resolved group, and a line says "Resolved Dagny's comment on docs/pricing.md. 3 of 4 open." Pressing it again in the resolved group removes the id and the comment returns to its file. Nothing is saved or sent. To make it real, call your API in the flip handler, update the list from the response and say a failure in the same line.

On purpose. Each file's list sits in one grid cell with an unseen copy of all of its comments, so the band keeps the height it had with everything open and nothing below it shifts when you resolve. The empty room is the cost of that. If you would rather the file collapse, remove the unseen list and its cell.

Every Resolve toggle is a real button named for its comment ("Resolve the comment by Dagny Osei on docs/pricing.md, line 14") and exposes whether it is pressed. After you resolve one, focus moves to the next open comment's toggle, or to the "N resolved" button when none remain; after you reopen one, focus follows it back to the file. The polite status line announces each change, and the only state a comment has is open or resolved. On Base UI the toggle's pressed state is its pressed prop and aria-pressed follows it.

The bands stack as they are. In each comment the Resolve toggle moves from the end of the row to under the words, and the quoted line wraps inside its rail. The resolved group's rows fold to two lines and keep their toggle at the end.

As a native blockquote with a start-edge rail, the line number and the line in a mono font whose direction is fixed, so code reads the same in a page that is mirrored. They are plain text from the typed data, never HTML.