diff --git a/public/components/dross_bubble.js b/public/components/dross_bubble.js index 152fe54..5f9767f 100644 --- a/public/components/dross_bubble.js +++ b/public/components/dross_bubble.js @@ -57,6 +57,8 @@ export async function renderDrossBubble() { fab.addEventListener('click', () => { if (fab._moved) { fab._moved = false; return; } openPanel(); }); closeBtn.addEventListener('click', closePanel); collapse.addEventListener('click', closePanel); + // Topbar ◆ button (and any caller) can summon/dismiss Dross. + window.addEventListener('dross-toggle', () => panel.classList.contains('open') ? closePanel() : openPanel()); drag(fab, fab, true); drag(header, panel, false); diff --git a/public/components/topbar.js b/public/components/topbar.js index 5281070..51cf743 100644 --- a/public/components/topbar.js +++ b/public/components/topbar.js @@ -4,7 +4,7 @@ import { el, mount, clear } from '../dom.js'; import { navigate } from '../router.js'; import { on } from '../state.js'; -import { toggleSidebar, toggleRail } from './chrome.js'; +import { toggleSidebar } from './chrome.js'; import { api } from '../api.js'; // Cluster health → topbar pill. Returns [status, label, title]. @@ -72,7 +72,7 @@ export function renderTopbar(root) { el('div', { class: 'topbar-spacer' }), clusterPill, bell, - el('button', { class: 'chrome-toggle', title: 'Toggle companion chat', onclick: toggleRail }, '◆'), + el('button', { class: 'chrome-toggle', title: 'Summon Dross', onclick: () => window.dispatchEvent(new CustomEvent('dross-toggle')) }, '◆'), el('button', { class: 'icon-btn', onclick: () => alert('Agent-switching ships post-Plan-2.') }, 'Owner') ); diff --git a/public/style.css b/public/style.css index 438d91d..1e69878 100644 --- a/public/style.css +++ b/public/style.css @@ -29,20 +29,18 @@ html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: #shell { display: grid; - grid-template-columns: var(--sidebar-w) 1fr var(--rail-w); + grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: - "topbar topbar topbar" - "sidebar main rail"; + "topbar topbar" + "sidebar main"; height: 100vh; width: 100vw; } -#shell.rail-collapsed { grid-template-columns: var(--sidebar-w) 1fr var(--rail-w-min); } #topbar { grid-area: topbar; border-bottom: 1px solid var(--border); background: var(--panel); display: flex; align-items: center; padding: 0 16px; gap: 12px; } #sidebar { grid-area: sidebar; border-right: 1px solid var(--border); background: var(--panel); overflow-y: auto; padding: 12px 0; } #main { grid-area: main; overflow-y: auto; padding: 24px 32px; } -#rightrail{ grid-area: rail; border-left: 1px solid var(--border); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; } /* topbar */ .brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.18em; font-size: 14px; color: var(--accent); text-transform: uppercase; padding: 0 6px; } @@ -483,15 +481,11 @@ ul.plain li:last-child { border-bottom: none; } /* ===== Collapsible chrome + responsive layout (Plan 6 polish) ===== */ :root { --sidebar-w-min: 0px; } #shell { transition: grid-template-columns .22s ease; } -#sidebar, #rightrail { transition: transform .22s ease; } +#sidebar { transition: transform .22s ease; } -/* Desktop collapse — shrink the grid columns */ -#shell.sidebar-collapsed { grid-template-columns: var(--sidebar-w-min) 1fr var(--rail-w); } -#shell.sidebar-collapsed.rail-collapsed { grid-template-columns: var(--sidebar-w-min) 1fr var(--rail-w-min); } -#shell.rail-collapsed { grid-template-columns: var(--sidebar-w) 1fr var(--rail-w-min); } +/* Desktop collapse — shrink the sidebar column */ +#shell.sidebar-collapsed { grid-template-columns: var(--sidebar-w-min) 1fr; } #shell.sidebar-collapsed #sidebar { overflow: hidden; border-right: none; } -/* Hide chat body when the rail is collapsed so the thin strip stays clean */ -#shell.rail-collapsed .rail-chat { display: none; } /* Topbar toggle buttons */ .chrome-toggle { @@ -514,13 +508,11 @@ body.drawer-open #scrim { opacity: 1; pointer-events: auto; } /* ---- Narrow / mobile / vertical: off-canvas drawers, single-column main ---- */ @media (max-width: 860px) { #shell, - #shell.sidebar-collapsed, - #shell.rail-collapsed, - #shell.sidebar-collapsed.rail-collapsed { + #shell.sidebar-collapsed { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; } - #sidebar, #rightrail { + #sidebar { position: fixed; top: var(--topbar-h); bottom: 0; z-index: 50; } #sidebar { left: 0; width: min(82vw, 300px); transform: translateX(-100%); border-right: 1px solid var(--border); }