shadcn.io is not affiliated with official shadcn/ui
Folder Organization Comments Block for Ark UI
A tree of folders beside a list of design comments, where each comment has a Move to popover, counts follow every move, and a new folder can go under the selection.
Installation
Overview
File comments the way you file documents with this folder tree for React with Ark UI. A compact header names the tool, and one hairline frame holds a breadcrumb band, a folder tree and the comments of the chosen folder. The tree is the Tree View (Inbox, Design with Reviews inside it, Specs and Archive), each folder with its count, and it works with the arrow keys. Every comment has a "Move to" Popover that lists the folders indented by depth; moving a comment updates both counts and puts focus on the next comment. The breadcrumb band holds a field and Add, which make a folder under the selection (three levels at most), and Delete, which works only on an empty folder. An Empty state fills the held list when a folder has nothing in it. On a phone the tree sits above the list in its own scroll area. It is built for the keyboard rather than for dragging, from Tree View, Popover, Input, Button, Empty and Guides. For design reviews, support triage and any pile of comments that needs a place.
FAQ
How do I fill it with my own folders and comments?
Edit START_FOLDERS (an id, a name and the parent id, empty for a top-level folder), NOTES (the author, the words and the home folder it starts in) and PEOPLE. DEPTH is how many levels a folder tree holds and LIMIT is the most folders. The tree is built from the flat folder list, so adding a folder is adding a row.
Why is there no drag and drop?
Dragging a row into a folder is hard to do without a pointer. The Move to popover does the same job with a keyboard, a touch screen or a screen reader: it lists every folder, indented, and tells you which one the comment is already in. You can add dragging on top if you like, as long as the popover stays.
When can a folder be created or deleted?
New folders go under the selected folder and stop at three levels, with a name that does not already exist. Delete works only when the folder holds no comments and no folders; otherwise the status line says what is still inside. Deleting a folder selects the one above it.
What stays local?
The folders, where each comment sits and the selection live in the page, and nothing is saved. To make it real, send the move from the handler to the server as a single request (comment id, folder id) and refuse a move into a folder the person cannot write to. Keep the folder tree and the comment list in separate queries so a move does not reload the tree.
Is it accessible?
The tree has the tree role with expandable branches and one selected folder, and the list is a labelled scroll region. Move to names its comment ("Move the comment by Dacian Wells to a folder"), the current folder is marked "Here" and flagged as current, and every change is read out in the polite status line. After a move, focus goes to the next comment's button, or to the list when it was the last one.