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

refactor: migrate page components to Design System v4

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:04:16 -04:00
parent fd28921373
commit e4ef904707
58 changed files with 1416 additions and 1416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -509,9 +509,9 @@ 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-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">
<Monitor className="mb-4 h-12 w-12 text-[#848b9b]" />
<h2 className="mb-2 text-xl font-heading font-semibold text-[#e2e5eb]">Desktop Required</h2>
<p className="mb-6 max-w-sm text-sm text-[#848b9b]">
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')}>
@@ -528,10 +528,10 @@ export function TreeEditorPage() {
{/* Draft Restore Prompt */}
{showDraftPrompt && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
<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">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl w-full max-w-md p-6 shadow-lg">
<h2 className="mb-2 text-lg font-heading font-semibold text-[#e2e5eb]">Restore Draft?</h2>
<p className="mb-4 text-sm text-[#848b9b]">
You have an unsaved draft from a previous session. Would you like to restore it?
</p>
<div className="flex gap-2">
@@ -548,10 +548,10 @@ 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-xs">
<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">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl w-full max-w-md p-6 shadow-lg">
<h2 className="mb-2 text-lg font-heading font-semibold text-[#e2e5eb]">Unsaved Changes</h2>
<p className="mb-4 text-sm text-[#848b9b]">
You have unsaved changes. Are you sure you want to leave?
</p>
<div className="flex gap-2">
@@ -567,17 +567,17 @@ export function TreeEditorPage() {
)}
{/* Toolbar */}
<div className="flex items-center justify-between border-b border-border bg-card px-4 py-2">
<div className="flex items-center justify-between border-b border-[#1e2130] bg-[#14161d] px-4 py-2">
<div className="flex items-center gap-4">
<button
onClick={() => navigate('/trees')}
className="text-sm text-muted-foreground hover:text-foreground"
className="text-sm text-[#848b9b] hover:text-[#e2e5eb]"
>
← Back to Library
</button>
<h1 className="text-lg font-heading font-semibold text-foreground">
<h1 className="text-lg font-heading font-semibold text-[#e2e5eb]">
{isEditMode ? 'Edit Tree' : 'Create New Tree'}
{name && <span className="ml-2 text-muted-foreground">- {name}</span>}
{name && <span className="ml-2 text-[#848b9b]">- {name}</span>}
</h1>
<div className="flex items-center gap-2">
{treeStatus === 'draft' && (
@@ -596,7 +596,7 @@ export function TreeEditorPage() {
<div className="flex items-center gap-2">
{/* Mode Toggle */}
<div className="flex items-center rounded-md border border-border">
<div className="flex items-center rounded-md border border-[#1e2130]">
<button
type="button"
onClick={() => setEditorMode('form')}
@@ -604,8 +604,8 @@ 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-accent text-foreground'
: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
? 'bg-accent text-[#e2e5eb]'
: 'text-[#848b9b] hover:bg-accent/50 hover:text-[#e2e5eb]'
)}
>
<LayoutList className="h-3.5 w-3.5" />
@@ -623,8 +623,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-accent text-foreground'
: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
? 'bg-accent text-[#e2e5eb]'
: 'text-[#848b9b] hover:bg-accent/50 hover:text-[#e2e5eb]'
)}
>
<Code2 className="h-3.5 w-3.5" />
@@ -635,7 +635,7 @@ export function TreeEditorPage() {
<div className="mx-1 h-6 w-px bg-border" />
{/* Undo/Redo */}
<div className="flex items-center rounded-md border border-border">
<div className="flex items-center rounded-md border border-[#1e2130]">
<button
type="button"
onClick={handleUndo}
@@ -644,8 +644,8 @@ export function TreeEditorPage() {
className={cn(
'rounded-l-md p-2 transition-colors',
pastStates.length > 0
? 'text-foreground hover:bg-accent/50 active:bg-accent'
: 'text-muted-foreground/50 cursor-not-allowed'
? 'text-[#e2e5eb] hover:bg-accent/50 active:bg-accent'
: 'text-[#848b9b]/50 cursor-not-allowed'
)}
>
<Undo2 className="h-4 w-4" />
@@ -659,8 +659,8 @@ export function TreeEditorPage() {
className={cn(
'rounded-r-md p-2 transition-colors',
futureStates.length > 0
? 'text-foreground hover:bg-accent/50 active:bg-accent'
: 'text-muted-foreground/50 cursor-not-allowed'
? 'text-[#e2e5eb] hover:bg-accent/50 active:bg-accent'
: 'text-[#848b9b]/50 cursor-not-allowed'
)}
>
<Redo2 className="h-4 w-4" />
@@ -681,10 +681,10 @@ export function TreeEditorPage() {
}}
title="Edit flow metadata (name, description, category, tags)"
className={cn(
'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
'flex items-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium transition-colors',
isMetadataOpen
? 'bg-accent text-foreground'
: 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
? 'bg-accent text-[#e2e5eb]'
: 'bg-[#14161d] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
)}
>
<Settings className="h-4 w-4" />
@@ -698,10 +698,10 @@ export function TreeEditorPage() {
onClick={() => setShowAnalytics(!showAnalytics)}
title="Toggle flow analytics panel"
className={cn(
'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
'flex items-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium transition-colors',
showAnalytics
? 'bg-accent text-foreground'
: 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
? 'bg-accent text-[#e2e5eb]'
: 'bg-[#14161d] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
)}
>
<BarChart3 className="h-4 w-4" />
@@ -715,8 +715,8 @@ export function TreeEditorPage() {
onClick={() => setShowExportModal(true)}
title="Export flow as .rfflow file"
className={cn(
'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'
'flex items-center gap-2 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm font-medium text-[#848b9b]',
'hover:bg-accent hover:text-[#e2e5eb]'
)}
>
<Download className="h-4 w-4" />
@@ -739,10 +739,10 @@ export function TreeEditorPage() {
}}
title="Toggle AI Assist panel"
className={cn(
'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
'flex items-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium transition-colors',
editorAI.isOpen
? 'bg-primary/10 text-primary border-primary/30'
: 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee] border-primary/30'
: 'bg-[#14161d] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
)}
>
<Sparkles className="h-4 w-4" />
@@ -754,8 +754,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-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50'
'flex items-center gap-2 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm font-medium text-[#848b9b]',
'hover:bg-accent hover:text-[#e2e5eb] disabled:opacity-50'
)}
>
<CheckCircle2 className="h-4 w-4" />
@@ -800,7 +800,7 @@ export function TreeEditorPage() {
{/* Import provenance */}
{importMetadata && (
<div className="mx-4 mb-2 flex items-center gap-2 text-xs font-label text-muted-foreground">
<div className="mx-4 mb-2 flex items-center gap-2 text-xs font-sans text-xs text-[#848b9b]">
<FileText className="h-3 w-3" />
<span>
Imported{importMetadata.original_author_name ? ` from ${importMetadata.original_author_name}` : ''}
@@ -825,7 +825,7 @@ export function TreeEditorPage() {
{/* Flow Analytics Panel (collapsible) */}
{showAnalytics && id && (
<div className="border-t border-border p-6 overflow-y-auto max-h-[50vh]">
<div className="border-t border-[#1e2130] p-6 overflow-y-auto max-h-[50vh]">
<FlowAnalyticsPanel treeId={id} />
</div>
)}