From af7d8b40e226da32b53781d95bd49255b57fd846 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 28 Apr 2026 21:03:56 -0400
Subject: [PATCH] feat: single cycling height button, panel mutual exclusion,
 consistent shadows

- Replace 3 S/M/L height buttons with one cycling button (like font size)
- Fix closeAllPanels() to include ctx-panel so Context and Settings menus
  cannot be open simultaneously
- Fix ctxOpenBtn handler to use the same toggle-via-closeAllPanels pattern
  as the settings button
- Align .hdr-dropdown shadow to var(--shadow) instead of hardcoded rgba
- Align #ctx-panel z-index to 200 (match .hdr-dropdown)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 cortex/static/app.js     | 38 ++++++++++++++++++++++++++++----------
 cortex/static/index.html |  4 +---
 cortex/static/style.css  |  4 ++--
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/cortex/static/app.js b/cortex/static/app.js
index 9521eef..0ab4af2 100644
--- a/cortex/static/app.js
+++ b/cortex/static/app.js
@@ -25,6 +25,8 @@
             if (sessionsPanel)     { sessionsPanel.classList.remove('open'); sessionsBackdrop.classList.remove('open'); }
             const pd = document.getElementById('persona-dropdown');
             if (pd) pd.classList.remove('open');
+            const cp = document.getElementById('ctx-panel');
+            if (cp) cp.classList.remove('open');
         }
 
         // ── Toasts ────────────────────────────────────────────────────
@@ -133,7 +135,16 @@
         });
 
         // ── Textarea height ──────────────────────────────────────────
+        const HEIGHT_SIZES  = [120, 240, 480];
+        const HEIGHT_LABELS = ['S', 'M', 'L'];
+        const HEIGHT_TITLES = [
+            'Input size: Compact — click to cycle',
+            'Input size: Medium — click to cycle',
+            'Input size: Large — click to cycle',
+        ];
+
         let maxHeight = parseInt(localStorage.getItem('maxHeight') || '120');
+        const heightCycleBtn = document.getElementById('height-cycle-btn');
 
         function syncHeight() {
             inputEl.style.transition = '';
@@ -144,17 +155,20 @@
         }
 
         function updateHeightUI() {
-            document.querySelectorAll('.ctx-btn[data-height]').forEach(btn => {
-                btn.classList.toggle('active', parseInt(btn.dataset.height) === maxHeight);
-            });
+            if (!heightCycleBtn) return;
+            const idx = HEIGHT_SIZES.indexOf(maxHeight);
+            const i = idx >= 0 ? idx : 0;
+            heightCycleBtn.textContent = HEIGHT_LABELS[i];
+            heightCycleBtn.title = HEIGHT_TITLES[i];
         }
 
-        document.querySelectorAll('.ctx-btn[data-height]').forEach(btn => {
-            btn.addEventListener('click', () => {
-                maxHeight = parseInt(btn.dataset.height);
+        if (heightCycleBtn) {
+            heightCycleBtn.addEventListener('click', () => {
+                const idx = HEIGHT_SIZES.indexOf(maxHeight);
+                const nextIdx = (idx + 1) % HEIGHT_SIZES.length;
+                maxHeight = HEIGHT_SIZES[nextIdx];
                 localStorage.setItem('maxHeight', maxHeight);
                 updateHeightUI();
-                // Brief expand preview so the effect is immediately visible on an empty textarea
                 if (!inputEl.value.trim()) {
                     inputEl.style.transition = 'height 0.2s ease';
                     inputEl.style.height = maxHeight + 'px';
@@ -163,7 +177,7 @@
                     syncHeight();
                 }
             });
-        });
+        }
 
         // ── Input mode — dropdown select with MRU ordering ──────────
         const MODES = {
@@ -1619,8 +1633,12 @@
 
         ctxOpenBtn.addEventListener('click', (e) => {
             e.stopPropagation();
-            ctxPanel.classList.toggle('open');
-            if (ctxPanel.classList.contains('open')) loadSchedule();
+            const isOpen = ctxPanel.classList.contains('open');
+            closeAllPanels();
+            if (!isOpen) {
+                ctxPanel.classList.add('open');
+                loadSchedule();
+            }
         });
 
         document.addEventListener('click', (e) => {
diff --git a/cortex/static/index.html b/cortex/static/index.html
index 1ebbbc3..e3608ae 100644
--- a/cortex/static/index.html
+++ b/cortex/static/index.html
@@ -110,9 +110,7 @@
                 <div class="ctx-row">
                     <button id="font-size-btn" class="ctx-btn" title="Cycle font size: Normal → Large → Small">Aa</button>
                     <button id="theme-btn" class="ctx-btn" title="Toggle light / dark theme">☾</button>
-                    <button class="ctx-btn" data-height="120" title="Compact — input grows up to ~4 lines">S</button>
-                    <button class="ctx-btn" data-height="240" title="Medium — input grows up to ~8 lines">M</button>
-                    <button class="ctx-btn" data-height="480" title="Large — input grows up to ~16 lines">L</button>
+                    <button id="height-cycle-btn" class="ctx-btn" title="Input size: Compact — click to cycle">S</button>
                     <button id="enter-toggle" class="ctx-btn" title="Toggle send shortcut: Ctrl+Enter ↔ Enter">⌃↵</button>
                 </div>
             </div>
diff --git a/cortex/static/style.css b/cortex/static/style.css
index e7d29c6..1ef1423 100644
--- a/cortex/static/style.css
+++ b/cortex/static/style.css
@@ -235,7 +235,7 @@
             background: var(--surface);
             border: 1px solid var(--border);
             border-radius: 8px;
-            box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+            box-shadow: 0 8px 24px var(--shadow);
             z-index: 200;
             overflow: hidden;
         }
@@ -1168,7 +1168,7 @@
             background: var(--surface);
             border: 1px solid var(--border);
             border-radius: 8px;
-            z-index: 100;
+            z-index: 200;
             box-shadow: 0 8px 24px var(--shadow);
             overflow: hidden;
         }