Merge pull request 'feat(ui): zen mode and panel toggles' (#17) from feat/zen-mode into main

Reviewed-on: #17

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

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