From e657e59b466cb839c9e0bb0e4d5c891fc95f3c77 Mon Sep 17 00:00:00 2001
From: Peter Steinberger <steipete@gmail.com>
Date: Thu, 8 Jan 2026 03:47:15 +0100
Subject: [PATCH] fix(ui): move focus toggle to top bar

---
 CHANGELOG.md             |  1 +
 ui/src/styles/layout.css | 11 +----------
 ui/src/ui/app-render.ts  | 29 +++++++++++++++++++++++------
 ui/src/ui/views/chat.ts  | 10 ----------
 4 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a7471ddd2..19e6a2272 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -49,6 +49,7 @@
 - Cron: clamp timer delay to avoid TimeoutOverflowWarning. Thanks @emanuelst for PR #412.
 - Web UI: allow reconnect + password URL auth for the control UI and always scrub auth params from the URL. Thanks @oswalpalash for PR #414.
 - Web UI: add Connect button on Overview to apply connection changes. Thanks @wizaj for PR #385.
+- Web UI: keep Focus toggle on the top bar (swap with theme toggle) so it stays visible. (#440)
 - ClawdbotKit: fix SwiftPM resource bundling path for `tool-display.json`. Thanks @fcatuhe for PR #398.
 - Tools: add Telegram/WhatsApp reaction tools (with per-provider gating). Thanks @zats for PR #353.
 - Tools: flatten literal-union schemas for Claude on Vertex AI. Thanks @carlulsoe for PR #409.
diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css
index 37e7ef6d1..1b63258ec 100644
--- a/ui/src/styles/layout.css
+++ b/ui/src/styles/layout.css
@@ -22,7 +22,7 @@
   --shell-pad: 8px;
   --shell-gap: 0px;
   --shell-nav-col: 0px;
-  --shell-topbar-row: 0px;
+  --shell-topbar-row: auto;
 }
 
 .shell--chat-focus .content {
@@ -54,15 +54,6 @@
   max-height: max(0px, var(--topbar-height, 92px));
 }
 
-.shell--chat-focus .topbar {
-  opacity: 0;
-  transform: translateY(-10px);
-  max-height: 0px;
-  padding: 0;
-  border-width: 0;
-  pointer-events: none;
-}
-
 .brand {
   display: grid;
   gap: 4px;
diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
index a7d535506..9cc9e5b17 100644
--- a/ui/src/ui/app-render.ts
+++ b/ui/src/ui/app-render.ts
@@ -208,6 +208,16 @@ export function renderApp(state: AppViewState) {
             <span>Health</span>
             <span class="mono">${state.connected ? "OK" : "Offline"}</span>
           </div>
+          ${isChat
+            ? renderChatFocusToggle(
+                state.settings.chatFocusMode,
+                () =>
+                  state.applySettings({
+                    ...state.settings,
+                    chatFocusMode: !state.settings.chatFocusMode,
+                  }),
+              )
+            : nothing}
           ${renderThemeToggle(state)}
         </div>
       </header>
@@ -416,16 +426,10 @@ export function renderApp(state: AppViewState) {
               disabledReason: chatDisabledReason,
               error: state.lastError,
               sessions: state.sessionsResult,
-              focusMode: state.settings.chatFocusMode,
               onRefresh: () => {
                 state.resetToolStream();
                 return loadChatHistory(state);
               },
-              onToggleFocusMode: () =>
-                state.applySettings({
-                  ...state.settings,
-                  chatFocusMode: !state.settings.chatFocusMode,
-                }),
               onDraftChange: (next) => (state.chatMessage = next),
               onSend: () => state.handleSendChat(),
             })
@@ -555,6 +559,19 @@ function renderThemeToggle(state: AppViewState) {
   `;
 }
 
+function renderChatFocusToggle(focusMode: boolean, onToggle: () => void) {
+  return html`
+    <button
+      class="btn ${focusMode ? "active" : ""}"
+      @click=${onToggle}
+      aria-pressed=${focusMode}
+      title="Toggle focus mode (hide sidebar + page header)"
+    >
+      Focus
+    </button>
+  `;
+}
+
 function renderSunIcon() {
   return html`
     <svg class="theme-icon" viewBox="0 0 24 24" aria-hidden="true">
diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts
index 59d9fc1aa..c456555f7 100644
--- a/ui/src/ui/views/chat.ts
+++ b/ui/src/ui/views/chat.ts
@@ -22,9 +22,7 @@ export type ChatProps = {
   disabledReason: string | null;
   error: string | null;
   sessions: SessionsListResult | null;
-  focusMode: boolean;
   onRefresh: () => void;
-  onToggleFocusMode: () => void;
   onDraftChange: (next: string) => void;
   onSend: () => void;
 };
@@ -66,14 +64,6 @@ export function renderChat(props: ChatProps) {
         </div>
         <div class="chat-header__right">
           <div class="muted">Thinking: ${props.thinkingLevel ?? "inherit"}</div>
-          <button
-            class="btn ${props.focusMode ? "active" : ""}"
-            @click=${props.onToggleFocusMode}
-            aria-pressed=${props.focusMode}
-            title="Toggle focus mode (hide header + sidebar)"
-          >
-            Focus
-          </button>
         </div>
       </div>