shadcn.io is not affiliated with official shadcn/ui
Slack Style Chat Block for Solid
Three panes in a wide window: a rail of three workspaces with unread channel counts, a channel list, and the open channel as flat rows, where switching workspace swaps the list and remembers the last channel in each.
Installation
Overview
Show a team workspace, with this workspace style chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Crowsnest, a team workspace, in three panes. A rail of three workspace tiles carries, on each, the count of its channels with unread messages; a channel list shows six channels and two people, bold with a count where unread; and the open channel is flat rows from Message and Bubble with no bubble shape, a run under one header and later times in the gutter on hover and focus. Switching the workspace swaps the list and the logs and remembers the last channel open in each; opening a channel clears its count. The composer's Shine Button is the only colored control. The frame is ruled by Guides, and everything moves with CSS only. For a team chat, a community space or any app with workspaces.
FAQ
What happens when I switch workspace?
The channel list and the log swap to that workspace's own, and the last channel you had open in it comes back. Every workspace has its own people and typed channels, about four messages each, so the whole data is small and typed in the file.
Where do the counts come from?
They are derived from the typed messages: a channel's count is its messages not from you while it is unread, and a tile's count is how many of its channels hold unread messages. Opening a channel clears its count and the tile's follows.
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. Posting adds a flat row to the open channel only. 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.