New Workflow Templates Modal (#5142)

This pull request refactors and simplifies the template workflow card
components and related UI in the codebase. The main changes focus on
removing unused or redundant components, improving visual and
interaction consistency, and enhancing error handling for images. Below
are the most important changes grouped by theme:

**Template Workflow Card Refactor and Cleanup**

* Removed the `TemplateWorkflowCard.vue` component and its associated
test file `TemplateWorkflowCard.spec.ts`, as well as the
`TemplateWorkflowCardSkeleton.vue` and `TemplateWorkflowList.vue`
components, indicating a shift away from the previous card-based
template workflow UI.
[[1]](diffhunk://#diff-49569af0404058e8257f3cc0716b066517ce7397dd58744b02aa0d0c61f2a815L1-L139)
[[2]](diffhunk://#diff-9fa6fc1470371f0b520d4deda4129fb313b1bea69888a376556f4bd824f9d751L1-L263)
[[3]](diffhunk://#diff-bc35b6f77d1cee6e86b05d0da80b7bd40013c7a6a97a89706d3bc52573e1c574L1-L30)
[[4]](diffhunk://#diff-48171f792b22022526fca411d3c3a366d48b675dab77943a20846ae079cbaf3bL1-L68)
* Removed the `TemplateSearchBar.vue` component, suggesting a redesign
or replacement of the search/filter UI for templates.

**UI and Interaction Improvements**

* Improved the `CardBottom.vue` component by making its height
configurable via a `fullHeight` prop, enhancing layout flexibility.
* Updated the `CardContainer.vue` component to add hover effects
(background, border, shadow, and padding) and support a new `none`
aspect ratio for more flexible card layouts.

**Image and Input Enhancements**

* Enhanced the `LazyImage.vue` component to display a default
placeholder image when an image fails to load, improving error handling
and user experience.
* Improved the `SearchBox.vue` component by making the input focusable
when clicking anywhere on the wrapper, and added a template ref for
better accessibility and usability.
[[1]](diffhunk://#diff-08f3b0c51fbfe63171509b9944bf7558228f6c2596a1ef5338e88ab64585791bL2-R5)
[[2]](diffhunk://#diff-08f3b0c51fbfe63171509b9944bf7558228f6c2596a1ef5338e88ab64585791bL16-R17)
[[3]](diffhunk://#diff-08f3b0c51fbfe63171509b9944bf7558228f6c2596a1ef5338e88ab64585791bR33-R39)

**Minor UI Tweaks**

* Adjusted label styling in `SingleSelect.vue` to remove unnecessary
overflow handling, simplifying the visual layout.

---------

Co-authored-by: Benjamin Lu <benceruleanlu@proton.me>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: snomiao <snomiao@gmail.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com>
Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Co-authored-by: Jin Yi <jin12cc@gmail.com>

src/composables/useCoreCommands.ts

@@ -51,6 +51,8 @@ import {
 } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
+import { useWorkflowTemplateSelectorDialog } from './useWorkflowTemplateSelectorDialog'
+
 const moveSelectedNodesVersionAdded = '1.22.2'
 
 export function useCoreCommands(): ComfyCommand[] {
@@ -264,7 +266,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-folder-open',
       label: 'Browse Templates',
       function: () => {
-        dialogService.showTemplateWorkflowsDialog()
+        useWorkflowTemplateSelectorDialog().show()
       }
     },
     {

src/composables/useTemplateFiltering.ts

@@ -1,57 +1,213 @@
+import { refDebounced } from '@vueuse/core'
+import Fuse from 'fuse.js'
 import { type Ref, computed, ref } from 'vue'
 
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
-// @ts-expect-error unused (To be used later?)
-interface TemplateFilterOptions {
-  searchQuery?: string
-}
-
 export function useTemplateFiltering(
   templates: Ref<TemplateInfo[]> | TemplateInfo[]
 ) {
   const searchQuery = ref('')
+  const selectedModels = ref<string[]>([])
+  const selectedUseCases = ref<string[]>([])
+  const selectedLicenses = ref<string[]>([])
+  const sortBy = ref<
+    | 'default'
+    | 'alphabetical'
+    | 'newest'
+    | 'vram-low-to-high'
+    | 'model-size-low-to-high'
+  >('newest')
 
   const templatesArray = computed(() => {
     const templateData = 'value' in templates ? templates.value : templates
     return Array.isArray(templateData) ? templateData : []
   })
 
-  const filteredTemplates = computed(() => {
-    const templateData = templatesArray.value
-    if (templateData.length === 0) {
-      return []
+  // Fuse.js configuration for fuzzy search
+  const fuseOptions = {
+    keys: [
+      { name: 'name', weight: 0.3 },
+      { name: 'title', weight: 0.3 },
+      { name: 'description', weight: 0.2 },
+      { name: 'tags', weight: 0.1 },
+      { name: 'models', weight: 0.1 }
+    ],
+    threshold: 0.4,
+    includeScore: true,
+    includeMatches: true
+  }
+
+  const fuse = computed(() => new Fuse(templatesArray.value, fuseOptions))
+
+  const availableModels = computed(() => {
+    const modelSet = new Set<string>()
+    templatesArray.value.forEach((template) => {
+      if (Array.isArray(template.models)) {
+        template.models.forEach((model) => modelSet.add(model))
+      }
+    })
+    return Array.from(modelSet).sort()
+  })
+
+  const availableUseCases = computed(() => {
+    const tagSet = new Set<string>()
+    templatesArray.value.forEach((template) => {
+      if (template.tags && Array.isArray(template.tags)) {
+        template.tags.forEach((tag) => tagSet.add(tag))
+      }
+    })
+    return Array.from(tagSet).sort()
+  })
+
+  const availableLicenses = computed(() => {
+    return ['Open Source', 'Closed Source (API Nodes)']
+  })
+
+  const debouncedSearchQuery = refDebounced(searchQuery, 50)
+
+  const filteredBySearch = computed(() => {
+    if (!debouncedSearchQuery.value.trim()) {
+      return templatesArray.value
     }
 
-    if (!searchQuery.value.trim()) {
-      return templateData
+    const results = fuse.value.search(debouncedSearchQuery.value)
+    return results.map((result) => result.item)
+  })
+
+  const filteredByModels = computed(() => {
+    if (selectedModels.value.length === 0) {
+      return filteredBySearch.value
     }
 
-    const query = searchQuery.value.toLowerCase().trim()
-    return templateData.filter((template) => {
-      const searchableText = [
-        template.name,
-        template.description,
-        template.sourceModule
-      ]
-        .filter(Boolean)
-        .join(' ')
-        .toLowerCase()
-
-      return searchableText.includes(query)
+    return filteredBySearch.value.filter((template) => {
+      if (!template.models || !Array.isArray(template.models)) {
+        return false
+      }
+      return selectedModels.value.some((selectedModel) =>
+        template.models?.includes(selectedModel)
+      )
     })
   })
 
+  const filteredByUseCases = computed(() => {
+    if (selectedUseCases.value.length === 0) {
+      return filteredByModels.value
+    }
+
+    return filteredByModels.value.filter((template) => {
+      if (!template.tags || !Array.isArray(template.tags)) {
+        return false
+      }
+      return selectedUseCases.value.some((selectedTag) =>
+        template.tags?.includes(selectedTag)
+      )
+    })
+  })
+
+  const filteredByLicenses = computed(() => {
+    if (selectedLicenses.value.length === 0) {
+      return filteredByUseCases.value
+    }
+
+    return filteredByUseCases.value.filter((template) => {
+      // Check if template has API in its tags or name (indicating it's a closed source API node)
+      const isApiTemplate =
+        template.tags?.includes('API') ||
+        template.name?.toLowerCase().includes('api_')
+
+      return selectedLicenses.value.some((selectedLicense) => {
+        if (selectedLicense === 'Closed Source (API Nodes)') {
+          return isApiTemplate
+        } else if (selectedLicense === 'Open Source') {
+          return !isApiTemplate
+        }
+        return false
+      })
+    })
+  })
+
+  const sortedTemplates = computed(() => {
+    const templates = [...filteredByLicenses.value]
+
+    switch (sortBy.value) {
+      case 'alphabetical':
+        return templates.sort((a, b) => {
+          const nameA = a.title || a.name || ''
+          const nameB = b.title || b.name || ''
+          return nameA.localeCompare(nameB)
+        })
+      case 'newest':
+        return templates.sort((a, b) => {
+          const dateA = new Date(a.date || '1970-01-01')
+          const dateB = new Date(b.date || '1970-01-01')
+          return dateB.getTime() - dateA.getTime()
+        })
+      case 'vram-low-to-high':
+        // TODO: Implement VRAM sorting when VRAM data is available
+        // For now, keep original order
+        return templates
+      case 'model-size-low-to-high':
+        return templates.sort((a: any, b: any) => {
+          const sizeA =
+            typeof a.size === 'number' ? a.size : Number.POSITIVE_INFINITY
+          const sizeB =
+            typeof b.size === 'number' ? b.size : Number.POSITIVE_INFINITY
+          if (sizeA === sizeB) return 0
+          return sizeA - sizeB
+        })
+      case 'default':
+      default:
+        // Keep original order (default order)
+        return templates
+    }
+  })
+
+  const filteredTemplates = computed(() => sortedTemplates.value)
+
   const resetFilters = () => {
     searchQuery.value = ''
+    selectedModels.value = []
+    selectedUseCases.value = []
+    selectedLicenses.value = []
+    sortBy.value = 'default'
+  }
+
+  const removeModelFilter = (model: string) => {
+    selectedModels.value = selectedModels.value.filter((m) => m !== model)
+  }
+
+  const removeUseCaseFilter = (tag: string) => {
+    selectedUseCases.value = selectedUseCases.value.filter((t) => t !== tag)
+  }
+
+  const removeLicenseFilter = (license: string) => {
+    selectedLicenses.value = selectedLicenses.value.filter((l) => l !== license)
   }
 
   const filteredCount = computed(() => filteredTemplates.value.length)
+  const totalCount = computed(() => templatesArray.value.length)
 
   return {
+    // State
     searchQuery,
+    selectedModels,
+    selectedUseCases,
+    selectedLicenses,
+    sortBy,
+
+    // Computed
     filteredTemplates,
+    availableModels,
+    availableUseCases,
+    availableLicenses,
     filteredCount,
-    resetFilters
+    totalCount,
+
+    // Methods
+    resetFilters,
+    removeModelFilter,
+    removeUseCaseFilter,
+    removeLicenseFilter
   }
 }

src/composables/useWorkflowTemplateSelectorDialog.ts

@@ -0,0 +1,38 @@
+import WorkflowTemplateSelectorDialog from '@/components/custom/widget/WorkflowTemplateSelectorDialog.vue'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const DIALOG_KEY = 'global-workflow-template-selector'
+
+export const useWorkflowTemplateSelectorDialog = () => {
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show() {
+    dialogService.showLayoutDialog({
+      key: DIALOG_KEY,
+      component: WorkflowTemplateSelectorDialog,
+      props: {
+        onClose: hide
+      },
+      dialogComponentProps: {
+        pt: {
+          content: { class: '!px-0 overflow-hidden h-full !py-0' },
+          root: {
+            style:
+              'width: 90vw; height: 85vh; max-width: 1400px; display: flex;'
+          }
+        }
+      }
+    })
+  }
+
+  return {
+    show,
+    hide
+  }
+}