fix: style

web/app/components/workflow/skill/file-tree/tree/menu-item.spec.tsx

@@ -59,7 +59,10 @@ describe('MenuItem', () => {
       renderMenuItem()
 
       // Assert
-      expect(screen.getByRole('menuitem', { name: /rename/i })).toBeInTheDocument()
+      const item = screen.getByRole('menuitem', { name: /rename/i })
+      expect(item).toBeInTheDocument()
+      expect(item).toHaveClass('mx-1')
+      expect(item).toHaveClass('px-3')
     })
 
     it('should apply destructive variant styles when variant is destructive', () => {

web/app/components/workflow/skill/file-tree/tree/menu-item.tsx

@@ -87,7 +87,7 @@ const MenuItem = ({
       onClick={onClick}
       disabled={disabled}
       destructive={variant === 'destructive'}
-      className={cn(menuItemVariants({ variant }), 'mx-0 h-auto w-full px-3 py-2')}
+      className={cn(menuItemVariants({ variant }), 'h-auto')}
     >
       {typeof Icon === 'string'
         ? <span className={cn(Icon, iconVariants({ variant }))} aria-hidden="true" />

web/app/components/workflow/skill/skill-body/sidebar-search-add.spec.tsx

@@ -137,8 +137,8 @@ describe('SidebarSearchAdd', () => {
       fireEvent.click(screen.getByRole('button', { name: /common\.operation\.add/i }))
 
       // Act
-      fireEvent.click(screen.getByRole('button', { name: /workflow\.skillSidebar\.menu\.newFile/i }))
-      fireEvent.click(screen.getByRole('button', { name: /workflow\.skillSidebar\.menu\.newFolder/i }))
+      fireEvent.click(screen.getByRole('menuitem', { name: /workflow\.skillSidebar\.menu\.newFile/i }))
+      fireEvent.click(screen.getByRole('menuitem', { name: /workflow\.skillSidebar\.menu\.newFolder/i }))
 
       // Assert
       expect(mocks.fileOperations.handleNewFile).toHaveBeenCalledTimes(1)
@@ -152,8 +152,8 @@ describe('SidebarSearchAdd', () => {
       fireEvent.click(screen.getByRole('button', { name: /common\.operation\.add/i }))
 
       // Act
-      fireEvent.click(screen.getByRole('button', { name: /workflow\.skillSidebar\.menu\.uploadFile/i }))
-      fireEvent.click(screen.getByRole('button', { name: /workflow\.skillSidebar\.menu\.uploadFolder/i }))
+      fireEvent.click(screen.getByRole('menuitem', { name: /workflow\.skillSidebar\.menu\.uploadFile/i }))
+      fireEvent.click(screen.getByRole('menuitem', { name: /workflow\.skillSidebar\.menu\.uploadFolder/i }))
 
       // Assert
       expect(clickSpy).toHaveBeenCalledTimes(2)
@@ -165,7 +165,7 @@ describe('SidebarSearchAdd', () => {
       fireEvent.click(screen.getByRole('button', { name: /common\.operation\.add/i }))
 
       // Act
-      fireEvent.click(screen.getByRole('button', { name: /workflow\.skillSidebar\.menu\.importSkills/i }))
+      fireEvent.click(screen.getByRole('menuitem', { name: /workflow\.skillSidebar\.menu\.importSkills/i }))
 
       // Assert
       expect(screen.getByTestId('import-skill-modal')).toBeInTheDocument()
@@ -228,11 +228,11 @@ describe('SidebarSearchAdd', () => {
       fireEvent.click(screen.getByRole('button', { name: /common\.operation\.add/i }))
 
       // Assert
-      expect(screen.getByRole('button', { name: /workflow\.skillSidebar\.menu\.newFile/i })).toBeDisabled()
-      expect(screen.getByRole('button', { name: /workflow\.skillSidebar\.menu\.newFolder/i })).toBeDisabled()
-      expect(screen.getByRole('button', { name: /workflow\.skillSidebar\.menu\.uploadFile/i })).toBeDisabled()
-      expect(screen.getByRole('button', { name: /workflow\.skillSidebar\.menu\.uploadFolder/i })).toBeDisabled()
-      expect(screen.getByRole('button', { name: /workflow\.skillSidebar\.menu\.importSkills/i })).toBeDisabled()
+      expect(screen.getByRole('menuitem', { name: /workflow\.skillSidebar\.menu\.newFile/i })).toHaveAttribute('aria-disabled', 'true')
+      expect(screen.getByRole('menuitem', { name: /workflow\.skillSidebar\.menu\.newFolder/i })).toHaveAttribute('aria-disabled', 'true')
+      expect(screen.getByRole('menuitem', { name: /workflow\.skillSidebar\.menu\.uploadFile/i })).toHaveAttribute('aria-disabled', 'true')
+      expect(screen.getByRole('menuitem', { name: /workflow\.skillSidebar\.menu\.uploadFolder/i })).toHaveAttribute('aria-disabled', 'true')
+      expect(screen.getByRole('menuitem', { name: /workflow\.skillSidebar\.menu\.importSkills/i })).toHaveAttribute('aria-disabled', 'true')
     })
   })
 })

web/app/components/workflow/skill/skill-body/sidebar-search-add.tsx

@@ -1,19 +1,21 @@
 'use client'
 
 import * as React from 'react'
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { buttonVariants } from '@/app/components/base/button'
 import { FileAdd, FolderAdd } from '@/app/components/base/icons/src/vender/line/files'
 import { UploadCloud02 } from '@/app/components/base/icons/src/vender/line/general'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem-plus'
 import SearchInput from '@/app/components/base/search-input'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import dynamic from '@/next/dynamic'
+import { cn } from '@/utils/classnames'
 import { ROOT_ID } from '../constants'
 import MenuItem from '../file-tree/tree/menu-item'
 import { useSkillAssetTreeData } from '../hooks/file-tree/data/use-skill-asset-tree'
@@ -28,7 +30,6 @@ const SidebarSearchAdd = () => {
   const { t } = useTranslation('workflow')
   const searchValue = useStore(s => s.fileTreeSearchTerm)
   const storeApi = useWorkflowStore()
-  const [showMenu, setShowMenu] = useState(false)
   const [isImportModalOpen, setIsImportModalOpen] = useState(false)
 
   const { data: treeData } = useSkillAssetTreeData()
@@ -40,7 +41,7 @@ const SidebarSearchAdd = () => {
       return ROOT_ID
     return getTargetFolderIdFromSelection(selectedTreeNodeId, treeChildren)
   }, [selectedTreeNodeId, treeChildren])
-  const menuOffset = useMemo(() => ({ mainAxis: 4 }), [])
+  const handleMenuClose = useCallback(() => {}, [])
 
   const {
     fileInputRef,
@@ -52,7 +53,7 @@ const SidebarSearchAdd = () => {
     handleFolderChange,
   } = useFileOperations({
     nodeId: targetFolderId,
-    onClose: () => setShowMenu(false),
+    onClose: handleMenuClose,
   })
 
   return (
@@ -63,85 +64,82 @@ const SidebarSearchAdd = () => {
         className="!h-6 flex-1 !rounded-md"
         placeholder={t('skillSidebar.searchPlaceholder')}
       />
-      <PortalToFollowElem
-        open={showMenu}
-        onOpenChange={setShowMenu}
-        placement="bottom-end"
-        offset={menuOffset}
-      >
-        <PortalToFollowElemTrigger onClick={() => setShowMenu(!showMenu)}>
-          <Button
-            variant="primary"
-            size="small"
-            className="!size-6 shrink-0 !p-1"
-            aria-label={t('operation.add', { ns: 'common' })}
-          >
-            <span className="i-ri-add-line size-4" aria-hidden="true" />
-          </Button>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-[30]">
-          <div className="flex min-w-[180px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]">
-            <input
-              ref={fileInputRef}
-              type="file"
-              multiple
-              className="hidden"
-              onChange={handleFileChange}
-            />
-            <input
-              ref={folderInputRef}
-              type="file"
-              // @ts-expect-error webkitdirectory is a non-standard attribute
-              webkitdirectory=""
-              className="hidden"
-              onChange={handleFolderChange}
-            />
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          type="button"
+          aria-label={t('operation.add', { ns: 'common' })}
+          className={cn(
+            buttonVariants({ variant: 'primary', size: 'small' }),
+            '!size-6 shrink-0 !p-1',
+          )}
+        >
+          <span className="i-ri-add-line size-4" aria-hidden="true" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-end"
+          sideOffset={4}
+          popupClassName="min-w-[180px]"
+        >
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            className="hidden"
+            onChange={handleFileChange}
+          />
+          <input
+            ref={folderInputRef}
+            type="file"
+            // @ts-expect-error webkitdirectory is a non-standard attribute
+            webkitdirectory=""
+            className="hidden"
+            onChange={handleFolderChange}
+          />
 
-            <MenuItem
-              menuType="dropdown"
-              icon={FileAdd}
-              label={t('skillSidebar.menu.newFile')}
-              onClick={handleNewFile}
-              disabled={isLoading}
-            />
-            <MenuItem
-              menuType="dropdown"
-              icon={FolderAdd}
-              label={t('skillSidebar.menu.newFolder')}
-              onClick={handleNewFolder}
-              disabled={isLoading}
-            />
+          <MenuItem
+            menuType="dropdown"
+            icon={FileAdd}
+            label={t('skillSidebar.menu.newFile')}
+            onClick={handleNewFile}
+            disabled={isLoading}
+          />
+          <MenuItem
+            menuType="dropdown"
+            icon={FolderAdd}
+            label={t('skillSidebar.menu.newFolder')}
+            onClick={handleNewFolder}
+            disabled={isLoading}
+          />
 
-            <div className="my-1 h-px bg-divider-subtle" />
+          <DropdownMenuSeparator />
 
-            <MenuItem
-              menuType="dropdown"
-              icon={UploadCloud02}
-              label={t('skillSidebar.menu.uploadFile')}
-              onClick={() => fileInputRef.current?.click()}
-              disabled={isLoading}
-            />
-            <MenuItem
-              menuType="dropdown"
-              icon="i-ri-folder-upload-line"
-              label={t('skillSidebar.menu.uploadFolder')}
-              onClick={() => folderInputRef.current?.click()}
-              disabled={isLoading}
-            />
+          <MenuItem
+            menuType="dropdown"
+            icon={UploadCloud02}
+            label={t('skillSidebar.menu.uploadFile')}
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isLoading}
+          />
+          <MenuItem
+            menuType="dropdown"
+            icon="i-ri-folder-upload-line"
+            label={t('skillSidebar.menu.uploadFolder')}
+            onClick={() => folderInputRef.current?.click()}
+            disabled={isLoading}
+          />
 
-            <div className="my-1 h-px bg-divider-subtle" />
+          <DropdownMenuSeparator />
 
-            <MenuItem
-              menuType="dropdown"
-              icon="i-ri-upload-line"
-              label={t('skillSidebar.menu.importSkills')}
-              onClick={() => setIsImportModalOpen(true)}
-              disabled={isLoading}
-              tooltip={t('skill.startTab.importSkillDesc')}
-            />
-          </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
+          <MenuItem
+            menuType="dropdown"
+            icon="i-ri-upload-line"
+            label={t('skillSidebar.menu.importSkills')}
+            onClick={() => setIsImportModalOpen(true)}
+            disabled={isLoading}
+            tooltip={t('skill.startTab.importSkillDesc')}
+          />
+        </DropdownMenuContent>
+      </DropdownMenu>
       <ImportSkillModal
         isOpen={isImportModalOpen}
         onClose={() => setIsImportModalOpen(false)}