shadcn.io is not affiliated with official shadcn/ui
Grouped Comments List Integration Block for Solid
An integration list section for a design-docs tool connected to Figma: comments grouped by frame in an accordion running rail to rail, a toggle that hides resolved ones without moving a header, and a Retry for the one comment that failed to sync.
Installation
Overview
An integration list section for Solid with Ark UI, written for Framenote, a fictional tool that keeps design docs in step with a Figma file, and its Figma connection. A start-aligned header says what the list is, with one sentence, and at its end the mark pair (Framenote's own tile and Figma's neutral lettermark tile, joined by a connector). Under a band rule, a toolbar holds a two-way toggle (Open, All), and below it an accordion runs rail to rail with one band per frame (Login, Dashboard, Settings, Checkout), the first open. Each header names the frame and how many comments on it are still open. Inside, numbered pin rows each show an avatar, who wrote the comment, the comment and its state, Open or Resolved. In the Open view a resolved row keeps its place and size under a quiet "Resolved comment hidden" line, so nothing moves. One comment failed to sync: its row shows "Not synced" and a Retry button that turns to "Syncing" for about a second and then settles to Open, in the same slot. A foot band under the list says how many comments are shown and what stays local, in a polite status line. The block ends on that band. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, Accordion, Toggle Group, Avatar, Badge, Status and Button, with CSS transitions for the entrance and your theme's tokens for every colour. Figma is named in text only: no Figma logo, colour or wordmark ships with the block. The comments and people are example data, and nothing is read from or sent to Figma.
FAQ
Why doesn't the list jump when I switch to Open?
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.
What does Retry do?
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.
How do the accordion and its keyboard behave?
Several frames can be open at once, and the first starts open. Each frame header is a real heading with a button in it. Arrow keys move between the headers, and closed panels stay in the markup.
Can I show Figma's logo?
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.
How do I use my own comments?
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.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
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.