fix: eliminate AppInfo sidebar animation glitches and layout jumps (#23609)

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,8 +256,9 @@ 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 flex-col gap-2 rounded-lg p-1 hover:bg-state-base-hover'>
-            <div className={`flex items-center self-stretch ${expand ? 'justify-between' : 'flex-col gap-1'}`}>
+            <div className='flex items-center gap-1'>
+              <div className={cn(!expand && 'ml-1')}>
                 <AppIcon
                   size={expand ? 'large' : 'small'}
                   iconType={appDetail.icon_type}
@@ -265,23 +266,30 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
                   background={appDetail.icon_background}
                   imageUrl={appDetail.icon_url}
                 />
-              <div className='flex items-center justify-center rounded-md p-0.5'>
+              </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>
-            <div className={cn(
+            {!expand && (
-              'flex flex-col items-start gap-1 transition-all duration-200 ease-in-out',
+              <div className='flex items-center justify-center'>
-              expand
+                <div className='flex h-5 w-5 items-center justify-center rounded-md p-0.5'>
-                ? 'w-auto opacity-100'
+                  <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
-                : 'pointer-events-none w-0 overflow-hidden opacity-0',
+                </div>
-            )}>
+              </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>
         </button>
       )}