Add hooks

Author: Sg312

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx

@@ -4,11 +4,14 @@ import type { NodeProps } from 'reactflow'
 import remarkGfm from 'remark-gfm'
 import { cn } from '@/lib/utils'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import { usePanelEditorStore } from '@/stores/panel-new/editor/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
-import { useCurrentWorkflow } from '../../hooks'
-import { useBlockDimensions } from '../../hooks/use-block-dimensions'
+import {
+  useBlockDimensions,
+  useBlockFocus,
+  useBlockRingStyles,
+  useCurrentWorkflow,
+} from '../../hooks'
 import { ActionBar } from '../workflow-block/components'
 import { useBlockState } from '../workflow-block/hooks'
 import type { WorkflowBlockProps } from '../workflow-block/types'
@@ -92,9 +95,7 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
 export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlockNodeData>) {
   const { type, config, name } = data
 
-  const setCurrentBlockId = usePanelEditorStore((state) => state.setCurrentBlockId)
-  const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
-  const isFocused = currentBlockId === id
+  const { isFocused, handleClick } = useBlockFocus(id)
 
   const currentWorkflow = useCurrentWorkflow()
   const { isEnabled, isActive, diffStatus, isDeletedBlock } = useBlockState(
@@ -161,24 +162,20 @@ export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlo
     dependencies: [isEmpty],
   })
 
-  const hasRing =
-    isActive || isFocused || diffStatus === 'new' || diffStatus === 'edited' || isDeletedBlock
-  const ringStyles = cn(
-    hasRing && 'ring-[1.75px]',
-    isActive && 'ring-[#8C10FF] animate-pulse-ring',
-    isFocused && 'ring-[#33B4FF]',
-    diffStatus === 'new' && 'ring-[#22C55F]',
-    diffStatus === 'edited' && 'ring-[#FF6600]',
-    isDeletedBlock && 'ring-[#EF4444]'
-  )
+  const { hasRing, ringStyles } = useBlockRingStyles({
+    isActive,
+    isFocused,
+    diffStatus,
+    isDeletedBlock,
+  })
 
   return (
     <div className='group relative'>
       <div
         className={cn(
           'relative z-[20] w-[250px] cursor-default select-none rounded-[8px] bg-[#232323]'
         )}
-        onClick={() => setCurrentBlockId(id)}
+        onClick={handleClick}
       >
         <ActionBar blockId={id} blockType={type} disabled={!userPermissions.canEdit} />
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx

@@ -11,10 +11,14 @@ import type { SubBlockConfig } from '@/blocks/types'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { useCredentialDisplay } from '@/hooks/use-credential-display'
 import { useDisplayName } from '@/hooks/use-display-name'
-import { usePanelEditorStore } from '@/stores/panel-new/editor/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
-import { useBlockDimensions, useCurrentWorkflow } from '../../hooks'
+import {
+  useBlockDimensions,
+  useBlockFocus,
+  useBlockRingStyles,
+  useCurrentWorkflow,
+} from '../../hooks'
 import { ActionBar, Connections } from './components'
 import {
   useBlockProperties,
@@ -367,9 +371,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
   }, [id, collaborativeSetSubblockValue])
 
   const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
-  const setCurrentBlockId = usePanelEditorStore((state) => state.setCurrentBlockId)
-  const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
-  const isFocused = currentBlockId === id
+  const { isFocused, handleClick } = useBlockFocus(id)
   const currentStoreBlock = currentWorkflow.getBlockById(id)
 
   const isStarterBlock = type === 'starter'
