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. - 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 |
| 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.