Inbox Reading Pane Notification Block for React

Edit TICKETS. Each has an id, a kind (customer, assign, alert or team, which picks the icon), a title, the from name, an ISO at time, a body, the context fields queue, ref and owner, and two flags for how it starts: unread and archived. VIEWS lists the three views. The counts, the unread number in the top bar and the empty states are worked out from those. Times are written in UTC and shown against the constant AS_OF, so they read the same everywhere.

Read, unread and archive state live in the page and reset on reload; nothing is sent, and Open ticket only says that tickets don't open here. To make it real, send the id from the choose, mark and archive handlers and take the lists from your API. The Undo strip already knows which row it changes and to which state, so its handler is the reverse request.

So the list doesn't move under your pointer. In the Unread view a row you read stays until you leave the view, and the Unread count still drops at once. Switching to All and back lists only what is unread. The same rule holds for the row that takes the archived row's place.

Archive moves the open row to the Archived view and opens the next row in the same view, and Restore does the reverse from Archived. The strip under the list then names the row (its ticket number) and offers Undo, which puts that row back in the state it had and opens it. The strip keeps its height whether or not there is something to undo, and focus moves to Undo after each archive or restore so the next step is one key away.

Each row's title is a button, the open one is marked aria-current, and unread rows say "Unread" first for a screen reader as well as showing a dot and a heavier title. The segments are a labelled group, the status strip is a polite live region present from the start, and both panes scroll on their own while the window keeps its height. Choose a row with Enter or Space and Tab moves on to the pane.

The window is a fixed height on every screen. Below the medium breakpoint the list fills it; choosing a row shows the pane instead, with a Back button at its top and focus on its heading. Back returns to the list with that row focused, and archiving from the pane returns to the list with Undo focused.