shadcn.io is not affiliated with official shadcn/ui
Server and Channels Chat Block for Svelte
A server with three text channels in a start list, each keeping its own draft, unread count and thread, with flat rows that show role words and a phone layout where the list is the first screen and Back returns to it.
Installation
Overview
Give a community its channels, with this server and channels chat for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Banterbury, a community chat for people who make things: a start list with the server name and three text channels (#general, #design, #random) and, beside it, the open channel's thread as flat rows, where only the first row of a run shows the Avatar, the name and a role word (Admin, Mod). A draft you leave is kept per channel: while you are elsewhere the channel's row shows a pencil and "Draft", and returning restores the text. Opening a channel clears its unread count, and a reply lands in the channel it was for even when you have moved on, adding to that channel's count. The composer's Shine Button, the only colored control, sends what you type. The layout only echoes the server and channel pattern of community apps; there are no reactions and no member list. It's built from Message, Bubble, Avatar, Shine Button and Guides, with a CSS entrance only. For communities, team chat and any product with many rooms.
FAQ
What stays in the page, and how do I make it real?
Everything. The three channels, their people and their lines are typed in this file, replies come from a script per channel, and nothing is sent. To wire it for real, load each channel's messages when it opens, post from the composer to that channel, store the draft per channel (it is already kept in state next to the thread), and push new messages into the right channel with a count when it is not open.
How are drafts kept?
Each channel owns its draft text, and the composer shows the open channel's. Typing writes to that channel as you type, so there is nothing to save when you switch. A channel you have left with text in the field shows a pencil and "Draft" in its row; sending clears it.
How do the unread counts work?
A channel starts with a typed count (#general has 3). Opening it sets the count to zero. If you send a message in #design and open #general before the reply arrives, the reply still lands in #design and its row gains a count. The count is in the row's accessible name, not only in the visible badge.
How are roles shown?
As words and a shield glyph next to the name (Admin, Mod), and never as coloured names. Members show nothing, so the people who can help stand out without a palette.
Is it usable with a keyboard and a screen reader?
The channel list is a named navigation of buttons, and the open one is marked as current. The log is a focusable region announced as a log, every message starts with a hidden name and time, and one polite status line announces sending. On a phone, opening a channel moves focus to its heading and Back returns it to the channel's row.