ed4ab059bf
- AI flow builder: scaffold → branch detail → assemble → review flow - Generate All one-click branch generation with stop/cancel - Regenerate scaffold suggestions button - 3-action review screen: Start Flow, Open in Editor, Build Another - Fix Publish button gated behind !isDirty - Fix visibility column enforcement in tree access filter - Add ?visibility filter and author_name to GET /trees - Dashboard tabbed flows: My Flows / My Team / Public / All - Create button in My Flows tab, window focus reload (stale data fix) - Fork UI with optional reason modal - Fix account_id nullability in User type and schema - Keep is_public and visibility in sync on updates Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
620 lines
24 KiB
TypeScript
620 lines
24 KiB
TypeScript
import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { Search, Loader2, Star, ChevronLeft, ChevronRight, GitBranch } from 'lucide-react'
|
|
import { treesApi } from '@/api/trees'
|
|
import { sessionsApi } from '@/api/sessions'
|
|
import type { TreeListItem, TreeFilters } from '@/types'
|
|
import type { Session } from '@/types/session'
|
|
import { getTreeNavigatePath } from '@/lib/routing'
|
|
import { usePermissions } from '@/hooks/usePermissions'
|
|
import { useAuthStore } from '@/store/authStore'
|
|
import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
|
|
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
|
|
import { usePaginationParams } from '@/hooks/usePaginationParams'
|
|
import { useCachedQuota } from '@/hooks/useCachedQuota'
|
|
import { QuickStats } from '@/components/dashboard/QuickStats'
|
|
import { SessionsPanel } from '@/components/dashboard/SessionsPanel'
|
|
import { TreeGridView } from '@/components/library/TreeGridView'
|
|
import { TreeListView } from '@/components/library/TreeListView'
|
|
import { TreeTableView } from '@/components/library/TreeTableView'
|
|
import { ViewToggle } from '@/components/library/ViewToggle'
|
|
import { AIFlowBuilderModal } from '@/components/ai-builder/AIFlowBuilderModal'
|
|
import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
|
|
import { cn } from '@/lib/utils'
|
|
import { toast } from '@/lib/toast'
|
|
|
|
function timeAgo(dateStr: string): string {
|
|
const now = Date.now()
|
|
const then = new Date(dateStr).getTime()
|
|
const diffMs = now - then
|
|
const minutes = Math.floor(diffMs / 60000)
|
|
if (minutes < 1) return 'just now'
|
|
if (minutes < 60) return `${minutes}m ago`
|
|
const hours = Math.floor(minutes / 60)
|
|
if (hours < 24) return `${hours}h ago`
|
|
const days = Math.floor(hours / 24)
|
|
if (days === 1) return 'Yesterday'
|
|
return `${days}d ago`
|
|
}
|
|
|
|
export function QuickStartPage() {
|
|
const navigate = useNavigate()
|
|
const { canCreateTrees } = usePermissions()
|
|
const user = useAuthStore((s) => s.user)
|
|
|
|
// Search state
|
|
const [query, setQuery] = useState('')
|
|
const [searchResults, setSearchResults] = useState<TreeListItem[]>([])
|
|
const [isSearching, setIsSearching] = useState(false)
|
|
const [showResults, setShowResults] = useState(false)
|
|
const searchRef = useRef<HTMLDivElement>(null)
|
|
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
|
|
|
// Sessions state
|
|
const [activeSessions, setActiveSessions] = useState<Session[]>([])
|
|
const [allSessions, setAllSessions] = useState<Session[]>([])
|
|
|
|
// My Flows state
|
|
const [myFlows, setMyFlows] = useState<TreeListItem[]>([])
|
|
const [isLoadingFlows, setIsLoadingFlows] = useState(true)
|
|
const [hasNextPage, setHasNextPage] = useState(false)
|
|
const [allFlowsCeiling, setAllFlowsCeiling] = useState(false)
|
|
|
|
// Favorites state
|
|
const [showAllFavorites, setShowAllFavorites] = useState(false)
|
|
|
|
// AI Builder
|
|
const [showAIBuilder, setShowAIBuilder] = useState(false)
|
|
const { aiEnabled } = useCachedQuota()
|
|
|
|
// Tab state
|
|
type Tab = 'mine' | 'team' | 'public' | 'all'
|
|
const hasTeam = Boolean(user?.account_id)
|
|
const [activeTab, setActiveTab] = useState<Tab>('mine')
|
|
|
|
// Fork modal state
|
|
const [forkTarget, setForkTarget] = useState<TreeListItem | null>(null)
|
|
const [forkReason, setForkReason] = useState('')
|
|
const [isForking, setIsForking] = useState(false)
|
|
|
|
// Pin store
|
|
const pinnedItems = usePinnedFlowsStore((s) => s.items)
|
|
const pinnedIsLoading = usePinnedFlowsStore((s) => s.isLoading)
|
|
const loadPinned = usePinnedFlowsStore((s) => s.load)
|
|
const isMutatingByTreeId = usePinnedFlowsStore((s) => s.isMutatingByTreeId)
|
|
const togglePin = usePinnedFlowsStore((s) => s.toggle)
|
|
|
|
const pinnedTreeIds = useMemo(() => new Set(pinnedItems.map((f) => f.tree_id)), [pinnedItems])
|
|
const pinLoadingTreeIds = useMemo(
|
|
() => new Set(Object.entries(isMutatingByTreeId).filter(([, v]) => v).map(([k]) => k)),
|
|
[isMutatingByTreeId]
|
|
)
|
|
|
|
// Preferences
|
|
const { dashboardMyFlowsView, setDashboardMyFlowsView } = useUserPreferencesStore()
|
|
|
|
// Pagination
|
|
const { page, pageSize, setPage, setPageSize } = usePaginationParams({
|
|
defaultPageSize: 10,
|
|
allowedPageSizes: [10, 25, 50, 'all'],
|
|
})
|
|
|
|
// Load pinned flows
|
|
useEffect(() => { loadPinned() }, [loadPinned])
|
|
|
|
// Load sessions on mount
|
|
useEffect(() => {
|
|
Promise.all([
|
|
sessionsApi.list({ completed: false, size: 5 }).catch(() => []),
|
|
sessionsApi.list({ size: 10 }).catch(() => []),
|
|
]).then(([active, recent]) => {
|
|
setActiveSessions(active)
|
|
setAllSessions(recent)
|
|
})
|
|
}, [])
|
|
|
|
// Load flows — tab-aware
|
|
const loadFlows = useCallback(async () => {
|
|
if (!user?.id) return
|
|
setIsLoadingFlows(true)
|
|
setAllFlowsCeiling(false)
|
|
|
|
try {
|
|
if (pageSize === 'all') {
|
|
let allItems: TreeListItem[] = []
|
|
let skip = 0
|
|
const CHUNK = 100
|
|
const MAX = 500
|
|
|
|
while (true) {
|
|
const params: TreeFilters = { sort_by: 'updated_at', limit: CHUNK, skip }
|
|
if (activeTab === 'mine') params.author_id = user.id
|
|
if (activeTab === 'team') params.visibility = 'team'
|
|
if (activeTab === 'public') { params.visibility = 'public'; params.sort_by = 'usage_count' }
|
|
|
|
const chunk = await treesApi.list(params)
|
|
allItems = [...allItems, ...chunk]
|
|
if (chunk.length < CHUNK || allItems.length >= MAX) {
|
|
if (allItems.length >= MAX) { allItems = allItems.slice(0, MAX); setAllFlowsCeiling(true) }
|
|
break
|
|
}
|
|
skip += CHUNK
|
|
}
|
|
setMyFlows(allItems)
|
|
setHasNextPage(false)
|
|
} else {
|
|
const numSize = pageSize as number
|
|
const params: TreeFilters = {
|
|
sort_by: activeTab === 'public' ? 'usage_count' : 'updated_at',
|
|
limit: numSize + 1,
|
|
skip: (page - 1) * numSize,
|
|
}
|
|
if (activeTab === 'mine') params.author_id = user.id
|
|
if (activeTab === 'team') params.visibility = 'team'
|
|
if (activeTab === 'public') params.visibility = 'public'
|
|
|
|
const response = await treesApi.list(params)
|
|
setHasNextPage(response.length > numSize)
|
|
setMyFlows(response.slice(0, numSize))
|
|
}
|
|
} catch {
|
|
// silently fail
|
|
} finally {
|
|
setIsLoadingFlows(false)
|
|
}
|
|
}, [user?.id, page, pageSize, activeTab])
|
|
|
|
useEffect(() => { loadFlows() }, [loadFlows])
|
|
|
|
// Reload on window focus (fixes stale data after returning from editor)
|
|
useEffect(() => {
|
|
const onFocus = () => loadFlows()
|
|
window.addEventListener('focus', onFocus)
|
|
return () => window.removeEventListener('focus', onFocus)
|
|
}, [loadFlows])
|
|
|
|
// Debounced search
|
|
useEffect(() => {
|
|
if (debounceRef.current) clearTimeout(debounceRef.current)
|
|
if (query.length < 2) {
|
|
setSearchResults([])
|
|
setShowResults(false)
|
|
setIsSearching(false)
|
|
return
|
|
}
|
|
setIsSearching(true)
|
|
setShowResults(true)
|
|
debounceRef.current = setTimeout(async () => {
|
|
try {
|
|
const results = await treesApi.search(query, 8)
|
|
setSearchResults(results)
|
|
} catch {
|
|
setSearchResults([])
|
|
} finally {
|
|
setIsSearching(false)
|
|
}
|
|
}, 300)
|
|
return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
|
|
}, [query])
|
|
|
|
// Close search dropdown on outside click
|
|
useEffect(() => {
|
|
function handleClick(e: MouseEvent) {
|
|
if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
|
|
setShowResults(false)
|
|
}
|
|
}
|
|
document.addEventListener('mousedown', handleClick)
|
|
return () => document.removeEventListener('mousedown', handleClick)
|
|
}, [])
|
|
|
|
// Stats
|
|
const openSessions = activeSessions.length
|
|
const todaySessions = allSessions.filter(s => {
|
|
const d = new Date(s.started_at)
|
|
const now = new Date()
|
|
return d.toDateString() === now.toDateString()
|
|
}).length
|
|
const completedSessions = allSessions.filter(s => s.completed_at).length
|
|
|
|
const recentSessionItems = allSessions.slice(0, 5).map(s => ({
|
|
id: s.id,
|
|
treeName: s.tree_snapshot?.name || 'Unknown',
|
|
status: (s.completed_at ? 'completed' : 'in_progress') as 'completed' | 'in_progress',
|
|
ticketNumber: s.ticket_number || undefined,
|
|
timeAgo: timeAgo(s.started_at),
|
|
}))
|
|
|
|
// Favorites display
|
|
const MAX_VISIBLE_FAVORITES = 8
|
|
const visibleFavorites = showAllFavorites ? pinnedItems : pinnedItems.slice(0, MAX_VISIBLE_FAVORITES)
|
|
const hasMoreFavorites = pinnedItems.length > MAX_VISIBLE_FAVORITES
|
|
|
|
// Handlers
|
|
const handleStartSession = (treeId: string, treeType?: string) => {
|
|
navigate(getTreeNavigatePath(treeId, treeType))
|
|
}
|
|
|
|
const handleDeleteTree = () => {} // Not used on dashboard
|
|
const handleTagClick = () => {} // Not used on dashboard
|
|
const handleFolderCreated = () => {} // Not used on dashboard
|
|
|
|
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)
|
|
}
|
|
}
|
|
|
|
// Page size options
|
|
const pageSizeOptions: (number | 'all')[] = [10, 25, 50, 'all']
|
|
|
|
// Tabs
|
|
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' },
|
|
]
|
|
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
{/* Page Header */}
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h1 className="font-heading text-[1.375rem] font-bold tracking-tight text-foreground">
|
|
Dashboard
|
|
</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Welcome back. Here's what's happening with your flows.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Stats */}
|
|
<QuickStats
|
|
stats={[
|
|
{ label: 'My Flows', value: myFlows.length, gradient: true },
|
|
{ label: 'Sessions Today', value: todaySessions, color: '#f59e0b' },
|
|
{ label: 'Open Sessions', value: openSessions, meta: `${completedSessions} completed` },
|
|
{ label: 'Favorites', value: pinnedItems.length },
|
|
]}
|
|
/>
|
|
|
|
{/* Search */}
|
|
<div ref={searchRef} className="relative">
|
|
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
|
|
<input
|
|
type="text"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
onFocus={() => query.length >= 2 && setShowResults(true)}
|
|
placeholder="Search flows, sessions, tags…"
|
|
className="w-full rounded-lg border border-border bg-card py-2.5 pl-9 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
|
|
/>
|
|
{showResults && (
|
|
<div className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-xl overflow-hidden">
|
|
{isSearching ? (
|
|
<div className="flex items-center justify-center py-6">
|
|
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : searchResults.length === 0 ? (
|
|
<div className="px-4 py-6 text-center text-sm text-muted-foreground">No results found</div>
|
|
) : (
|
|
<ul className="max-h-72 overflow-y-auto py-1">
|
|
{searchResults.map((tree) => (
|
|
<li key={tree.id}>
|
|
<button
|
|
onClick={() => navigate(getTreeNavigatePath(tree.id, tree.tree_type))}
|
|
className="w-full px-4 py-3 text-left transition-colors hover:bg-accent"
|
|
>
|
|
<div className="text-sm font-medium text-foreground">{tree.name}</div>
|
|
{tree.description && (
|
|
<div className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">{tree.description}</div>
|
|
)}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Recent Sessions */}
|
|
<SessionsPanel sessions={recentSessionItems} delay={150} />
|
|
|
|
{/* Favorites Section */}
|
|
<div>
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h2 className="font-heading text-lg font-semibold text-foreground">
|
|
Favorites
|
|
{pinnedItems.length > 0 && (
|
|
<span className="ml-2 text-sm font-normal text-muted-foreground">({pinnedItems.length})</span>
|
|
)}
|
|
</h2>
|
|
{hasMoreFavorites && (
|
|
<button
|
|
onClick={() => setShowAllFavorites(!showAllFavorites)}
|
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
{showAllFavorites ? 'Show less' : 'View all favorites'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
{pinnedIsLoading ? (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<div key={i} className="h-20 rounded-xl bg-card border border-border animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : pinnedItems.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground py-4">
|
|
Star a flow to pin it here for quick access.
|
|
</p>
|
|
) : (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
|
|
{visibleFavorites.map((flow) => (
|
|
<button
|
|
key={flow.tree_id}
|
|
onClick={() => navigate(getTreeNavigatePath(flow.tree_id, flow.tree_type))}
|
|
className="group relative flex items-center gap-3 rounded-xl bg-card border border-border p-4 text-left transition-colors hover:border-border/80 hover:bg-accent/50"
|
|
>
|
|
<span className="text-lg shrink-0">
|
|
{flow.tree_type === 'procedural' ? '📋' : flow.tree_type === 'maintenance' ? '🛠️' : '🔧'}
|
|
</span>
|
|
<span className="truncate text-sm font-medium text-foreground">{flow.tree_name}</span>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
togglePin(flow.tree_id)
|
|
}}
|
|
aria-label="Remove from favorites"
|
|
className="absolute top-2 right-2 rounded-md p-1 text-amber-400 opacity-0 group-hover:opacity-100 hover:text-amber-300 transition-all"
|
|
>
|
|
<Star size={14} fill="currentColor" />
|
|
</button>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* My Flows Section — tabbed */}
|
|
<div>
|
|
<div className="mb-3 flex items-center gap-1 border-b border-border">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
onClick={() => { setActiveTab(tab.id); setPage(1) }}
|
|
className={cn(
|
|
'px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px',
|
|
activeTab === tab.id
|
|
? 'border-primary text-foreground'
|
|
: 'border-transparent text-muted-foreground hover:text-foreground'
|
|
)}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
<div className="ml-auto flex items-center gap-2 pb-1.5">
|
|
{activeTab === 'mine' && canCreateTrees && (
|
|
<CreateFlowDropdown
|
|
aiEnabled={aiEnabled}
|
|
onOpenAIBuilder={() => setShowAIBuilder(true)}
|
|
/>
|
|
)}
|
|
<ViewToggle view={dashboardMyFlowsView} onChange={setDashboardMyFlowsView} />
|
|
</div>
|
|
</div>
|
|
|
|
{isLoadingFlows ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="h-32 rounded-xl bg-card border border-border animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : myFlows.length === 0 ? (
|
|
<div className="py-12 text-center">
|
|
<p className="text-muted-foreground mb-4">
|
|
{activeTab === 'mine'
|
|
? "You haven't created any flows yet."
|
|
: activeTab === 'team'
|
|
? 'No team flows found.'
|
|
: activeTab === 'public'
|
|
? 'No public flows found.'
|
|
: 'No flows found.'}
|
|
</p>
|
|
{activeTab === 'mine' && canCreateTrees && (
|
|
<CreateFlowDropdown
|
|
aiEnabled={aiEnabled}
|
|
onOpenAIBuilder={() => setShowAIBuilder(true)}
|
|
label="Create your first flow"
|
|
/>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<>
|
|
{allFlowsCeiling && (
|
|
<p className="mb-3 text-sm text-muted-foreground">
|
|
Showing first 500 flows. Use search or filters to find specific flows.
|
|
</p>
|
|
)}
|
|
|
|
{dashboardMyFlowsView === 'grid' && (
|
|
<TreeGridView
|
|
trees={myFlows}
|
|
onStartSession={handleStartSession}
|
|
onTagClick={handleTagClick}
|
|
onFolderCreated={handleFolderCreated}
|
|
onDeleteTree={handleDeleteTree}
|
|
pinnedTreeIds={pinnedTreeIds}
|
|
onTogglePin={togglePin}
|
|
pinLoadingTreeIds={pinLoadingTreeIds}
|
|
/>
|
|
)}
|
|
{dashboardMyFlowsView === 'list' && (
|
|
<TreeListView
|
|
trees={myFlows}
|
|
onStartSession={handleStartSession}
|
|
onTagClick={handleTagClick}
|
|
onFolderCreated={handleFolderCreated}
|
|
onDeleteTree={handleDeleteTree}
|
|
pinnedTreeIds={pinnedTreeIds}
|
|
onTogglePin={togglePin}
|
|
pinLoadingTreeIds={pinLoadingTreeIds}
|
|
/>
|
|
)}
|
|
{dashboardMyFlowsView === 'table' && (
|
|
<TreeTableView
|
|
trees={myFlows}
|
|
onStartSession={handleStartSession}
|
|
onTagClick={handleTagClick}
|
|
onFolderCreated={handleFolderCreated}
|
|
onDeleteTree={handleDeleteTree}
|
|
pinnedTreeIds={pinnedTreeIds}
|
|
onTogglePin={togglePin}
|
|
pinLoadingTreeIds={pinLoadingTreeIds}
|
|
/>
|
|
)}
|
|
|
|
{/* Pagination controls */}
|
|
{pageSize !== 'all' && (
|
|
<div className="mt-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setPage(page - 1)}
|
|
disabled={page <= 1}
|
|
className={cn(
|
|
'flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm transition-colors',
|
|
page <= 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent'
|
|
)}
|
|
>
|
|
<ChevronLeft size={14} />
|
|
Prev
|
|
</button>
|
|
<span className="text-sm text-muted-foreground">Page {page}</span>
|
|
<button
|
|
onClick={() => setPage(page + 1)}
|
|
disabled={!hasNextPage}
|
|
className={cn(
|
|
'flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm transition-colors',
|
|
!hasNextPage ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent'
|
|
)}
|
|
>
|
|
Next
|
|
<ChevronRight size={14} />
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-muted-foreground">Show:</span>
|
|
<select
|
|
value={String(pageSize)}
|
|
onChange={(e) => {
|
|
const val = e.target.value
|
|
setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
|
|
}}
|
|
className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
|
|
>
|
|
{pageSizeOptions.map((opt) => (
|
|
<option key={String(opt)} value={String(opt)}>
|
|
{opt === 'all' ? 'All' : opt}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{pageSize === 'all' && (
|
|
<div className="mt-4 flex items-center justify-end">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-muted-foreground">Show:</span>
|
|
<select
|
|
value="all"
|
|
onChange={(e) => {
|
|
const val = e.target.value
|
|
setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
|
|
}}
|
|
className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
|
|
>
|
|
{pageSizeOptions.map((opt) => (
|
|
<option key={String(opt)} value={String(opt)}>
|
|
{opt === 'all' ? 'All' : opt}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Fork Modal */}
|
|
{forkTarget && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
|
|
<div className="w-full max-w-sm rounded-xl border border-border bg-card p-5 shadow-xl">
|
|
<h3 className="mb-1 text-sm font-semibold text-foreground">Fork this flow?</h3>
|
|
<p className="mb-4 text-xs text-muted-foreground">
|
|
Creates a copy of “{forkTarget.name}” under your account that you can edit freely.
|
|
</p>
|
|
<label className="mb-1 block text-xs text-muted-foreground">
|
|
Why are you forking? <span className="opacity-60">(optional)</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={forkReason}
|
|
onChange={(e) => setForkReason(e.target.value)}
|
|
placeholder="e.g. Adding Cisco Meraki steps for our network"
|
|
maxLength={255}
|
|
className="mb-4 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
|
|
onKeyDown={(e) => e.key === 'Enter' && handleFork()}
|
|
/>
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={handleFork}
|
|
disabled={isForking}
|
|
className="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-gradient-brand py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
|
|
>
|
|
<GitBranch className="h-3.5 w-3.5" />
|
|
{isForking ? 'Forking...' : 'Fork Flow'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setForkTarget(null)}
|
|
className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* AI Builder Modal */}
|
|
{showAIBuilder && (
|
|
<AIFlowBuilderModal
|
|
isOpen={showAIBuilder}
|
|
onClose={() => setShowAIBuilder(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default QuickStartPage
|