diff --git a/web/app.js b/web/app.js index f2119f0..fae28ba 100644 --- a/web/app.js +++ b/web/app.js @@ -1515,9 +1515,39 @@ break; case '1': switchView('stream'); break; case '2': switchView('cards'); break; + case 'z': toggleZen(); break; + case '[': togglePanel('rail'); break; + case ']': togglePanel('peek'); break; } }); + function togglePanel(panel) { + const m = $('main'); + const cls = panel === 'rail' ? 'hide-rail' : 'hide-peek'; + m.classList.toggle(cls); + localStorage.setItem('nib:' + cls, m.classList.contains(cls) ? '1' : ''); + } + + function toggleZen() { + const m = $('main'); + const isZen = m.classList.contains('hide-rail') && m.classList.contains('hide-peek'); + if (isZen) { + m.classList.remove('hide-rail', 'hide-peek'); + localStorage.setItem('nib:hide-rail', ''); + localStorage.setItem('nib:hide-peek', ''); + } else { + m.classList.add('hide-rail', 'hide-peek'); + localStorage.setItem('nib:hide-rail', '1'); + localStorage.setItem('nib:hide-peek', '1'); + } + } + + (function restorePanels() { + 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'); + })(); + 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/style.css b/web/style.css index 4c07f85..49c87a2 100644 --- a/web/style.css +++ b/web/style.css @@ -179,8 +179,16 @@ main { display: grid; grid-template-columns: 192px 1fr 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.hide-rail #tag-rail { overflow: hidden; border-right: none; } +main.hide-peek #detail-pane { overflow: hidden; border-left: none; } + /* ── TAG RAIL ───────────────────────────────────────── */ #tag-rail { background: var(--surf);