feat: add dynamic Fuse.js options loading for template filtering (#7822)

## Summary

PRD:
https://www.notion.so/comfy-org/Implement-Move-search-config-to-templates-repo-for-template-owner-adjustability-2c76d73d365081ad81c4ed33332eda09

Move search config to templates repo for template owner adjustability

## Changes

- **What**: 
- Made `fuseOptions` reactive in `useTemplateFiltering` composable to
support dynamic updates
- Added `getFuseOptions()` API method to fetch Fuse.js configuration
from `/templates/fuse_options.json`
- Added `loadFuseOptions()` function to `useTemplateFiltering` that
fetches and applies server-provided options
- Removed unused `templateFuse` computed property from
`workflowTemplatesStore`
- Added comprehensive unit tests covering success, null response, error
handling, and Fuse instance recreation scenarios

- **Breaking**: None

- **Dependencies**: None (uses existing `fuse.js` and `axios`
dependencies)

## Review Focus

- Verify that the API endpoint path `/templates/fuse_options.json` is
correct and accessible
- Confirm that the reactive `fuseOptions` properly triggers Fuse
instance recreation when updated
- Check that error handling gracefully falls back to default options
when server fetch fails
- Ensure the watch on `fuseOptions` is necessary or can be removed
(currently just recreates Fuse via computed)
- Review test coverage to ensure all edge cases are handled

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7822-feat-add-dynamic-Fuse-js-options-loading-for-template-filtering-2db6d73d365081828103d8ee70844b2e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>

src/composables/useTemplateFiltering.test.ts

@@ -1,6 +1,7 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
+import type { IFuseOptions } from 'fuse.js'
 
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
@@ -42,6 +43,13 @@ vi.mock('@/platform/telemetry', () => ({
   }))
 }))
 
+const mockGetFuseOptions = vi.hoisted(() => vi.fn())
+vi.mock('@/scripts/api', () => ({
+  api: {
+    getFuseOptions: mockGetFuseOptions
+  }
+}))
+
 const { useTemplateFiltering } =
   await import('@/composables/useTemplateFiltering')
 
@@ -49,6 +57,7 @@ describe('useTemplateFiltering', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
     vi.clearAllMocks()
+    mockGetFuseOptions.mockResolvedValue(null)
   })
 
   afterEach(() => {
@@ -272,4 +281,118 @@ describe('useTemplateFiltering', () => {
       'beta-pro'
     ])
   })
+
+  describe('loadFuseOptions', () => {
+    it('updates fuseOptions when getFuseOptions returns valid options', async () => {
+      const templates = ref<TemplateInfo[]>([
+        {
+          name: 'test-template',
+          description: 'Test template',
+          mediaType: 'image',
+          mediaSubtype: 'png'
+        }
+      ])
+
+      const customFuseOptions: IFuseOptions<TemplateInfo> = {
+        keys: [
+          { name: 'name', weight: 0.5 },
+          { name: 'description', weight: 0.5 }
+        ],
+        threshold: 0.4,
+        includeScore: true
+      }
+
+      mockGetFuseOptions.mockResolvedValueOnce(customFuseOptions)
+
+      const { loadFuseOptions, filteredTemplates } =
+        useTemplateFiltering(templates)
+
+      await loadFuseOptions()
+
+      expect(mockGetFuseOptions).toHaveBeenCalledTimes(1)
+      expect(filteredTemplates.value).toBeDefined()
+    })
+
+    it('does not update fuseOptions when getFuseOptions returns null', async () => {
+      const templates = ref<TemplateInfo[]>([
+        {
+          name: 'test-template',
+          description: 'Test template',
+          mediaType: 'image',
+          mediaSubtype: 'png'
+        }
+      ])
+
+      mockGetFuseOptions.mockResolvedValueOnce(null)
+
+      const { loadFuseOptions, filteredTemplates } =
+        useTemplateFiltering(templates)
+
+      const initialResults = filteredTemplates.value
+
+      await loadFuseOptions()
+
+      expect(mockGetFuseOptions).toHaveBeenCalledTimes(1)
+      expect(filteredTemplates.value).toEqual(initialResults)
+    })
+
+    it('handles errors when getFuseOptions fails', async () => {
+      const templates = ref<TemplateInfo[]>([
+        {
+          name: 'test-template',
+          description: 'Test template',
+          mediaType: 'image',
+          mediaSubtype: 'png'
+        }
+      ])
+
+      mockGetFuseOptions.mockRejectedValueOnce(new Error('Network error'))
+
+      const { loadFuseOptions, filteredTemplates } =
+        useTemplateFiltering(templates)
+
+      const initialResults = filteredTemplates.value
+
+      await expect(loadFuseOptions()).rejects.toThrow('Network error')
+      expect(filteredTemplates.value).toEqual(initialResults)
+    })
+
+    it('recreates Fuse instance when fuseOptions change', async () => {
+      const templates = ref<TemplateInfo[]>([
+        {
+          name: 'searchable-template',
+          description: 'This is a searchable template',
+          mediaType: 'image',
+          mediaSubtype: 'png'
+        },
+        {
+          name: 'another-template',
+          description: 'Another template',
+          mediaType: 'image',
+          mediaSubtype: 'png'
+        }
+      ])
+
+      const { loadFuseOptions, searchQuery, filteredTemplates } =
+        useTemplateFiltering(templates)
+
+      const customFuseOptions = {
+        keys: [{ name: 'name', weight: 1.0 }],
+        threshold: 0.2,
+        includeScore: true,
+        includeMatches: true
+      }
+
+      mockGetFuseOptions.mockResolvedValueOnce(customFuseOptions)
+
+      await loadFuseOptions()
+      await nextTick()
+
+      searchQuery.value = 'searchable'
+      await nextTick()
+
+      expect(filteredTemplates.value.length).toBeGreaterThan(0)
+      expect(mockGetFuseOptions).toHaveBeenCalledTimes(1)
+    })
+  })
 })

