defuss-shadcn / Application / Scaffolds / scaffold-messenger
Messenger
A WhatsApp-style messenger as a clickdummy - "Relay". Open a chat, type and press ↵: the message goes out, its ticks turn blue, the other side types and answers. Filter the list, play a voice note, start a call, open the contact info, switch to dark mode. Every control is a shipped component. Part of the Application Scaffolds.
On this page (2)
§Messenger
The whole messenger in one source. Chats are URL fragments (#c-anna…) shown with :target; the rail, the filter chips and the contact-info column are radio and checkbox state read by :has(); conversations are the Session component; sending, read receipts, typing and replies are a few lines of script.
§How it works
A page, not a component: it composes the library and keeps its own glue small.
- Layout - a rail, the chat list, the conversation and an optional contact-info column in one grid; below 48rem of width you see the list or the chat, with a back link.
- Resizable list - the chat list sits in a Resizer with
data-variant="divider": drag its edge, or Tab to it and press ← / →; a double-click restores the default width, and the width you chose is remembered. - CSS state - the open chat is a URL fragment (
.wa-thread:target, back and forward work); the rail tabs, the filter chips (All / Unread / Favourites / Groups), the contact-info column, the voice-note player and the composer's mic / send swap (:placeholder-shown) are form state read by:has(). - Conversations - the Session component scrolls each transcript and follows new messages; rows are Bubbles with tails and reactions, Markers for the day separators, a Message attachment for the file; delivery ticks use the Message status.
- Composer - the Textarea group grows with the text; the emoji panel is a Popover, the attach menu a Dropdown.
- Calls and info - a Dialog that rings and then times the call; the info column has Switches and Toast feedback.
- Script - sending (✓ → ✓✓ → blue ✓✓, "typing…", a reply), the unread badges, the search, emoji insertion, the call timer and the dark-mode switch.
- Full screen - app-messenger.html is generated from this page's example at build time.
Comments, ideas or improvements? Edit this page's source on GitHub