shadcn.io is not affiliated with official shadcn/ui
Unsynced Account Empty Inbox Error Block for Radix UI
A team inbox that is empty because an account is not synced: two accounts with state, last-checked time, a sync switch and Sync now, a dashed tray that becomes three messages, and one button to sync all.
Installation
Overview
Answer the question behind an empty inbox, empty or not synced, with this unsynced account inbox for React with Radix UI. It's the shared inbox of Postwren, a team inbox: a header over one framed panel, its bands ruled by Guides. A band lists the two connected accounts, Work and Personal, each with a two-letter tile, its address, a state in words and a shape (Synced, Paused or Not synced yet), when it was last checked, a Switch for syncing it and a Button, Sync now. Sync now on Work answers "Checked: 0 new" and only moves the time. Personal is paused: Sync now asks for its switch, and once the switch is on a sync brings in three typed messages, so the dashed tray in the inbox band turns into a three-row list. The one Shine Button, Sync all accounts, checks every account that is on and skips the paused ones; Start over puts it all back. It's built from Switch, Button, Shine Button and Guides, with a CSS entrance only. For mail, support and any inbox fed by connected accounts.
FAQ
How does it decide what is empty?
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.
What happens when Sync now is pressed on a paused account?
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.
What stays in the page, and how do I wire it?
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.
Does the panel change height?
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.