From dd36f335de970ea7015cf725fd3e7800c4b591d2 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Fri, 13 Mar 2026 02:10:46 -0400
Subject: [PATCH] feat: add ScriptTemplateList with skeleton and empty states

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/scripts/ScriptTemplateList.tsx | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 frontend/src/components/scripts/ScriptTemplateList.tsx

diff --git a/frontend/src/components/scripts/ScriptTemplateList.tsx b/frontend/src/components/scripts/ScriptTemplateList.tsx
new file mode 100644
index 00000000..d6cb1dd1
--- /dev/null
+++ b/frontend/src/components/scripts/ScriptTemplateList.tsx
@@ -0,0 +1,68 @@
+import { FileCode, Search } from 'lucide-react'
+import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
+import { TemplateCard } from './TemplateCard'
+
+interface Props {
+  inputValue: string
+  onClearSearch: () => void
+}
+
+function TemplateSkeleton() {
+  return (
+    <div className="px-4 py-3 rounded-xl border border-border animate-pulse">
+      <div className="flex justify-between mb-2">
+        <div className="h-4 w-2/3 bg-white/8 rounded" />
+        <div className="h-4 w-14 bg-white/8 rounded" />
+      </div>
+      <div className="h-3 w-full bg-white/5 rounded mb-1" />
+      <div className="h-3 w-3/4 bg-white/5 rounded" />
+    </div>
+  )
+}
+
+export function ScriptTemplateList({ inputValue, onClearSearch }: Props) {
+  const templates = useScriptGeneratorStore(s => s.templates)
+  const isLoadingTemplates = useScriptGeneratorStore(s => s.isLoadingTemplates)
+
+  if (isLoadingTemplates) {
+    return (
+      <div className="flex flex-col gap-2 p-2">
+        <TemplateSkeleton />
+        <TemplateSkeleton />
+        <TemplateSkeleton />
+      </div>
+    )
+  }
+
+  if (templates.length === 0) {
+    if (inputValue !== '') {
+      return (
+        <div className="flex flex-col items-center justify-center gap-3 py-12 text-center px-4">
+          <Search size={32} className="text-muted-foreground/40" />
+          <p className="text-sm text-muted-foreground">No templates match your search</p>
+          <button
+            type="button"
+            onClick={onClearSearch}
+            className="text-xs text-primary hover:underline"
+          >
+            Clear search
+          </button>
+        </div>
+      )
+    }
+    return (
+      <div className="flex flex-col items-center justify-center gap-3 py-12 text-center px-4">
+        <FileCode size={32} className="text-muted-foreground/40" />
+        <p className="text-sm text-muted-foreground">No templates found</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-2 p-2">
+      {templates.map(template => (
+        <TemplateCard key={template.id} template={template} />
+      ))}
+    </div>
+  )
+}