Reconnected Notification Block for React

No. The notice is drawn: nothing reads your network, nothing was missed for real, and the page says so in its foot ("Demo: nothing reconnected"). Replay shows the notice again with every notification unread. In your app, show the card when your socket or online event fires, fill MISSED from what your server queued, and keep the offline half of this pair, notification-connection-lost, for when it drops.

A notice that has done its job shouldn't stay over the page. The drain bar is ten seconds of CSS (animate-out with a slide to the start side) and the card folds when its animation ends; hovering the card or moving focus onto it pauses the bar, and opening the list ends it for good, so nothing disappears while you are reading. The list never depends on the timer: the page's own Catch up button, with the unread count, stays in the top bar. With reduced motion the bar is not drawn and the card stays until you dismiss it, and the line in the foot says which of the two it is.

MISSED is a typed list, each notification with a group (mentions, comments or shares), its text and its UTC time. GROUPS sets the order of the sections and each section counts its own unread ("2 new", then "all read"). Unread is a filled dot and a medium weight with an unseen "Unread" in the row's name; Mark all read makes every row regular, drops the dots and updates the counts and the top bar button.

That one is the offline bar with the edits waiting to send and a retry that counts; this one is what you see after: Back online, what arrived while you were away, and a way to catch up. Neither reads the network, and neither repeats the other's list.

The card is a named section with a heading, the list is a scrollable region you can reach with the keyboard, and a single polite status line says what each press did ("5 marked read. You are all caught up"). Dismiss and Mark all read are real buttons, Catch up in the top bar reports aria-expanded while the list is open, and the unread state is a dot, a weight and a word, never a colour.

The card takes the width of the stage minus a margin at the top centre, its Catch up and Dismiss sit beside the text, and the list scrolls inside the card at a fixed height so the stage never grows. The drawn document keeps only what fits.