From 8af8d733fd251eac4efb19c4b1bca77fac0a2757 Mon Sep 17 00:00:00 2001
From: iven <iven_h@qq.com>
Date: Wed, 8 Apr 2026 23:09:01 +0800
Subject: [PATCH] fix(ui): remove AnimatePresence from sidebar tabs to fix
 content switching

The framer-motion AnimatePresence with mode="wait" caused the sidebar
content to get stuck on the conversations list when switching to the
agents tab. The React state updated correctly but the DOM did not
re-render. Replaced with simple conditional rendering which is more
reliable and removes the framer-motion dependency from this component.
---
 desktop/src/components/Sidebar.tsx | 25 ++-----------------------
 1 file changed, 2 insertions(+), 23 deletions(-)

diff --git a/desktop/src/components/Sidebar.tsx b/desktop/src/components/Sidebar.tsx
index 3f8d3aa..9f1678f 100644
--- a/desktop/src/components/Sidebar.tsx
+++ b/desktop/src/components/Sidebar.tsx
@@ -1,19 +1,10 @@
 import { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
 import {
   SquarePen, MessageSquare, Bot, Search, X, Settings
 } from 'lucide-react';
 import { ConversationList } from './ConversationList';
 import { CloneManager } from './CloneManager';
 import { useChatStore } from '../store/chatStore';
-import { defaultTransition } from '../lib/animations';
-
-// Simple fade variants for sidebar tab content (no staggerChildren)
-const sidebarTabVariants = {
-  hidden: { opacity: 0 },
-  visible: { opacity: 1, transition: { duration: 0.15 } },
-  exit: { opacity: 0, transition: { duration: 0.1 } },
-};
 
 export type MainViewType = 'chat';
 
@@ -96,18 +87,8 @@ export function Sidebar({
 
       {/* Content area */}
       <div className="flex-1 overflow-hidden">
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={activeTab}
-            variants={sidebarTabVariants}
-            initial="hidden"
-            animate="visible"
-            exit="exit"
-            transition={defaultTransition}
-            className="h-full overflow-y-auto"
-          >
             {activeTab === 'conversations' && (
-              <div className="p-2">
+              <div className="p-2 h-full overflow-y-auto">
                 {/* Search in conversations */}
                 <div className="relative mb-2">
                   <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" />
@@ -130,9 +111,7 @@ export function Sidebar({
                 <ConversationList searchQuery={searchQuery} />
               </div>
             )}
-            {activeTab === 'clones' && <CloneManager />}
-          </motion.div>
-        </AnimatePresence>
+            {activeTab === 'clones' && <div className="h-full overflow-y-auto"><CloneManager /></div>}
       </div>
 
       {/* Bottom user bar */}