Notification Feed Reviews Block for React

From the typed rows. All is the number of rows, Needs action is the rows that still wait for a decision (an approval or a reply) and haven't had one in this visit, and Replies is the rows that are customer replies. Approving a review takes it out of Needs action and updates the number at once. Edit ITEMS at the top of the file to use your own events.

They change local state and say so. Approve marks the row "Approved" and a polite status says the review was approved in this demo and nothing was published; Reply marks it "Reply noted" and says nothing was sent. To make them real, call your own endpoint from the decide handler. A pressed button stays where it is and changes its words, so keyboard focus is never lost; in the Needs action view, where the row then leaves the list, focus moves to the next row's first button.

By a filled dot, bolder headline text and the words "Unread" for screen readers; once read, the dot disappears (its space is kept) and the button beside it says "Read". The buttons' names include the person, for example "Approve: Marit Solheim", so a list of them is understandable out of context.

Each tab filters the same rows, and an unseen copy of the full list keeps the block's height whichever view is open. Mark all as read clears every dot at once and is announced with how many it cleared; when nothing is unread it stays focusable and says so instead of doing anything. The Tabs are controlled with value and onValueChange; the selected tab is marked data-active.

Rows are typed with an ISO day and a time. The days come from the rows in order, and each divider is formatted with Intl.DateTimeFormat in UTC, so it's the same on every server; nothing reads the visitor's clock. Each time is a time element with the full date and time.

Yes. The icon, text and actions swap sides with the page's direction, the unread dot sits on the icon's end corner, and times and counts are isolated so their digits keep their order.