From fde58abda3c4c75300194197058a6b764e8fae0d Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Thu, 28 Aug 2025 20:46:36 +0100
Subject: [PATCH] feat: add tutorial button and corresponding tooltip in
 TemplateWorkflowCard

---
 src/assets/icons/custom/dark-info.svg         | 10 ++++++
 .../templates/TemplateWorkflowCard.vue        | 31 ++++++++++++++++---
 src/locales/en/main.json                      |  3 +-
 3 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/icons/custom/dark-info.svg

diff --git a/src/assets/icons/custom/dark-info.svg b/src/assets/icons/custom/dark-info.svg
new file mode 100644
index 000000000..26c05560f
--- /dev/null
+++ b/src/assets/icons/custom/dark-info.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <g clip-path="url(#clip0_1416_62)">
+    <path d="M7.99998 10.6667V8.00004M7.99998 5.33337H8.00665M14.6666 8.00004C14.6666 11.6819 11.6819 14.6667 7.99998 14.6667C4.31808 14.6667 1.33331 11.6819 1.33331 8.00004C1.33331 4.31814 4.31808 1.33337 7.99998 1.33337C11.6819 1.33337 14.6666 4.31814 14.6666 8.00004Z" stroke="#171718" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1416_62">
+      <rect width="16" height="16" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/src/components/templates/TemplateWorkflowCard.vue b/src/components/templates/TemplateWorkflowCard.vue
index 81be01926..c13f56ed7 100644
--- a/src/components/templates/TemplateWorkflowCard.vue
+++ b/src/components/templates/TemplateWorkflowCard.vue
@@ -65,7 +65,7 @@
                 <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"
+                  class="px-2 py-1 text-xs bg-surface-100 dark-theme:bg-surface-800 text-surface-300 dark-theme:text-surface-300 rounded backdrop-blur-sm bg-[#D9D9D9]/40"
                 >
                   {{ tag }}
                 </span>
@@ -85,9 +85,26 @@
           <h3 class="line-clamp-2 text-lg font-normal mb-1" :title="title">
             {{ title }}
           </h3>
-          <p class="line-clamp-2 text-sm text-muted mb-3" :title="description">
-            {{ description }}
-          </p>
+          <div class="flex justify-between gap-2">
+            <p
+              class="line-clamp-2 text-sm text-muted mb-3"
+              :title="description"
+            >
+              {{ description }}
+            </p>
+            <div
+              v-if="template.tutorialUrl"
+              class="flex flex-col-reverse justify-center"
+            >
+              <Button
+                v-tooltip.bottom="$t('g.seeTutorial')"
+                class="inline-flex items-center justify-center rounded-lg bg-[#FDFBFA] w-8 h-8 cursor-pointer"
+                @click="openTutorial"
+              >
+                <i class="icon-[comfy--dark-info] w-4 h-4" />
+              </Button>
+            </div>
+          </div>
         </div>
       </div>
     </template>
@@ -148,6 +165,12 @@ const description = computed(() => getTemplateDescription(template))
 const title = computed(() =>
   getTemplateTitle(template, effectiveSourceModule.value)
 )
+const openTutorial = (event: Event) => {
+  event.stopPropagation()
+  if (template.tutorialUrl) {
+    window.open(template.tutorialUrl, '_blank', 'noopener')
+  }
+}
 
 defineEmits<{
   loadWorkflow: [name: string]
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 07e37f7da..0a3def2f1 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -149,7 +149,8 @@
     "noAudioRecorded": "No audio recorded",
     "nodesRunning": "nodes running",
     "duplicate": "Duplicate",
-    "moreWorkflows": "More workflows"
+    "moreWorkflows": "More workflows",
+    "seeTutorial": "See a tutorial"
   },
   "manager": {
     "title": "Custom Nodes Manager",