fix(ui): early theme apply and safer search/sidebar click handlers

clean6378-max-it · clean6378-max-it · commit 41c1f09f52c3 · 2026-05-21T05:49:28.000+08:00
diff --git a/static/css/style.css b/static/css/style.css
@@ -82,6 +82,12 @@
   color-scheme: light;
 }
 
+/* Theme toggle icons (set before JS module loads; applyTheme keeps them in sync) */
+[data-theme="dark"] #icon-moon { display: block; }
+[data-theme="dark"] #icon-sun { display: none; }
+[data-theme="light"] #icon-moon { display: none; }
+[data-theme="light"] #icon-sun { display: block; }
+
 /* ---------- Reset & Base ---------- */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
diff --git a/static/index.html b/static/index.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Claude Code Chat Browser</title>
+  <script>
+    /* Apply saved theme before first paint (avoids dark flash in light mode).
+       hljs URLs/integrity must match HLJS_THEME_SHEETS in static/js/shared/theme.js */
+    (function () {
+      var t = localStorage.getItem('theme');
+      if (t !== 'light' && t !== 'dark') t = 'dark';
+      document.documentElement.setAttribute('data-theme', t);
+    })();
+  </script>
   <link rel="stylesheet" href="/static/css/style.css">
   <!-- SRI hashes pin each CDN asset to a specific known-good payload; the
        browser refuses anything whose hash does not match (issue #19).
@@ -17,6 +26,16 @@
         integrity="sha512-mtXspRdOWHCYp+f4c7CkWGYPPRAhq9X+xCvJMUBVAb6pqA4U8pxhT3RWT3LP3bKbiolYL2CkL1bSKZZO4eeTew=="
         crossorigin="anonymous"
         id="hljs-theme">
+  <script>
+    (function () {
+      var t = document.documentElement.getAttribute('data-theme') || 'dark';
+      if (t !== 'light') return;
+      var link = document.getElementById('hljs-theme');
+      if (!link) return;
+      link.integrity = 'sha512-0aPQyyeZrWgKOP0mUipLQ6OZXu8l4IcAmD2u31EPEy9VcIMvl7SoAaKe8bLXZhYoMaE/in+gcgA==';
+      link.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css';
+    })();
+  </script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"
           integrity="sha512-D9gUyxqja7hBtkWpPWGt9wfbfaMGVt9gnyCvYa+jojwwPHLCzUm5i8rpk7vD7wNee9bA35eYIjobYPaQuKS1MQ=="
           crossorigin="anonymous"></script>
@@ -44,7 +63,7 @@
         </a>
         <button id="theme-toggle" class="nav-link" title="Toggle theme" onclick="toggleTheme()">
           <svg id="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
-          <svg id="icon-sun"  width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+          <svg id="icon-sun"  width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
         </button>
       </div>
     </div>
diff --git a/static/js/search.js b/static/js/search.js
@@ -28,10 +28,12 @@ export function showSearchPage() {
             <div id="search-results"></div>
         </div>`;
     document.getElementById('search-results').addEventListener('click', (e) => {
+        if (!(e.target instanceof Element)) return;
         const result = e.target.closest('.search-result[data-project]');
         if (!result) return;
         const project = result.getAttribute('data-project');
         const sessionId = result.getAttribute('data-session-id');
+        if (!project || !sessionId) return;
         window.location.hash = `#project/${encodeURIComponent(project)}/${encodeURIComponent(sessionId)}`;
     });
     document.getElementById('search-input').focus();
diff --git a/static/js/sessions.js b/static/js/sessions.js
@@ -100,11 +100,12 @@ function bindSidebarSessionClicks() {
     const sidebar = document.getElementById('sidebar');
     if (!sidebar) return;
     sidebar.addEventListener('click', (e) => {
+        if (!(e.target instanceof Element)) return;
         const btn = e.target.closest('button.sidebar-item[data-session-id]');
         if (!btn) return;
         const project = btn.getAttribute('data-project');
         const sessionId = btn.getAttribute('data-session-id');
-        if (project == null || sessionId == null) return;
+        if (!project || !sessionId) return;
         selectSession(project, sessionId);
     });
 }
