From e1ade58b6f2101dbdb3f5bc0ee025c9cb40697e0 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Fri, 16 Jan 2026 22:29:43 +1300
Subject: [PATCH] feat(26-01): integrate WorkflowPreview into TemplateCard

- Replace static previewImage with workflow prop in TemplateCard
- Render WorkflowPreview showing node layout and connections
- Remove getTemplateContent import (no longer needed)
- Pass workflow data from PRESET_TEMPLATES to cards
---
 src/components/quickstart/TemplateCard.tsx    | 15 ++++++-------
 .../quickstart/TemplateExplorerView.tsx       | 21 +++++++++----------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/quickstart/TemplateCard.tsx b/src/components/quickstart/TemplateCard.tsx
index 1fbd54c8..97b51fa0 100644
--- a/src/components/quickstart/TemplateCard.tsx
+++ b/src/components/quickstart/TemplateCard.tsx
@@ -1,6 +1,8 @@
 "use client";
 
+import { Node, Edge } from "@xyflow/react";
 import { TemplateCategory } from "@/types/quickstart";
+import { WorkflowPreview } from "./WorkflowPreview";
 
 interface TemplateCardProps {
   template: {
@@ -12,7 +14,7 @@ interface TemplateCardProps {
     tags: string[];
   };
   nodeCount: number;
-  previewImage?: string;
+  workflow?: { nodes: Node[]; edges: Edge[] };
   isLoading: boolean;
   onClick: () => void;
   disabled: boolean;
@@ -35,7 +37,7 @@ const CATEGORY_COLORS: Record<TemplateCategory, string> = {
 export function TemplateCard({
   template,
   nodeCount,
-  previewImage,
+  workflow,
   isLoading,
   onClick,
   disabled,
@@ -87,13 +89,8 @@ export function TemplateCard({
               />
             </svg>
           </div>
-        ) : previewImage ? (
-          /* eslint-disable-next-line @next/next/no-img-element */
-          <img
-            src={previewImage}
-            alt={`${template.name} preview`}
-            className="w-full h-full object-cover"
-          />
+        ) : workflow ? (
+          <WorkflowPreview workflow={workflow} />
         ) : (
           <div className="absolute inset-0 flex items-center justify-center">
             <svg
diff --git a/src/components/quickstart/TemplateExplorerView.tsx b/src/components/quickstart/TemplateExplorerView.tsx
index 8f71c920..e2e7d2ba 100644
--- a/src/components/quickstart/TemplateExplorerView.tsx
+++ b/src/components/quickstart/TemplateExplorerView.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { WorkflowFile } from "@/store/workflowStore";
-import { getAllPresets, PRESET_TEMPLATES, getTemplateContent } from "@/lib/quickstart/templates";
+import { getAllPresets, PRESET_TEMPLATES } from "@/lib/quickstart/templates";
 import { QuickstartBackButton } from "./QuickstartBackButton";
 import { TemplateCard } from "./TemplateCard";
 import { CommunityWorkflowMeta, TemplateCategory, TemplateMetadata } from "@/types/quickstart";
@@ -69,17 +69,16 @@ export function TemplateExplorerView({
     return metadata;
   }, []);
 
-  // Get preview image for each template (first image from "full" content level)
-  const previewImages = useMemo(() => {
-    const images: Record<string, string | undefined> = {};
+  // Get workflow data for each template
+  const presetWorkflows = useMemo(() => {
+    const workflows: Record<string, { nodes: typeof PRESET_TEMPLATES[0]["workflow"]["nodes"]; edges: typeof PRESET_TEMPLATES[0]["workflow"]["edges"] } | undefined> = {};
     PRESET_TEMPLATES.forEach((template) => {
-      const content = getTemplateContent(template.id, "full");
-      if (content?.images) {
-        const imageUrls = Object.values(content.images).map((img) => img.url);
-        images[template.id] = imageUrls[0];
-      }
+      workflows[template.id] = {
+        nodes: template.workflow.nodes,
+        edges: template.workflow.edges,
+      };
     });
-    return images;
+    return workflows;
   }, []);
 
   // Filter presets based on search, category, and tags
@@ -405,7 +404,7 @@ export function TemplateExplorerView({
                     key={preset.id}
                     template={preset}
                     nodeCount={presetMetadata[preset.id]?.nodeCount ?? 0}
-                    previewImage={previewImages[preset.id]}
+                    workflow={presetWorkflows[preset.id]}
                     isLoading={loadingWorkflowId === preset.id}
                     onClick={() => handlePresetSelect(preset.id)}
                     disabled={isLoading}