From d080bea20bd8cfb89184f6f138c5e1bfaa4adfd6 Mon Sep 17 00:00:00 2001
From: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Date: Tue, 5 Aug 2025 15:06:40 +0800
Subject: [PATCH] fix: resolve sidebar animation issues and improve app detail
 page UX (#23407)

---
 .../[datasetId]/layout-main.tsx               | 73 ++++++++++++-------
 .../components/app-sidebar/dataset-info.tsx   | 18 +++--
 2 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
index 426778c83..d70179266 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@@ -56,33 +56,50 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
   }, [isMobile, setShowTips])
 
   return <div>
-    {hasRelatedApps && (
-      <>
-        {!isMobile && (
-          <Tooltip
-            position='right'
-            noDecoration
-            popupContent={
-              <LinkedAppsPanel
-                relatedApps={relatedApps.data}
-                isMobile={isMobile}
-              />
-            }
-          >
-            <div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
-              <span>{relatedAppsTotal || '--'} {t('common.datasetMenus.relatedApp')}</span>
-              <RiInformation2Line className='h-4 w-4' />
-            </div>
-          </Tooltip>
-        )}
+    {/* Related apps for desktop */}
+    <div className={classNames(
+      'transition-all duration-200 ease-in-out',
+      (hasRelatedApps && !isMobile)
+        ? 'w-auto opacity-100'
+        : 'pointer-events-none h-0 w-0 overflow-hidden opacity-0',
+    )}>
+      <Tooltip
+        position='right'
+        noDecoration
+        popupContent={
+          <LinkedAppsPanel
+            relatedApps={relatedApps?.data || []}
+            isMobile={isMobile}
+          />
+        }
+      >
+        <div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 whitespace-nowrap text-text-secondary'>
+          <span>{relatedAppsTotal || '--'} {t('common.datasetMenus.relatedApp')}</span>
+          <RiInformation2Line className='h-4 w-4' />
+        </div>
+      </Tooltip>
+    </div>
 
-        {isMobile && <div className={classNames('pb-2 pt-4 text-xs font-medium uppercase text-text-tertiary', 'flex items-center justify-center gap-1 !px-0')}>
-          {relatedAppsTotal || '--'}
-          <PaperClipIcon className='h-4 w-4 text-text-secondary' />
-        </div>}
-      </>
-    )}
-    {!hasRelatedApps && !expand && (
+    {/* Related apps for mobile */}
+    <div className={classNames(
+      'transition-all duration-200 ease-in-out',
+      (hasRelatedApps && isMobile)
+        ? 'w-auto opacity-100'
+        : 'pointer-events-none h-0 w-0 overflow-hidden opacity-0',
+    )}>
+      <div className={classNames('pb-2 pt-4 text-xs font-medium uppercase text-text-tertiary', 'flex items-center justify-center gap-1 whitespace-nowrap !px-0')}>
+        {relatedAppsTotal || '--'}
+        <PaperClipIcon className='h-4 w-4 text-text-secondary' />
+      </div>
+    </div>
+
+    {/* No related apps tooltip */}
+    <div className={classNames(
+      'transition-all duration-200 ease-in-out',
+      (!hasRelatedApps && !expand)
+        ? 'w-auto opacity-100'
+        : 'pointer-events-none h-0 w-0 overflow-hidden opacity-0',
+    )}>
       <Tooltip
         position='right'
         noDecoration
@@ -103,12 +120,12 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
           </div>
         }
       >
-        <div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
+        <div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 whitespace-nowrap text-text-secondary'>
           <span>{t('common.datasetMenus.noRelatedApp')}</span>
           <RiInformation2Line className='h-4 w-4' />
         </div>
       </Tooltip>
-    )}
+    </div>
   </div>
 }
 
diff --git a/web/app/components/app-sidebar/dataset-info.tsx b/web/app/components/app-sidebar/dataset-info.tsx
index 73740133c..eee7cb3a2 100644
--- a/web/app/components/app-sidebar/dataset-info.tsx
+++ b/web/app/components/app-sidebar/dataset-info.tsx
@@ -29,15 +29,17 @@ const DatasetInfo: FC<Props> = ({
       <div className='mr-3 shrink-0'>
         <AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />
       </div>
-      {expand && (
-        <div className='mt-2'>
-          <div className='system-md-semibold text-text-secondary'>
-            {name}
-          </div>
-          <div className='system-2xs-medium-uppercase mt-1 text-text-tertiary'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
-          <div className='system-xs-regular  my-3 text-text-tertiary first-letter:capitalize'>{description}</div>
+      <div className={`transition-all duration-200 ease-in-out ${
+        expand
+          ? 'mt-2 w-auto opacity-100'
+          : 'pointer-events-none h-0 w-0 overflow-hidden opacity-0'
+      }`}>
+        <div className='system-md-semibold truncate whitespace-nowrap text-text-secondary'>
+          {name}
         </div>
-      )}
+        <div className='system-2xs-medium-uppercase mt-1 whitespace-nowrap text-text-tertiary'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
+        <div className='system-xs-regular my-3 whitespace-nowrap text-text-tertiary first-letter:capitalize'>{description}</div>
+      </div>
       {extraInfo}
     </div>
   )