feat(lora-pool): add folder filtering and preview tooltip enhancements

- Add include/exclude folder modals for advanced filtering
- Implement folder tree search with auto-expand functionality
- Add hover tooltip to preview header showing matching LoRA thumbnails
- Format match count with locale string for better readability
- Prevent event propagation on refresh button click
- Improve folder tree component with expand/collapse controls

vue-widgets/src/components/lora-pool/LoraPoolPreview.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="preview">
-    <div class="preview__header">
-      <span class="preview__title">Matching LoRAs: {{ matchCount }}</span>
+    <div
+      class="preview__header"
+      @mouseenter="showTooltip = true"
+      @mouseleave="showTooltip = false"
+    >
+      <span class="preview__title">Matching LoRAs: {{ matchCount.toLocaleString() }}</span>
       <button
         type="button"
         class="preview__refresh"
         :class="{ 'preview__refresh--loading': isLoading }"
-        @click="$emit('refresh')"
+        @click.stop="$emit('refresh')"
         :disabled="isLoading"
       >
         <svg class="preview__refresh-icon" viewBox="0 0 16 16" fill="currentColor">
@@ -16,43 +20,44 @@
       </button>
     </div>
 
-    <div v-if="items.length > 0" class="preview__list">
-      <div
-        v-for="item in items.slice(0, 5)"
-        :key="item.file_path"
-        class="preview__item"
-      >
-        <img
-          v-if="item.preview_url"
-          :src="item.preview_url"
-          class="preview__thumb"
-          @error="onImageError"
-        />
-        <div v-else class="preview__thumb preview__thumb--placeholder">
-          <svg viewBox="0 0 16 16" fill="currentColor">
-            <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
-            <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/>
-          </svg>
+    <!-- Hover tooltip with preview items -->
+    <Transition name="tooltip">
+      <div v-if="showTooltip && items.length > 0" class="preview__tooltip">
+        <div class="preview__tooltip-content">
+          <div
+            v-for="item in items.slice(0, 5)"
+            :key="item.file_path"
+            class="preview__item"
+          >
+            <img
+              v-if="item.preview_url"
+              :src="item.preview_url"
+              class="preview__thumb"
+              @error="onImageError"
+            />
+            <div v-else class="preview__thumb preview__thumb--placeholder">
+              <svg viewBox="0 0 16 16" fill="currentColor">
+                <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+                <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/>
+              </svg>
+            </div>
+            <span class="preview__name">{{ item.model_name || item.file_name }}</span>
+          </div>
+          <div v-if="matchCount > 5" class="preview__more">
+            +{{ (matchCount - 5).toLocaleString() }} more
+          </div>
         </div>
-        <span class="preview__name">{{ item.model_name || item.file_name }}</span>
       </div>
+    </Transition>
 
-      <div v-if="matchCount > 5" class="preview__more">
-        +{{ matchCount - 5 }} more
-      </div>
-    </div>
-
-    <div v-else-if="!isLoading" class="preview__empty">
+    <div v-if="items.length === 0 && !isLoading" class="preview__empty">
       No matching LoRAs
     </div>
-
-    <div v-else class="preview__loading">
-      Loading...
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import type { LoraItem } from '../../composables/types'
 
 defineProps<{
@@ -65,6 +70,8 @@ defineEmits<{
   refresh: []
 }>()
 
+const showTooltip = ref(false)
+
 const onImageError = (event: Event) => {
   const img = event.target as HTMLImageElement
   img.style.display = 'none'
@@ -75,13 +82,14 @@ const onImageError = (event: Event) => {
 .preview {
   padding-top: 12px;
   border-top: 1px solid var(--border-color, #444);
+  position: relative;
 }
 
 .preview__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 10px;
+  cursor: default;
 }
 
 .preview__title {
@@ -128,7 +136,22 @@ const onImageError = (event: Event) => {
   to { transform: rotate(360deg); }
 }
 
-.preview__list {
+/* Tooltip styles */
+.preview__tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  margin-bottom: 8px;
+  z-index: 100;
+}
+
+.preview__tooltip-content {
+  background: var(--comfy-menu-bg, #1a1a1a);
+  border: 1px solid var(--border-color, #444);
+  border-radius: 6px;
+  padding: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -179,15 +202,26 @@ const onImageError = (event: Event) => {
   color: var(--fg-color, #fff);
   opacity: 0.5;
   text-align: center;
-  padding: 6px;
+  padding: 4px;
 }
 
-.preview__empty,
-.preview__loading {
+.preview__empty {
   font-size: 11px;
   color: var(--fg-color, #fff);
   opacity: 0.4;
   text-align: center;
-  padding: 16px;
+  padding: 8px 0 0 0;
+}
+
+/* Tooltip transitions */
+.tooltip-enter-active,
+.tooltip-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.tooltip-enter-from,
+.tooltip-leave-to {
+  opacity: 0;
+  transform: translateY(4px);
 }
 </style>