From 757ce6306cae757381ab140a568c07bf59a9462c Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Thu, 19 Feb 2026 01:44:51 -0500
Subject: [PATCH] fix: add dark class to ReactFlow and fix editor routing for
 procedural flows

ReactFlow v12 requires a 'dark' CSS class on the component to activate
dark theme variables. Without it, controls SVGs are invisible (dark on
dark) and the minimap mask uses white (light theme default).

Also fix library views (table, grid, list) to use getTreeEditorPath()
instead of hardcoding /trees/:id/edit, which sent procedural/maintenance
flows to the wrong editor.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/library/TreeGridView.tsx   | 3 ++-
 frontend/src/components/library/TreeListView.tsx   | 3 ++-
 frontend/src/components/library/TreeTableView.tsx  | 3 ++-
 frontend/src/components/tree-editor/FlowCanvas.tsx | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/library/TreeGridView.tsx b/frontend/src/components/library/TreeGridView.tsx
index c752007f..9ad45398 100644
--- a/frontend/src/components/library/TreeGridView.tsx
+++ b/frontend/src/components/library/TreeGridView.tsx
@@ -4,6 +4,7 @@ import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { cn } from '@/lib/utils'
 import { usePermissions } from '@/hooks/usePermissions'
+import { getTreeEditorPath } from '@/lib/routing'
 
 interface TreeGridViewProps {
   trees: TreeListItem[]
@@ -95,7 +96,7 @@ export function TreeGridView({
               )}
               {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
                 <Link
-                  to={`/trees/${tree.id}/edit`}
+                  to={getTreeEditorPath(tree.id, tree.tree_type)}
                   className={cn(
                     'rounded-md border border-border p-2 text-muted-foreground',
                     'hover:bg-accent hover:text-foreground'
diff --git a/frontend/src/components/library/TreeListView.tsx b/frontend/src/components/library/TreeListView.tsx
index d168a159..ff2bd94a 100644
--- a/frontend/src/components/library/TreeListView.tsx
+++ b/frontend/src/components/library/TreeListView.tsx
@@ -4,6 +4,7 @@ import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { cn } from '@/lib/utils'
 import { usePermissions } from '@/hooks/usePermissions'
+import { getTreeEditorPath } from '@/lib/routing'
 
 interface TreeListViewProps {
   trees: TreeListItem[]
@@ -100,7 +101,7 @@ export function TreeListView({
               {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
                 <>
                   <Link
-                    to={`/trees/${tree.id}/edit`}
+                    to={getTreeEditorPath(tree.id, tree.tree_type)}
                     className={cn(
                       'rounded-md border border-border p-1.5 text-muted-foreground',
                       'hover:bg-accent hover:text-foreground'
diff --git a/frontend/src/components/library/TreeTableView.tsx b/frontend/src/components/library/TreeTableView.tsx
index 61bc499a..bddf3e6d 100644
--- a/frontend/src/components/library/TreeTableView.tsx
+++ b/frontend/src/components/library/TreeTableView.tsx
@@ -5,6 +5,7 @@ import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { cn } from '@/lib/utils'
 import { usePermissions } from '@/hooks/usePermissions'
+import { getTreeEditorPath } from '@/lib/routing'
 
 interface TreeTableViewProps {
   trees: TreeListItem[]
@@ -204,7 +205,7 @@ export function TreeTableView({
                   {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
                     <>
                       <Link
-                        to={`/trees/${tree.id}/edit`}
+                        to={getTreeEditorPath(tree.id, tree.tree_type)}
                         className={cn(
                           'rounded-md border border-border p-1.5 text-muted-foreground',
                           'hover:bg-accent hover:text-foreground'
diff --git a/frontend/src/components/tree-editor/FlowCanvas.tsx b/frontend/src/components/tree-editor/FlowCanvas.tsx
index c8a9ef0f..5a467c11 100644
--- a/frontend/src/components/tree-editor/FlowCanvas.tsx
+++ b/frontend/src/components/tree-editor/FlowCanvas.tsx
@@ -136,7 +136,7 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType }: F
         nodesDraggable={false}
         nodesConnectable={false}
         proOptions={{ hideAttribution: true }}
-        className="bg-accent/30"
+        className="dark bg-accent/30"
       >
         <Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="hsl(var(--muted-foreground) / 0.25)" />
         <Controls showInteractive={false} className="!bg-card !border-border !shadow-lg" />
-- 
2.49.1