Move All Templates category into ComfyUI Examples

Author: christian-byrne

src/components/templates/TemplateWorkflowCard.vue

@@ -105,26 +105,33 @@ const isHovered = useElementHover(cardRef)
 const { getTemplateThumbnailUrl, getTemplateTitle, getTemplateDescription } =
   useTemplateWorkflows()
 
+// Determine the effective source module to use (from template or prop)
+const effectiveSourceModule = computed(
+  () => template.sourceModule || sourceModule
+)
+
 const baseThumbnailSrc = computed(() =>
   getTemplateThumbnailUrl(
     template,
-    sourceModule,
-    sourceModule === 'default' ? '1' : ''
+    effectiveSourceModule.value,
+    effectiveSourceModule.value === 'default' ? '1' : ''
   )
 )
 
 const overlayThumbnailSrc = computed(() =>
   getTemplateThumbnailUrl(
     template,
-    sourceModule,
-    sourceModule === 'default' ? '2' : ''
+    effectiveSourceModule.value,
+    effectiveSourceModule.value === 'default' ? '2' : ''
   )
 )
 
 const description = computed(() =>
-  getTemplateDescription(template, sourceModule)
+  getTemplateDescription(template, effectiveSourceModule.value)
+)
+const title = computed(() =>
+  getTemplateTitle(template, effectiveSourceModule.value)
 )
