improvement(ux): action bar hover and cursor ref on click in prod

Author: emir-karabeg

app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx

@@ -22,7 +22,14 @@ export function ActionBar({ blockId, blockType }: ActionBarProps) {
   const isStarterBlock = blockType === 'starter'
 
   return (
-    <div className="absolute top-0 -right-20 flex flex-col items-center gap-2 p-2 bg-background rounded-md shadow-sm border border-gray-200 dark:border-gray-800">
+    <div
+      className={cn(
+        'absolute top-0 -right-20',
+        'flex flex-col items-center gap-2 p-2',
+        'bg-background rounded-md shadow-sm border border-gray-200 dark:border-gray-800',
+        'opacity-0 group-hover:opacity-100 transition-opacity duration-200'
+      )}
+    >
       {/* <Tooltip>
         <TooltipTrigger asChild>
           <Button

app/w/[id]/components/workflow-block/workflow-block.tsx

@@ -21,7 +21,8 @@ interface WorkflowBlockProps {
 }
 
 // Combine both interfaces into a single component
-export function WorkflowBlock({ id, data, selected }: NodeProps<WorkflowBlockProps>) {
+export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
+  console.log('Rendering WorkflowBlock', id)
   const { type, config, name } = data
 
   // State management
@@ -50,7 +51,6 @@ export function WorkflowBlock({ id, data, selected }: NodeProps<WorkflowBlockPro
 
   // Execution store
   const isActiveBlock = useExecutionStore((state) => state.activeBlockIds.has(id))
-  // const isExecuting = useExecutionStore((state) => state.isExecuting)
 
   // Update node internals when handles change
   useEffect(() => {
@@ -180,18 +180,18 @@ export function WorkflowBlock({ id, data, selected }: NodeProps<WorkflowBlockPro
   }
 
   return (
-    <div className="relative">
+    <div className="relative group">
       <Card
         ref={blockRef}
         className={cn(
-          'shadow-md select-none group relative cursor-default',
+          'shadow-md select-none relative cursor-default',
           'transition-ring transition-block-bg',
           isWide ? 'w-[480px]' : 'w-[320px]',
           !isEnabled && 'shadow-sm',
           isActiveBlock && 'ring-2 animate-pulse-ring'
         )}
       >
-        {selected && <ActionBar blockId={id} blockType={type} />}
+        <ActionBar blockId={id} blockType={type} />
         <ConnectionBlocks blockId={id} setIsConnecting={setIsConnecting} />
 
         {/* Input Handle - Don't show for starter blocks */}

app/w/[id]/workflow.tsx

@@ -36,7 +36,6 @@ const edgeTypes: EdgeTypes = { custom: CustomEdge }
 
 function WorkflowContent() {
   // State
-  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null)
   const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null)
   const [isInitialized, setIsInitialized] = useState(false)
 
@@ -143,7 +142,6 @@ function WorkflowContent() {
         position,
         parentId: parentLoop ? `loop-${parentLoop[0]}` : undefined,
         dragHandle: '.workflow-drag-handle',
-        selected: block.id === selectedBlockId,
         data: {
           type: block.type,
           config: blockConfig,
@@ -153,7 +151,7 @@ function WorkflowContent() {
     })
 
     return nodeArray
-  }, [blocks, loops, selectedBlockId])
+  }, [blocks, loops])
 
   // Update nodes
   const onNodesChange = useCallback(
@@ -277,23 +275,14 @@ function WorkflowContent() {
     [project, blocks, addBlock, addEdge, findClosestOutput]
   )
 
-  // Node selection
-  const onNodeClick = useCallback((event: React.MouseEvent, node: any) => {
-    event.stopPropagation()
-    setSelectedBlockId(node.id)
-    setSelectedEdgeId(null)
-  }, [])
-
-  // Clear selection
+  // Update onPaneClick to only handle edge selection
   const onPaneClick = useCallback(() => {
-    setSelectedBlockId(null)
     setSelectedEdgeId(null)
   }, [])
 
   // Edge selection
   const onEdgeClick = useCallback((event: React.MouseEvent, edge: any) => {
     setSelectedEdgeId(edge.id)
-    setSelectedBlockId(null)
   }, [])
 
   // Transform edges to include selection state
@@ -354,7 +343,10 @@ function WorkflowContent() {
           strokeDasharray: '5,5',
         }}
         connectionLineType={ConnectionLineType.SmoothStep}
-        onNodeClick={onNodeClick}
+        onNodeClick={(e) => {
+          e.stopPropagation()
+          e.preventDefault()
+        }}
         onPaneClick={onPaneClick}
         onEdgeClick={onEdgeClick}
         elementsSelectable={true}