shadcn.io is not affiliated with official shadcn/ui
Bookmarked Messages Chat Block for Ark UI
A team channel with personal bookmarks: a bookmark toggle on every message, an optional one-line note in a popover, and an end pane that lists them with a jump that scrolls the log and rings the message.
Installation
Overview
Keep the messages you will need again, with this bookmarked messages chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Stashleigh, a team messenger: a product channel of flat Message rows with a Toggle bookmark on each one, shown on hover and focus and always on a touch screen. A saved message gets a Note button that opens a small Popover with one optional line. The end pane lists the bookmarks with the author, the line, your note, a Jump to message button that scrolls the log to it and rings it for a moment, and a remove button; its heading counts them and it is open on load. On a phone a two-view Toggle Group under the top bar switches between Chat and Bookmarks. The composer's Shine Button is the only colored control, the frame is ruled by Guides, and everything moves with CSS only. It's the starting point for saved messages, a read-later list or any chat where you keep things for yourself.
FAQ
What stays in the page, and how do I make it real?
Everything. The messages, the three starting bookmarks, their notes and the sample replies are typed at the top of this file, and saving, noting and removing change local state only. To make it real, store marks per user in your API from toggleSave, saveNoteFor and remove, and send the composer's text where the code says so.
Are bookmarks shared with the channel?
No, and the pane says so in the foot line: they are yours alone, so nobody sees who saved what. That is the difference from a pinned bar, which the whole room shares, and from a star filter, which has no note.
How does Jump to message work?
It moves the log's own scroll to the message, never the page's, rings the message for under two seconds and moves focus to it. On a phone it also switches to the Chat view first. The ring is a solid outline, not an animation, so reduced motion changes nothing.
Is the note required?
No. Saving a bookmark never asks for one; the Note button on a saved message opens a one-line field, and saving it empty clears the note. A bookmark without a note simply shows the line.
Is it usable with a keyboard and a screen reader?
Each toggle is named with the sender and time ("Bookmark message from Ludovica Treadwell, 09:05") and reports pressed or not. The pane is a labelled list, the removal button names its message, and the status line says each change in words. The log is a focusable region announced as a log.