-const title = computed(() => getTemplateTitle(template, sourceModule))
 
 defineEmits<{
   loadWorkflow: [name: string]

src/components/templates/TemplateWorkflowList.vue

@@ -7,15 +7,38 @@
   >
     <Column field="title" :header="$t('g.title')">
       <template #body="slotProps">
-        <span :title="getTemplateTitle(slotProps.data, sourceModule)">{{
-          getTemplateTitle(slotProps.data, sourceModule)
-        }}</span>
+        <span
+          :title="
+            getTemplateTitle(
+              slotProps.data,
+              slotProps.data.sourceModule || sourceModule
+            )
+          "
+          >{{
+            getTemplateTitle(
+              slotProps.data,
+              slotProps.data.sourceModule || sourceModule
+            )
+          }}</span
+        >
       </template>
     </Column>
     <Column field="description" :header="$t('g.description')">
       <template #body="slotProps">
-        <span :title="getTemplateDescription(slotProps.data, sourceModule)">
-          {{ getTemplateDescription(slotProps.data, sourceModule) }}
+        <span
+          :title="
+            getTemplateDescription(
+              slotProps.data,
+              slotProps.data.sourceModule || sourceModule
+            )
+          "
+        >
+          {{
+            getTemplateDescription(
+              slotProps.data,
+              slotProps.data.sourceModule || sourceModule
+            )
+          }}
         </span>
       </template>
     </Column>

src/composables/useTemplateWorkflows.ts

@@ -106,10 +106,15 @@ export function useTemplateWorkflows() {
     try {
       // Handle "All" category as a special case
       if (sourceModule === 'all') {
-        // Find template to determine its source module
-        const allCategory = allTemplateGroups.value.find((g) =>
-          g.label.includes('All')
-        )?.modules[0]
+        // Find "All" category in the ComfyUI Examples group
+        const comfyExamplesGroup = allTemplateGroups.value.find(
+          (g) =>
+            g.label ===
+            t('templateWorkflows.category.ComfyUI Examples', 'ComfyUI Examples')
+        )
+        const allCategory = comfyExamplesGroup?.modules.find(
+          (m) => m.moduleName === 'all'
+        )
         const template = allCategory?.templates.find((t) => t.name === id)
 
         if (!template || !template.sourceModule) return false

src/locales/en/main.json

@@ -492,8 +492,7 @@
       "Audio": "Audio",
       "Image API": "Image API",
       "Video API": "Video API",
-      "All": "All Templates",
-      "AllTemplates": "All Templates"
+      "All": "All Templates"
     },
     "templateDescription": {
       "Basics": {

src/stores/workflowTemplatesStore.ts

@@ -103,30 +103,43 @@ export const useWorkflowTemplatesStore = defineStore(
 
     // Create an "All" category that combines all templates
     const createAllCategory = () => {
-      // Get all templates and include source module
+      // First, get core templates with source module added
+      const coreTemplatesWithSourceModule = coreTemplates.value.flatMap(
+        (category) =>
+          // For each template in each category, add the sourceModule and pass through any localized fields
+          category.templates.map((template) => {
+            // Get localized template with its original category title for i18n lookup
+            const localizedTemplate = addLocalizedFieldsToTemplate(
+              template,
+              category.title
+            )
+            return {
+              ...localizedTemplate,
+              sourceModule: category.moduleName
+            }
+          })
+      )
+
+      // Now handle custom templates
+      const customTemplatesWithSourceModule = Object.entries(
+        customTemplates.value
+      ).flatMap(([moduleName, templates]) =>
+        templates.map((name) => ({
+          name,
+          mediaType: 'image',
+          mediaSubtype: 'jpg',
+          description: name,
+          sourceModule: moduleName
+        }))
+      )
+
       return {
         moduleName: 'all',
         title: 'All',
         localizedTitle: st('templateWorkflows.category.All', 'All Templates'),
         templates: [
-          // Core templates
-          ...coreTemplates.value.flatMap((category) =>
-            category.templates.map((template) => ({
-              ...template,
-              sourceModule: category.moduleName
-            }))
-          ),
-          // Custom templates
-          ...Object.entries(customTemplates.value).flatMap(
-            ([moduleName, templates]) =>
-              templates.map((name) => ({
-                name,
-                mediaType: 'image',
-                mediaSubtype: 'jpg',
-                description: name,
-                sourceModule: moduleName
-              }))
-          )
+          ...coreTemplatesWithSourceModule,
+          ...customTemplatesWithSourceModule
         ]
       }
     }
@@ -155,8 +168,8 @@ export const useWorkflowTemplatesStore = defineStore(
         )
       ]
 
-      // Create regular groups
-      const regularGroups = Object.entries(
+      // Group templates by their main category
+      const groupedByCategory = Object.entries(
         groupBy(allTemplates, (template) =>
           template.moduleName === 'default'
             ? st(
@@ -167,13 +180,20 @@ export const useWorkflowTemplatesStore = defineStore(
         )
       ).map(([label, modules]) => ({ label, modules }))
 
-      // Create All category group and add it to the beginning
-      const allGroup = {
-        label: st('templateWorkflows.category.AllTemplates', 'All Templates'),
-        modules: [createAllCategory()]
+      // Insert the "All" category at the top of the "ComfyUI Examples" group
+      const comfyExamplesGroupIndex = groupedByCategory.findIndex(
+        (group) =>
+          group.label ===
+          st('templateWorkflows.category.ComfyUI Examples', 'ComfyUI Examples')
+      )
+
+      if (comfyExamplesGroupIndex !== -1) {
+        groupedByCategory[comfyExamplesGroupIndex].modules.unshift(
+          createAllCategory()
+        )
       }
 
-      return [allGroup, ...regularGroups]
+      return groupedByCategory
     })
 
     async function loadWorkflowTemplates() {

tests-ui/tests/composables/useTemplateWorkflows.test.ts

@@ -50,7 +50,7 @@ describe('useTemplateWorkflows', () => {
       loadWorkflowTemplates: vi.fn().mockResolvedValue(true),
       groupedTemplates: [
         {
-          label: 'All Templates',
+          label: 'ComfyUI Examples',
           modules: [
             {
               moduleName: 'all',
@@ -72,12 +72,7 @@ describe('useTemplateWorkflows', () => {
                   description: 'A custom template'
                 }
               ]
-            }
-          ]
-        },
-        {
-          label: 'Default Templates',
-          modules: [
+            },
             {
               moduleName: 'default',
               title: 'Default',
@@ -130,7 +125,7 @@ describe('useTemplateWorkflows', () => {
 
   it('should select a template category', () => {
     const { selectTemplateCategory, selectedTemplate } = useTemplateWorkflows()
-    const category = mockWorkflowTemplatesStore.groupedTemplates[1].modules[0]
+    const category = mockWorkflowTemplatesStore.groupedTemplates[0].modules[1] // Default category
 
     const result = selectTemplateCategory(category)