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 { ShieldAlert } from 'lucide-react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
import type { ScriptTemplateListItem } from '@/types' import type { ScriptTemplateListItem } from '@/types'
const COMPLEXITY_CLASSES: Record<ScriptTemplateListItem['complexity'], string> = { const COMPLEXITY_CLASSES: Record<ScriptTemplateListItem['complexity'], string> = {
@@ -11,23 +10,15 @@ const COMPLEXITY_CLASSES: Record<ScriptTemplateListItem['complexity'], string> =
interface Props { interface Props {
template: ScriptTemplateListItem template: ScriptTemplateListItem
onConfigure: (id: string) => void
} }
export function TemplateCard({ template }: Props) { export function TemplateCard({ template, onConfigure }: Props) {
const selectedTemplate = useScriptGeneratorStore(s => s.selectedTemplate)
const selectTemplate = useScriptGeneratorStore(s => s.selectTemplate)
const isActive = selectedTemplate?.id === template.id
return ( return (
<button <div
type="button"
onClick={() => selectTemplate(template.id)}
className={cn( className={cn(
'w-full text-left px-4 py-3 rounded-xl border transition-all', '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', 'border-border bg-transparent'
isActive
? 'bg-primary/10 border-primary/30 border-l-[3px] border-l-primary'
: 'border-border bg-transparent'
)} )}
> >
<div className="flex items-start justify-between gap-2 mb-1"> <div className="flex items-start justify-between gap-2 mb-1">
@@ -52,21 +43,30 @@ export function TemplateCard({ template }: Props) {
</p> </p>
)} )}
<div className="flex items-center gap-3 text-[0.625rem] text-muted-foreground font-label"> <div className="flex items-center justify-between gap-3">
<span>{template.usage_count}× used</span> <div className="flex items-center gap-3 text-[0.625rem] text-muted-foreground font-label">
{template.tags.length > 0 && ( <span>{template.usage_count}× used</span>
<div className="flex gap-1 flex-wrap"> {template.tags.length > 0 && (
{template.tags.slice(0, 3).map(tag => ( <div className="flex gap-1 flex-wrap">
<span key={tag} className="bg-white/5 border border-border rounded px-1.5 py-0.5"> {template.tags.slice(0, 3).map(tag => (
{tag} <span key={tag} className="bg-white/5 border border-border rounded px-1.5 py-0.5">
</span> {tag}
))} </span>
{template.tags.length > 3 && ( ))}
<span className="text-muted-foreground">+{template.tags.length - 3}</span> {template.tags.length > 3 && (
)} <span className="text-muted-foreground">+{template.tags.length - 3}</span>
</div> )}
)} </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> </div>
</button> </div>
) )
} }