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

28
frontend/src/components/tree-editor/TreeCanvas.tsx
View File

@@ -64,14 +64,14 @@ interface AddNodePickerProps {
function AddNodePicker({ onSelect, onCancel }: AddNodePickerProps) {
return (
<div className="flex items-center gap-2 rounded-xl border border-dashed border-primary/40 bg-card px-3 py-2 shadow-xs">
<span className="text-xs text-muted-foreground shrink-0">Add:</span>
<div className="flex items-center gap-2 rounded-xl border border-dashed border-primary/40 bg-[#14161d] px-3 py-2 shadow-xs">
<span className="text-xs text-[#848b9b] shrink-0">Add:</span>
<button
type="button"
onClick={() => onSelect('decision')}
className={cn(
'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-label',
'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-sans text-xs',
'border border-blue-500/30 bg-blue-500/10 text-blue-400 hover:bg-blue-500/20'
)}
>
@@ -83,7 +83,7 @@ function AddNodePicker({ onSelect, onCancel }: AddNodePickerProps) {
type="button"
onClick={() => onSelect('action')}
className={cn(
'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-label',
'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-sans text-xs',
'border border-yellow-500/30 bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20'
)}
>
@@ -95,7 +95,7 @@ function AddNodePicker({ onSelect, onCancel }: AddNodePickerProps) {
type="button"
onClick={() => onSelect('solution')}
className={cn(
'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-label',
'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-sans text-xs',
'border border-green-500/30 bg-green-500/10 text-green-400 hover:bg-green-500/20'
)}
>
@@ -106,7 +106,7 @@ function AddNodePicker({ onSelect, onCancel }: AddNodePickerProps) {
<button
type="button"
onClick={onCancel}
className="ml-1 rounded p-0.5 text-muted-foreground hover:bg-accent"
className="ml-1 rounded p-0.5 text-[#848b9b] hover:bg-accent"
>
<X className="h-3 w-3" />
</button>
@@ -127,9 +127,9 @@ function AddNodeButton({ label = 'Add node', onClick }: AddNodeButtonProps) {
type="button"
onClick={onClick}
className={cn(
'flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-label',
'border border-dashed border-border text-muted-foreground',
'hover:border-primary/40 hover:text-foreground hover:bg-accent/50',
'flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-sans text-xs',
'border border-dashed border-[#1e2130] text-[#848b9b]',
'hover:border-primary/40 hover:text-[#e2e5eb] hover:bg-accent/50',
'transition-all duration-150'
)}
>
@@ -505,7 +505,7 @@ export function TreeCanvas() {
{/* Option label tag (above card, shown when this is a branch from a decision) */}
{optionLabel && (
<div className="mb-1 rounded bg-muted px-2 py-0.5 text-[10px] text-muted-foreground font-label">
<div className="mb-1 rounded bg-muted px-2 py-0.5 text-[10px] text-[#848b9b] font-sans text-xs">
{optionLabel}
</div>
)}
@@ -547,7 +547,7 @@ export function TreeCanvas() {
return (
<div key={opt.id} className="flex flex-col items-center gap-1">
<div className="h-4 w-px bg-border" />
<span className="text-[10px] text-muted-foreground font-label">
<span className="text-[10px] text-[#848b9b] font-sans text-xs">
{opt.label || '(unlabeled option)'}
</span>
{pendingAddKey === key ? (
@@ -594,7 +594,7 @@ export function TreeCanvas() {
<button
type="button"
onClick={() => handleToggleSubtreeCollapse(node.id)}
className="rounded-full border border-dashed border-border bg-card px-3 py-1 text-[10px] text-muted-foreground font-label hover:border-primary/40 hover:text-foreground transition-colors"
className="rounded-full border border-dashed border-[#1e2130] bg-[#14161d] px-3 py-1 text-[10px] text-[#848b9b] font-sans text-xs hover:border-primary/40 hover:text-[#e2e5eb] transition-colors"
>
{orderedChildren.length} node{orderedChildren.length !== 1 ? 's' : ''} hidden — click to expand
</button>
@@ -676,7 +676,7 @@ export function TreeCanvas() {
return (
<div className="flex h-full items-center justify-center">
<div className="text-center">
<div className="mb-2 text-muted-foreground text-sm">
<div className="mb-2 text-[#848b9b] text-sm">
No tree structure. Start by saving a tree name.
</div>
</div>
@@ -698,7 +698,7 @@ export function TreeCanvas() {
<div className="flex min-h-full min-w-full items-start justify-center p-8 pb-24">
<div className="flex flex-col items-center">
{/* START badge above root */}
<div className="mb-2 rounded-full border border-border bg-card px-3 py-1 text-xs font-label text-muted-foreground">
<div className="mb-2 rounded-full border border-[#1e2130] bg-[#14161d] px-3 py-1 text-xs font-sans text-xs text-[#848b9b]">
START
</div>
<div className="mb-1 h-4 w-px bg-border" />