feat: introdce store

frontend/src/components/graph/AnimatedEdge.tsx

@@ -1,15 +1,15 @@
-import React, { useContext, useMemo, memo } from 'react'
+import React, { memo } from 'react'
 import {
   BaseEdge,
   getBezierPath,
   type EdgeProps,
 } from '@xyflow/react'
-import { ConnectionPathContext } from '@/lib/graph/flowContext'
-import { getConnectionStatus, CONNECTION_STATUS_CLASS } from '@/lib/graph/connectionStatus'
+import { useCanvasStore } from '@/app/canvas/canvasStore'
+import { selectConnectionStatusForEdge } from '@/app/canvas/canvasStore.selectors'
+import { CONNECTION_STATUS_CLASS } from '@/lib/graph/connectionStatus'
 
 const EDGE_STROKE_WIDTH = 2
 const DOT_MARKER_R = 1.5
-const EMPTY_PATH_NODE_IDS = new Set<string>()
 
 function AnimatedEdgeInner({
   id,
@@ -26,38 +26,13 @@ function AnimatedEdgeInner({
   target,
   data,
 }: EdgeProps) {
-  const ctx = useContext(ConnectionPathContext)
-  const pathNodeIds = ctx?.connectionPathNodeIds ?? EMPTY_PATH_NODE_IDS
-  const pausedSegmentNodeIds = ctx?.connectionPathPausedSegmentNodeIds ?? EMPTY_PATH_NODE_IDS
-  const activeSegmentNodeIds = ctx?.connectionPathActiveSegmentNodeIds ?? EMPTY_PATH_NODE_IDS
-  const errorTargetNodeIds = useMemo(
-    () => new Set(ctx?.connectionPathErrorNodeIds ?? []),
-    [ctx?.connectionPathErrorNodeIds]
-  )
-
-  const label = labelProp ?? (data as { connectionLabel?: string } | undefined)?.connectionLabel
-
-  const connectionStatus = useMemo(
-    () =>
-      getConnectionStatus({
-        source,
-        target,
-        pathNodeIds,
-        pausedSegmentNodeIds,
-        activeSegmentNodeIds,
-        errorTargetNodeIds,
-      }),
-    [
-      source,
-      target,
-      pathNodeIds,
-      pausedSegmentNodeIds,
-      activeSegmentNodeIds,
-      errorTargetNodeIds,
-    ]
+  const connectionStatus = useCanvasStore((s) =>
+    selectConnectionStatusForEdge(s, source, target)
   )
   const statusClass = CONNECTION_STATUS_CLASS[connectionStatus]
 
+  const label = labelProp ?? (data as { connectionLabel?: string } | undefined)?.connectionLabel
+
   const [edgePath, edgeLabelX, edgeLabelY] = getBezierPath({
     sourceX,
     sourceY,