From 6f8832d222d5a7edfe253093d90089cbc4494e2e Mon Sep 17 00:00:00 2001
From: Shad <shad@flow-master.ai>
Date: Sun, 14 Jun 2026 11:39:53 +0400
Subject: [PATCH] fix(theme): reactive ThemeToggle component with visible label
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous topbar theme button used useApp.getState() inline in JSX
which doesn't subscribe — clicking changed state but the icon never
re-rendered. Replace with proper component that subscribes via hook.

Also add visible 'DARK'/'LIGHT' label so the button is discoverable
without hover-tooltip-only labelling.

Confidence: high
Scope-risk: trivial
---
 src/App.tsx   | 22 +++++++++++++++++++---
 src/index.css |  3 +++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e3b2cd8..adcb8a0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -133,9 +133,8 @@ export default function App() {
               <Layers size={12} /> Console
               {apiLogCount > 0 && <span className="badge mono">{apiLogCount}</span>}
             </button>
-            <button className="link-btn" onClick={() => useApp.getState().setTheme(useApp.getState().theme === "dark" ? "light" : "dark")} title="Toggle theme">
-              {useApp.getState().theme === "dark" ? <Sun size={13} /> : <Moon size={13} />}
-            </button>
+            <ThemeToggle />
+
             <button className="link-btn" onClick={() => setCmdOpen(true)}>
               <Cmd size={13} /> <kbd>⌘K</kbd>
             </button>
@@ -159,3 +158,20 @@ export default function App() {
     </div>
   );
 }
+
+function ThemeToggle() {
+  const theme = useApp((s) => s.theme);
+  const setTheme = useApp((s) => s.setTheme);
+  const isDark = theme === "dark";
+  return (
+    <button
+      className="link-btn theme-toggle"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      title={isDark ? "Switch to light theme" : "Switch to dark theme"}
+      aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
+    >
+      {isDark ? <Sun size={13} /> : <Moon size={13} />}
+      <span className="theme-toggle-label">{isDark ? "LIGHT" : "DARK"}</span>
+    </button>
+  );
+}
diff --git a/src/index.css b/src/index.css
index 46ebbe2..ad83fb4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1787,3 +1787,6 @@ select.studio-input { background: var(--bp-paper); }
   gap: var(--space-md);
   align-items: center;
 }
+
+.theme-toggle { display: inline-flex; align-items: center; gap: 6px; }
+.theme-toggle-label { font-size: 10px; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; }