shadcn.io is not affiliated with official shadcn/ui
Account Notices Inbox Account Block for Svelte
An inbox of notices about the account itself, in Needs action, All and Read tabs, each notice opening to its text, with the day it is required by and an Acknowledge button that turns it to Done.
Installation
Overview
Keep the things a service must tell people, and needs from them, in one place, with this notices inbox for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds Tabs for Needs action, All and Read, each with its count in a Badge. Each notice is a row with an unread dot (and an unread label for screen readers), a title, its kind and the day it was posted, and it opens with a Collapsible to its text, which also marks it read. A notice that needs you shows the day it is required by, counted from one fixed day, and an Acknowledge button; pressing it turns the notice to Done, moves the count and puts focus on the next one. The header's Shine Button marks everything read except the notices that still need an answer. Every tab keeps one height and shows an Empty state in it. It's built from Tabs, Collapsible, Badge, Empty, Button, Shine Button and Guides, with a CSS entrance only. For terms updates, policy changes and data requests; the product's own inbox is the notification center.
FAQ
How do I fill it with real notices?
Edit NOTICES. Each has an id, a kind, a title, a body, an ISO posted day and a needs flag; a notice that needs an answer also has a by day. Which ones are already read is READ_AT_START. Days left are worked out from the fixed AS_OF constant, never the clock, so replace it with the server's today.
What stays local, and how do I make Acknowledge real?
Everything: Acknowledge adds the id to local state and says "Acknowledged in this demo". In production, post the acknowledgement with the notice id and the signed-in account, keep the time it was given, and update the row only when the server answers. Do not treat a click as consent unless your lawyers say it is.
Why does Mark all read leave some notices?
A notice that needs an answer is not read until it has one, otherwise a person could clear a legal notice without seeing it. So the button marks the rest read and the status line says how many still need an acknowledgement. When nothing is unread the button says so instead of doing nothing silently.
What happens when a tab is empty?
Acknowledge the last notice that needs you and the Needs action tab shows an empty state in the same height, and focus goes to Mark all read. The tabs hold the height of the longest list, so switching tabs or acknowledging never moves the page. The counts in the tabs are numbers in text, not only colour.
Is it accessible?
The tabs follow the usual keyboard pattern. Each notice's title is a button that says whether it is open, an unread notice is announced as "Unread: title", and Acknowledge is named for its notice ("Acknowledge: Terms of service 4.2 take effect on 1 Nov"). The notice text is inert while closed. Dates are time elements and keep their order in a right-to-left page. The status line is a polite live region present from load.