feat: mobile AI panel optimization — maximize chat area & streamline controls

ijbo · ijbo · commit 6fa319884a9d · 2026-03-30T07:12:28.000+09:00
- Hide quick actions, search providers, AI text, model badge on mobile by default
- Add mobile options toggle (grid) for quick actions, independent of search
- Merge model selector into chat input bar as compact gradient icon button
- Restyle search toggle as icon-only (28px), solid green when enabled
- Separate search and grid toggle behaviors — each controls own section
- Search toggle directly shows/hides provider bar via ai-mobile-show class
- Fix mobile dark mode toggle with icon/label sync on init and change
- Sync QAB theme icon/label on theme change
- ~60% header height reduction on mobile
diff --git a/README.md b/README.md
@@ -543,6 +543,7 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Commits | Feature / Update |
 |------|---------|-----------------:|
+| **2026-03-30** | | 📱 **Mobile AI Panel Optimization** — maximized chat area on mobile (≤767px) by hiding secondary UI elements by default; removed duplicate model badge and "AI Assistant" text from header; search toggle restyled as compact icon-only button (turns solid green when enabled); model selector merged into chat input bar as compact gradient icon; quick actions and search providers now independently toggleable via separate grid and globe buttons; mobile dark mode toggle fixed with icon/label sync; ~60% header height reduction on mobile |
 | **2026-03-30** | | 📂 **File Import Expansion** — added 15 new file extensions to the import pipeline: `.txt`, `.text`, `.log`, `.rst`, `.ini`, `.conf`, `.cfg`, `.env`, `.properties` as plain text; `.yaml`/`.yml` wrapped in yaml code block; `.toml` wrapped in toml code block; `.tsv` parsed as tab-separated Markdown table; updated file input `accept` attribute with all new extensions and MIME types; updated dropzone label and error toast; total supported extensions now 25 |
 | **2026-03-29** | | 🔑 **Secure Session Editing** — cryptographic Edit Key (`ek`) system for collaborative editing of shared documents; 24-char random edit key hashed via SHA-256 and stored as `ekHash` in Firestore; write-token encrypted with edit key via AES-GCM stored as `eWt`; editor links (`&ek=<token>`) grant write access without exposing raw write-tokens; verification in both compact (`#s=`) and secure (`#id=&secure=1`) share paths; edit mode bypasses form/quiz access gate; auto-save preserves `ekHash`/`eWt` fields; "Editor Link" section in share result modal with purple badge; "Copy All Links" includes editor link; email/download credentials include editor link; Firestore rules updated for new fields |
 | **2026-03-29** | | 🚀 **21× Cloud Context Window** — raised cloud AI worker context limits from 6K to 128K chars for Groq (Llama 3.3 70B) and OpenRouter (GPT-5.4, Claude, Qwen 35B); Gemini raised from 32K to 128K (4×); chat history per-message doubled from 4K to 8K chars; Gemini worker migrated to shared `ai-worker-common.js` (eliminated ~80 lines of duplicate system prompts); local Qwen workers deliberately kept at 32K chars — Qwen 3.5 hybrid GDN architecture degrades beyond 25-50K tokens for small (0.8B-4B) models; existing degenerate output circuit breaker and `presence_penalty: 2.0` safety nets preserved |
