shadcn.io is not affiliated with official shadcn/ui
Bookmark Collections Comments Block for Radix UI
A research notebook where each interview comment has a Save to popover of checkboxes, so one comment can sit in several collections, with a New collection row and live counts.
Installation
Overview
Keep the comments you will want again with these bookmark collections for React with Radix UI. A compact header names the notebook, and under it one hairline frame splits in two: a rail of collections (All comments and three of yours, each with its count) beside the comments of the chosen one. Every comment ends in a "Save to..." Popover holding a Checkbox per collection, so a comment can be in several at once, and a "New collection" row that makes a collection and ticks it for that comment. The list shows "Saved in" chips, the counts follow every change, and taking the last comment out of a collection shows an Empty state in the same held scroll region, so the frame never changes height. On a phone the rail becomes a row of chips above the list. It is built from Popover, Checkbox, Input, Empty, Badge, Avatar and Guides, with a CSS entrance only. For research notebooks, review tools and any thread where people bookmark what they will need later.
FAQ
How do I fill it with my own comments and collections?
Edit PEOPLE and REMARKS (an id, who wrote it, an ISO at and the body), START_COLLECTIONS for the collections that exist on load and START_SAVES for the "comment/collection" pairs already saved. AS_OF is the fixed "now" behind "6 d ago", and LIMIT is the most collections a notebook holds.
Can a comment be in more than one collection?
Yes. The popover is a list of checkboxes, not a single choice, and each checkbox is named for the comment and the collection. The chips under the comment show every collection it is in, and each collection's count is derived from the saved pairs, so nothing is typed twice.
What happens when I make a new collection?
Type a name in the popover and press the plus button or Enter. The collection joins the rail with this comment already in it. An empty name, a name you already use or the sixth collection is refused with a line under the field, and the field keeps your text.
What stays local?
The collections, the saved pairs and the chosen view all live in the page, and nothing is saved. To make it real, store the pairs per user on the server from the tick and create handlers, and load them with the comments. A comment saved by one person should not appear in another person's notebook unless you share the collection.
Is it accessible?
The rail is a radio group, so the arrow keys move between collections, and the list is a labelled scroll region you can reach with Tab. The popover traps nothing and returns focus to its button. Every checkbox is named, for example "Pricing questions" under the comment's author, and each change is read out in the polite status line. When you take a comment out of the collection you are viewing, focus moves to the list instead of being lost.