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/components/input/MultiSelect.vue

@@ -9,7 +9,7 @@
   -->
   <MultiSelect
     v-model="selectedItems"
-    v-bind="$attrs"
+    v-bind="{ ...$attrs, options: filteredOptions }"
     option-label="name"
     unstyled
     :max-selected-labels="0"
@@ -105,10 +105,11 @@
 </template>
 
 <script setup lang="ts">
+import { type UseFuseOptions, useFuse } from '@vueuse/integrations/useFuse'
 import Button from 'primevue/button'
 import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
 import MultiSelect from 'primevue/multiselect'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/input/SearchBox.vue'
@@ -158,7 +159,7 @@ const {
 const selectedItems = defineModel<Option[]>({
   required: true
 })
-const searchQuery = defineModel<string>('searchQuery')
+const searchQuery = defineModel<string>('searchQuery', { default: '' })
 
 const { t } = useI18n()
 const selectedCount = computed(() => selectedItems.value.length)
@@ -167,6 +168,40 @@ const popoverStyle = usePopoverSizing({
   minWidth: popoverMinWidth,
   maxWidth: popoverMaxWidth
 })
+const attrs = useAttrs()
+const originalOptions = computed(() => (attrs.options as Option[]) || [])
+
+// Use VueUse's useFuse for better reactivity and performance
+const fuseOptions: UseFuseOptions<Option> = {
+  fuseOptions: {
+    keys: ['name', 'value'],
+    threshold: 0.3,
+    includeScore: false
+  },
+  matchAllWhenSearchEmpty: true
+}
+
+const { results } = useFuse(searchQuery, originalOptions, fuseOptions)
+
+// Filter options based on search, but always include selected items
+const filteredOptions = computed(() => {
+  if (!searchQuery.value || searchQuery.value.trim() === '') {
+    return originalOptions.value
+  }
+
+  // results.value already contains the search results from useFuse
+  const searchResults = results.value.map(
+    (result: { item: Option }) => result.item
+  )
+
+  // Include selected items that aren't in search results
+  const selectedButNotInResults = selectedItems.value.filter(
+    (item) =>
+      !searchResults.some((result: Option) => result.value === item.value)
+  )
+
+  return [...selectedButNotInResults, ...searchResults]
+})
 
 const pt = computed(() => ({
   root: ({ props }: MultiSelectPassThroughMethodOptions) => ({

src/components/input/SearchBox.vue

@@ -1,9 +1,15 @@
 <template>
-  <div :class="wrapperStyle">
+  <div :class="wrapperStyle" @click="focusInput">
     <i-lucide:search :class="iconColorStyle" />
     <InputText
+      ref="input"
       v-model="searchQuery"
-      :placeholder="placeHolder || 'Search...'"
+      :aria-label="
+        placeHolder || t('templateWidgets.sort.searchPlaceholder', 'Search...')
+      "
+      :placeholder="
+        placeHolder || t('templateWidgets.sort.searchPlaceholder', 'Search...')
+      "
       type="text"
       unstyled
       :class="inputStyle"
@@ -13,8 +19,9 @@
 
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
+import { t } from '@/i18n'
 import { cn } from '@/utils/tailwindUtil'
 
 const {
@@ -29,6 +36,13 @@ const {
 // defineModel without arguments uses 'modelValue' as the prop name
 const searchQuery = defineModel<string>()
 
+const input = ref<{ $el: HTMLElement } | null>()
+const focusInput = () => {
+  if (input.value && input.value.$el) {
+    input.value.$el.focus()
+  }
+}
+
 const wrapperStyle = computed(() => {
   const baseClasses = [
     'relative flex w-full items-center gap-2',

src/components/input/SingleSelect.vue

@@ -143,7 +143,7 @@ const pt = computed(() => ({
   label: {
     class:
       // Align with MultiSelect labelContainer spacing
-      'flex-1 flex items-center overflow-hidden whitespace-nowrap pl-4 py-2 outline-hidden'
+      'flex-1 flex items-center whitespace-nowrap pl-4 py-2 outline-hidden'
   },
   dropdown: {
     class: