From 92fcf0854bd786abd43493e4d96966fa8e48570e Mon Sep 17 00:00:00 2001
From: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Date: Fri, 8 Aug 2025 12:55:52 +0800
Subject: [PATCH] fix: eliminate AppInfo sidebar animation glitches and layout
 jumps (#23609)

---
 web/app/components/app-sidebar/app-info.tsx | 54 ++++++++++++---------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx
index c04d79d2f..288dcf8c8 100644
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@@ -12,7 +12,6 @@ import {
   RiFileUploadLine,
 } from '@remixicon/react'
 import AppIcon from '../base/app-icon'
-import cn from '@/utils/classnames'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast'
 import { useAppContext } from '@/context/app-context'
@@ -31,6 +30,7 @@ import Divider from '../base/divider'
 import type { Operation } from './app-operations'
 import AppOperations from './app-operations'
 import dynamic from 'next/dynamic'
+import cn from '@/utils/classnames'
 
 const SwitchAppModal = dynamic(() => import('@/app/components/app/switch-app-modal'), {
   ssr: false,
@@ -256,32 +256,40 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
           }}
           className='block w-full'
         >
-          <div className={cn('flex rounded-lg', expand ? 'flex-col gap-2 p-2 pb-2.5' : 'items-start justify-center gap-1 p-1', open && 'bg-state-base-hover', isCurrentWorkspaceEditor && 'cursor-pointer hover:bg-state-base-hover')}>
-            <div className={`flex items-center self-stretch ${expand ? 'justify-between' : 'flex-col gap-1'}`}>
-              <AppIcon
-                size={expand ? 'large' : 'small'}
-                iconType={appDetail.icon_type}
-                icon={appDetail.icon}
-                background={appDetail.icon_background}
-                imageUrl={appDetail.icon_url}
-              />
-              <div className='flex items-center justify-center rounded-md p-0.5'>
-                <div className='flex h-5 w-5 items-center justify-center'>
+          <div className='flex flex-col gap-2 rounded-lg p-1 hover:bg-state-base-hover'>
+            <div className='flex items-center gap-1'>
+              <div className={cn(!expand && 'ml-1')}>
+                <AppIcon
+                  size={expand ? 'large' : 'small'}
+                  iconType={appDetail.icon_type}
+                  icon={appDetail.icon}
+                  background={appDetail.icon_background}
+                  imageUrl={appDetail.icon_url}
+                />
+              </div>
+              {expand && (
+                <div className='ml-auto flex items-center justify-center rounded-md p-0.5'>
+                  <div className='flex h-5 w-5 items-center justify-center'>
+                    <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
+                  </div>
+                </div>
+              )}
+            </div>
+            {!expand && (
+              <div className='flex items-center justify-center'>
+                <div className='flex h-5 w-5 items-center justify-center rounded-md p-0.5'>
                   <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
                 </div>
               </div>
-            </div>
-            <div className={cn(
-              'flex flex-col items-start gap-1 transition-all duration-200 ease-in-out',
-              expand
-                ? 'w-auto opacity-100'
-                : 'pointer-events-none w-0 overflow-hidden opacity-0',
-            )}>
-              <div className='flex w-full'>
-                <div className='system-md-semibold truncate whitespace-nowrap text-text-secondary'>{appDetail.name}</div>
+            )}
+            {expand && (
+              <div className='flex flex-col items-start gap-1'>
+                <div className='flex w-full'>
+                  <div className='system-md-semibold truncate whitespace-nowrap text-text-secondary'>{appDetail.name}</div>
+                </div>
+                <div className='system-2xs-medium-uppercase whitespace-nowrap text-text-tertiary'>{appDetail.mode === 'advanced-chat' ? t('app.types.advanced') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div>
               </div>
-              <div className='system-2xs-medium-uppercase whitespace-nowrap text-text-tertiary'>{appDetail.mode === 'advanced-chat' ? t('app.types.advanced') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div>
-            </div>
+            )}
           </div>
         </button>
       )}