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

36
frontend/src/components/tree-editor/TreeCanvasNode.tsx
View File

@@ -168,7 +168,7 @@ export function TreeCanvasNode({
return (
<div
className={cn(
'relative rounded-xl border border-border bg-card shadow-xs transition-all duration-150',
'relative rounded-xl border border-[#1e2130] bg-[#14161d] shadow-xs transition-all duration-150',
config.borderClass,
isExpanded && 'ring-1 ring-primary shadow-md',
isSelected && !isExpanded && 'ring-1 ring-primary/50',
@@ -186,7 +186,7 @@ export function TreeCanvasNode({
'flex items-center gap-2 px-3 py-2.5',
!isExpanded && 'cursor-pointer hover:bg-accent/50 rounded-t-xl',
!isExpanded && 'rounded-xl',
isExpanded && 'sticky top-0 z-10 bg-card rounded-t-xl'
isExpanded && 'sticky top-0 z-10 bg-[#14161d] rounded-t-xl'
)}
onClick={!isExpanded ? handleCardClick : undefined}
>
@@ -200,20 +200,20 @@ export function TreeCanvasNode({
onDragStart(e, node.id)
}}
>
<GripVertical className="h-4 w-4 text-muted-foreground/50" />
<GripVertical className="h-4 w-4 text-[#848b9b]/50" />
</span>
)}
{/* Node type badge */}
{isRoot ? (
<span className="flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-semibold bg-blue-500/30 text-blue-400 font-label shrink-0">
<span className="flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-semibold bg-blue-500/30 text-blue-400 font-sans text-xs shrink-0">
<Play className="h-3 w-3" />
START
</span>
) : (
<span
className={cn(
'flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-label shrink-0',
'flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-sans text-xs shrink-0',
config.badgeClass
)}
>
@@ -224,21 +224,21 @@ export function TreeCanvasNode({
{/* From-option label */}
{fromOption && (
<span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground truncate max-w-[80px]">
<span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-[#848b9b] truncate max-w-[80px]">
{fromOption}
</span>
)}
{/* Title text (compact mode) */}
{!isExpanded && (
<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]">
{getTitle()}
</span>
)}
{/* Options count badge */}
{!isExpanded && getOptionsSummary() && (
<span className="text-[10px] text-muted-foreground shrink-0 font-label">
<span className="text-[10px] text-[#848b9b] shrink-0 font-sans text-xs">
{getOptionsSummary()}
</span>
)}
@@ -265,7 +265,7 @@ export function TreeCanvasNode({
{/* Unsaved badge */}
{!isExpanded && isNew && (
<span className="rounded bg-yellow-500/20 px-1.5 py-0.5 text-[10px] text-yellow-500 font-label shrink-0">
<span className="rounded bg-yellow-500/20 px-1.5 py-0.5 text-[10px] text-yellow-500 font-sans text-xs shrink-0">
Unsaved
</span>
)}
@@ -276,7 +276,7 @@ export function TreeCanvasNode({
type="button"
onClick={(e) => { e.stopPropagation(); onToggleSubtreeCollapse() }}
title={isSubtreeCollapsed ? 'Expand subtree' : 'Collapse subtree'}
className="rounded p-0.5 text-muted-foreground/50 hover:bg-accent hover:text-foreground shrink-0"
className="rounded p-0.5 text-[#848b9b]/50 hover:bg-accent hover:text-[#e2e5eb] shrink-0"
>
{isSubtreeCollapsed
? <ChevronsUpDown className="h-3.5 w-3.5" />
@@ -287,9 +287,9 @@ export function TreeCanvasNode({
{/* Expand/collapse chevron */}
{!isExpanded ? (
<ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
<ChevronRight className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
) : (
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
<ChevronDown className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
)}
{/* Editing action buttons (expanded state) */}
@@ -297,7 +297,7 @@ export function TreeCanvasNode({
<div className="ml-auto flex items-center gap-1 shrink-0">
{/* New badge */}
{isNew && (
<span className="rounded bg-yellow-500/20 px-1.5 py-0.5 text-[10px] text-yellow-500 font-label">
<span className="rounded bg-yellow-500/20 px-1.5 py-0.5 text-[10px] text-yellow-500 font-sans text-xs">
Unsaved
</span>
)}
@@ -311,7 +311,7 @@ export function TreeCanvasNode({
onDuplicate(node.id)
}}
title="Duplicate node"
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<Copy className="h-3.5 w-3.5" />
</button>
@@ -326,7 +326,7 @@ export function TreeCanvasNode({
onDelete(node.id)
}}
title="Delete node"
className="rounded p-1 text-muted-foreground hover:bg-destructive/20 hover:text-destructive"
className="rounded p-1 text-[#848b9b] hover:bg-destructive/20 hover:text-destructive"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
@@ -337,7 +337,7 @@ export function TreeCanvasNode({
type="button"
onClick={handleCancel}
title={isNew ? 'Cancel (deletes this node)' : 'Cancel changes'}
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<X className="h-3.5 w-3.5" />
</button>
@@ -347,7 +347,7 @@ export function TreeCanvasNode({
type="button"
onClick={handleSave}
title="Save changes"
className="rounded p-1 bg-gradient-brand text-white hover:opacity-90"
className="rounded p-1 bg-[#22d3ee] text-white hover:brightness-110"
>
<Check className="h-3.5 w-3.5" />
</button>
@@ -357,7 +357,7 @@ export function TreeCanvasNode({
{/* Expanded editing area */}
{isExpanded && (
<div className="border-t border-border px-3 pb-3 pt-3 max-h-[70vh] overflow-y-auto">
<div className="border-t border-[#1e2130] px-3 pb-3 pt-3 max-h-[70vh] overflow-y-auto">
{/* Validation errors */}
{(hasError || hasWarning) && (
<div className="mb-3 space-y-1">