Chat - Inbox Layouts

The earlier chat blocks are the parts, and these are complete screens built from them. Each layout has a fixed height so it works as a demo, so give it h-dvh or h-full inside your own app shell.

State is local and the data comes in through typed props (conversations, mails, tickets). Selecting, filtering, starring, archiving, replying and changing a ticket status all update the demo, so you can see how each pane reacts. Names and messages are fictional.

Style One

Two pane chat app. The conversation list is on the left and the selected thread is on the right. Opening a conversation clears its unread dot, and the composer adds messages to the thread. On small screens the panes stack.

Style Two

Three pane email style inbox with a folder sidebar, a message list with stars and unread state and a reading pane with archive, delete and reply actions. Below the large breakpoint the folder pane becomes a select. On phones the reading pane is hidden, so open the message in a sheet or on its own route there.

Style Three

Support helpdesk. A ticket queue with status filters and priority badges, the ticket thread with canned replies and a status select, and a customer panel with plan and open tickets.

Style Four

Mobile first stacked messenger. One screen at a time, with a list and a thread view, a back button and a bottom tab bar. Opening a thread moves focus to its heading.