chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: TemplateCard — remove store subscription, add Configure button

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-13 12:29:45 -04:00
parent 48db16ccbf
commit 40ebd2b200
1 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/components/scripts/TemplateCard.tsx
View File

@@ -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>
)
}