Browser Tab Notification Block for React

No. Nothing in the block writes document.title; the tab, the address bar and the inbox are drawn, and the line under the frame says "This tab is drawn: your real tab title is never changed." In your app you would set the title from the same helper: document.title = titleOf(unread) in an effect keyed on the count.

An app that wants attention from a tab you aren't looking at usually swaps its title between the count ("(4) Inbox · Tabloft") and the newest message ("Tomas: Standup moved to a quarter to ten") every few seconds. Here nothing swaps: the strip draws both titles side by side and the line under the inbox spells them out, so the block has no timer and nothing flashes. With nothing unread there is nothing to swap in, and the second tab is a plain new-tab placeholder. If you build the real swap, run it only while the tab is hidden, stop it when it becomes visible, and keep it slow.

The four messages are in ARRIVALS and the five that were already there in START; "New message" lets the next one in and Clear marks everything read, all in the page, and a reload starts again. To make it real, feed unreadOf from your own inbox, call your server when messages are read, and set the real title as above. The count is worked out from the list, never typed.

The drawn browser is one figure with a name, the title in the tab is real text, and the line under the inbox says in words what the tab reads. Unread messages are a dot, a bolder sender and the word "Unread" for a screen reader, never a colour. The buttons and the toggle group are named and work with the keyboard, and a polite status message says what each press did and what the tab reads now.

titleOf stops the count at 99: the title reads "(99+) Inbox · Tabloft", the way a title is kept short in a real tab. The demo only lets four messages in, so you won't reach it by pressing; change START to see it.

The buttons and the toggle group wrap onto two rows, the two drawn tabs share the strip with their titles cut short (the full text is in the line under the inbox), and the inbox keeps one height and scrolls inside, so a new message never moves the page.