feat: refactor workflow editor authoring surfaces

2026-04-08 21:44:08 +02:00
parent fe46dabfc5
commit 042f62fe55
25 changed files with 4877 additions and 1823 deletions
@@ -0,0 +1,68 @@
+import { useEffect, type ReactNode } from 'react'
+import { X } from 'lucide-react'
+
+import type { WorkflowNodeDefinition } from '../../api/workflows'
+import type { WorkflowGraphFamily } from './workflowNodeLibrary'
+import { WorkflowNodeCatalogBrowser } from './WorkflowNodeCatalogBrowser'
+
+interface NodeCommandMenuProps {
+  definitions: WorkflowNodeDefinition[]
+  graphFamily: WorkflowGraphFamily
+  onSelectStep: (step: string) => void
+  onClose: () => void
+  renderIcon: (iconName?: string, size?: number) => ReactNode
+}
+
+export function NodeCommandMenu({
+  definitions,
+  graphFamily,
+  onSelectStep,
+  onClose,
+  renderIcon,
+}: NodeCommandMenuProps) {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [onClose])
+
+  return (
+    <div className="flex max-h-[70vh] w-[380px] flex-col overflow-hidden rounded-2xl border border-border-default bg-surface shadow-2xl">
+      <div className="border-b border-border-default px-4 py-3">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <p className="text-sm font-semibold text-content">Add Workflow Node</p>
+            <p className="text-xs text-content-muted">
+              Search by label, step, family, or execution mode.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg p-1 text-content-muted hover:bg-surface-hover hover:text-content"
+            title="Close node picker"
+          >
+            <X size={16} />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-3 py-3">
+        <WorkflowNodeCatalogBrowser
+          definitions={definitions}
+          graphFamily={graphFamily}
+          variant="menu"
+          onSelectStep={onSelectStep}
+          renderIcon={renderIcon}
+          searchPlaceholder="Search nodes"
+          autoFocusSearch
+        />
+      </div>
+    </div>
+  )
+}