feat(editor): 💄 UI bump

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

@@ -3,7 +3,13 @@ import { ContextMenu } from 'components/shared/ContextMenu'
 import { Coordinates } from 'contexts/GraphContext'
 import { NodePosition, useDragDistance } from 'contexts/GraphDndContext'
 import { useTypebot } from 'contexts/TypebotContext'
-import { ButtonItem, Item, ItemIndices, ItemType } from 'models'
+import {
+  ButtonItem,
+  ChoiceInputStep,
+  Item,
+  ItemIndices,
+  ItemType,
+} from 'models'
 import React, { useRef, useState } from 'react'
 import { setMultipleRefs } from 'services/utils'
 import { SourceEndpoint } from '../../Endpoints/SourceEndpoint'
@@ -31,6 +37,11 @@ export const ItemNode = ({
   const { typebot } = useTypebot()
   const [isMouseOver, setIsMouseOver] = useState(false)
   const itemRef = useRef<HTMLDivElement | null>(null)
+  const isConnectable = !(
+    typebot?.blocks[indices.blockIndex].steps[
+      indices.stepIndex
+    ] as ChoiceInputStep
+  )?.options?.isMultipleChoice
   const onDrag = (position: NodePosition) => {
     if (!onMouseDown || item.type !== ItemType.BUTTON) return
     onMouseDown(position, item)
@@ -61,8 +72,9 @@ export const ItemNode = ({
           transition="box-shadow 200ms"
           borderWidth="1px"
           rounded="md"
-          borderColor={isOpened ? 'blue.400' : 'gray.300'}
+          borderColor={isOpened ? 'blue.400' : 'gray.100'}
           pointerEvents={isReadOnly ? 'none' : 'all'}
+          bgColor="white"
           w="full"
         >
           <ItemNodeContent
@@ -71,7 +83,7 @@ export const ItemNode = ({
             indices={indices}
             isLastItem={isLastItem}
           />
-          {typebot && (
+          {typebot && isConnectable && (
             <SourceEndpoint
               source={{
                 blockId: typebot.blocks[indices.blockIndex].id,
@@ -79,7 +91,7 @@ export const ItemNode = ({
                 itemId: item.id,
               }}
               pos="absolute"
-              right="15px"
+              right="-49px"
               pointerEvents="all"
             />
           )}

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/contents/ButtonNodeContent.tsx

@@ -62,7 +62,7 @@ export const ButtonNodeContent = ({
   }
 
   return (
-    <Flex px={4} py={2} justify="center" w="90%">
+    <Flex px={4} py={2} justify="center" w="90%" pos="relative">
       <Editable
         ref={editableRef}
         flex="1"
@@ -82,7 +82,12 @@ export const ButtonNodeContent = ({
       </Editable>
       <Fade
         in={isMouseOver}
-        style={{ position: 'absolute', bottom: '-15px', zIndex: 3 }}
+        style={{
+          position: 'absolute',
+          bottom: '-15px',
+          zIndex: 3,
+          left: '90px',
+        }}
         unmountOnExit
       >
         <IconButton
@@ -90,7 +95,7 @@ export const ButtonNodeContent = ({
           icon={<PlusIcon />}
           size="xs"
           shadow="md"
-          colorScheme="blue"
+          colorScheme="gray"
           onClick={handlePlusClick}
         />
       </Fade>

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

@@ -30,6 +30,9 @@ export const ItemNodesList = ({
     (draggedItem && mouseOverBlock?.id === blockId) ?? false
   const showPlaceholders = draggedItem && !isReadOnly
 
+  const isLastStep =
+    typebot?.blocks[blockIndex].steps[stepIndex + 1] === undefined
+
   const [position, setPosition] = useState({
     x: 0,
     y: 0,
@@ -148,7 +151,7 @@ export const ItemNodesList = ({
           />
         </Stack>
       ))}
-      <Stack>
+      {isLastStep && (
         <Flex
           px="4"
           py="2"
@@ -167,10 +170,10 @@ export const ItemNodesList = ({
               stepId: step.id,
             }}
             pos="absolute"
-            right="15px"
+            right="-49px"
           />
         </Flex>
-      </Stack>
+      )}
 
       {draggedItem && draggedItem.stepId === step.id && (
         <Portal>