Chat slide panels
On the home release chat, secondary surfaces (chat history and live metadata) use slide-in rails instead of floating modals. The main chat area stays the focal point: it shifts to make room, gains rounded corners on the side next to the open rail, and picks up a soft edge shadow so it reads as one continuous card—mirrored on the left and right.
Principles
- Page-level background — The outer frame uses the app page background (
#f8fafclight /#060b16dark)—the same value as/releasesand other app surfaces. Rails share this background so they blend seamlessly with the gutter; only the white chat well stands out. - Rails under the chat (desktop) — On large screens, rails sit at a lower z-index than the chat; the chat margin changes so rails are revealed beside the card, not drawn on top of it.
- Mobile close buttons — On mobile, rails span the full viewport as overlays. Each rail shows an × close button in its header (left sidebar:
sm:hidden, right shelf:md:hidden) so the user can always return to chat. - Sub-header alignment — The “Show History” and “Show Data” controls sit below the global header in a row constrained by
max-w-[calc(100%-2rem)] mx-auto px-4—the same layout as the app header. The scroll icon’s left edge aligns with the logo, and the eye icon’s right edge aligns with the “New Release” button. - First-data cue — When the first metadata arrives, desktop opens the data shelf automatically once. On mobile, the shelf stays closed and the Show Data control pulses once instead so the cue stays lightweight.
- Right sidebar padding — The metadata shelf uses generous right padding (
sm:pr-7) and a safemax-width: min(--data-shelf-width, calc(100vw - 1rem))so content never touches the viewport edge on narrower windows.
Interactive example
Use the buttons to open each rail. The center block behaves like the chat well: it moves and picks up corner radius and shadow on the active side(s). The thin row above the chat well represents the sub-header toggle controls. The small × on each rail indicates the mobile-only close button.
Implementation reference
| Token / class | Role |
|---|---|
--data-shelf-width | Desktop width of the metadata rail (wider than history for dense data) |
ChatHistorySidebar | Left rail; sm:w-80, translate in/out, mobile-only X close (sm:hidden) |
DataShelf | Right rail; .data-shelf-panel + open for transform, mobile-only X close (md:hidden) |
| Content wrapper | sm:ml-80 when history open, sm:mr-[var(--data-shelf-width)] when data open |
| Sub-header row | max-w-[calc(100%-2rem)] mx-auto px-4 — aligns toggle icons with header logo and button edges |
| First-data behavior | Desktop auto-opens the metadata shelf once; mobile pulses the Show Data toggle once |
| Chat well | sm:rounded-tl-2xl / sm:rounded-tr-2xl + matching shadow-[±6px_0_20px_…] when the corresponding rail is open |
| Panel background | bg-[#f8fafc] dark:bg-[#060b16] — shared by main area, both sidebars, and sub-header row |
| Shelf overflow | overflow: hidden on .data-shelf-panel, max-width: min(…) on md+ to prevent viewport overflow |
On small screens, a light underline under the sub-header row separates the toggles from the scrollable chat so messages do not run under the icons.