feat(ui): optimize file tree node hover tooltip with shadcn component

web/src/components/FileTreeNode.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue'
 import { Folder, File, ChevronRight, ChevronDown, Trash2, Copy as CopyIcon, Download } from 'lucide-vue-next'
 import type { FileNode } from '@/api'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 
 defineOptions({
   name: 'FileTreeNode'
@@ -87,7 +88,16 @@ function handleDrop(e: DragEvent) {
       <span v-else class="w-3" />
       <Folder v-if="node.isDir" class="h-3 w-3 text-yellow-500 flex-shrink-0" />
       <File v-else class="h-3 w-3 text-blue-500 flex-shrink-0" />
-      <span class="truncate">{{ node.name }}</span>
+      <TooltipProvider :delay-duration="400">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <span class="truncate">{{ node.name }}</span>
+          </TooltipTrigger>
+          <TooltipContent side="top" :side-offset="5" class="max-w-[300px] break-all px-2 py-1">
+            <p class="text-xs">{{ node.name }}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
       <div v-if="!node.isDir"
         class="opacity-0 group-hover:opacity-100 flex items-center gap-1 ml-auto shrink-0 pr-1 transition-opacity">
         <span @click.stop="$emit('duplicate', node.path)" class="cursor-pointer text-blue-500 hover:text-blue-500/80"