From f25826b3b4a86c64745004bf71bccc8a9a54c7f6 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Fri, 16 Jan 2026 21:28:49 +1300
Subject: [PATCH] feat(25-02): improve template explorer layout and visuals

- Change to 2-column grid layout for better visual balance
- Add animated thumbnail cycling through preview images (2.5s interval, fade transition)
- Add indicator dots for multi-image templates
- Add darker sidebar background (bg-neutral-900/80) for visual separation
- Update card backgrounds to neutral-900/50 for better contrast
- Pass preview images from template content to TemplateCard
---
 src/components/quickstart/TemplateCard.tsx    | 117 +++++++++++++-----
 .../quickstart/TemplateExplorerView.tsx       |  25 +++-
 2 files changed, 105 insertions(+), 37 deletions(-)

diff --git a/src/components/quickstart/TemplateCard.tsx b/src/components/quickstart/TemplateCard.tsx
index a26ee2d8..1b848dc3 100644
--- a/src/components/quickstart/TemplateCard.tsx
+++ b/src/components/quickstart/TemplateCard.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import { TemplateCategory } from "@/types/quickstart";
 
 interface TemplateCardProps {
@@ -12,6 +13,7 @@ interface TemplateCardProps {
     tags: string[];
   };
   nodeCount: number;
+  previewImages?: string[];
   isLoading: boolean;
   onClick: () => void;
   disabled: boolean;
@@ -34,10 +36,31 @@ const CATEGORY_COLORS: Record<TemplateCategory, string> = {
 export function TemplateCard({
   template,
   nodeCount,
+  previewImages = [],
   isLoading,
   onClick,
   disabled,
 }: TemplateCardProps) {
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  // Cycle through preview images
+  useEffect(() => {
+    if (previewImages.length <= 1) return;
+
+    const interval = setInterval(() => {
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setCurrentImageIndex((prev) => (prev + 1) % previewImages.length);
+        setIsTransitioning(false);
+      }, 300); // Fade out duration
+    }, 2500); // Time between transitions
+
+    return () => clearInterval(interval);
+  }, [previewImages.length]);
+
+  const hasImages = previewImages.length > 0;
+
   return (
     <button
       onClick={onClick}
@@ -47,52 +70,82 @@ export function TemplateCard({
         ${
           isLoading
             ? "bg-blue-600/20 border-blue-500/50"
-            : "bg-neutral-800/50 border-neutral-700 hover:border-neutral-600 hover:bg-neutral-800/70"
+            : "bg-neutral-900/50 border-neutral-700 hover:border-neutral-500 hover:bg-neutral-900/70"
         }
         ${disabled && !isLoading ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
       `}
     >
-      {/* Icon */}
+      {/* Thumbnail Area */}
       <div
         className={`
-          w-12 h-12 rounded-lg flex items-center justify-center mb-3
+          w-full aspect-[4/3] rounded-lg mb-3 overflow-hidden relative
           ${
             isLoading
-              ? "bg-blue-500/30"
-              : "bg-neutral-700/50 group-hover:bg-neutral-700"
+              ? "bg-blue-500/20"
+              : "bg-neutral-800 group-hover:bg-neutral-700/80"
           }
         `}
       >
         {isLoading ? (
-          <svg
-            className="w-5 h-5 text-blue-400 animate-spin"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          <div className="absolute inset-0 flex items-center justify-center">
+            <svg
+              className="w-6 h-6 text-blue-400 animate-spin"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+          </div>
+        ) : hasImages ? (
+          <>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={previewImages[currentImageIndex]}
+              alt={`${template.name} preview`}
+              className={`
+                w-full h-full object-cover transition-opacity duration-300
+                ${isTransitioning ? "opacity-0" : "opacity-100"}
+              `}
             />
-          </svg>
+            {/* Image indicator dots */}
+            {previewImages.length > 1 && (
+              <div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1">
+                {previewImages.map((_, idx) => (
+                  <div
+                    key={idx}
+                    className={`
+                      w-1.5 h-1.5 rounded-full transition-colors
+                      ${idx === currentImageIndex ? "bg-white" : "bg-white/40"}
+                    `}
+                  />
+                ))}
+              </div>
+            )}
+          </>
         ) : (
-          <svg
-            className="w-6 h-6 text-neutral-400 group-hover:text-neutral-300 transition-colors"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={1.5}
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" d={template.icon} />
-          </svg>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <svg
+              className="w-8 h-8 text-neutral-600 group-hover:text-neutral-500 transition-colors"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.5}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d={template.icon} />
+            </svg>
+          </div>
         )}
       </div>
 
diff --git a/src/components/quickstart/TemplateExplorerView.tsx b/src/components/quickstart/TemplateExplorerView.tsx
index a3e2009c..57bc3eee 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 } from "@/lib/quickstart/templates";
+import { getAllPresets, PRESET_TEMPLATES, getTemplateContent } from "@/lib/quickstart/templates";
 import { QuickstartBackButton } from "./QuickstartBackButton";
 import { TemplateCard } from "./TemplateCard";
 import { CommunityWorkflowMeta, TemplateCategory, TemplateMetadata } from "@/types/quickstart";
@@ -69,6 +69,20 @@ export function TemplateExplorerView({
     return metadata;
   }, []);
 
+  // Get preview images for each template (from the "full" content level)
+  const previewImages = useMemo(() => {
+    const images: Record<string, string[]> = {};
+    PRESET_TEMPLATES.forEach((template) => {
+      const content = getTemplateContent(template.id, "full");
+      if (content?.images) {
+        images[template.id] = Object.values(content.images).map((img) => img.url);
+      } else {
+        images[template.id] = [];
+      }
+    });
+    return images;
+  }, []);
+
   // Filter presets based on search, category, and tags
   const filteredPresets = useMemo(() => {
     return presets.filter((preset) => {
@@ -261,7 +275,7 @@ export function TemplateExplorerView({
       {/* Content - Sidebar + Main Grid */}
       <div className="flex-1 flex overflow-hidden">
         {/* Sidebar */}
-        <div className="w-48 flex-shrink-0 border-r border-neutral-700 p-4 space-y-5 overflow-y-auto">
+        <div className="w-48 flex-shrink-0 bg-neutral-900/80 border-r border-neutral-700 p-4 space-y-5 overflow-y-auto">
           {/* Search Input */}
           <div className="relative">
             <svg
@@ -386,12 +400,13 @@ export function TemplateExplorerView({
               <h3 className="text-xs font-medium text-neutral-400 uppercase tracking-wider">
                 Quick Start
               </h3>
-              <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+              <div className="grid grid-cols-2 gap-4">
                 {filteredPresets.map((preset) => (
                   <TemplateCard
                     key={preset.id}
                     template={preset}
                     nodeCount={presetMetadata[preset.id]?.nodeCount ?? 0}
+                    previewImages={previewImages[preset.id]}
                     isLoading={loadingWorkflowId === preset.id}
                     onClick={() => handlePresetSelect(preset.id)}
                     disabled={isLoading}
@@ -436,7 +451,7 @@ export function TemplateExplorerView({
                   </svg>
                 </div>
               ) : (
-                <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+                <div className="grid grid-cols-2 gap-4">
                   {filteredCommunity.map((workflow) => (
                     <button
                       key={workflow.id}
@@ -447,7 +462,7 @@ export function TemplateExplorerView({
                         ${
                           loadingWorkflowId === workflow.id
                             ? "bg-purple-600/20 border-purple-500/50"
-                            : "bg-neutral-800/50 border-neutral-700 hover:border-neutral-600 hover:bg-neutral-800/70"
+                            : "bg-neutral-900/50 border-neutral-700 hover:border-neutral-500 hover:bg-neutral-900/70"
                         }
                         ${isLoading && loadingWorkflowId !== workflow.id ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
                       `}