From d4c8f90a4cb5d665345a030efee8166bfcc0e30c Mon Sep 17 00:00:00 2001
From: Manuel Maly <manuel.maly@gmail.com>
Date: Tue, 24 Jun 2025 22:38:09 +0200
Subject: [PATCH] fix: only animate sidebar on user initiated session selection

---
 web/src/client/app.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/src/client/app.ts b/web/src/client/app.ts
index 414648e9..da43554a 100644
--- a/web/src/client/app.ts
+++ b/web/src/client/app.ts
@@ -59,6 +59,7 @@ export class VibeTunnelApp extends LitElement {
   @state() private isAuthenticated = false;
   @state() private sidebarCollapsed = this.loadSidebarState();
   @state() private sidebarWidth = this.loadSidebarWidth();
+  @state() private userInitiatedSessionChange = false;
   @state() private isResizing = false;
   @state() private mediaState: MediaQueryState = responsiveObserver.getCurrentState();
   private initialLoadComplete = false;
@@ -190,6 +191,7 @@ export class VibeTunnelApp extends LitElement {
       // Try to find the session and navigate to it
       const session = this.sessions.find((s) => s.id === sessionId);
       if (session) {
+        this.userInitiatedSessionChange = false;
         this.selectedSessionId = sessionId;
         this.currentView = 'session';
       }
@@ -412,6 +414,8 @@ export class VibeTunnelApp extends LitElement {
       mediaStateIsMobile: this.mediaState.isMobile,
     });
 
+    this.userInitiatedSessionChange = true;
+
     // Check if View Transitions API is supported
     if ('startViewTransition' in document && typeof document.startViewTransition === 'function') {
       // Debug: Check what elements have view-transition-name before transition
@@ -827,7 +831,12 @@ export class VibeTunnelApp extends LitElement {
 
     const baseClasses = 'bg-dark-bg-secondary border-r border-dark-border flex flex-col';
     const isMobile = this.mediaState.isMobile;
-    const transitionClass = this.initialRenderComplete && !isMobile ? 'sidebar-transition' : '';
+    const transitionClass =
+      this.initialRenderComplete && !isMobile
+        ? this.userInitiatedSessionChange
+          ? 'sidebar-transition'
+          : ''
+        : '';
     const mobileClasses = isMobile ? 'absolute left-0 top-0 bottom-0 z-30 flex' : transitionClass;
 
     const collapsedClasses = this.sidebarCollapsed