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

feat: show From Flow badge and lock icon on flow-synced StepCard

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-25 13:47:38 -05:00
parent 74d78dc454
commit 7e61aa7cdc
1 changed files with 51 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/components/step-library/StepCard.tsx
View File

@@ -1,4 +1,4 @@
import { Star, User, Calendar, TrendingUp, Eye, Plus, HelpCircle, Zap, CheckCircle, Pencil, Trash2, Bookmark } from 'lucide-react' import { Star, User, Calendar, TrendingUp, Eye, Plus, HelpCircle, Zap, CheckCircle, Pencil, Trash2, Bookmark, Lock } from 'lucide-react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import type { StepListItem } from '@/types/step' import type { StepListItem } from '@/types/step'
@@ -55,6 +55,13 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
Featured Featured
</span> </span>
)} )}
{/* From Flow Badge */}
{step.is_flow_synced && (
<span className="rounded-full bg-blue-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-blue-400">
From Flow
</span>
)}
</div> </div>
{/* Title */} {/* Title */}
@@ -126,30 +133,49 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
<div className="flex gap-2"> <div className="flex gap-2">
{(onEdit || onDelete || onSave) ? ( {(onEdit || onDelete || onSave) ? (
isOwn ? ( isOwn ? (
// Own step: Preview + Edit + Delete icon step.is_flow_synced ? (
<> // Flow-synced step: Preview + lock (read-only)
<button <>
onClick={() => onPreview(step)} <button
className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors" onClick={() => onPreview(step)}
> className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
<Eye className="h-4 w-4" /> >
Preview <Eye className="h-4 w-4" />
</button> Preview
<button </button>
onClick={() => onEdit?.(step)} <span
className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors" title="Managed by source flow — fork to customize"
> className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground opacity-50 cursor-default"
<Pencil className="h-4 w-4" /> >
Edit <Lock className="h-4 w-4" />
</button> </span>
<button </>
onClick={() => onDelete?.(step)} ) : (
className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground hover:bg-red-400/10 hover:text-red-400 hover:border-red-400/30 transition-colors" // Own step: Preview + Edit + Delete icon
aria-label="Delete step" <>
> <button
<Trash2 className="h-4 w-4" /> onClick={() => onPreview(step)}
</button> className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
</> >
<Eye className="h-4 w-4" />
Preview
</button>
<button
onClick={() => onEdit?.(step)}
className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
>
<Pencil className="h-4 w-4" />
Edit
</button>
<button
onClick={() => onDelete?.(step)}
className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground hover:bg-red-400/10 hover:text-red-400 hover:border-red-400/30 transition-colors"
aria-label="Delete step"
>
<Trash2 className="h-4 w-4" />
</button>
</>
)
) : ( ) : (
// Others' step: Preview + Save // Others' step: Preview + Save
<> <>