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,39 +64,43 @@ export const ItemNode = ({
       {(ref, isOpened) => (
         <Flex
           data-testid="item"
-          ref={setMultipleRefs([ref, itemRef])}
-          align="center"
           pos="relative"
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          shadow="sm"
-          _hover={isReadOnly ? {} : { shadow: 'md' }}
-          transition="box-shadow 200ms"
-          borderWidth="1px"
-          rounded="md"
-          borderColor={isOpened ? 'blue.400' : 'gray.100'}
-          pointerEvents={isReadOnly ? 'none' : 'all'}
-          bgColor="white"
-          w="full"
+          ref={setMultipleRefs([ref, itemRef])}
         >
-          <ItemNodeContent
-            item={item}
-            isMouseOver={isMouseOver}
-            indices={indices}
-            isLastItem={isLastItem}
-          />
-          {typebot && isConnectable && (
-            <SourceEndpoint
-              source={{
-                blockId: typebot.blocks[indices.blockIndex].id,
-                stepId: item.stepId,
-                itemId: item.id,
-              }}
-              pos="absolute"
-              right="-49px"
-              pointerEvents="all"
+          <Flex
+            align="center"
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            shadow="sm"
+            _hover={isReadOnly ? {} : { shadow: 'md' }}
+            transition="box-shadow 200ms, border-color 200ms"
+            rounded="md"
+            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"
+          >
+            <ItemNodeContent
+              item={item}
+              isMouseOver={isMouseOver}
+              indices={indices}
+              isLastItem={isLastItem}
             />
-          )}
+            {typebot && isConnectable && (
+              <SourceEndpoint
+                source={{
+                  blockId: typebot.blocks[indices.blockIndex].id,
+                  stepId: item.stepId,
+                  itemId: item.id,
+                }}
+                pos="absolute"
+                right="-49px"
+                pointerEvents="all"
+              />
+            )}
+          </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"
-                borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.200'}
+                borderWidth={isOpened || isPreviewing ? '2px' : '1px'}
+                borderColor={isOpened || isPreviewing ? 'blue.400' : 'gray.200'}
+                margin={isOpened || isPreviewing ? '-1px' : 0}
                 rounded="lg"
                 cursor={'pointer'}
                 bgColor="gray.50"