- Simplify CreateFlowDropdown to 2 clean items: Troubleshooting Flow and Procedural Flow (removed 4 AI-assist entries + 1 orphaned duplicate) - Rename "Troubleshooting Tree" → "Troubleshooting Flow" (per branding) - Remove Maintenance Flow option from MyTreesPage (hidden for pilot) - Replace MyTreesPage inline dropdown with shared CreateFlowDropdown - Remove unused aiEnabled prop, useCachedQuota import, showCreateMenu state Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
import { useState } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { Plus, ChevronDown, FolderTree, ListOrdered } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface CreateFlowDropdownProps {
|
|
className?: string
|
|
/** Button label — defaults to "Create Flow" */
|
|
label?: string
|
|
}
|
|
|
|
export function CreateFlowDropdown({
|
|
className,
|
|
label = 'Create Flow',
|
|
}: CreateFlowDropdownProps) {
|
|
const [showMenu, setShowMenu] = useState(false)
|
|
|
|
return (
|
|
<div className={cn('relative', className)}>
|
|
<button
|
|
onClick={() => setShowMenu(!showMenu)}
|
|
className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:brightness-110 transition-opacity"
|
|
>
|
|
<Plus size={16} />
|
|
{label}
|
|
<ChevronDown size={14} />
|
|
</button>
|
|
{showMenu && (
|
|
<>
|
|
<div className="fixed inset-0 z-10" onClick={() => setShowMenu(false)} />
|
|
<div className="absolute right-0 z-20 mt-1 w-60 rounded-lg border border-border bg-card p-1 shadow-xl">
|
|
<Link
|
|
to="/trees/new"
|
|
onClick={() => setShowMenu(false)}
|
|
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
|
|
>
|
|
<FolderTree className="h-4 w-4 text-muted-foreground" />
|
|
<div className="flex-1">
|
|
<div className="font-medium">Troubleshooting Flow</div>
|
|
<div className="text-xs text-muted-foreground">Branching decision flow</div>
|
|
</div>
|
|
</Link>
|
|
|
|
<div className="my-1 border-t border-border" />
|
|
|
|
<Link
|
|
to="/flows/new"
|
|
onClick={() => setShowMenu(false)}
|
|
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
|
|
>
|
|
<ListOrdered className="h-4 w-4 text-muted-foreground" />
|
|
<div className="flex-1">
|
|
<div className="font-medium">Procedural Flow</div>
|
|
<div className="text-xs text-muted-foreground">Step-by-step procedure</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|