From e2be462ecb4d527f3bf9c959d04d1b72e07c42e6 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 10 Jun 2026 00:34:39 +1000 Subject: [PATCH] =?UTF-8?q?fix(dross):=20collapse=20shell=20to=202=20colum?= =?UTF-8?q?ns;=20topbar=20=E2=97=86=20summons=20Dross?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removing #rightrail left a dead 360px grid column that narrowed #main. Shell grid is now sidebar+main; the topbar ◆ (was Toggle-companion-rail) now dispatches dross-toggle to open/close the floating bubble. Remaining .rail-* CSS + chrome.js toggleRail are dead no-ops (minor cleanup later). Co-Authored-By: Claude Opus 4.8 --- public/components/dross_bubble.js | 2 ++ public/components/topbar.js | 4 ++-- public/style.css | 24 ++++++++---------------- 3 files changed, 12 insertions(+), 18 deletions(-) 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); }