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

refactor: migrate TreeEditorPage to new design system

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-15 19:37:22 -05:00
parent 1364f70ca7
commit a3364bafda
1 changed files with 46 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/pages/TreeEditorPage.tsx
View File

@@ -345,7 +345,7 @@ export function TreeEditorPage() {
if (isLoading) {
return (
<div className="flex h-64 items-center justify-center">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
<div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
</div>
)
}
@@ -354,16 +354,16 @@ export function TreeEditorPage() {
if (isMobile) {
return (
<div className="flex h-full flex-col items-center justify-center px-6 text-center">
<Monitor className="mb-4 h-12 w-12 text-white/50" />
<h2 className="mb-2 text-xl font-semibold text-white">Desktop Required</h2>
<p className="mb-6 max-w-sm text-sm text-white/40">
<Monitor className="mb-4 h-12 w-12 text-muted-foreground" />
<h2 className="mb-2 text-xl font-heading font-semibold text-foreground">Desktop Required</h2>
<p className="mb-6 max-w-sm text-sm text-muted-foreground">
The tree editor requires a larger screen for the best experience. Please open this page on a desktop or tablet in landscape mode.
</p>
<button
onClick={() => navigate('/trees')}
className={cn(
'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90'
'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
Back to Library
@@ -378,17 +378,17 @@ export function TreeEditorPage() {
{/* Draft Restore Prompt */}
{showDraftPrompt && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
<div className="glass-card rounded-2xl w-full max-w-md p-6 shadow-lg">
<h2 className="mb-2 text-lg font-semibold text-white">Restore Draft?</h2>
<p className="mb-4 text-sm text-white/40">
<div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
<h2 className="mb-2 text-lg font-heading font-semibold text-foreground">Restore Draft?</h2>
<p className="mb-4 text-sm text-muted-foreground">
You have an unsaved draft from a previous session. Would you like to restore it?
</p>
<div className="flex gap-2">
<button
onClick={handleRestoreDraft}
className={cn(
'flex-1 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90'
'flex-1 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
Restore Draft
@@ -396,8 +396,8 @@ export function TreeEditorPage() {
<button
onClick={handleDiscardDraft}
className={cn(
'flex-1 rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
'hover:bg-white/10 hover:text-white'
'flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
Start Fresh
@@ -410,17 +410,17 @@ export function TreeEditorPage() {
{/* Unsaved Changes Dialog */}
{blocker.state === 'blocked' && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
<div className="glass-card rounded-2xl w-full max-w-md p-6 shadow-lg">
<h2 className="mb-2 text-lg font-semibold text-white">Unsaved Changes</h2>
<p className="mb-4 text-sm text-white/40">
<div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
<h2 className="mb-2 text-lg font-heading font-semibold text-foreground">Unsaved Changes</h2>
<p className="mb-4 text-sm text-muted-foreground">
You have unsaved changes. Are you sure you want to leave?
</p>
<div className="flex gap-2">
<button
onClick={handleBlockerReset}
className={cn(
'flex-1 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90'
'flex-1 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
Stay
@@ -428,8 +428,8 @@ export function TreeEditorPage() {
<button
onClick={handleBlockerProceed}
className={cn(
'flex-1 rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-red-400',
'hover:bg-white/10'
'flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-red-400',
'hover:bg-accent'
)}
>
Leave Without Saving
@@ -440,27 +440,27 @@ export function TreeEditorPage() {
)}
{/* Toolbar */}
<div className="flex items-center justify-between border-b border-white/[0.06] bg-black px-4 py-2">
<div className="flex items-center justify-between border-b border-border bg-card px-4 py-2">
<div className="flex items-center gap-4">
<button
onClick={() => navigate('/trees')}
className="text-sm text-white/50 hover:text-white"
className="text-sm text-muted-foreground hover:text-foreground"
>
← Back to Library
</button>
<h1 className="text-lg font-semibold text-white">
<h1 className="text-lg font-heading font-semibold text-foreground">
{isEditMode ? 'Edit Tree' : 'Create New Tree'}
{name && <span className="ml-2 text-white/40">- {name}</span>}
{name && <span className="ml-2 text-muted-foreground">- {name}</span>}
</h1>
<div className="flex items-center gap-2">
{treeStatus === 'draft' && (
<span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
<span className="inline-flex items-center gap-1 rounded-full bg-yellow-900/30 px-2 py-0.5 text-xs font-medium text-yellow-400 border border-yellow-500/20">
<FileText className="h-3 w-3" />
Draft
</span>
)}
{isDirty && (
<span className="rounded-full bg-yellow-500/20 px-2 py-0.5 text-xs text-yellow-600 dark:text-yellow-400">
<span className="rounded-full bg-yellow-500/20 px-2 py-0.5 text-xs text-yellow-400">
Unsaved
</span>
)}
@@ -469,7 +469,7 @@ export function TreeEditorPage() {
<div className="flex items-center gap-2">
{/* Mode Toggle */}
<div className="flex items-center rounded-md border border-white/[0.06]">
<div className="flex items-center rounded-md border border-border">
<button
type="button"
onClick={() => setEditorMode('form')}
@@ -477,14 +477,14 @@ export function TreeEditorPage() {
className={cn(
'flex items-center gap-1.5 rounded-l-md px-3 py-1.5 text-xs font-medium transition-colors',
editorMode === 'form'
? 'bg-white/10 text-white'
: 'text-white/40 hover:bg-white/[0.06] hover:text-white/60'
? 'bg-accent text-foreground'
: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
)}
>
<LayoutList className="h-3.5 w-3.5" />
Flow
</button>
<div className="h-5 w-px bg-white/[0.06]" />
<div className="h-5 w-px bg-border" />
<button
type="button"
onClick={() => setEditorMode('code')}
@@ -492,8 +492,8 @@ export function TreeEditorPage() {
className={cn(
'flex items-center gap-1.5 rounded-r-md px-3 py-1.5 text-xs font-medium transition-colors',
editorMode === 'code'
? 'bg-white/10 text-white'
: 'text-white/40 hover:bg-white/[0.06] hover:text-white/60'
? 'bg-accent text-foreground'
: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
)}
>
<Code2 className="h-3.5 w-3.5" />
@@ -501,10 +501,10 @@ export function TreeEditorPage() {
</button>
</div>
<div className="mx-1 h-6 w-px bg-white/[0.06]" />
<div className="mx-1 h-6 w-px bg-border" />
{/* Undo/Redo */}
<div className="flex items-center rounded-md border border-white/[0.06]">
<div className="flex items-center rounded-md border border-border">
<button
type="button"
onClick={handleUndo}
@@ -513,13 +513,13 @@ export function TreeEditorPage() {
className={cn(
'rounded-l-md p-2 transition-colors',
pastStates.length > 0
? 'text-white hover:bg-white/[0.06] active:bg-white/[0.12]'
: 'text-white/20 cursor-not-allowed'
? 'text-foreground hover:bg-accent/50 active:bg-accent'
: 'text-muted-foreground/50 cursor-not-allowed'
)}
>
<Undo2 className="h-4 w-4" />
</button>
<div className="h-6 w-px bg-white/[0.06]" />
<div className="h-6 w-px bg-border" />
<button
type="button"
onClick={handleRedo}
@@ -528,15 +528,15 @@ export function TreeEditorPage() {
className={cn(
'rounded-r-md p-2 transition-colors',
futureStates.length > 0
? 'text-white hover:bg-white/[0.06] active:bg-white/[0.12]'
: 'text-white/20 cursor-not-allowed'
? 'text-foreground hover:bg-accent/50 active:bg-accent'
: 'text-muted-foreground/50 cursor-not-allowed'
)}
>
<Redo2 className="h-4 w-4" />
</button>
</div>
<div className="mx-2 h-6 w-px bg-white/[0.06]" />
<div className="mx-2 h-6 w-px bg-border" />
{/* Validate */}
<button
@@ -544,8 +544,8 @@ export function TreeEditorPage() {
disabled={isSaving}
title="Validate tree structure (checks for errors and warnings)"
className={cn(
'flex items-center gap-2 rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm font-medium text-white/60',
'hover:bg-white/10 hover:text-white disabled:opacity-50'
'flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50'
)}
>
<CheckCircle2 className="h-4 w-4" />
@@ -558,8 +558,8 @@ export function TreeEditorPage() {
disabled={isSaving || !isDirty}
title="Save as draft (Ctrl+S when draft or has errors)"
className={cn(
'flex items-center gap-2 rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm font-medium text-white/60',
'hover:bg-white/10 hover:text-white disabled:opacity-50 disabled:cursor-not-allowed'
'flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
<Save className="h-4 w-4" />
@@ -572,8 +572,8 @@ export function TreeEditorPage() {
disabled={isSaving || !isDirty || hasBlockingErrors}
title={hasBlockingErrors ? 'Fix validation errors before publishing (Ctrl+S when no errors)' : 'Publish tree (Ctrl+S when no errors)'}
className={cn(
'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed'
'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
<CheckCircle2 className="h-4 w-4" />