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

refactor: migrate remaining components to Design System v4

Browse Source 
111 files across 14 directories: common, tree-editor, kb-accelerator,
copilot, assistant, analytics, library, procedural, procedural-editor,
public, script-editor, ui, admin, step-library.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:18:15 -04:00
parent 858f890ed3
commit d1a56f0529
111 changed files with 1330 additions and 1330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/tree-editor/FlowCanvasNode.tsx
View File

@@ -69,7 +69,7 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
<div
onContextMenu={(e) => onContextMenu?.(e, node.id)}
className={cn(
'group w-[280px] rounded-xl border border-border bg-card shadow-xs cursor-pointer transition-all',
'group w-[280px] rounded-xl border border-[#1e2130] bg-[#14161d] shadow-xs cursor-pointer transition-all',
config.borderClass,
selected && 'ring-1 ring-primary shadow-md',
isGhost && 'border-dashed border-primary/40! opacity-60'
@@ -83,13 +83,13 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
</span>
{/* Title */}
<span className="flex-1 truncate text-sm font-heading font-medium text-foreground">
<span className="flex-1 truncate text-sm font-heading font-medium text-[#e2e5eb]">
{title}
</span>
{/* Badges */}
{isNew && (
<span className="rounded-full bg-yellow-500/20 px-1.5 py-0.5 text-[10px] font-label text-yellow-400">
<span className="rounded-full bg-yellow-500/20 px-1.5 py-0.5 text-[10px] font-sans text-xs text-yellow-400">
New
</span>
)}
@@ -105,7 +105,7 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
e.stopPropagation()
onDelete(node.id)
}}
className="shrink-0 rounded-md p-1 text-muted-foreground opacity-0 group-hover:opacity-100 hover:bg-red-500/20 hover:text-red-400 transition-all"
className="shrink-0 rounded-md p-1 text-[#848b9b] opacity-0 group-hover:opacity-100 hover:bg-red-500/20 hover:text-red-400 transition-all"
title="Delete node"
>
<Trash2 className="h-3.5 w-3.5" />
@@ -115,19 +115,19 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
{/* Decision options preview */}
{node.type === 'decision' && optionCount > 0 && (
<div className="border-t border-border px-3 py-1.5">
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
<span className="font-label">{optionCount} option{optionCount !== 1 ? 's' : ''}</span>
<div className="border-t border-[#1e2130] px-3 py-1.5">
<div className="flex items-center gap-1.5 text-xs text-[#848b9b]">
<span className="font-sans text-xs">{optionCount} option{optionCount !== 1 ? 's' : ''}</span>
</div>
<div className="mt-1 space-y-0.5">
{node.options!.slice(0, 3).map((opt, i) => (
<div key={opt.id} className="truncate text-xs text-muted-foreground">
<span className="font-label text-foreground/60">{String.fromCharCode(65 + i)}</span>{' '}
<div key={opt.id} className="truncate text-xs text-[#848b9b]">
<span className="font-sans text-xs text-[#e2e5eb]/60">{String.fromCharCode(65 + i)}</span>{' '}
{opt.label || '(empty)'}
</div>
))}
{optionCount > 3 && (
<div className="text-xs text-muted-foreground">+{optionCount - 3} more</div>
<div className="text-xs text-[#848b9b]">+{optionCount - 3} more</div>
)}
</div>
</div>
@@ -135,31 +135,31 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
{/* Description preview for action/solution */}
{(node.type === 'action' || node.type === 'solution') && node.description && (
<div className="border-t border-border px-3 py-1.5">
<div className="line-clamp-2 text-xs text-muted-foreground">{node.description}</div>
<div className="border-t border-[#1e2130] px-3 py-1.5">
<div className="line-clamp-2 text-xs text-[#848b9b]">{node.description}</div>
</div>
)}
{/* Collapse chevron */}
{hasChildren && (
<div className="flex justify-center border-t border-border py-1">
<div className="flex justify-center border-t border-[#1e2130] py-1">
<button
type="button"
onClick={(e) => {
e.stopPropagation()
onToggleCollapse(node.id)
}}
className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
>
{isCollapsed ? (
<>
<ChevronRight className="h-3 w-3" />
<span className="font-label">Expand</span>
<span className="font-sans text-xs">Expand</span>
</>
) : (
<>
<ChevronDown className="h-3 w-3" />
<span className="font-label">Collapse</span>
<span className="font-sans text-xs">Collapse</span>
</>
)}
</button>
@@ -168,7 +168,7 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
{/* Ghost node accept/dismiss overlay */}
{isGhost && (
<div className="mt-2 flex gap-2 border-t border-border/50 pt-2 px-3 pb-2">
<div className="mt-2 flex gap-2 border-t border-[#1e2130]/50 pt-2 px-3 pb-2">
<button
onClick={(e) => {
e.stopPropagation()