Unsynced Account Empty Inbox Error Block for React

The inbox lists the typed messages of every account that has been pulled. An account is pulled when it is switched on and synced and it has mail waiting; Work has none, so syncing it changes only its time. The state word, the counts ("1 of 2 syncing", "0 messages"), the empty-tray sentence and the status line are all worked out from the accounts, so they agree.

Nothing is synced: the status line says Personal is paused, and focus moves to its switch, which is what the person has to change. Turning the switch on makes the state Not synced yet; the next Sync now does the work. Pausing it again keeps what already arrived.

Everything. The accounts, the times (each sync reads the next minute after 14:10 UTC) and the three messages are typed in the file; nothing connects or fetches. Replace the sync handlers where the code says so with a call to your mail backend, and update the accounts and the inbox from its answer. Never store an account's password in the page.

No. The empty tray and the list of three messages share one box, the unseen one kept in the same cell, and each state word sits over an unseen copy of the longest one, so rows and bands never move.

By a shape (a check, a pause bars, a dash) and a word, never a color alone. Each switch and each Sync now names its account ("Sync Personal", "Sync Personal now"), and one polite status line speaks every result.

Each account becomes two lines: the account and its state, then its switch and Sync now. The status line and the buttons stay pinned to the bottom of the screen until you reach them.