@@ -638,35 +640,19 @@ export const WorkflowBlock = memo(function WorkflowBlock({
   const userPermissions = useUserPermissionsContext()
   const isWorkflowSelector = type === 'workflow' || type === 'workflow_input'
 
-  /**
-   * Determine the ring styling based on block state priority:
-   * 1. Active (executing) - purple ring with pulse animation
-   * 2. Pending (next step) - orange ring
-   * 3. Focused (selected in editor) - blue ring
-   * 4. Diff status (version comparison) - green/orange/red ring
-   */
-  const hasRing =
-    isActive ||
-    isPending ||
-    isFocused ||
-    diffStatus === 'new' ||
-    diffStatus === 'edited' ||
-    isDeletedBlock
-  const ringStyles = cn(
-    hasRing && 'ring-[1.75px]',
-    isActive && 'ring-[#8C10FF] animate-pulse-ring',
-    isPending && 'ring-[#FF6600]',
-    isFocused && 'ring-[#33B4FF]',
-    diffStatus === 'new' && 'ring-[#22C55F]',
-    diffStatus === 'edited' && 'ring-[#FF6600]',
-    isDeletedBlock && 'ring-[#EF4444]'
-  )
+  const { hasRing, ringStyles } = useBlockRingStyles({
+    isActive,
+    isFocused,
+    isPending,
+    diffStatus,
+    isDeletedBlock,
+  })
 
   return (
     <div className='group relative'>
       <div
         ref={contentRef}
-        onClick={() => setCurrentBlockId(id)}
+        onClick={handleClick}
         className={cn(
           'relative z-[20] w-[250px] cursor-default select-none rounded-[8px] bg-[#232323]'
         )}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts

@@ -1,5 +1,7 @@
 export { useAutoLayout } from './use-auto-layout'
 export { useBlockDimensions } from './use-block-dimensions'
+export { useBlockFocus } from './use-block-focus'
+export { useBlockRingStyles } from './use-block-ring-styles'
 export { type CurrentWorkflow, useCurrentWorkflow } from './use-current-workflow'
 export { useNodeUtilities } from './use-node-utilities'
 export { useScrollManagement } from './use-scroll-management'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-focus.ts

@@ -0,0 +1,17 @@
+import { useCallback } from 'react'
+import { usePanelEditorStore } from '@/stores/panel-new/editor/store'
+
+/**
+ * Shared hook for managing block focus state and interactions.
+ */
+export function useBlockFocus(blockId: string) {
+  const setCurrentBlockId = usePanelEditorStore((state) => state.setCurrentBlockId)
+  const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
+  const isFocused = currentBlockId === blockId
+
+  const handleClick = useCallback(() => {
+    setCurrentBlockId(blockId)
+  }, [blockId, setCurrentBlockId])
+
+  return { isFocused, handleClick }
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-ring-styles.ts

@@ -0,0 +1,44 @@
+import { useMemo } from 'react'
+import { cn } from '@/lib/utils'
+
+interface UseBlockRingStylesOptions {
+  isActive: boolean
+  isFocused: boolean
+  isPending?: boolean
+  diffStatus?: 'new' | 'edited' | null
+  isDeletedBlock: boolean
+}
+
+/**
+ * Shared hook for computing ring styles across block types.
+ * Handles visual states: active, pending, focused, diff status, deleted.
+ */
+export function useBlockRingStyles({
+  isActive,
+  isFocused,
+  isPending = false,
+  diffStatus,
+  isDeletedBlock,
+}: UseBlockRingStylesOptions) {
+  return useMemo(() => {
+    const hasRing =
+      isActive ||
+      isPending ||
+      isFocused ||
+      diffStatus === 'new' ||
+      diffStatus === 'edited' ||
+      isDeletedBlock
+
+    const ringStyles = cn(
+      hasRing && 'ring-[1.75px]',
+      isActive && 'ring-[#8C10FF] animate-pulse-ring',
+      isPending && 'ring-[#FF6600]',
+      isFocused && 'ring-[#33B4FF]',
+      diffStatus === 'new' && 'ring-[#22C55F]',
+      diffStatus === 'edited' && 'ring-[#FF6600]',
+      isDeletedBlock && 'ring-[#EF4444]'
+    )
+
+    return { hasRing, ringStyles }
+  }, [isActive, isPending, isFocused, diffStatus, isDeletedBlock])
+}