From 057966469d1cc6f393d97ce32c2b10fe03e08573 Mon Sep 17 00:00:00 2001
From: Jared Miller <jared@smell.flowers>
Date: Wed, 28 Jan 2026 15:11:22 -0500
Subject: [PATCH] Add style popover with column layout and display controls

---
 public/index.html | 201 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 198 insertions(+), 3 deletions(-)
diff --git a/public/index.html b/public/index.html
index 7817aca..c9d967c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -584,6 +584,86 @@
       font-size: 14px;
     }
 
+    .settings-btn {
+      background: none;
+      border: none;
+      color: #888;
+      font-size: 20px;
+      cursor: pointer;
+      padding: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 44px;
+      min-height: 44px;
+      border-radius: 4px;
+      transition: background 0.2s, color 0.2s;
+    }
+
+    .settings-btn:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #e0e0e0;
+    }
+
+    .setting-group {
+      margin-bottom: 20px;
+    }
+
+    .setting-group:last-child {
+      margin-bottom: 0;
+    }
+
+    .setting-group label {
+      display: block;
+      font-size: 13px;
+      color: #888;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+      font-weight: 600;
+    }
+
+    .setting-buttons {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .setting-btn {
+      padding: 8px 16px;
+      border: 1px solid #3a3a3a;
+      border-radius: 6px;
+      background: #1a1a1a;
+      color: #e0e0e0;
+      font-size: 14px;
+      cursor: pointer;
+      min-width: 44px;
+      min-height: 44px;
+      transition: background 0.2s, border-color 0.2s;
+    }
+
+    .setting-btn:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .setting-btn:active {
+      opacity: 0.7;
+    }
+
+    .setting-btn.active {
+      background: #ff9800;
+      border-color: #ff9800;
+      color: white;
+    }
+
+    .setting-display {
+      padding: 8px 16px;
+      color: #e0e0e0;
+      font-size: 14px;
+      font-weight: 600;
+    }
+
     @media (prefers-color-scheme: light) {
       body {
         background: #f5f5f5;
@@ -661,9 +741,12 @@
 <body>
   <header>
     <h1>claude-remote</h1>
-    <div class="status" id="status">
-      <span class="status-dot"></span>
-      <span class="status-text">connecting</span>
+    <div style="display: flex; align-items: center; gap: 16px;">
+      <button class="settings-btn" onclick="openStyleModal()" title="Display Settings">⚙️</button>
+      <div class="status" id="status">
+        <span class="status-dot"></span>
+        <span class="status-text">connecting</span>
+      </div>
     </div>
   </header>
 
@@ -703,6 +786,48 @@
     </div>
   </div>
 
+  <div class="modal-overlay" id="styleModal" onclick="handleStyleModalOverlayClick(event)">
+    <div class="modal" onclick="event.stopPropagation()" style="max-width: 320px;">
+      <div class="modal-header">Display Settings</div>
+      <div class="modal-body">
+        <div class="setting-group">
+          <label>Columns</label>
+          <div class="setting-buttons">
+            <button onclick="setSetting('columns', 1)" class="setting-btn" data-setting="columns" data-value="1">1</button>
+            <button onclick="setSetting('columns', 2)" class="setting-btn" data-setting="columns" data-value="2">2</button>
+            <button onclick="setSetting('columns', 3)" class="setting-btn" data-setting="columns" data-value="3">3</button>
+            <button onclick="setSetting('columns', 'fit')" class="setting-btn" data-setting="columns" data-value="fit">Fit</button>
+          </div>
+        </div>
+
+        <div class="setting-group">
+          <label>Text Size</label>
+          <div class="setting-buttons">
+            <button onclick="adjustSetting('fontSize', -1)" class="setting-btn">−</button>
+            <span class="setting-display" id="font-size-display">12px</span>
+            <button onclick="adjustSetting('fontSize', 1)" class="setting-btn">+</button>
+          </div>
+        </div>
+
+        <div class="setting-group">
+          <label>Terminal Height</label>
+          <div class="setting-buttons">
+            <button onclick="adjustSetting('terminalHeight', -50)" class="setting-btn">−</button>
+            <span class="setting-display" id="terminal-height-display">400px</span>
+            <button onclick="adjustSetting('terminalHeight', 50)" class="setting-btn">+</button>
+          </div>
+        </div>
+
+        <div class="setting-group">
+          <label>Text Wrap</label>
+          <div class="setting-buttons">
+            <button onclick="toggleSetting('wrapText')" class="setting-btn" id="wrap-toggle">On</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script>
     const state = {
       sessions: new Map(),
@@ -726,6 +851,7 @@
     const $instructionsModal = document.getElementById('instructionsModal');
     const $instructionsTextarea = document.getElementById('instructionsTextarea');
     const $instructionsError = document.getElementById('instructionsError');
+    const $styleModal = document.getElementById('styleModal');
 
     function setStatus(connected) {
       if (connected) {
@@ -1528,6 +1654,75 @@
       root.style.setProperty('--wrap-mode', state.settings.wrapText ? 'pre-wrap' : 'pre');
     }
 
+    function updateSettingsUI() {
+      // Update column buttons
+      document.querySelectorAll('.setting-btn[data-setting="columns"]').forEach(btn => {
+        const value = btn.dataset.value === 'fit' ? 'fit' : Number(btn.dataset.value);
+        if (value === state.settings.columns) {
+          btn.classList.add('active');
+        } else {
+          btn.classList.remove('active');
+        }
+      });
+
+      // Update font size display
+      document.getElementById('font-size-display').textContent = `${state.settings.fontSize}px`;
+
+      // Update terminal height display
+      document.getElementById('terminal-height-display').textContent = `${state.settings.terminalHeight}px`;
+
+      // Update wrap toggle
+      document.getElementById('wrap-toggle').textContent = state.settings.wrapText ? 'On' : 'Off';
+    }
+
+    window.openStyleModal = () => {
+      updateSettingsUI();
+      $styleModal.classList.add('active');
+    };
+
+    window.closeStyleModal = () => {
+      $styleModal.classList.remove('active');
+    };
+
+    window.handleStyleModalOverlayClick = (event) => {
+      if (event.target === $styleModal) {
+        closeStyleModal();
+      }
+    };
+
+    window.setSetting = (key, value) => {
+      state.settings[key] = value;
+      saveSettings();
+      applySettings();
+      updateSettingsUI();
+    };
+
+    window.adjustSetting = (key, delta) => {
+      const bounds = {
+        fontSize: { min: 10, max: 18, step: 1 },
+        terminalHeight: { min: 200, max: 600, step: 50 },
+      };
+
+      const config = bounds[key];
+      if (!config) return;
+
+      // Adjust with bounds
+      let newValue = state.settings[key] + delta;
+      newValue = Math.max(config.min, Math.min(config.max, newValue));
+
+      state.settings[key] = newValue;
+      saveSettings();
+      applySettings();
+      updateSettingsUI();
+    };
+
+    window.toggleSetting = (key) => {
+      state.settings[key] = !state.settings[key];
+      saveSettings();
+      applySettings();
+      updateSettingsUI();
+    };
+
     // Initialize
     loadSettings();
     applySettings();
