From 8692e74536a4829b7c08f8f54a6e82e70e247067 Mon Sep 17 00:00:00 2001
From: zhayujie <yjzha1996@163.com>
Date: Tue, 14 Apr 2026 21:09:01 +0800
Subject: [PATCH] fix(web): hide session panel by default on mobile and support
 overlay dismiss

---
 channel/web/chat.html              |  3 +++
 channel/web/static/css/console.css | 17 ++++++++++++++
 channel/web/static/js/console.js   | 36 +++++++++++++++++++++++++++++-
 3 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/channel/web/chat.html b/channel/web/chat.html
index 4f6d10ac..2c013072 100644
--- a/channel/web/chat.html
+++ b/channel/web/chat.html
@@ -213,6 +213,9 @@
             <div id="session-list" class="session-list"></div>
         </aside>
 
+        <!-- Mobile overlay for session panel (click to close) -->
+        <div id="session-panel-overlay" class="session-panel-overlay hidden" onclick="closeSessionPanel()"></div>
+
         <!-- ================================================================ -->
         <!-- MAIN CONTENT                                                     -->
         <!-- ================================================================ -->
diff --git a/channel/web/static/css/console.css b/channel/web/static/css/console.css
index 9e6c2913..2cf47449 100644
--- a/channel/web/static/css/console.css
+++ b/channel/web/static/css/console.css
@@ -339,6 +339,23 @@
 }
 .confirm-btn-ok:hover { background: #dc2626; }
 
+/* Session panel overlay (mobile only, click to close) */
+.session-panel-overlay {
+    display: none;
+}
+@media (max-width: 768px) {
+    .session-panel-overlay {
+        display: block;
+        position: fixed;
+        inset: 0;
+        z-index: 44;
+        background: rgba(0, 0, 0, 0.3);
+    }
+    .session-panel-overlay.hidden {
+        display: none;
+    }
+}
+
 /* Mobile: session panel as overlay */
 @media (max-width: 768px) {
     .session-panel {
diff --git a/channel/web/static/js/console.js b/channel/web/static/js/console.js
index 55a6f94f..79a4ca7f 100644
--- a/channel/web/static/js/console.js
+++ b/channel/web/static/js/console.js
@@ -1626,6 +1626,7 @@ function newChat() {
     if (panel && !sessionPanelOpen) {
         sessionPanelOpen = true;
         panel.classList.remove('hidden');
+        _showSessionOverlay();
         _persistPanelState();
     }
     const newSid = sessionId;
@@ -1643,11 +1644,40 @@ function _persistPanelState() {
     localStorage.setItem(SESSION_PANEL_KEY, sessionPanelOpen ? '1' : '0');
 }
 
+function _isMobileView() {
+    return window.innerWidth <= 768;
+}
+
+function _showSessionOverlay() {
+    if (!_isMobileView()) return;
+    const overlay = document.getElementById('session-panel-overlay');
+    if (overlay) overlay.classList.remove('hidden');
+}
+
+function _hideSessionOverlay() {
+    const overlay = document.getElementById('session-panel-overlay');
+    if (overlay) overlay.classList.add('hidden');
+}
+
+function closeSessionPanel() {
+    const panel = document.getElementById('session-panel');
+    if (!panel || !sessionPanelOpen) return;
+    sessionPanelOpen = false;
+    panel.classList.add('hidden');
+    _hideSessionOverlay();
+    _persistPanelState();
+}
+
 function toggleSessionPanel() {
     const panel = document.getElementById('session-panel');
     if (!panel) return;
     sessionPanelOpen = !sessionPanelOpen;
     panel.classList.toggle('hidden', !sessionPanelOpen);
+    if (sessionPanelOpen) {
+        _showSessionOverlay();
+    } else {
+        _hideSessionOverlay();
+    }
     _persistPanelState();
     if (sessionPanelOpen) loadSessionList();
 }
@@ -1657,6 +1687,7 @@ function openSessionPanel() {
     if (!panel || sessionPanelOpen) return;
     sessionPanelOpen = true;
     panel.classList.remove('hidden');
+    _showSessionOverlay();
     _persistPanelState();
     loadSessionList();
 }
@@ -1664,11 +1695,13 @@ function openSessionPanel() {
 function _restoreSessionPanel() {
     const panel = document.getElementById('session-panel');
     if (!panel) return;
-    if (sessionPanelOpen) {
+    if (sessionPanelOpen && !_isMobileView()) {
         panel.classList.remove('hidden');
+        _showSessionOverlay();
         loadSessionList();
     } else {
         panel.classList.add('hidden');
+        _hideSessionOverlay();
     }
 }
 
@@ -1860,6 +1893,7 @@ function switchSession(newSessionId) {
         el.classList.toggle('active', el.dataset.sessionId === sessionId);
     });
 
+    if (_isMobileView()) closeSessionPanel();
     if (currentView !== 'chat') navigateTo('chat');
 }