From 0128aeb58854376c8ef92ce22e6fcfd85c84af9f Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Wed, 25 Feb 2026 00:16:37 -0500
Subject: [PATCH] feat: open ForkModal on fork action in TreeLibraryPage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/TreeLibraryPage.tsx | 29 +++++++++++++-------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/TreeLibraryPage.tsx b/frontend/src/pages/TreeLibraryPage.tsx
index 0132cbfe..12e08e2f 100644
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -7,6 +7,7 @@ import { foldersApi } from '@/api/folders'
 import { sessionsApi } from '@/api/sessions'
 import type { TreeListItem, CategoryListItem, FolderListItem, Session } from '@/types'
 import { FolderEditModal } from '@/components/library/FolderEditModal'
+import { ForkModal } from '@/components/library/ForkModal'
 import { ConfirmDialog } from '@/components/common/ConfirmDialog'
 import { TreeGridView } from '@/components/library/TreeGridView'
 import { TreeListView } from '@/components/library/TreeListView'
@@ -72,8 +73,8 @@ export function TreeLibraryPage() {
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
 
-  // Fork state
-  const [isForkingTree, setIsForkingTree] = useState(false)
+  // Fork modal state
+  const [forkTarget, setForkTarget] = useState<TreeListItem | null>(null)
 
   // AI builder state
   const [showAIBuilder, setShowAIBuilder] = useState(false)
@@ -244,19 +245,9 @@ export function TreeLibraryPage() {
     }
   }
 
-  const handleForkTree = async (treeId: string) => {
-    if (isForkingTree) return
-    setIsForkingTree(true)
-    try {
-      await treesApi.fork(treeId)
-      toast.success('Flow forked successfully')
-      navigate('/my-trees')
-    } catch (err) {
-      console.error('Failed to fork flow:', err)
-      toast.error('Failed to fork flow')
-    } finally {
-      setIsForkingTree(false)
-    }
+  const handleForkTree = (treeId: string) => {
+    const tree = trees.find((t) => t.id === treeId)
+    if (tree) setForkTarget(tree)
   }
 
   const hasActiveFilters =
@@ -572,6 +563,14 @@ export function TreeLibraryPage() {
           onClose={() => setShowAIBuilder(false)}
         />
       )}
+
+      {forkTarget && (
+        <ForkModal
+          treeId={forkTarget.id}
+          treeName={forkTarget.name}
+          onClose={() => setForkTarget(null)}
+        />
+      )}
     </div>
   )
 }