#186
Chat
A button that opens a full-screen mobile pane titled Maria Souza with a message list, a header action and a composer.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Chat" pattern (@codeatlasdev/ui demo #186, layout/mobile-pane) in my app.
Call get_demo({ ids: ["#186"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Chat threads and other drill-down detail views on phones, opened from a list and closed again.
Keep these library parts, with the props and tokens the demo uses:
- MobilePane, Button, IconButton, TextField from "@codeatlasdev/ui"
Behaviour to keep:
- `<MobilePane bind:open title="Maria Souza">` with `let open = $state(false)`
- `<Button variant="filled" onclick={() => (open = true)}>Open conversation</Button>` opens it
- `{#snippet actions()}` holds `<IconButton variant="text" aria-label="More options">` with `<MoreVertical size={20} aria-hidden="true" />`
- `const messages` has 5 strings rendered with `{#each messages as m}<li>{m}</li>{/each}`
- Composer is `<TextField label="Message" placeholder="Write something…" />`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- MobilePane
@codeatlasdev/ui - Button
@codeatlasdev/ui - IconButton
@codeatlasdev/ui - TextField
@codeatlasdev/ui
How it is built
- `<MobilePane bind:open title="Maria Souza">` with `let open = $state(false)`
- `<Button variant="filled" onclick={() => (open = true)}>Open conversation</Button>` opens it
- `{#snippet actions()}` holds `<IconButton variant="text" aria-label="More options">` with `<MoreVertical size={20} aria-hidden="true" />`
- `const messages` has 5 strings rendered with `{#each messages as m}<li>{m}</li>{/each}`
- Composer is `<TextField label="Message" placeholder="Write something…" />`
Related
Loading source.