From 0316076bf8159622a9b4205a5ae144135e23c076 Mon Sep 17 00:00:00 2001 From: Tyler Koenig Date: Sat, 16 May 2026 20:42:20 -0400 Subject: [PATCH 1/2] feat(ui): resizable rail and peek pane MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Drag handles between rail/center and center/peek - Rail: 120–360px range, peek: 250–700px range - Widths persisted in localStorage - Handles hidden when panel is collapsed (zen mode) - Transition disabled during drag for smooth resize --- web/app.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++ web/index.html | 2 ++ web/style.css | 31 +++++++++++++++++++++------- 3 files changed, 82 insertions(+), 7 deletions(-) diff --git a/web/app.js b/web/app.js index 5bff2e8..76cda7c 100644 --- a/web/app.js +++ b/web/app.js @@ -1550,8 +1550,64 @@ const m = $('main'); if (localStorage.getItem('nib:hide-rail')) m.classList.add('hide-rail'); if (localStorage.getItem('nib:hide-peek')) m.classList.add('hide-peek'); + const railW = localStorage.getItem('nib:rail-w'); + const peekW = localStorage.getItem('nib:peek-w'); + if (railW) m.style.setProperty('--rail-w', railW + 'px'); + if (peekW) m.style.setProperty('--peek-w', peekW + 'px'); })(); + // ========== Resize handles ========== + + $$('.resize-handle').forEach(handle => { + let startX, startW, panel; + + handle.addEventListener('mousedown', (ev) => { + ev.preventDefault(); + panel = handle.dataset.panel; + startX = ev.clientX; + const m = $('main'); + m.classList.add('resizing'); + handle.classList.add('active'); + + if (panel === 'rail') { + startW = $('#tag-rail').offsetWidth; + } else { + startW = $('#detail-pane').offsetWidth; + } + + document.addEventListener('mousemove', onMove); + document.addEventListener('mouseup', onUp); + }); + + function onMove(ev) { + const m = $('main'); + const dx = ev.clientX - startX; + let newW; + + if (panel === 'rail') { + newW = Math.max(120, Math.min(360, startW + dx)); + m.style.setProperty('--rail-w', newW + 'px'); + } else { + newW = Math.max(250, Math.min(700, startW - dx)); + m.style.setProperty('--peek-w', newW + 'px'); + } + } + + function onUp() { + const m = $('main'); + m.classList.remove('resizing'); + handle.classList.remove('active'); + document.removeEventListener('mousemove', onMove); + document.removeEventListener('mouseup', onUp); + + if (panel === 'rail') { + localStorage.setItem('nib:rail-w', $('#tag-rail').offsetWidth); + } else { + localStorage.setItem('nib:peek-w', $('#detail-pane').offsetWidth); + } + } + }); + function scrollSelectedIntoView() { const el = $(`.entity-item[data-index="${state.selectedIndex}"], .card-row[data-index="${state.selectedIndex}"]`); if (el) el.scrollIntoView({ block: 'nearest' }); diff --git a/web/index.html b/web/index.html index cc63663..60990d2 100644 --- a/web/index.html +++ b/web/index.html @@ -24,11 +24,13 @@
+
+
diff --git a/web/style.css b/web/style.css index eb6f779..3c8f362 100644 --- a/web/style.css +++ b/web/style.css @@ -177,17 +177,34 @@ nav { display: flex; gap: 2px; } /* ── MAIN LAYOUT ────────────────────────────────────── */ main { display: grid; - grid-template-columns: 192px 1fr 400px; + grid-template-columns: var(--rail-w, 192px) 4px 1fr 4px var(--peek-w, 400px); overflow: hidden; - transition: grid-template-columns var(--t-base); } -main.hide-rail { grid-template-columns: 0px 1fr 400px; } -main.hide-peek { grid-template-columns: 192px 1fr 0px; } -main.hide-rail.hide-peek { grid-template-columns: 0px 1fr 0px; } +main.resizing { transition: none; } +main:not(.resizing) { transition: grid-template-columns var(--t-base); } -main.hide-rail #tag-rail { overflow: hidden; border-right: none; } -main.hide-peek #detail-pane { overflow: hidden; border-left: none; } +main.hide-rail { grid-template-columns: 0px 0px 1fr 4px var(--peek-w, 400px); } +main.hide-peek { grid-template-columns: var(--rail-w, 192px) 4px 1fr 0px 0px; } +main.hide-rail.hide-peek { grid-template-columns: 0px 0px 1fr 0px 0px; } + +main.hide-rail #tag-rail { overflow: hidden; border-right: none; min-width: 0; } +main.hide-peek #detail-pane { overflow: hidden; border-left: none; min-width: 0; } +main.hide-rail .resize-handle[data-panel="rail"] { visibility: hidden; } +main.hide-peek .resize-handle[data-panel="peek"] { visibility: hidden; } + +.resize-handle { + cursor: col-resize; + background: transparent; + transition: background var(--t-fast); + z-index: 10; +} + +.resize-handle:hover, +.resize-handle.active { + background: var(--accent); + opacity: .4; +} /* ── TAG RAIL ───────────────────────────────────────── */ #tag-rail { From ff190e395b33375583b80722699062dd97490b2d Mon Sep 17 00:00:00 2001 From: Tyler Koenig Date: Sat, 16 May 2026 20:46:23 -0400 Subject: [PATCH 2/2] feat(ui): context-sensitive z key (focus mode) - Nothing selected: z toggles zen (hide both panels) - Item selected: z expands peek to full width (focus mode) - z again or Esc exits focus mode and deselects - j/k still cycle items while in focus mode --- web/app.js | 23 +++++++++++++++++++++++ web/style.css | 5 +++++ 2 files changed, 28 insertions(+) diff --git a/web/app.js b/web/app.js index 76cda7c..a34351d 100644 --- a/web/app.js +++ b/web/app.js @@ -1451,6 +1451,14 @@ return; } + if (ev.key === 'Escape' && $('main').classList.contains('focus-peek')) { + exitFocusPeek(); + state.selectedIndex = -1; + renderEntityList(); + renderDetailPane(); + return; + } + const sel = state.entities[state.selectedIndex]; switch (ev.key) { @@ -1534,6 +1542,17 @@ function toggleZen() { const m = $('main'); + + if (m.classList.contains('focus-peek')) { + exitFocusPeek(); + return; + } + + if (state.selectedIndex >= 0) { + m.classList.add('focus-peek'); + return; + } + const isZen = m.classList.contains('hide-rail') && m.classList.contains('hide-peek'); if (isZen) { m.classList.remove('hide-rail', 'hide-peek'); @@ -1546,6 +1565,10 @@ } } + function exitFocusPeek() { + $('main').classList.remove('focus-peek'); + } + (function restorePanels() { const m = $('main'); if (localStorage.getItem('nib:hide-rail')) m.classList.add('hide-rail'); diff --git a/web/style.css b/web/style.css index 3c8f362..2e3863a 100644 --- a/web/style.css +++ b/web/style.css @@ -193,6 +193,11 @@ main.hide-peek #detail-pane { overflow: hidden; border-left: none; min-width: 0; main.hide-rail .resize-handle[data-panel="rail"] { visibility: hidden; } main.hide-peek .resize-handle[data-panel="peek"] { visibility: hidden; } +main.focus-peek { grid-template-columns: 0px 0px 0px 0px 1fr; } +main.focus-peek #tag-rail { overflow: hidden; border-right: none; min-width: 0; } +main.focus-peek #entity-panel { overflow: hidden; min-width: 0; } +main.focus-peek .resize-handle { visibility: hidden; } + .resize-handle { cursor: col-resize; background: transparent;