From 40ebd2b2001e9a93669e348196361a57a5ad7159 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Fri, 13 Mar 2026 12:29:45 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20TemplateCard=20=E2=80=94=20remove?=
 =?UTF-8?q?=20store=20subscription,=20add=20Configure=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/scripts/TemplateCard.tsx   | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/scripts/TemplateCard.tsx b/frontend/src/components/scripts/TemplateCard.tsx
index 1192cc67..61e303ff 100644
--- a/frontend/src/components/scripts/TemplateCard.tsx
+++ b/frontend/src/components/scripts/TemplateCard.tsx
@@ -1,6 +1,5 @@
 import { ShieldAlert } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
 import type { ScriptTemplateListItem } from '@/types'
 
 const COMPLEXITY_CLASSES: Record<ScriptTemplateListItem['complexity'], string> = {
@@ -11,23 +10,15 @@ const COMPLEXITY_CLASSES: Record<ScriptTemplateListItem['complexity'], string> =
 
 interface Props {
   template: ScriptTemplateListItem
+  onConfigure: (id: string) => void
 }
 
-export function TemplateCard({ template }: Props) {
-  const selectedTemplate = useScriptGeneratorStore(s => s.selectedTemplate)
-  const selectTemplate = useScriptGeneratorStore(s => s.selectTemplate)
-  const isActive = selectedTemplate?.id === template.id
-
+export function TemplateCard({ template, onConfigure }: Props) {
   return (
-    <button
-      type="button"
-      onClick={() => selectTemplate(template.id)}
+    <div
       className={cn(
         'w-full text-left px-4 py-3 rounded-xl border transition-all',
-        'hover:border-[rgba(255,255,255,0.12)] hover:bg-white/5',
-        isActive
-          ? 'bg-primary/10 border-primary/30 border-l-[3px] border-l-primary'
-          : 'border-border bg-transparent'
+        'border-border bg-transparent'
       )}
     >
       <div className="flex items-start justify-between gap-2 mb-1">
@@ -52,21 +43,30 @@ export function TemplateCard({ template }: Props) {
         </p>
       )}
 
-      <div className="flex items-center gap-3 text-[0.625rem] text-muted-foreground font-label">
-        <span>{template.usage_count}× used</span>
-        {template.tags.length > 0 && (
-          <div className="flex gap-1 flex-wrap">
-            {template.tags.slice(0, 3).map(tag => (
-              <span key={tag} className="bg-white/5 border border-border rounded px-1.5 py-0.5">
-                {tag}
-              </span>
-            ))}
-            {template.tags.length > 3 && (
-              <span className="text-muted-foreground">+{template.tags.length - 3}</span>
-            )}
-          </div>
-        )}
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-3 text-[0.625rem] text-muted-foreground font-label">
+          <span>{template.usage_count}× used</span>
+          {template.tags.length > 0 && (
+            <div className="flex gap-1 flex-wrap">
+              {template.tags.slice(0, 3).map(tag => (
+                <span key={tag} className="bg-white/5 border border-border rounded px-1.5 py-0.5">
+                  {tag}
+                </span>
+              ))}
+              {template.tags.length > 3 && (
+                <span className="text-muted-foreground">+{template.tags.length - 3}</span>
+              )}
+            </div>
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={() => onConfigure(template.id)}
+          className="shrink-0 bg-primary/10 border border-primary/20 text-primary text-xs px-2.5 py-1 rounded-md hover:bg-primary/20 transition-colors"
+        >
+          Configure →
+        </button>
       </div>
-    </button>
+    </div>
   )
 }