From a3364bafdae71f295d2390c4e9d6f0c9f88ade10 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sun, 15 Feb 2026 19:37:22 -0500
Subject: [PATCH] refactor: migrate TreeEditorPage to new design system

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/TreeEditorPage.tsx | 92 +++++++++++++--------------
 1 file changed, 46 insertions(+), 46 deletions(-)

diff --git a/frontend/src/pages/TreeEditorPage.tsx b/frontend/src/pages/TreeEditorPage.tsx
index c0c93519..7afd3b62 100644
--- a/frontend/src/pages/TreeEditorPage.tsx
+++ b/frontend/src/pages/TreeEditorPage.tsx
@@ -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" />