diff --git a/frontend/src/pages/MyTreesPage.tsx b/frontend/src/pages/MyTreesPage.tsx index b02c7926..2ae04317 100644 --- a/frontend/src/pages/MyTreesPage.tsx +++ b/frontend/src/pages/MyTreesPage.tsx @@ -1,9 +1,9 @@ -import { useEffect, useState } from 'react' +import { useCallback, useEffect, useState } from 'react' import { useNavigate, Link } from 'react-router-dom' import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree, Plus, ListOrdered, ChevronDown, Wrench, Sparkles } from 'lucide-react' import { treesApi } from '@/api/trees' import { sessionsApi } from '@/api/sessions' -import type { TreeListItem } from '@/types' +import type { TreeListItem, TreeFilters } from '@/types' import { TagBadges } from '@/components/common/TagBadges' import { ConfirmDialog } from '@/components/common/ConfirmDialog' import { ShareTreeModal } from '@/components/library/ShareTreeModal' @@ -22,6 +22,8 @@ interface TreeWithStats extends TreeListItem { parent_tree_name?: string | null } +type Tab = 'mine' | 'team' | 'public' | 'all' + export function MyTreesPage() { const navigate = useNavigate() const { user } = useAuthStore() @@ -36,23 +38,26 @@ export function MyTreesPage() { const [showCreateMenu, setShowCreateMenu] = useState(false) const [showAIBuilder, setShowAIBuilder] = useState(false) const [aiEnabled, setAiEnabled] = useState(false) + const [activeTab, setActiveTab] = useState('mine') + const [forkTarget, setForkTarget] = useState(null) + const [forkReason, setForkReason] = useState('') + const [isForking, setIsForking] = useState(false) - useEffect(() => { - loadMyTrees() - }, [user?.id]) - - useEffect(() => { - aiBuilderApi.getQuota().then((q) => setAiEnabled(q.ai_enabled)).catch(() => {}) - }, []) - - const loadMyTrees = async () => { + const loadTrees = useCallback(async () => { if (!user?.id) return setIsLoading(true) try { - // Fetch trees and recent sessions in parallel (2 API calls total, not N+1) + const params: TreeFilters = { + sort_by: activeTab === 'public' ? 'usage_count' : 'updated_at', + } + if (activeTab === 'mine') params.author_id = user.id + if (activeTab === 'team') params.visibility = 'team' + if (activeTab === 'public') params.visibility = 'public' + // 'all' tab: no author/visibility filter + const [userTrees, recentSessions] = await Promise.all([ - treesApi.list({ author_id: user.id }), - sessionsApi.list({ size: 100 }), + treesApi.list(params), + activeTab === 'mine' ? sessionsApi.list({ size: 100 }) : Promise.resolve([]), ]) // Build a map of tree_id -> most recent session start time @@ -72,12 +77,34 @@ export function MyTreesPage() { setTrees(treesWithStats) } catch (err) { - toast.error('Failed to load your flows') + toast.error('Failed to load flows') console.error(err) } finally { setIsLoading(false) } - } + }, [activeTab, user?.id]) + + useEffect(() => { + loadTrees() + }, [loadTrees]) + + useEffect(() => { + const onFocus = () => loadTrees() + window.addEventListener('focus', onFocus) + return () => window.removeEventListener('focus', onFocus) + }, [loadTrees]) + + useEffect(() => { + aiBuilderApi.getQuota().then((q) => setAiEnabled(q.ai_enabled)).catch(() => {}) + }, []) + + const hasTeam = Boolean(user?.account_id) + const tabs: { id: Tab; label: string }[] = [ + { id: 'mine', label: 'My Flows' }, + ...(hasTeam ? [{ id: 'team' as Tab, label: 'My Team' }] : []), + { id: 'public', label: 'Public' }, + { id: 'all', label: 'All' }, + ] const handleStartSession = (tree: TreeWithStats) => { if (tree.tree_type === 'maintenance') { @@ -111,6 +138,24 @@ export function MyTreesPage() { } } + const handleFork = async () => { + if (!forkTarget) return + setIsForking(true) + try { + const forked = await treesApi.fork(forkTarget.id, { + fork_reason: forkReason.trim() || undefined, + }) + toast.success(`"${forked.name}" added to your flows`) + setForkTarget(null) + setForkReason('') + setActiveTab('mine') + } catch { + toast.error('Failed to fork flow') + } finally { + setIsForking(false) + } + } + const formatDate = (dateString?: string) => { if (!dateString) return 'Never' return new Date(dateString).toLocaleDateString('en-US', { @@ -122,82 +167,105 @@ export function MyTreesPage() { return (
-
+

My Flows

Your forked and custom flows

- {canCreateTrees && ( -
- - {showCreateMenu && ( - <> -
setShowCreateMenu(false)} /> -
- setShowCreateMenu(false)} - className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent" - > - -
-
Troubleshooting Tree
-
Branching decision flow
-
- - setShowCreateMenu(false)} - className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent" - > - -
-
Procedural Flow
-
Step-by-step procedure
-
- - setShowCreateMenu(false)} - className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent" - > - -
-
Maintenance Flow
-
Scheduled multi-target tasks
-
- - {aiEnabled && ( - <> -
- - - )} -
- +
+ + {/* Tab bar */} +
+ {tabs.map((tab) => ( + + ))} + + {/* Create button — only on My Flows tab */} + {activeTab === 'mine' && canCreateTrees && ( +
+
+ + {showCreateMenu && ( + <> +
setShowCreateMenu(false)} /> +
+ setShowCreateMenu(false)} + className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent" + > + +
+
Troubleshooting Tree
+
Branching decision flow
+
+ + setShowCreateMenu(false)} + className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent" + > + +
+
Procedural Flow
+
Step-by-step procedure
+
+ + setShowCreateMenu(false)} + className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent" + > + +
+
Maintenance Flow
+
Scheduled multi-target tasks
+
+ + {aiEnabled && ( + <> +
+ + + )} +
+ + )} +
)}
@@ -210,33 +278,41 @@ export function MyTreesPage() { ) : trees.length === 0 ? (
-

No personal flows yet

+

No flows found

- Fork a flow from the library to customize it for your workflow + {activeTab === 'mine' + ? 'Fork a flow from the library to customize it for your workflow' + : activeTab === 'team' + ? 'No team flows found' + : activeTab === 'public' + ? 'No public flows found' + : 'No flows found'}

-
- - Browse Library - - {canCreateTrees && ( + {activeTab === 'mine' && ( +
- - Create from Scratch + Browse Library - )} -
+ {canCreateTrees && ( + + + Create from Scratch + + )} +
+ )}
) : (
@@ -254,7 +330,14 @@ export function MyTreesPage() { {tree.tree_type === 'maintenance' && ( )} -

{tree.name}

+
+

{tree.name}

+ {tree.author_id !== user?.id && tree.author_name && ( +

+ by {tree.author_name} +

+ )} +
{tree.tree_type === 'procedural' && ( @@ -316,7 +399,7 @@ export function MyTreesPage() {
{/* Actions */} -
+
+ )} + +
+
+
+ )}
) }