feat(editor): ♿️ Improve previewing blocks

apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx

@@ -38,8 +38,9 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
   const [isMouseDown, setIsMouseDown] = useState(false)
   const [isConnecting, setIsConnecting] = useState(false)
   const isPreviewing =
-    previewingEdge?.to.blockId === block.id ||
+    previewingEdge?.from.blockId === block.id ||
-    previewingEdge?.from.blockId === block.id
+    (previewingEdge?.to.blockId === block.id &&
+      isNotDefined(previewingEdge.to.stepId))
   const isStartBlock =
     isDefined(block.steps[0]) && block.steps[0].type === 'start'
 

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNode.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react'
 import { ContextMenu } from 'components/shared/ContextMenu'
-import { Coordinates } from 'contexts/GraphContext'
+import { Coordinates, useGraph } from 'contexts/GraphContext'
 import { NodePosition, useDragDistance } from 'contexts/GraphDndContext'
 import { useTypebot } from 'contexts/TypebotContext'
 import {
@@ -35,8 +35,10 @@ export const ItemNode = ({
   onMouseDown,
 }: Props) => {
   const { typebot } = useTypebot()
+  const { previewingEdge } = useGraph()
   const [isMouseOver, setIsMouseOver] = useState(false)
   const itemRef = useRef<HTMLDivElement | null>(null)
+  const isPreviewing = previewingEdge?.from.itemId === item.id
   const isConnectable = !(
     typebot?.blocks[indices.blockIndex].steps[
       indices.stepIndex
@@ -62,17 +64,20 @@ export const ItemNode = ({
       {(ref, isOpened) => (
         <Flex
           data-testid="item"
-          ref={setMultipleRefs([ref, itemRef])}
-          align="center"
           pos="relative"
+          ref={setMultipleRefs([ref, itemRef])}
+        >
+          <Flex
+            align="center"
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
             shadow="sm"
             _hover={isReadOnly ? {} : { shadow: 'md' }}
-          transition="box-shadow 200ms"
+            transition="box-shadow 200ms, border-color 200ms"
-          borderWidth="1px"
             rounded="md"
-          borderColor={isOpened ? 'blue.400' : 'gray.100'}
+            borderWidth={isOpened || isPreviewing ? '2px' : '1px'}
+            borderColor={isOpened || isPreviewing ? 'blue.400' : 'gray.100'}
+            margin={isOpened || isPreviewing ? '-1px' : 0}
             pointerEvents={isReadOnly ? 'none' : 'all'}
             bgColor="white"
             w="full"
@@ -96,6 +101,7 @@ export const ItemNode = ({
               />
             )}
           </Flex>
+        </Flex>
       )}
     </ContextMenu>
   )

apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx

@@ -51,6 +51,7 @@ export const StepNode = ({
     openedStepId,
     setOpenedStepId,
     setFocusedBlockId,
+    previewingEdge,
   } = useGraph()
   const { updateStep } = useTypebot()
   const [isConnecting, setIsConnecting] = useState(false)
@@ -62,6 +63,8 @@ export const StepNode = ({
   )
   const stepRef = useRef<HTMLDivElement | null>(null)
 
+  const isPreviewing = isConnecting || previewingEdge?.to.stepId === step.id
+
   const onDrag = (position: NodePosition) => {
     if (step.type === 'start' || !onMouseDown) return
     onMouseDown(position, step)
@@ -170,8 +173,9 @@ export const StepNode = ({
                 flex="1"
                 userSelect="none"
                 p="3"
-                borderWidth="1px"
+                borderWidth={isOpened || isPreviewing ? '2px' : '1px'}
-                borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.200'}
+                borderColor={isOpened || isPreviewing ? 'blue.400' : 'gray.200'}
+                margin={isOpened || isPreviewing ? '-1px' : 0}
                 rounded="lg"
                 cursor={'pointer'}
                 bgColor="gray.50"