shadcn.io is not affiliated with official shadcn/ui
Mobile View Chat Block for Svelte
A phone-sized messenger in a narrow window with a chat list, a thread and a back stack: opening a row clears its unread count, and Back, carrying the unread total, returns to the list with focus on the row.
Installation
Overview
Show a messenger as a phone app, with this mobile view chat for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Palmtalk, a phone messenger, with two screens and no wide layout. The thread is open on load: a top bar with a Back button that carries the unread total of the other chats, an initials avatar, the name and a status line, then Message and Bubble runs and a composer whose Shine Button, the only colored control, is a 44 px Send. Back shows the list of five rows with a name, a one-line preview, a time and an unread count, each a 56 px target; pressing one opens its typed thread and clears its count, and Back returns focus to the row you came from. No bezel, status bar or notch is drawn. The frame is ruled by Guides, and everything moves with CSS only. For a mobile web view, a PWA shell or any app that is one screen at a time.
FAQ
How does the back stack work?
One state holds the screen, "list" or "thread", and one holds the open chat. Opening a row sets both, marks the chat read and moves focus to the thread's heading. Back shows the list and moves focus to the row that was open, through one focus effect that runs after the screen changes.
Where do the unread counts come from?
They are derived, never typed twice: each chat has a typed count at load, a chat you have opened is read, and the Back chip shows the total of every other chat. The list's own total is the same sum.
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script in this file: a few keyed on words in your message, then one fallback per message and a last line that says it was the last sample reply. Each chat has its own two sample replies, in turn. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the text where the code says so and append incoming messages to the same list.