diff --git a/changelogs/CHANGELOG-mobile-ai-panel.md b/changelogs/CHANGELOG-mobile-ai-panel.md
@@ -0,0 +1,64 @@
+# Mobile AI Panel Optimization — Maximize Chat Area & Remove Duplicate UI
+
+- Hid quick action chips (Summarize, Expand, etc.) by default on mobile (≤767px) to maximize chat area
+- Hid search provider bar by default on mobile — shown independently via search toggle
+- Hid "AI Assistant" text from panel header on mobile — only sparkle icon remains
+- Hid duplicate model badge from header on mobile — model info available via inline model button
+- Added mobile-only grid toggle button (⊞) in header to expand/collapse quick action chips
+- Added compact inline model button (gradient icon) inside the chat input bar on mobile, replacing the full-width model selector row
+- Made search toggle icon-only on mobile (28×28px), turns solid green (#10b981) when enabled
+- Separated search toggle and grid toggle behaviors — each controls its own section independently
+- Search toggle shows/hides provider pills without affecting quick actions
+- Grid toggle shows/hides quick actions without affecting provider bar
+- Mobile model icon syncs with desktop model selection via `updateModelUI()`
+- Compact welcome message and input area styles for mobile
+- Hidden welcome tips on mobile for space savings
+- Fixed mobile dark mode toggle: added click handler for `mobile-theme-toggle` that delegates to desktop toggle
+- Synced mobile theme toggle icon/label on init and on theme change
+- Synced QAB theme icon/label on theme change
+- Fixed: empty CSS ruleset lint warning at line 1529
+
+---
+
+## Summary
+Optimized the AI Assistant panel for mobile devices by hiding non-essential UI elements by default, merging the model selector into the chat input bar, and separating toggle controls so each button independently manages its own section. Also fixed the mobile dark mode toggle.
+
+---
+
+## 1. Mobile Header Cleanup
+**Files:** `css/ai-panel.css`, `js/modal-templates.js`
+**What:** On mobile (≤767px), the "AI Assistant" text and model badge are hidden from the panel header via `display: none`. The search toggle is restyled as a compact 28×28px icon-only button that turns solid green when enabled, removing the slider and "Search" text.
+**Impact:** Header height reduced by ~60%, leaving only essential controls (sparkle icon, search toggle, grid toggle, clear, close) for a cleaner mobile experience.
+
+## 2. Mobile Options Toggle
+**Files:** `css/ai-panel.css`, `js/modal-templates.js`, `js/ai-assistant.js`
+**What:** Added a new `.ai-mobile-options-toggle` button (grid icon) in the header controls. Clicking it toggles the `.ai-mobile-expanded` class on the panel, which shows/hides `.ai-quick-actions`. This button ONLY controls quick action chips — it does not affect the search provider bar.
+**Impact:** Users can access quick actions on demand without them consuming vertical space by default.
+
+## 3. Independent Search Toggle on Mobile
+**Files:** `css/ai-panel.css`, `js/ai-chat.js`
+**What:** The search toggle's `change` handler now adds/removes the `.ai-mobile-show` class on the provider bar, which overrides the mobile `display: none !important` rule. The CSS rule `.ai-search-provider-bar.ai-mobile-show` no longer requires the `.ai-mobile-expanded` parent.
+**Impact:** Clicking the search globe independently shows/hides the provider pills (DDG, Brave, Serper, etc.) without also showing quick action chips.
+
+## 4. Model Selector Merged into Chat Bar
+**Files:** `css/ai-panel.css`, `js/modal-templates.js`, `js/ai-assistant.js`
+**What:** The full-width `.ai-model-btn` is hidden on mobile via `display: none`. A new `.ai-mobile-model-btn` (30×30px gradient icon) is placed inside `.ai-input-wrapper` and triggers the existing model dropdown. The icon syncs via `updateModelUI()`.
+**Impact:** Saves ~45px vertical space by eliminating the separate model selector row on mobile.
+
+## 5. Mobile Dark Mode Toggle Fix
+**Files:** `js/app-init.js`, `js/app-core.js`
+**What:** Added click event listener for `mobile-theme-toggle` that delegates to `M.themeToggle.click()` and closes the mobile menu. Added icon/label sync for both the mobile toggle and QAB theme button on init and on every theme change.
+**Impact:** Dark mode toggle now works from the mobile menu, with icon/label correctly reflecting the current theme state.
+
+---
+
+## Files Changed (6 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `css/ai-panel.css` | +210 −0 | Mobile responsive overrides, compact controls, toggle styles |
+| `js/ai-assistant.js` | +23 −0 | Mobile toggle handlers, model icon sync |
+| `js/ai-chat.js` | +11 −2 | Search toggle mobile class sync |
+| `js/modal-templates.js` | +4 −0 | Mobile toggle button, inline model button in template |
+| `js/app-init.js` | +19 −0 | Mobile theme toggle handler, theme sync |
+| `js/app-core.js` | +7 −0 | Mobile theme toggle init sync |
diff --git a/css/ai-panel.css b/css/ai-panel.css
@@ -1413,6 +1413,16 @@
 }
 
 /* --- Responsive --- */
