Grouped Comments List Integration Block for React

A resolved comment is never taken out of the list. In the Open view its content is made unseen (it keeps its size, and screen readers skip it) and a quiet line in the same row says "Resolved comment hidden", so every row below keeps its place and every frame header stays where it is. Switching to All shows the content again. The count in each header and the line in the foot band come from the same data, so they never disagree with the rows.

In the demo it changes local state only: the button reads "Syncing" and ignores presses for about a second (a timer that is cleared if the block unmounts), then the row's state settles to Open and the foot band's status line takes focus and says "Synced in this demo. Nothing was sent to Figma." The slot keeps its size throughout, so the row doesn't change height. Replace retryNow with your own retry and keep the three states, failed, working and synced.

Several frames can be open at once, and the first starts open. Each frame header is a real heading with a button in it. Closed panels stay in the page until found, so the browser's find can open one; arrow keys don't move between headers, Tab does.

The block names Figma in text and ships no Figma logo, colour or wordmark. Figma's tile is a neutral lettermark, Fg in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. The avatars are initials, not photos.

Edit FRAMES at the top of the file: each frame has an id, a name and its remarks in pin order, and each remark an author, two typed initials, a text and whether it is resolved. The pin number is the remark's place in its frame, so a resolved comment keeps its number when it is hidden. FAILED_ID names the one comment shown as failed; point it at your own, or at none.

On a phone the avatars drop out of the rows, leaving the number, the author, the comment and the state. In a right-to-left layout the rows and the toolbar flip. The panels open with the catalog's own height animation, which respects reduced motion, and the header fades up once on load; with reduced motion it simply appears.