Notification List Sheet for React

Unread rows get bg-muted/50 and a small dot at the end of the row. The dot holds a visually hidden Unread, so the state isn't color alone.

From the data: the demo counts the items with unread: true, and both the trigger's Badge and the description use that number. Two of the four start unread.

The rows use AvatarFallback with the sender's initials on the primary color. Add an AvatarImage before the fallback to show a photo; the initials stay as the fallback while it loads or if it fails.

Not in this demo: the list is static and the button has no handler. Keep the items in state and set unread to false on every one when it's pressed.

The outline button labeled Notifications is the trigger, and its text is the accessible name. The badge inside it is part of that name, so it's read as Notifications 2. The Button goes in the render prop of SheetTrigger, and the label stays its child.

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Notifications, and the description reads You have 2 unread notifications.