From 9afc3e982a2518c1fc7636fe7a4e6f4a12e5f197 Mon Sep 17 00:00:00 2001
From: zhujiruo <zhujiruo@foxmail.com>
Date: Wed, 2 Jul 2025 16:12:03 +0800
Subject: [PATCH] refactor(web): Restructure the operation buttons layout in
 the app information component (#21742)

- Display the import DSL and switch app buttons directly on the interface, no longer hiding them in the more options menu
---
 web/app/components/app-sidebar/app-info.tsx | 73 ++++++++-------------
 1 file changed, 28 insertions(+), 45 deletions(-)

diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx
index c6d0e776dd..1767b02cd8 100644
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@@ -10,7 +10,6 @@ import {
   RiFileCopy2Line,
   RiFileDownloadLine,
   RiFileUploadLine,
-  RiMoreLine,
 } from '@remixicon/react'
 import AppIcon from '../base/app-icon'
 import SwitchAppModal from '../app/switch-app-modal'
@@ -35,7 +34,6 @@ import ContentDialog from '@/app/components/base/content-dialog'
 import Button from '@/app/components/base/button'
 import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView'
 import Divider from '../base/divider'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../base/portal-to-follow-elem'
 
 export type IAppInfoProps = {
   expand: boolean
@@ -186,11 +184,6 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
 
   const { isCurrentWorkspaceEditor } = useAppContext()
 
-  const [showMore, setShowMore] = useState(false)
-  const handleTriggerMore = useCallback(() => {
-    setShowMore(true)
-  }, [setShowMore])
-
   if (!appDetail)
     return null
 
@@ -294,52 +287,42 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
               <RiFileDownloadLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
               <span className='system-xs-medium text-components-button-secondary-text'>{t('app.export')}</span>
             </Button>
-            {appDetail.mode !== 'agent-chat' && <PortalToFollowElem
-              open={showMore}
-              onOpenChange={setShowMore}
-              placement='bottom-end'
-              offset={{
-                mainAxis: 4,
-              }}>
-              <PortalToFollowElemTrigger onClick={handleTriggerMore}>
-                <Button
-                  size={'small'}
-                  variant={'secondary'}
-                  className='gap-[1px]'
-                >
-                  <RiMoreLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
-                  <span className='system-xs-medium text-components-button-secondary-text'>{t('common.operation.more')}</span>
-                </Button>
-              </PortalToFollowElemTrigger>
-              <PortalToFollowElemContent className='z-[21]'>
-                <div className='flex w-[264px] flex-col rounded-[12px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]'>
-                  {
-                    (appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow')
-                    && <div className='flex h-8 cursor-pointer items-center gap-x-1 rounded-lg p-1.5 hover:bg-state-base-hover'
+            {appDetail.mode !== 'agent-chat'
+              && <>
+                {
+                  (appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow')
+                    && <Button
+                      size={'small'}
+                      variant={'secondary'}
+                      className='gap-[1px]'
                       onClick={() => {
                         setOpen(false)
                         onDetailExpand?.(false)
                         setShowImportDSLModal(true)
-                      }}>
-                      <RiFileUploadLine className='h-4 w-4 text-text-tertiary' />
-                      <span className='system-md-regular text-text-secondary'>{t('workflow.common.importDSL')}</span>
-                    </div>
-                  }
-                  {
-                    (appDetail.mode === 'completion' || appDetail.mode === 'chat')
-                    && <div className='flex h-8 cursor-pointer items-center gap-x-1 rounded-lg p-1.5 hover:bg-state-base-hover'
+                      }}
+                    >
+                      <RiFileUploadLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
+                      <span className='system-xs-medium text-components-button-secondary-text'>{t('workflow.common.importDSL')}</span>
+                    </Button>
+                }
+                {
+                  (appDetail.mode === 'completion' || appDetail.mode === 'chat')
+                    && <Button
+                      size={'small'}
+                      variant={'secondary'}
+                      className='gap-[1px]'
                       onClick={() => {
                         setOpen(false)
                         onDetailExpand?.(false)
                         setShowSwitchModal(true)
-                      }}>
-                      <RiExchange2Line className='h-4 w-4 text-text-tertiary' />
-                      <span className='system-md-regular text-text-secondary'>{t('app.switch')}</span>
-                    </div>
-                  }
-                </div>
-              </PortalToFollowElemContent>
-            </PortalToFollowElem>}
+                      }}
+                    >
+                      <RiExchange2Line className='h-3.5 w-3.5 text-components-button-secondary-text' />
+                      <span className='system-xs-medium text-components-button-secondary-text'>{t('app.switch')}</span>
+                    </Button>
+                }
+              </>
+            }
           </div>
         </div>
         <div className='flex flex-1'>