Inbox triage
An inbox where archived and deleted mail breaks into dust and pours into its tab, with multi-select, swipe, hover actions and an undo toast.
- MMaya Chen9:41Q4 roadmap reviewCan we move the sync to Thursday? I've added notes to the doc.
- SStripe9:12Your payout of £2,480 is on its wayExpected in your account by Friday.
- KKofi MensahTuePhotos from the offsiteUploaded the whole album, the sunset ones are great.
- FFigmaTueAma commented on Checkout v3“Should the total sit above the button?”
- PPriya RamanMonContract signedAll done. Welcome aboard, see you Monday!
Things to try
- Archive or delete one. Hover a message and use its actions, or swipe it: right to archive, left to bin. The whole row, avatar included, breaks into dust that pours into the Archive or Trash tab, and the tab's count goes up as it lands.
- Select a few. Tick them, or tick the box at the top for all of them, and use the toolbar. Every selected row pours in together.
- Undo. The toast counts down for five seconds, and pauses while you hover it. Undo pours the dust back out of the tab into the rows.
- Look in the other tabs. Archive and Trash list what you moved, and can send it back to the inbox the same way.
- Empty a list. Its empty state draws itself in dots.
Install
npx shadcn@latest add https://your-docs-site/r/inbox-triage.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
useDustdoes the pouring.trail.away(rows, tab)samples the rows as they look (avatars, text, colours), pours the dots into the tab, and resolves once they land. Undo istrail.back(rows, tab).- State is where each message is. Moving mail just changes its mailbox. An effect compares that with where rows are drawn: rows that left the view pour out, rows that came back pour in, and the rows fold and the counts change once the dust lands.
- Colours come from CSS. The palette is
var(--name)entries, so the dust and the empty state follow dark mode. - Base UI for the parts. Tabs, Checkbox (with select all), Toolbar, Tooltip, Avatar and Toast. The empty state is particles on their own.
The messages are made up and the avatars come from DiceBear. If an avatar can't be read by the canvas, the dust is made without it.
Payment status
A payment's status as one drawing: the card becomes a lock while the bank confirms, then a receipt when it's paid, or the card again with a warning when it's declined.
Donation goal
A fundraising goal told in dots: every donation flies in as particles and fills the picture of what it pays for, until the water gathers into a heart.