shadcn.io is not affiliated with official shadcn/ui
Notification Center Comments Block for Ark UI
A framed inbox of six comment threads with unread counts, a detail pane with New markers, Mark thread read, Mark all read and an Unread only filter.
Installation
Overview
Keep a team's comment notifications in one place, with this inbox for React with Ark UI. It is a window with no header above it: the top bar holds the title, the count of unread comments and a Mark all read Button. Under it a list of six threads sits beside the open thread. Each row shows the title, the newest comment, its age and an unread Badge; the detail lists that thread's comments and marks every unread one with a start bar and the word New. Mark thread read, the one primary Shine Button, clears the open thread, and the counts in the list, the top bar and the thread line all follow. A Switch filters the list to unread threads; with none left, an Empty state fills the same box. Below the large breakpoint the window shows one pane at a time with a Back button, and focus moves to the thread's heading or back to its row. The window never changes height. For team inboxes, review queues and any list where the unit is a thread, not a single message.
FAQ
How do I fill it with my own threads?
Edit THREADS: each has an id, a title, a place and its remarks in the order they were written. A remark has an id, an author, an ISO at, its body and fresh, true when it starts unread. Counts, the newest comment in a row and the thread line are all worked out from that list and the read ids, so nothing is typed twice.
What does Mark thread read do?
It adds the open thread's unread comment ids to the read list, so the New markers, the row badge, the top bar count and the thread line update together. Opening a thread does not mark it read, on purpose: you can read a thread and decide later. When nothing is unread the button stays in place and the status line says so.
What stays local?
The read list, the filter and the open thread. Nothing is saved or sent, and the status line says so. To make it real, send the ids from the two mark handlers, store a read cursor per person and thread, and load the counts from the server so a second tab agrees.
What happens when everything is read?
With Unread only on, the list is replaced by an empty state that fills the same box, so the window keeps its height. The open thread stays in the detail pane. Turn the filter off and every thread is back.
Is it accessible?
Rows are native buttons and the open one is marked with aria-current. Each unread count carries a hidden noun, so it reads as "3 unread comments". The comments region is focusable so it can be scrolled with the keyboard, and the status line is read out politely. On a phone, choosing a thread moves focus to its heading and Back returns it to the row.