From 4471c069fefa859e3b5658e12dabf5205e0b218d Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Thu, 28 Aug 2025 19:07:35 +0100
Subject: [PATCH] fix: update icon in WorkflowTemplateSelector and improve tag
 display in TemplateWorkflowCard

---
 .../widget/WorkflowTemplateSelector.vue       |  2 +-
 .../templates/TemplateWorkflowCard.vue        | 38 ++++++++++---------
 .../templates/TemplateWorkflowList.vue        |  2 +-
 src/composables/useTemplateWorkflows.ts       |  9 +----
 .../composables/useTemplateWorkflows.test.ts  | 32 +++++++---------
 5 files changed, 38 insertions(+), 45 deletions(-)

diff --git a/src/components/custom/widget/WorkflowTemplateSelector.vue b/src/components/custom/widget/WorkflowTemplateSelector.vue
index da98c973a..40860a9c6 100644
--- a/src/components/custom/widget/WorkflowTemplateSelector.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelector.vue
@@ -6,7 +6,7 @@
     <template #leftPanel>
       <LeftSidePanel v-model="selectedNavItem" :nav-items="navItems">
         <template #header-icon>
-          <i-lucide:workflow class="text-neutral" />
+          <i class="icon-[comfy--template]" />
         </template>
         <template #header-title>
           <span class="text-neutral text-base">{{
diff --git a/src/components/templates/TemplateWorkflowCard.vue b/src/components/templates/TemplateWorkflowCard.vue
index af0c770d4..81be01926 100644
--- a/src/components/templates/TemplateWorkflowCard.vue
+++ b/src/components/templates/TemplateWorkflowCard.vue
@@ -2,15 +2,16 @@
   <Card
     ref="cardRef"
     :data-testid="`template-workflow-${template.name}`"
-    class="w-full template-card rounded-2xl overflow-hidden cursor-pointer shadow-elevation-2 dark-theme:bg-dark-elevation-1.5 h-full"
+    class="w-full template-card rounded-2xl overflow-hidden cursor-pointer h-full"
     :pt="{
+      root: { class: 'bg-transparent shadow-none' },
       body: { class: 'p-0 h-full flex flex-col' }
     }"
     @click="$emit('loadWorkflow', template.name)"
   >
     <template #header>
       <div class="w-full">
-        <div class="relative w-full overflow-hidden rounded-t-lg">
+        <div class="relative w-full overflow-hidden rounded-lg">
           <template v-if="template.mediaType === 'audio'">
             <AudioThumbnail :src="baseThumbnailSrc" />
           </template>
@@ -53,6 +54,23 @@
                   : DEFAULT_ZOOM_SCALE
               "
             />
+            <div
+              v-if="template.tags && template.tags.length > 0"
+              class="absolute inset-0 z-10 pointer-events-none"
+            >
+              <div class="absolute inset-0 bg-black/40"></div>
+              <div
+                class="flex flex-wrap absolute bottom-4 left-4 px-1 pointer-events-auto gap-2"
+              >
+                <span
+                  v-for="tag in template.tags"
+                  :key="tag"
+                  class="px-2 py-1 text-xs bg-surface-100 dark-theme:bg-surface-800 text-surface-700 dark-theme:text-surface-300 rounded backdrop-blur-sm bg-[#D9D9D9]/40"
+                >
+                  {{ tag }}
+                </span>
+              </div>
+            </div>
           </template>
           <ProgressSpinner
             v-if="loading"
@@ -71,18 +89,6 @@
             {{ description }}
           </p>
         </div>
-        <div
-          v-if="template.tags && template.tags.length > 0"
-          class="flex flex-wrap gap-1"
-        >
-          <span
-            v-for="tag in template.tags"
-            :key="tag"
-            class="px-2 py-1 text-xs bg-surface-100 dark-theme:bg-surface-800 text-surface-700 dark-theme:text-surface-300 rounded-full"
-          >
-            {{ tag }}
-          </span>
-        </div>
       </div>
     </template>
   </Card>
@@ -138,9 +144,7 @@ const overlayThumbnailSrc = computed(() =>
   )
 )
 
-const description = computed(() =>
-  getTemplateDescription(template, effectiveSourceModule.value)
-)
+const description = computed(() => getTemplateDescription(template))
 const title = computed(() =>
   getTemplateTitle(template, effectiveSourceModule.value)
 )
diff --git a/src/components/templates/TemplateWorkflowList.vue b/src/components/templates/TemplateWorkflowList.vue
index 061dbb104..eb8df47a6 100644
--- a/src/components/templates/TemplateWorkflowList.vue
+++ b/src/components/templates/TemplateWorkflowList.vue
@@ -57,7 +57,7 @@ const enrichedTemplates = computed(() => {
     return {
       ...template,
       title: getTemplateTitle(template, actualSourceModule),
-      description: getTemplateDescription(template, actualSourceModule)
+      description: getTemplateDescription(template)
     }
   })
 })
diff --git a/src/composables/useTemplateWorkflows.ts b/src/composables/useTemplateWorkflows.ts
index ce4a3e8a2..b42cb787d 100644
--- a/src/composables/useTemplateWorkflows.ts
+++ b/src/composables/useTemplateWorkflows.ts
@@ -85,13 +85,8 @@ export function useTemplateWorkflows() {
   /**
    * Gets formatted template description
    */
-  const getTemplateDescription = (
-    template: TemplateInfo,
-    sourceModule: string
-  ) => {
-    return sourceModule === 'default'
-      ? template.localizedDescription ?? ''
-      : template.description?.replace(/[-_]/g, ' ').trim() ?? ''
+  const getTemplateDescription = (template: TemplateInfo) => {
+    return template.description?.replace(/[-_]/g, ' ').trim() ?? ''
   }
 
   /**
diff --git a/tests-ui/tests/composables/useTemplateWorkflows.test.ts b/tests-ui/tests/composables/useTemplateWorkflows.test.ts
index b7c507faf..3026e0997 100644
--- a/tests-ui/tests/composables/useTemplateWorkflows.test.ts
+++ b/tests-ui/tests/composables/useTemplateWorkflows.test.ts
@@ -222,28 +222,22 @@ describe('useTemplateWorkflows', () => {
     const { getTemplateDescription } = useTemplateWorkflows()
 
     // Default template with localized description
-    const descWithLocalized = getTemplateDescription(
-      {
-        name: 'test',
-        localizedDescription: 'Localized Description',
-        mediaType: 'image',
-        mediaSubtype: 'jpg',
-        description: 'Test'
-      },
-      'default'
-    )
+    const descWithLocalized = getTemplateDescription({
+      name: 'test',
+      localizedDescription: 'Localized Description',
+      mediaType: 'image',
+      mediaSubtype: 'jpg',
+      description: 'Test'
+    })
     expect(descWithLocalized).toBe('Localized Description')
 
     // Custom template with description
-    const customDesc = getTemplateDescription(
-      {
-        name: 'test',
-        description: 'custom-template_description',
-        mediaType: 'image',
-        mediaSubtype: 'jpg'
-      },
-      'custom-module'
-    )
+    const customDesc = getTemplateDescription({
+      name: 'test',
+      description: 'custom-template_description',
+      mediaType: 'image',
+      mediaSubtype: 'jpg'
+    })
     expect(customDesc).toBe('custom template description')
   })