lint: change folder names

frontend/src/components/graph/NodeHandles.tsx

@@ -0,0 +1,76 @@
+import React, { useContext } from 'react'
+import { Handle, Position } from '@xyflow/react'
+import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
+import FlowContext from '@/lib/graph/flowContext'
+import { cn } from '@/lib/utils'
+
+type NodeHandleProps = {
+    id: string
+    /** Pass when this handle is a connection target so valid highlight can show as soon as connection starts */
+    nodeId?: string
+}
+
+export function InputHandle({ id, nodeId }: NodeHandleProps) {
+    const ctx = useContext(FlowContext)
+    const connectionFrom = ctx?.connectionFrom ?? null
+    const isValidConnection = ctx?.isValidConnection
+    const isConnecting = Boolean(nodeId && connectionFrom && connectionFrom.nodeId !== nodeId)
+    const isValidTarget =
+        isConnecting &&
+        isValidConnection?.({
+            source: connectionFrom!.nodeId,
+            sourceHandle: connectionFrom!.sourceHandle ?? null,
+            target: nodeId!,
+            targetHandle: id,
+        })
+
+    return (
+        <Handle
+            type="target"
+            position={Position.Left}
+            id={id}
+            className={cn(isValidTarget && 'connection-valid-target', isConnecting && !isValidTarget && 'connection-invalid-target')}
+            style={{
+                top: 20,
+                width: 20,
+                height: 20,
+                left: -15,
+                borderRadius: '9999px',
+                background: 'transparent',
+                border: 'none',
+                padding: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            <ArrowDownLeft className="w-4 h-4 text-foreground pointer-events-none" />
+        </Handle>
+    )
+}
+
+export function OutputHandle({ id }: NodeHandleProps) {
+    return (
+        <Handle
+            type="source"
+            position={Position.Right}
+            id={id}
+            style={{
+                top: 20,
+                width: 20,
+                height: 20,
+                right: -15,
+                borderRadius: '9999px',
+                background: 'transparent',
+                border: 'none',
+                padding: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            <ArrowUpRight className="w-4 h-4 text-foreground pointer-events-none" />
+        </Handle>
+    )
+}
+