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

44
frontend/src/components/procedural-editor/StepList.tsx
View File

@@ -11,7 +11,7 @@ import { cn } from '@/lib/utils'
const contentTypeConfig: Record<StepContentType, { icon: typeof Zap; color: string; label: string }> = {
action: { icon: Zap, color: 'text-blue-400', label: 'Action' },
informational: { icon: Info, color: 'text-muted-foreground', label: 'Info' },
informational: { icon: Info, color: 'text-[#848b9b]', label: 'Info' },
verification: { icon: CheckCircle2, color: 'text-emerald-400', label: 'Verify' },
warning: { icon: AlertTriangle, color: 'text-yellow-400', label: 'Warning' },
}
@@ -104,9 +104,9 @@ export function StepList({ onStepContextMenu }: StepListProps) {
<div>
<div className="mb-4 flex items-center justify-between">
<div className="flex items-center gap-2">
<Shield className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">Steps</h2>
<span className="text-sm text-muted-foreground">
<Shield className="h-5 w-5 text-[#848b9b]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">Steps</h2>
<span className="text-sm text-[#848b9b]">
({procedureSteps.length} step{procedureSteps.length !== 1 ? 's' : ''}
{totalMinutes > 0 ? ` \u00b7 ~${totalMinutes} min` : ''})
</span>
@@ -114,14 +114,14 @@ export function StepList({ onStepContextMenu }: StepListProps) {
<div className="flex items-center gap-2">
<button
onClick={() => addSectionHeader()}
className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
className="flex items-center gap-1.5 rounded-md border border-[#1e2130] px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<SeparatorHorizontal className="h-3.5 w-3.5" />
Add Section
</button>
<button
onClick={() => addStep()}
className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
className="flex items-center gap-1.5 rounded-md border border-[#1e2130] px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<Plus className="h-3.5 w-3.5" />
Add Step
@@ -138,17 +138,17 @@ export function StepList({ onStepContextMenu }: StepListProps) {
return (
<div
key={step.id}
className="flex items-center gap-2 rounded-lg border border-dashed border-border bg-accent/50 px-3 py-2"
className="flex items-center gap-2 rounded-lg border border-dashed border-[#1e2130] bg-accent/50 px-3 py-2"
>
<CheckCircle2 className="h-4 w-4 text-emerald-400/50" />
<input
type="text"
value={step.title}
onChange={(e) => updateStep(step.id, { title: e.target.value })}
className="flex-1 bg-transparent text-sm text-muted-foreground focus:outline-hidden"
className="flex-1 bg-transparent text-sm text-[#848b9b] focus:outline-hidden"
placeholder="Procedure Complete"
/>
<span className="text-[10px] text-muted-foreground">END</span>
<span className="text-[10px] text-[#848b9b]">END</span>
</div>
)
}
@@ -178,24 +178,24 @@ export function StepList({ onStepContextMenu }: StepListProps) {
return (
<SortableStepWrapper key={step.id} id={step.id}>
{({ dragHandleProps }) => (
<div className="group flex items-center gap-2 border-b border-border pb-1 pt-3" data-step-id={step.id}>
<div className="group flex items-center gap-2 border-b border-[#1e2130] pb-1 pt-3" data-step-id={step.id}>
<button
type="button"
className="shrink-0 cursor-grab touch-none text-muted-foreground active:cursor-grabbing"
className="shrink-0 cursor-grab touch-none text-[#848b9b] active:cursor-grabbing"
aria-label={`Drag to reorder section: ${step.title || 'Untitled Section'}`}
{...dragHandleProps}
>
<GripVertical className="h-4 w-4" />
</button>
<span
className="min-w-0 flex-1 cursor-pointer text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-muted-foreground"
className="min-w-0 flex-1 cursor-pointer text-xs font-semibold uppercase tracking-wider text-[#848b9b] hover:text-[#848b9b]"
onClick={() => setExpandedStepId(step.id)}
>
{step.title || 'Untitled Section'}
</span>
<button
onClick={() => removeStep(step.id)}
className="shrink-0 rounded p-1 text-muted-foreground opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
className="shrink-0 rounded p-1 text-[#848b9b] opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
@@ -237,7 +237,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
{({ dragHandleProps }) => (
<div
className={cn(
'group flex flex-col rounded-xl border border-border px-3 py-2.5 transition-colors',
'group flex flex-col rounded-xl border border-[#1e2130] px-3 py-2.5 transition-colors',
'hover:border-primary/30 hover:bg-accent/50',
isGhost && 'border-l-2 border-dashed border-l-primary/40! opacity-60'
)}
@@ -247,14 +247,14 @@ export function StepList({ onStepContextMenu }: StepListProps) {
<div className="flex items-center gap-2">
<button
type="button"
className="shrink-0 cursor-grab touch-none text-muted-foreground active:cursor-grabbing"
className="shrink-0 cursor-grab touch-none text-[#848b9b] active:cursor-grabbing"
aria-label={`Drag to reorder step ${stepNumber}: ${step.title || 'Untitled step'}`}
{...dragHandleProps}
>
<GripVertical className="h-4 w-4" />
</button>
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-xs font-medium text-muted-foreground">
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-xs font-medium text-[#848b9b]">
{stepNumber}
</span>
@@ -263,35 +263,35 @@ export function StepList({ onStepContextMenu }: StepListProps) {
</span>
<span
className="min-w-0 flex-1 cursor-pointer truncate text-sm text-foreground"
className="min-w-0 flex-1 cursor-pointer truncate text-sm text-[#e2e5eb]"
onClick={() => setExpandedStepId(step.id)}
>
{step.title || 'Untitled step'}
</span>
{step.estimated_minutes && (
<span className="shrink-0 text-[10px] text-muted-foreground">
<span className="shrink-0 text-[10px] text-[#848b9b]">
~{step.estimated_minutes}m
</span>
)}
<button
onClick={() => setExpandedStepId(step.id)}
className="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
className="shrink-0 rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<ChevronDown className="h-3.5 w-3.5" />
</button>
<button
onClick={() => removeStep(step.id)}
className="shrink-0 rounded p-1 text-muted-foreground opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
className="shrink-0 rounded p-1 text-[#848b9b] opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
</div>
{isGhost && (
<div className="mt-2 flex gap-2 border-t border-border/50 pt-2">
<div className="mt-2 flex gap-2 border-t border-[#1e2130]/50 pt-2">
<button
onClick={(e) => {
e.stopPropagation()
@@ -324,7 +324,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
{/* Add step button at bottom */}
<button
onClick={() => addStep()}
className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-border py-2 text-sm text-muted-foreground transition-colors hover:border-primary/30 hover:text-muted-foreground"
className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-[#1e2130] py-2 text-sm text-[#848b9b] transition-colors hover:border-primary/30 hover:text-[#848b9b]"
>
<Plus className="h-3.5 w-3.5" />
Add Step