From aa94851f4a299eed7ca8a902be424713fbd51dfc Mon Sep 17 00:00:00 2001
From: ZacharyZcR <zacharyzcr1984@gmail.com>
Date: Sun, 9 Nov 2025 08:15:02 +0800
Subject: [PATCH] fix: Add key prop to force animation re-trigger on tab switch

Each page container now has key={currentTab} to ensure React unmounts and remounts the element on every tab switch, properly triggering the slide-in animation
---
 src/ui/desktop/DesktopApp.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/ui/desktop/DesktopApp.tsx b/src/ui/desktop/DesktopApp.tsx
index 093ba6d5..35228c70 100644
--- a/src/ui/desktop/DesktopApp.tsx
+++ b/src/ui/desktop/DesktopApp.tsx
@@ -179,14 +179,14 @@ function AppContent() {
             style={{ display: showTerminalView ? "block" : "none" }}
           >
             {showTerminalView && (
-              <div className="animate-in fade-in slide-in-from-right-4 duration-300">
+              <div key={currentTab} className="animate-in fade-in slide-in-from-right-4 duration-300">
                 <AppView isTopbarOpen={isTopbarOpen} />
               </div>
             )}
           </div>
 
           {showHome && (
-            <div className="h-screen w-full visible pointer-events-auto static overflow-hidden animate-in fade-in slide-in-from-right-4 duration-300">
+            <div key={currentTab} className="h-screen w-full visible pointer-events-auto static overflow-hidden animate-in fade-in slide-in-from-right-4 duration-300">
               <Dashboard
                 onSelectView={handleSelectView}
                 isAuthenticated={isAuthenticated}
@@ -198,7 +198,7 @@ function AppContent() {
           )}
 
           {showSshManager && (
-            <div className="h-screen w-full visible pointer-events-auto static overflow-hidden animate-in fade-in slide-in-from-right-4 duration-300">
+            <div key={currentTab} className="h-screen w-full visible pointer-events-auto static overflow-hidden animate-in fade-in slide-in-from-right-4 duration-300">
               <HostManager
                 onSelectView={handleSelectView}
                 isTopbarOpen={isTopbarOpen}
@@ -209,13 +209,13 @@ function AppContent() {
           )}
 
           {showAdmin && (
-            <div className="h-screen w-full visible pointer-events-auto static overflow-hidden animate-in fade-in slide-in-from-right-4 duration-300">
+            <div key={currentTab} className="h-screen w-full visible pointer-events-auto static overflow-hidden animate-in fade-in slide-in-from-right-4 duration-300">
               <AdminSettings isTopbarOpen={isTopbarOpen} />
             </div>
           )}
 
           {showProfile && (
-            <div className="h-screen w-full visible pointer-events-auto static overflow-auto animate-in fade-in slide-in-from-right-4 duration-300">
+            <div key={currentTab} className="h-screen w-full visible pointer-events-auto static overflow-auto animate-in fade-in slide-in-from-right-4 duration-300">
               <UserProfile isTopbarOpen={isTopbarOpen} />
             </div>
           )}