fix(ui): prevent theme flash and align search filter buttons (#41)

timon0305 · web-flow · commit 91a8d6e960ef · 2026-05-15T18:27:02.000-04:00
- base.html: apply stored theme synchronously in &lt;head&gt; so light-mode users
  no longer see a brief dark paint on every navigation
- search.html: vertically center the All / Ask Logs / Agent Logs filter
  buttons with the Search heading
diff --git a/templates/base.html b/templates/base.html
@@ -4,6 +4,16 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{% block title %}Cursor Chat Browser{% endblock %}</title>
+  <!-- Apply stored theme BEFORE the stylesheet loads to avoid a dark->light
+       flash on every navigation when light is the user's preference. -->
+  <script>
+    (function () {
+      try {
+        var t = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', t);
+      } catch (e) {}
+    })();
+  </script>
   <link rel="stylesheet" href="/static/css/style.css">
   <!-- Highlight.js for code syntax highlighting -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css" id="hljs-theme">
diff --git a/templates/search.html b/templates/search.html
@@ -4,7 +4,7 @@
 <div class="search-page">
   <div class="page-header">
     <h1>Search</h1>
-    <div class="btn-group">
+    <div class="btn-group" style="align-self:center">
       <button class="btn" id="filter-all" onclick="setFilter('all')">All</button>
       <button class="btn btn-outline" id="filter-chat" onclick="setFilter('chat')">Ask Logs</button>
       <button class="btn btn-outline" id="filter-composer" onclick="setFilter('composer')">Agent Logs</button>
