From 5e570fb32e7e02e604f33a0a1253002c713c36e9 Mon Sep 17 00:00:00 2001
From: Brad Harris <bmharris@gmail.com>
Date: Mon, 9 Mar 2026 22:32:58 -0600
Subject: [PATCH 1/2] Animate header logo visibility based on sidebar state

Show the Dispatch logo in the header only when the agent sidebar is
closed, using a width + opacity transition that matches the sidebar's
300ms ease-out timing for a smooth slide-fade effect.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/components/app/app-header.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/src/components/app/app-header.tsx b/web/src/components/app/app-header.tsx
index dc7154f7..fd575231 100644
--- a/web/src/components/app/app-header.tsx
+++ b/web/src/components/app/app-header.tsx
@@ -42,7 +42,20 @@ export function AppHeader({
             <PanelRightOpen className="h-4 w-4" />
           </Button>
         ) : null}
-        {!isMobile ? <img src="/brand-icon.svg" alt="Dispatch logo" className="h-6 w-auto object-contain" /> : null}
+        {!isMobile ? (
+          <div
+            className={cn(
+              "overflow-hidden transition-[width,opacity] duration-300 ease-out",
+              leftOpen ? "w-0 opacity-0" : "w-7 opacity-100"
+            )}
+          >
+            <img
+              src="/brand-icon.svg"
+              alt="Dispatch logo"
+              className="h-6 w-auto object-contain"
+            />
+          </div>
+        ) : null}
       </div>
 
       {showHeaderStatus ? (

From f5bafc8618fd13b8d8903990668f9f1a9c7b65d6 Mon Sep 17 00:00:00 2001
From: Brad Harris <bmharris@gmail.com>
Date: Mon, 9 Mar 2026 22:35:35 -0600
Subject: [PATCH 2/2] Improve header logo animation with translate + delay

Use translateX + opacity instead of width transitions for a more
noticeable slide-fade effect. Add 150ms delay when appearing so the
logo slides in after the sidebar has partially collapsed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/components/app/app-header.tsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/web/src/components/app/app-header.tsx b/web/src/components/app/app-header.tsx
index fd575231..eb15bab2 100644
--- a/web/src/components/app/app-header.tsx
+++ b/web/src/components/app/app-header.tsx
@@ -36,26 +36,32 @@ export function AppHeader({
 }: AppHeaderProps): JSX.Element {
   return (
     <header className={cn("relative flex h-14 items-center border-b-2 border-b-border bg-[#11120f] px-3 pt-[env(safe-area-inset-top)]")}>
-      <div className="flex shrink-0 items-center gap-2">
-        {(!leftOpen || isMobile) ? (
-          <Button size="icon" variant="ghost" onClick={() => setLeftOpen(true)} title="Open agent sidebar">
-            <PanelRightOpen className="h-4 w-4" />
-          </Button>
-        ) : null}
-        {!isMobile ? (
+      <div className="flex shrink-0 items-center gap-1">
+        {isMobile ? (
+          !leftOpen ? (
+            <Button size="icon" variant="ghost" onClick={() => setLeftOpen(true)} title="Open agent sidebar">
+              <PanelRightOpen className="h-4 w-4" />
+            </Button>
+          ) : null
+        ) : (
           <div
             className={cn(
-              "overflow-hidden transition-[width,opacity] duration-300 ease-out",
-              leftOpen ? "w-0 opacity-0" : "w-7 opacity-100"
+              "flex items-center gap-1 transition-[opacity,transform] duration-300 ease-out",
+              leftOpen
+                ? "pointer-events-none -translate-x-3 opacity-0"
+                : "translate-x-0 opacity-100 delay-150"
             )}
           >
+            <Button size="icon" variant="ghost" onClick={() => setLeftOpen(true)} title="Open agent sidebar">
+              <PanelRightOpen className="h-4 w-4" />
+            </Button>
             <img
               src="/brand-icon.svg"
               alt="Dispatch logo"
               className="h-6 w-auto object-contain"
             />
           </div>
-        ) : null}
+        )}
       </div>
 
       {showHeaderStatus ? (