Hynes/Void-Homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dross): collapse shell to 2 columns; topbar ◆ summons Dross

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
root
2026-06-10 00:34:39 +10:00
parent 6d5c3027ac
commit e2be462ecb
3 changed files with 12 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/components/dross_bubble.js
View File

@@ -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);

4
public/components/topbar.js
View File

@@ -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')
);

24
public/style.css
View File

@@ -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); }