+/* --- Mobile options toggle button (visible only on mobile) --- */
+.ai-mobile-options-toggle {
+  display: none; /* hidden on desktop */
+}
+
+/* --- Mobile inline model button (visible only on mobile) --- */
+.ai-mobile-model-btn {
+  display: none; /* hidden on desktop */
+}
+
 @media (max-width: 767px) {
   .ai-panel {
     width: 100%;
@@ -1431,6 +1441,206 @@
   .ai-resize-divider {
     display: none;
   }
+
+  /* --- Hide options by default on mobile for more chat space --- */
+  .ai-quick-actions {
+    display: none;
+    padding: 8px 12px;
+    gap: 4px;
+  }
+
+  .ai-search-provider-bar {
+    display: none !important;
+  }
+
+  .ai-status-bar {
+    padding: 4px 12px;
+    font-size: 11px;
+  }
+
+  /* Compact header on mobile */
+  .ai-panel-header {
+    padding: 8px 12px;
+  }
+
+  /* Hide "AI Assistant" text and model badge — duplicates on mobile */
+  .ai-panel-title span,
+  .ai-panel-title .ai-badge {
+    display: none;
+  }
+
+  /* Keep the sparkle icon visible */
+  .ai-panel-title i.bi-stars {
+    display: inline;
+    font-size: 16px;
+  }
+
+  /* Compact search toggle on mobile — icon-only, green when active */
+  .ai-search-toggle {
+    padding: 4px;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    gap: 0;
+    width: 28px;
+    height: 28px;
+    justify-content: center;
+  }
+
+  .ai-search-toggle .ai-search-slider,
+  .ai-search-toggle .ai-search-label {
+    display: none;
+  }
+
+  .ai-search-toggle i {
+    font-size: 14px;
+  }
+
+  .ai-search-toggle:has(input:checked) {
+    background: #10b981;
+    border-color: #10b981;
+  }
+
+  .ai-search-toggle:has(input:checked) i {
+    color: #fff;
+  }
+
+  /* Compact welcome message on mobile */
+  .ai-welcome-message {
+    padding: 18px 14px;
+  }
+
+  .ai-welcome-icon {
+    font-size: 32px;
+    margin-bottom: 6px;
+  }
+
+  .ai-welcome-message h5 {
+    font-size: 15px;
+    margin-bottom: 4px;
+  }
+
+  .ai-welcome-message p {
+    font-size: 12px;
+    margin-bottom: 10px;
+  }
+
+  .ai-welcome-tips {
+    display: none;
+  }
+
+  /* Compact input area on mobile */
+  .ai-input-area {
+    padding: 8px 10px;
+  }
+
+  /* --- Merge model selector into chat bar on mobile --- */
+  .ai-model-selector {
+    position: absolute;
+    left: 0;
+    bottom: 100%;
+    right: 0;
+    margin-bottom: 0;
+    z-index: 10;
+  }
+
+  /* Hide the full-width model button on mobile — replaced by inline icon */
+  .ai-model-btn {
+    display: none;
+  }
+
+  /* Show the dropdown when opened (positioned above the input) */
+  .ai-model-selector.open .ai-model-dropdown {
+    position: fixed;
+    bottom: 56px;
+    left: 8px;
+    right: 8px;
+    margin-bottom: 0;
+    border-radius: 12px;
+    max-height: 45vh;
+  }
+
+  /* Make input wrapper relative for positioning */
+  .ai-input-area {
+    position: relative;
+  }
+
+  /* Show compact inline model button on mobile */
+  .ai-mobile-model-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    border: none;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: #fff;
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s;
+    flex-shrink: 0;
+  }
+
+  .ai-mobile-model-btn:hover,
+  .ai-mobile-model-btn:active {
+    transform: scale(1.05);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
+  }
+
+  /* Show the mobile toggle button */
+  .ai-mobile-options-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    background: var(--button-bg);
+    color: var(--text-color);
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s;
+    opacity: 0.7;
+    flex-shrink: 0;
+  }
+
+  .ai-mobile-options-toggle:hover,
+  .ai-mobile-options-toggle.active {
+    opacity: 1;
+    border-color: #667eea;
+    color: #667eea;
+    background: rgba(102, 126, 234, 0.08);
+  }
+
+  .ai-mobile-options-toggle .bi-chevron-up {
+    transition: transform 0.2s;
+  }
+
+  .ai-mobile-options-toggle.active .bi-chevron-up {
+    transform: rotate(180deg);
+  }
+
+  /* When options are expanded on mobile */
+  .ai-panel.ai-mobile-expanded .ai-quick-actions {
+    display: flex;
+  }
+
+  /* Search provider bar shows independently when search toggle is ON */
+  .ai-search-provider-bar.ai-mobile-show {
+    display: block !important;
+  }
+
+  /* Smaller quick action chips on mobile */
+  .ai-action-chip {
+    padding: 4px 9px;
+    font-size: 11px;
+    border-radius: 12px;
+  }
+
+  .ai-action-chip i {
+    font-size: 11px;
+  }
 }
 
 /* --- AI Status Indicator (in-panel) --- */
