feat: Node search UX updates

browser_tests/fixtures/components/ComfyNodeSearchBoxV2.ts

@@ -5,12 +5,14 @@ import type { ComfyPage } from '../ComfyPage'
 export class ComfyNodeSearchBoxV2 {
   readonly dialog: Locator
   readonly input: Locator
+  readonly filterSearch: Locator
   readonly results: Locator
   readonly filterOptions: Locator
 
   constructor(readonly page: Page) {
     this.dialog = page.getByRole('search')
-    this.input = this.dialog.locator('input[type="text"]')
+    this.input = this.dialog.getByRole('combobox')
+    this.filterSearch = this.dialog.getByRole('textbox', { name: 'Search' })
     this.results = this.dialog.getByTestId('result-item')
     this.filterOptions = this.dialog.getByTestId('filter-option')
   }

browser_tests/tests/nodeSearchBoxV2.spec.ts

@@ -100,7 +100,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
       await expect(searchBoxV2.filterOptions.first()).toBeVisible()
 
       // Type to narrow and select MODEL
-      await searchBoxV2.input.fill('MODEL')
+      await searchBoxV2.filterSearch.fill('MODEL')
       await searchBoxV2.filterOptions
         .filter({ hasText: 'MODEL' })
         .first()

packages/tailwind-utils/src/index.ts

@@ -1,9 +1,17 @@
 import { clsx } from 'clsx'
 import type { ClassArray } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { extendTailwindMerge } from 'tailwind-merge'
 
 export type { ClassValue } from 'clsx'
 
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': ['text-xxs', 'text-xxxs']
+    }
+  }
+})
+
 export function cn(...inputs: ClassArray) {
   return twMerge(clsx(inputs))
 }

src/components/input/MultiSelect.vue

@@ -111,11 +111,7 @@
             v-if="showSelectedCount"
             class="px-1 text-sm text-base-foreground"
           >
-            {{
-              selectedCount > 0
-                ? $t('g.itemsSelected', { selectedCount })
-                : $t('g.itemSelected', { selectedCount })
-            }}
+            {{ $t('g.itemSelected', { count: selectedCount }, selectedCount) }}
           </span>
           <Button
             v-if="showClearButton"

src/components/node/CreditBadge.vue

@@ -0,0 +1,28 @@
+<template>
+  <span
+    :class="
+      cn(
+        'flex h-5 shrink-0 items-center bg-component-node-widget-background p-1 text-xs',
+        rest ? 'rounded-l-full pr-1' : 'rounded-full'
+      )
+    "
+  >
+    <i class="icon-[lucide--component] h-full bg-amber-400" />
+    <span class="truncate" v-text="text" />
+  </span>
+  <span
+    v-if="rest"
+    class="-ml-2.5 max-w-max min-w-0 grow basis-0 truncate rounded-r-full bg-component-node-widget-background"
+  >
+    <span class="pr-2" v-text="rest" />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+
+defineProps<{
+  text: string
+  rest?: string
+}>()
+</script>

src/components/node/NodePreviewCard.vue

@@ -1,9 +1,14 @@
 <template>
   <div
-    class="flex w-50 flex-col overflow-hidden rounded-2xl border border-border-default bg-base-background"
+    class="flex flex-col overflow-hidden rounded-lg border border-border-default bg-base-background"
+    :style="{ width: `${BASE_WIDTH_PX * (scaleFactor / BASE_SCALE)}px` }"
   >
     <div ref="previewContainerRef" class="overflow-hidden p-3">
-      <div ref="previewWrapperRef" class="origin-top-left scale-50">
+      <div
+        ref="previewWrapperRef"
+        class="origin-top-left"
+        :style="{ transform: `scale(${scaleFactor})` }"
+      >
         <LGraphNodePreview :node-def="nodeDef" position="relative" />
       </div>
     </div>
@@ -18,14 +23,14 @@
       <!-- Category Path -->
       <p
         v-if="showCategoryPath && nodeDef.category"
-        class="-mt-1 text-xs text-muted-foreground"
+        class="-mt-1 truncate text-xs text-muted-foreground"
       >
-        {{ nodeDef.category.replaceAll('/', ' > ') }}
+        {{ nodeDef.category.replaceAll('/', ' / ') }}
       </p>
 
       <!-- Badges -->
-      <div class="flex flex-wrap gap-2 empty:hidden">
-        <NodePricingBadge :node-def="nodeDef" />
+      <div class="flex flex-wrap gap-2 overflow-hidden empty:hidden">
+        <NodePricingBadge class="max-w-full truncate" :node-def="nodeDef" />
         <NodeProviderBadge :node-def="nodeDef" />
       </div>
 
@@ -99,17 +104,20 @@ import NodeProviderBadge from '@/components/node/NodeProviderBadge.vue'
 import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphNodePreview.vue'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 
-const SCALE_FACTOR = 0.5
+const BASE_WIDTH_PX = 200
+const BASE_SCALE = 0.5
 const PREVIEW_CONTAINER_PADDING_PX = 24
 
 const {
   nodeDef,
   showInputsAndOutputs = true,
-  showCategoryPath = false
+  showCategoryPath = false,
+  scaleFactor = 0.5
 } = defineProps<{
   nodeDef: ComfyNodeDefImpl
   showInputsAndOutputs?: boolean
   showCategoryPath?: boolean
+  scaleFactor?: number
 }>()
 
 const previewContainerRef = ref<HTMLElement>()
@@ -118,7 +126,7 @@ const previewWrapperRef = ref<HTMLElement>()
 useResizeObserver(previewWrapperRef, (entries) => {
   const entry = entries[0]
   if (entry && previewContainerRef.value) {
-    const scaledHeight = entry.contentRect.height * SCALE_FACTOR
+    const scaledHeight = entry.contentRect.height * scaleFactor
     previewContainerRef.value.style.height = `${scaledHeight + PREVIEW_CONTAINER_PADDING_PX}px`
   }
 })

src/components/node/NodePricingBadge.vue

@@ -1,18 +1,13 @@
 <template>
-  <BadgePill
-    v-if="nodeDef.api_node"
-    v-show="priceLabel"
-    :text="priceLabel"
-    icon="icon-[comfy--credits]"
-    border-style="#f59e0b"
-    filled
-  />
+  <span v-if="nodeDef.api_node && priceLabel">
+    <CreditBadge :text="priceLabel" />
+  </span>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-import BadgePill from '@/components/common/BadgePill.vue'
+import CreditBadge from '@/components/node/CreditBadge.vue'
 import { evaluateNodeDefPricing } from '@/composables/node/useNodePricing'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -7,7 +7,7 @@
       :pt="{
         root: {
           class: useSearchBoxV2
-            ? 'w-4/5 min-w-[32rem] max-w-[56rem] border-0 bg-transparent mt-[10vh] max-md:w-[95%] max-md:min-w-0 overflow-visible'
+            ? 'w-4/5 min-w-[32rem] max-w-[56rem] border-0 bg-transparent max-md:w-[95%] max-md:min-w-0 overflow-visible'
             : 'invisible-dialog-root'
         },
         mask: {
@@ -36,7 +36,9 @@
             v-if="hoveredNodeDef && enableNodePreview"
             :key="hoveredNodeDef.name"
             :node-def="hoveredNodeDef"
+            :scale-factor="0.625"
             show-category-path
+            inert
             class="absolute top-0 left-full ml-3"
           />
         </div>