src/composables/useTemplateFiltering.ts

@@ -1,5 +1,6 @@
 import { refDebounced, watchDebounced } from '@vueuse/core'
 import Fuse from 'fuse.js'
+import type { IFuseOptions } from 'fuse.js'
 import { computed, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
@@ -8,6 +9,21 @@ import { useTelemetry } from '@/platform/telemetry'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 import { useTemplateRankingStore } from '@/stores/templateRankingStore'
 import { debounce } from 'es-toolkit/compat'
+import { api } from '@/scripts/api'
+
+// Fuse.js configuration for fuzzy search
+const defaultFuseOptions: IFuseOptions<TemplateInfo> = {
+  keys: [
+    { name: 'name', weight: 0.3 },
+    { name: 'title', weight: 0.3 },
+    { name: 'description', weight: 0.1 },
+    { name: 'tags', weight: 0.2 },
+    { name: 'models', weight: 0.3 }
+  ],
+  threshold: 0.33,
+  includeScore: true,
+  includeMatches: true
+}
 
 export function useTemplateFiltering(
   templates: Ref<TemplateInfo[]> | TemplateInfo[]
@@ -35,26 +51,14 @@ export function useTemplateFiltering(
     | 'model-size-low-to-high'
   >(settingStore.get('Comfy.Templates.SortBy'))
 
+  const fuseOptions = ref<IFuseOptions<TemplateInfo>>(defaultFuseOptions)
+
   const templatesArray = computed(() => {
     const templateData = 'value' in templates ? templates.value : templates
     return Array.isArray(templateData) ? templateData : []
   })
 
-  // Fuse.js configuration for fuzzy search
-  const fuseOptions = {
-    keys: [
-      { name: 'name', weight: 0.3 },
-      { name: 'title', weight: 0.3 },
-      { name: 'description', weight: 0.1 },
-      { name: 'tags', weight: 0.2 },
-      { name: 'models', weight: 0.3 }
-    ],
-    threshold: 0.33,
-    includeScore: true,
-    includeMatches: true
-  }
-
-  const fuse = computed(() => new Fuse(templatesArray.value, fuseOptions))
+  const fuse = computed(() => new Fuse(templatesArray.value, fuseOptions.value))
 
   const availableModels = computed(() => {
     const modelSet = new Set<string>()
@@ -272,6 +276,13 @@ export function useTemplateFiltering(
     })
   }, 500)
 
+  const loadFuseOptions = async () => {
+    const fetchedOptions = await api.getFuseOptions()
+    if (fetchedOptions) {
+      fuseOptions.value = fetchedOptions
+    }
+  }
+
   // Watch for filter changes and track them
   watch(
     [searchQuery, selectedModels, selectedUseCases, selectedRunsOn, sortBy],
@@ -344,6 +355,7 @@ export function useTemplateFiltering(
     resetFilters,
     removeModelFilter,
     removeUseCaseFilter,
-    removeRunsOnFilter
+    removeRunsOnFilter,
+    loadFuseOptions
   }
 }