diff --git a/js/ai-assistant.js b/js/ai-assistant.js
@@ -173,6 +173,9 @@
       if (aiModelLabel) aiModelLabel.textContent = cfg.label;
       if (aiModelBtnIcon) { aiModelBtnIcon.className = cfg.icon; }
       if (aiModelBadge) aiModelBadge.textContent = cfg.badge;
+      // Sync mobile inline model icon
+      const mobileIcon = document.getElementById('ai-mobile-model-icon');
+      if (mobileIcon) mobileIcon.className = cfg.icon;
     }
   }
 
@@ -379,6 +382,26 @@
   if (aiPanelCloseBtn) aiPanelCloseBtn.addEventListener('click', closeAiPanel);
   // Overlay is pass-through — panel closes via the X button only
 
+  // --- Mobile Options Toggle (show/hide quick actions ONLY) ---
+  const aiMobileOptionsToggle = document.getElementById('ai-mobile-options-toggle');
+  if (aiMobileOptionsToggle) {
+    aiMobileOptionsToggle.addEventListener('click', () => {
+      const isExpanded = aiPanel.classList.toggle('ai-mobile-expanded');
+      aiMobileOptionsToggle.classList.toggle('active', isExpanded);
+      aiMobileOptionsToggle.title = isExpanded ? 'Hide quick actions' : 'Show quick actions';
+    });
+  }
+
+  // --- Mobile Inline Model Button (opens model dropdown on mobile) ---
+  const aiMobileModelBtn = document.getElementById('ai-mobile-model-btn');
+  const aiMobileModelIcon = document.getElementById('ai-mobile-model-icon');
+  if (aiMobileModelBtn && aiModelSelector) {
+    aiMobileModelBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      aiModelSelector.classList.toggle('open');
+    });
+  }
+
   // --- AI Panel Resize (drag left edge) ---
   const aiResizeDivider = document.getElementById('ai-resize-divider');
 
diff --git a/js/ai-chat.js b/js/ai-chat.js
@@ -887,7 +887,10 @@
         if (!searchToggle || !M.webSearch) return;
 
         searchToggle.checked = M.webSearch.isSearchEnabled();
-        if (searchToggle.checked && providerBar) providerBar.style.display = '';
+        if (searchToggle.checked && providerBar) {
+            providerBar.style.display = '';
+            providerBar.classList.add('ai-mobile-show');
+        }
 
         // Sync checkbox state from saved providers
         function syncPillState() {
@@ -903,7 +906,11 @@
 
         searchToggle.addEventListener('change', function () {
             M.webSearch.setSearchEnabled(searchToggle.checked);
-            if (providerBar) providerBar.style.display = searchToggle.checked ? '' : 'none';
+            if (providerBar) {
+                providerBar.style.display = searchToggle.checked ? '' : 'none';
+                // On mobile, CSS uses !important to hide — use class to override
+                providerBar.classList.toggle('ai-mobile-show', searchToggle.checked);
+            }
         });
 
         // Checkbox toggle handler
diff --git a/js/app-core.js b/js/app-core.js
@@ -78,6 +78,13 @@
         ? '<i class="bi bi-sun"></i>'
         : '<i class="bi bi-moon"></i>';
 
+    // Sync mobile theme toggle icon + label on init
+    if (M.mobileThemeToggle) {
+        var mi = M.mobileThemeToggle.querySelector('i');
+        if (mi) mi.className = initialTheme === 'dark' ? 'bi bi-sun-fill me-2' : 'bi bi-moon me-2';
+        M.mobileThemeToggle.lastChild.textContent = initialTheme === 'dark' ? ' Light Mode' : ' Dark Mode';
+    }
+
     // --- Mermaid Initialization ---
     M.initMermaid = async function () {
         const mermaidLib = await window.getMermaid();
diff --git a/js/app-init.js b/js/app-init.js
diff --git a/js/modal-templates.js b/js/modal-templates.js
