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