Empty Inbox Notification Block for React

Edit THREADS at the top of the file. Each has an id, a title, the who and last text of its latest reply, an ISO at time of that reply and an ISO muted day. START_MUTED lists which ids are muted when the page opens (all three here); a thread that isn't muted shows in the inbox list. Every count, the heading and the sentence are worked out from that one list. Times are shown against AS_OF: today as a clock time, yesterday as a word, older as a weekday and date.

Muting and unmuting live in the page and reset on reload; nothing is sent and nothing is saved. In your app, load the muted ids from your API, call it from mute and unmute (the id each handler receives is the one to send), and render the inbox from your real unread threads rather than from the unmuted ones. The preferences button is a link: point its href at your settings route.

Unmute a thread, then press Mute on its row. The first time, the page opens empty; after an Unmute it shows the list, and muting the last returned thread brings the tray and "You're all caught up" back, with a polite status that says so. The empty state is a designed state, not a missing one: it has a picture, a sentence and the way forward.

The tray and the list sit in one grid cell of a fixed height, and the one not shown is unseen, so the heading, the button and the disclosure never move when it changes. The page is also aligned to the top rather than centred: the Muted conversations disclosure grows when it opens, and a centred page would move its heading by half of that.

The heading takes focus after each Unmute or Mute, and a polite status line says what changed ("Unmuted “Launch plan”. It is back in your inbox."), so the removed button never leaves focus on nothing. The disclosure is a real button with an expanded state, each Unmute and Mute names its thread ("Mute Launch plan"), and the drawing is decorative and hidden from assistive technology. On a phone the Mute button shows only its icon, and its name still begins with the word.

The band keeps its padding and the content its single column. The drawing sits at the same height, the primary button fills the width and is on the first screen, and each returned thread keeps one row: its title, its latest reply with the time, and a Mute button reduced to an icon.