From ea3c22fba13a778c83c9bcc4da013468bf342cc5 Mon Sep 17 00:00:00 2001
From: Peter Steinberger <steipete@gmail.com>
Date: Tue, 8 Jul 2025 00:36:19 +0100
Subject: [PATCH] Remove remaining animations and fix file browser issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Swap file picker and settings buttons in session header (settings now at the end)
- Disable all button transitions in session view with body.in-session-view
- Disable modal backdrop fade-in animation (0.3s) in session view
- Fix file browser briefly showing then going dark by preventing event bubbling
- Add stopPropagation to file browser button click to prevent duplicate modals

The session detail page should now have zero animations when toggling sidebar
or opening modals.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/session-view/session-header.ts  | 11 +++++++----
 web/src/client/styles.css                      | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/web/src/client/components/session-view/session-header.ts b/web/src/client/components/session-view/session-header.ts
index 784b010d..78589034 100644
--- a/web/src/client/components/session-view/session-header.ts
+++ b/web/src/client/components/session-view/session-header.ts
@@ -157,9 +157,15 @@ export class SessionHeader extends LitElement {
           </div>
         </div>
         <div class="flex items-center gap-2 text-xs flex-shrink-0 ml-2 relative">
+          <notification-status
+            @open-settings=${() => this.onOpenSettings?.()}
+          ></notification-status>
           <button
             class="bg-dark-bg-elevated border border-dark-border rounded-lg p-2 font-mono text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0"
-            @click=${() => this.onOpenFileBrowser?.()}
+            @click=${(e: Event) => {
+              e.stopPropagation();
+              this.onOpenFileBrowser?.();
+            }}
             title="Browse Files (⌘O)"
             data-testid="file-browser-button"
           >
@@ -169,9 +175,6 @@ export class SessionHeader extends LitElement {
               />
             </svg>
           </button>
-          <notification-status
-            @open-settings=${() => this.onOpenSettings?.()}
-          ></notification-status>
           <button
             class="bg-dark-bg-elevated border border-dark-border rounded-lg p-2 font-mono text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0"
             @click=${() => this.onScreenshare?.()}
diff --git a/web/src/client/styles.css b/web/src/client/styles.css
index a77896b8..6a7e3be3 100644
--- a/web/src/client/styles.css
+++ b/web/src/client/styles.css
@@ -541,6 +541,24 @@ body.in-session-view .space-y-2 > div {
   animation-delay: 0s !important;
 }
 
+/* Disable all transitions on buttons in session view */
+body.in-session-view button {
+  transition: none !important;
+}
+
+/* Disable transitions on all interactive elements in session view */
+body.in-session-view .transition-all,
+body.in-session-view .transition-colors,
+body.in-session-view .transition-opacity,
+body.in-session-view .transition-transform {
+  transition: none !important;
+}
+
+/* Disable modal backdrop animation in session view */
+body.in-session-view .modal-backdrop {
+  animation: none !important;
+}
+
 /* Stagger animation when showing exited sessions */
 body.sessions-showing .session-flex-responsive > session-card:nth-child(1) {
   animation-delay: 0s;