feat: add drag action tooltip

web/app/components/workflow/skill/file-tree/drag-action-tooltip.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import type { FC } from 'react'
+import * as React from 'react'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useStore } from '@/app/components/workflow/store'
+import { ROOT_ID } from '../constants'
+import { useSkillAssetNodeMap } from '../hooks/use-skill-asset-tree'
+
+export type DragAction = 'upload' | 'move'
+
+type DragActionTooltipProps = {
+  action: DragAction
+}
+
+const DragActionTooltip: FC<DragActionTooltipProps> = ({ action }) => {
+  const { t } = useTranslation('workflow')
+  const dragOverFolderId = useStore(s => s.dragOverFolderId)
+  const { data: nodeMap } = useSkillAssetNodeMap()
+
+  // Resolve target path from dragOverFolderId
+  const targetPath = useMemo(() => {
+    if (!dragOverFolderId)
+      return null
+
+    if (dragOverFolderId === ROOT_ID)
+      return t('skillSidebar.rootFolder')
+
+    const node = nodeMap?.get(dragOverFolderId)
+    // Strip leading slash from path (e.g., "/skills/assets" -> "skills/assets")
+    const path = node?.path
+    return path?.startsWith('/') ? path.slice(1) : path ?? null
+  }, [dragOverFolderId, nodeMap, t])
+
+  // Don't render if not dragging over a valid target
+  if (!targetPath)
+    return null
+
+  const actionText = action === 'upload'
+    ? t('skillSidebar.dragAction.uploadTo')
+    : t('skillSidebar.dragAction.moveTo')
+
+  return (
+    <div className="flex shrink-0 items-center justify-center py-3">
+      <div className="rounded-lg bg-components-tooltip-bg p-1.5 shadow-lg backdrop-blur-[5px]">
+        <p className="system-xs-regular px-0.5 text-text-secondary">
+          {actionText}
+          <span className="system-xs-medium">{targetPath}</span>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(DragActionTooltip)

web/app/components/workflow/skill/file-tree/index.tsx

@@ -20,6 +20,7 @@ import { useInlineCreateNode } from '../hooks/use-inline-create-node'
 import { useRootFileDrop } from '../hooks/use-root-file-drop'
 import { useSkillAssetTreeData } from '../hooks/use-skill-asset-tree'
 import { useSyncTreeWithActiveTab } from '../hooks/use-sync-tree-with-active-tab'
+import DragActionTooltip from './drag-action-tooltip'
 import TreeContextMenu from './tree-context-menu'
 import TreeNode from './tree-node'
 
@@ -246,7 +247,9 @@ const FileTree: React.FC<FileTreeProps> = ({ className }) => {
           </Tree>
         </div>
       </div>
-      <DropTip />
+      {dragOverFolderId
+        ? <DragActionTooltip action="upload" />
+        : <DropTip />}
       <TreeContextMenu treeRef={treeRef} />
     </>
   )