From 1c5bd06657bdd1453155965cf715af46c6e5e86c Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Sat, 29 Jan 2022 11:22:22 +0100
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E2=9C=A8=20Add=20unlock/lock?=
 =?UTF-8?q?=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/builder/assets/icons.tsx                 |  14 ++
 apps/builder/components/board/Board.tsx       |   4 +-
 .../board/StepTypesList/StepTypesList.tsx     | 137 -------------
 .../components/board/StepTypesList/index.tsx  |   1 -
 .../StepCard.tsx                              |   0
 .../StepIcon.tsx                              |  26 +--
 .../board/StepsSideBar/StepSideBar.tsx        | 191 ++++++++++++++++++
 .../StepTypeLabel.tsx                         |   0
 .../components/board/StepsSideBar/index.tsx   |   1 +
 .../ChoiceInputStepNode/ChoiceItemNode.tsx    |   2 +-
 .../ContentPopover/ContentPopover.tsx         |   2 +-
 .../graph/BlockNode/StepNode/StepNode.tsx     |   4 +-
 .../BlockNode/StepNode/StepNodeOverlay.tsx    |   2 +-
 .../components/shared/DropdownList.tsx        |   2 +-
 .../ImageUploadContent/ImageUploadContent.tsx |  21 +-
 apps/builder/libs/chakra.ts                   |   8 +
 apps/builder/pages/api/auth/[...nextauth].ts  |   2 +-
 apps/builder/services/publicTypebot.tsx       |   2 +-
 18 files changed, 249 insertions(+), 170 deletions(-)
 delete mode 100644 apps/builder/components/board/StepTypesList/StepTypesList.tsx
 delete mode 100644 apps/builder/components/board/StepTypesList/index.tsx
 rename apps/builder/components/board/{StepTypesList => StepsSideBar}/StepCard.tsx (100%)
 rename apps/builder/components/board/{StepTypesList => StepsSideBar}/StepIcon.tsx (64%)
 create mode 100644 apps/builder/components/board/StepsSideBar/StepSideBar.tsx
 rename apps/builder/components/board/{StepTypesList => StepsSideBar}/StepTypeLabel.tsx (100%)
 create mode 100644 apps/builder/components/board/StepsSideBar/index.tsx

diff --git a/apps/builder/assets/icons.tsx b/apps/builder/assets/icons.tsx
index 714e1d7eaf..ae6959dd09 100644
--- a/apps/builder/assets/icons.tsx
+++ b/apps/builder/assets/icons.tsx
@@ -297,3 +297,17 @@ export const GripIcon = (props: IconProps) => (
     <circle cx="5" cy="15" r="1"></circle>
   </Icon>
 )
+
+export const LockedIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+  </Icon>
+)
+
+export const UnlockedIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+    <path d="M7 11V7a5 5 0 0 1 9.9-1"></path>
+  </Icon>
+)
diff --git a/apps/builder/components/board/Board.tsx b/apps/builder/components/board/Board.tsx
index 8c98018af9..dfcb064a4b 100644
--- a/apps/builder/components/board/Board.tsx
+++ b/apps/builder/components/board/Board.tsx
@@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/react'
 import React from 'react'
 import Graph from './graph/Graph'
 import { StepDndContext } from 'contexts/StepDndContext'
-import { StepTypesList } from './StepTypesList'
+import { StepsSideBar } from './StepsSideBar'
 import { PreviewDrawer } from './preview/PreviewDrawer'
 import { RightPanel, useEditor } from 'contexts/EditorContext'
 import { GraphProvider } from 'contexts/GraphContext'
@@ -13,7 +13,7 @@ export const Board = () => {
   return (
     <Flex flex="1" pos="relative" bgColor="gray.50" h="full">
       <StepDndContext>
-        <StepTypesList />
+        <StepsSideBar />
         <GraphProvider>
           <Graph flex="1" />
           <BoardMenuButton pos="absolute" right="40px" top="20px" />
diff --git a/apps/builder/components/board/StepTypesList/StepTypesList.tsx b/apps/builder/components/board/StepTypesList/StepTypesList.tsx
deleted file mode 100644
index 57388014c9..0000000000
--- a/apps/builder/components/board/StepTypesList/StepTypesList.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import {
-  Stack,
-  Input,
-  Text,
-  SimpleGrid,
-  useEventListener,
-  Portal,
-} from '@chakra-ui/react'
-import {
-  BubbleStepType,
-  DraggableStepType,
-  InputStepType,
-  IntegrationStepType,
-  LogicStepType,
-} from 'models'
-import { useStepDnd } from 'contexts/StepDndContext'
-import React, { useState } from 'react'
-import { StepCard, StepCardOverlay } from './StepCard'
-
-export const StepTypesList = () => {
-  const { setDraggedStepType, draggedStepType } = useStepDnd()
-  const [position, setPosition] = useState({
-    x: 0,
-    y: 0,
-  })
-  const [relativeCoordinates, setRelativeCoordinates] = useState({ x: 0, y: 0 })
-
-  const handleMouseMove = (event: MouseEvent) => {
-    if (!draggedStepType) return
-    const { clientX, clientY } = event
-    setPosition({
-      ...position,
-      x: clientX - relativeCoordinates.x,
-      y: clientY - relativeCoordinates.y,
-    })
-  }
-  useEventListener('mousemove', handleMouseMove)
-
-  const handleMouseDown = (e: React.MouseEvent, type: DraggableStepType) => {
-    const element = e.currentTarget as HTMLDivElement
-    const rect = element.getBoundingClientRect()
-    setPosition({ x: rect.left, y: rect.top })
-    const x = e.clientX - rect.left
-    const y = e.clientY - rect.top
-    setRelativeCoordinates({ x, y })
-    setDraggedStepType(type)
-  }
-
-  const handleMouseUp = () => {
-    if (!draggedStepType) return
-    setDraggedStepType(undefined)
-    setPosition({
-      x: 0,
-      y: 0,
-    })
-  }
-  useEventListener('mouseup', handleMouseUp)
-
-  return (
-    <Stack
-      w="320px"
-      pos="absolute"
-      left="10px"
-      top="10px"
-      h="calc(100vh - 80px)"
-      rounded="lg"
-      shadow="xl"
-      borderWidth="1px"
-      zIndex="2"
-      py="4"
-      px="2"
-      bgColor="gray.50"
-      spacing={6}
-      userSelect="none"
-    >
-      <Input placeholder="Search..." bgColor="white" />
-      <Stack>
-        <Text fontSize="sm" fontWeight="semibold" color="gray.600">
-          Bubbles
-        </Text>
-        <SimpleGrid columns={2} spacing="2">
-          {Object.values(BubbleStepType).map((type) => (
-            <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
-          ))}
-        </SimpleGrid>
-      </Stack>
-
-      <Stack>
-        <Text fontSize="sm" fontWeight="semibold" color="gray.600">
-          Inputs
-        </Text>
-        <SimpleGrid columns={2} spacing="2">
-          {Object.values(InputStepType).map((type) => (
-            <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
-          ))}
-        </SimpleGrid>
-      </Stack>
-
-      <Stack>
-        <Text fontSize="sm" fontWeight="semibold" color="gray.600">
-          Logic
-        </Text>
-        <SimpleGrid columns={2} spacing="2">
-          {Object.values(LogicStepType).map((type) => (
-            <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
-          ))}
-        </SimpleGrid>
-      </Stack>
-
-      <Stack>
-        <Text fontSize="sm" fontWeight="semibold" color="gray.600">
-          Integrations
-        </Text>
-        <SimpleGrid columns={2} spacing="2">
-          {Object.values(IntegrationStepType).map((type) => (
-            <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
-          ))}
-        </SimpleGrid>
-      </Stack>
-
-      {draggedStepType && (
-        <Portal>
-          <StepCardOverlay
-            type={draggedStepType}
-            onMouseUp={handleMouseUp}
-            pos="fixed"
-            top="0"
-            left="0"
-            style={{
-              transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
-            }}
-          />
-        </Portal>
-      )}
-    </Stack>
-  )
-}
diff --git a/apps/builder/components/board/StepTypesList/index.tsx b/apps/builder/components/board/StepTypesList/index.tsx
deleted file mode 100644
index 532a5f8804..0000000000
--- a/apps/builder/components/board/StepTypesList/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { StepTypesList } from './StepTypesList'
diff --git a/apps/builder/components/board/StepTypesList/StepCard.tsx b/apps/builder/components/board/StepsSideBar/StepCard.tsx
similarity index 100%
rename from apps/builder/components/board/StepTypesList/StepCard.tsx
rename to apps/builder/components/board/StepsSideBar/StepCard.tsx
diff --git a/apps/builder/components/board/StepTypesList/StepIcon.tsx b/apps/builder/components/board/StepsSideBar/StepIcon.tsx
similarity index 64%
rename from apps/builder/components/board/StepTypesList/StepIcon.tsx
rename to apps/builder/components/board/StepsSideBar/StepIcon.tsx
index d496cc1169..3baebc9fe6 100644
--- a/apps/builder/components/board/StepTypesList/StepIcon.tsx
+++ b/apps/builder/components/board/StepsSideBar/StepIcon.tsx
@@ -31,31 +31,31 @@ type StepIconProps = { type: StepType } & IconProps
 export const StepIcon = ({ type, ...props }: StepIconProps) => {
   switch (type) {
     case BubbleStepType.TEXT:
-      return <ChatIcon {...props} />
+      return <ChatIcon color="blue.500" {...props} />
     case BubbleStepType.IMAGE:
-      return <ImageIcon {...props} />
+      return <ImageIcon color="blue.500" {...props} />
     case BubbleStepType.VIDEO:
-      return <FilmIcon {...props} />
+      return <FilmIcon color="blue.500" {...props} />
     case InputStepType.TEXT:
-      return <TextIcon {...props} />
+      return <TextIcon color="orange.500" {...props} />
     case InputStepType.NUMBER:
-      return <NumberIcon {...props} />
+      return <NumberIcon color="orange.500" {...props} />
     case InputStepType.EMAIL:
-      return <EmailIcon {...props} />
+      return <EmailIcon color="orange.500" {...props} />
     case InputStepType.URL:
-      return <GlobeIcon {...props} />
+      return <GlobeIcon color="orange.500" {...props} />
     case InputStepType.DATE:
-      return <CalendarIcon {...props} />
+      return <CalendarIcon color="orange.500" {...props} />
     case InputStepType.PHONE:
-      return <PhoneIcon {...props} />
+      return <PhoneIcon color="orange.500" {...props} />
     case InputStepType.CHOICE:
-      return <CheckSquareIcon {...props} />
+      return <CheckSquareIcon color="orange.500" {...props} />
     case LogicStepType.SET_VARIABLE:
-      return <EditIcon {...props} />
+      return <EditIcon color="purple.500" {...props} />
     case LogicStepType.CONDITION:
-      return <FilterIcon {...props} />
+      return <FilterIcon color="purple.500" {...props} />
     case LogicStepType.REDIRECT:
-      return <ExternalLinkIcon {...props} />
+      return <ExternalLinkIcon color="purple.500" {...props} />
     case IntegrationStepType.GOOGLE_SHEETS:
       return <GoogleSheetsLogo {...props} />
     case IntegrationStepType.GOOGLE_ANALYTICS:
diff --git a/apps/builder/components/board/StepsSideBar/StepSideBar.tsx b/apps/builder/components/board/StepsSideBar/StepSideBar.tsx
new file mode 100644
index 0000000000..f619fd54f7
--- /dev/null
+++ b/apps/builder/components/board/StepsSideBar/StepSideBar.tsx
@@ -0,0 +1,191 @@
+import {
+  Stack,
+  Input,
+  Text,
+  SimpleGrid,
+  useEventListener,
+  Portal,
+  Flex,
+  IconButton,
+  Tooltip,
+  Fade,
+} from '@chakra-ui/react'
+import {
+  BubbleStepType,
+  DraggableStepType,
+  InputStepType,
+  IntegrationStepType,
+  LogicStepType,
+} from 'models'
+import { useStepDnd } from 'contexts/StepDndContext'
+import React, { useState } from 'react'
+import { StepCard, StepCardOverlay } from './StepCard'
+import { LockedIcon, UnlockedIcon } from 'assets/icons'
+import { headerHeight } from 'components/shared/TypebotHeader'
+
+export const StepsSideBar = () => {
+  const { setDraggedStepType, draggedStepType } = useStepDnd()
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0,
+  })
+  const [relativeCoordinates, setRelativeCoordinates] = useState({ x: 0, y: 0 })
+  const [isLocked, setIsLocked] = useState(true)
+  const [isExtended, setIsExtended] = useState(true)
+
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!draggedStepType) return
+    const { clientX, clientY } = event
+    setPosition({
+      ...position,
+      x: clientX - relativeCoordinates.x,
+      y: clientY - relativeCoordinates.y,
+    })
+  }
+  useEventListener('mousemove', handleMouseMove)
+
+  const handleMouseDown = (e: React.MouseEvent, type: DraggableStepType) => {
+    const element = e.currentTarget as HTMLDivElement
+    const rect = element.getBoundingClientRect()
+    setPosition({ x: rect.left, y: rect.top })
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    setRelativeCoordinates({ x, y })
+    setDraggedStepType(type)
+  }
+
+  const handleMouseUp = () => {
+    if (!draggedStepType) return
+    setDraggedStepType(undefined)
+    setPosition({
+      x: 0,
+      y: 0,
+    })
+  }
+  useEventListener('mouseup', handleMouseUp)
+
+  const handleLockClick = () => setIsLocked(!isLocked)
+
+  const handleDockBarEnter = () => setIsExtended(true)
+
+  const handleMouseLeave = () => {
+    if (isLocked) return
+    setIsExtended(false)
+  }
+
+  return (
+    <Flex
+      w="340px"
+      pos="absolute"
+      left="0"
+      h={`calc(100vh - ${headerHeight}px)`}
+      zIndex="2"
+      pl="4"
+      py="4"
+      onMouseLeave={handleMouseLeave}
+      transform={isExtended ? 'translateX(0)' : 'translateX(-340px)'}
+      transition="transform 350ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s"
+    >
+      <Stack
+        w="full"
+        rounded="lg"
+        shadow="xl"
+        borderWidth="1px"
+        pt="2"
+        pb="4"
+        px="2"
+        bgColor="gray.50"
+        spacing={6}
+        userSelect="none"
+      >
+        <Stack>
+          <Flex justifyContent="flex-end">
+            <Tooltip label={isLocked ? 'Unlock sidebar' : 'Lock sidebar'}>
+              <IconButton
+                icon={isLocked ? <LockedIcon /> : <UnlockedIcon />}
+                aria-label={isLocked ? 'Unlock' : 'Lock'}
+                size="sm"
+                variant="outline"
+                onClick={handleLockClick}
+              />
+            </Tooltip>
+          </Flex>
+          <Input placeholder="Search..." bgColor="white" />
+        </Stack>
+
+        <Stack>
+          <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+            Bubbles
+          </Text>
+          <SimpleGrid columns={2} spacing="2">
+            {Object.values(BubbleStepType).map((type) => (
+              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+            ))}
+          </SimpleGrid>
+        </Stack>
+
+        <Stack>
+          <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+            Inputs
+          </Text>
+          <SimpleGrid columns={2} spacing="2">
+            {Object.values(InputStepType).map((type) => (
+              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+            ))}
+          </SimpleGrid>
+        </Stack>
+
+        <Stack>
+          <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+            Logic
+          </Text>
+          <SimpleGrid columns={2} spacing="2">
+            {Object.values(LogicStepType).map((type) => (
+              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+            ))}
+          </SimpleGrid>
+        </Stack>
+
+        <Stack>
+          <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+            Integrations
+          </Text>
+          <SimpleGrid columns={2} spacing="2">
+            {Object.values(IntegrationStepType).map((type) => (
+              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+            ))}
+          </SimpleGrid>
+        </Stack>
+
+        {draggedStepType && (
+          <Portal>
+            <StepCardOverlay
+              type={draggedStepType}
+              onMouseUp={handleMouseUp}
+              pos="fixed"
+              top="0"
+              left="0"
+              style={{
+                transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
+              }}
+            />
+          </Portal>
+        )}
+      </Stack>
+      <Fade in={!isLocked} unmountOnExit>
+        <Flex
+          pos="absolute"
+          h="100%"
+          right="-50px"
+          w="50px"
+          top="0"
+          justify="center"
+          align="center"
+          onMouseEnter={handleDockBarEnter}
+        >
+          <Flex w="5px" h="20px" bgColor="gray.400" rounded="md" />
+        </Flex>
+      </Fade>
+    </Flex>
+  )
+}
diff --git a/apps/builder/components/board/StepTypesList/StepTypeLabel.tsx b/apps/builder/components/board/StepsSideBar/StepTypeLabel.tsx
similarity index 100%
rename from apps/builder/components/board/StepTypesList/StepTypeLabel.tsx
rename to apps/builder/components/board/StepsSideBar/StepTypeLabel.tsx
diff --git a/apps/builder/components/board/StepsSideBar/index.tsx b/apps/builder/components/board/StepsSideBar/index.tsx
new file mode 100644
index 0000000000..5d4f2b6bfc
--- /dev/null
+++ b/apps/builder/components/board/StepsSideBar/index.tsx
@@ -0,0 +1 @@
+export { StepsSideBar } from './StepSideBar'
diff --git a/apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNode.tsx b/apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNode.tsx
index 16a9af3129..8eea2a5e4d 100644
--- a/apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNode.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNode.tsx
@@ -94,6 +94,7 @@ export const ChoiceItemNode = ({
     >
       {(ref, isOpened) => (
         <Flex
+          ref={ref}
           align="center"
           pos="relative"
           onMouseEnter={handleMouseEnter}
@@ -109,7 +110,6 @@ export const ChoiceItemNode = ({
           borderColor={isOpened ? 'blue.400' : 'gray.300'}
         >
           <Editable
-            ref={ref}
             defaultValue={item.content ?? 'Click to edit'}
             flex="1"
             startWithEditView={!isDefined(item.content)}
diff --git a/apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/ContentPopover.tsx b/apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/ContentPopover.tsx
index 6872118055..c009182de0 100644
--- a/apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/ContentPopover.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/ContentPopover.tsx
@@ -27,7 +27,7 @@ export const ContentPopover = ({ step }: Props) => {
 
   return (
     <Portal>
-      <PopoverContent onMouseDown={handleMouseDown}>
+      <PopoverContent onMouseDown={handleMouseDown} w="500px">
         <PopoverArrow />
         <PopoverBody ref={ref} shadow="lg">
           <StepContent step={step} />
diff --git a/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx b/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
index 797b02f77c..de99b9c5f3 100644
--- a/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
@@ -9,7 +9,7 @@ import {
 import React, { useEffect, useState } from 'react'
 import { BubbleStep, DraggableStep, Step, TextBubbleStep } from 'models'
 import { Coordinates, useGraph } from 'contexts/GraphContext'
-import { StepIcon } from 'components/board/StepTypesList/StepIcon'
+import { StepIcon } from 'components/board/StepsSideBar/StepIcon'
 import { isBubbleStep, isTextBubbleStep } from 'utils'
 import { TextEditor } from './TextEditor/TextEditor'
 import { StepNodeContent } from './StepNodeContent/StepNodeContent'
@@ -152,7 +152,7 @@ export const StepNode = ({
       renderMenu={() => <StepNodeContextMenu stepId={step.id} />}
     >
       {(ref, isOpened) => (
-        <Popover placement="left" isLazy isOpen={openedStepId === step.id}>
+        <Popover placement="bottom" isLazy isOpen={openedStepId === step.id}>
           <PopoverTrigger>
             <Flex
               pos="relative"
diff --git a/apps/builder/components/board/graph/BlockNode/StepNode/StepNodeOverlay.tsx b/apps/builder/components/board/graph/BlockNode/StepNode/StepNodeOverlay.tsx
index 7532c4b969..1b979ef41c 100644
--- a/apps/builder/components/board/graph/BlockNode/StepNode/StepNodeOverlay.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/StepNodeOverlay.tsx
@@ -1,6 +1,6 @@
 import { StackProps, HStack } from '@chakra-ui/react'
 import { StartStep, Step } from 'models'
-import { StepIcon } from 'components/board/StepTypesList/StepIcon'
+import { StepIcon } from 'components/board/StepsSideBar/StepIcon'
 import { StepNodeContent } from './StepNodeContent/StepNodeContent'
 
 export const StepNodeOverlay = ({
diff --git a/apps/builder/components/shared/DropdownList.tsx b/apps/builder/components/shared/DropdownList.tsx
index c8ab90fd0a..24a9c721a0 100644
--- a/apps/builder/components/shared/DropdownList.tsx
+++ b/apps/builder/components/shared/DropdownList.tsx
@@ -43,7 +43,7 @@ export const DropdownList = <T,>({
           {currentItem ?? placeholder}
         </MenuButton>
         <Portal>
-          <MenuList maxW="500px" shadow="lg" zIndex={1500}>
+          <MenuList maxW="500px" zIndex={1500}>
             <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
               {items.map((item) => (
                 <MenuItem
diff --git a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx b/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
index 2a5b07839b..8c6193efd6 100644
--- a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
+++ b/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
@@ -1,5 +1,5 @@
-import { ChangeEvent, FormEvent, useEffect, useState } from 'react'
-import { Button, HStack, Input, Stack } from '@chakra-ui/react'
+import { ChangeEvent, useEffect, useState } from 'react'
+import { Button, Flex, HStack, Input, Stack } from '@chakra-ui/react'
 import { SearchContextManager } from '@giphy/react-components'
 import { UploadButton } from '../buttons/UploadButton'
 import { GiphySearch } from './GiphySearch'
@@ -79,7 +79,7 @@ type ContentProps = { initialUrl?: string; onNewUrl: (url: string) => void }
 const UploadFileContent = ({ onNewUrl }: ContentProps) => {
   const { typebot } = useTypebot()
   return (
-    <Stack>
+    <Flex justify="center" py="2">
       <UploadButton
         filePath={`typebots/${typebot?.id}`}
         onFileUploaded={onNewUrl}
@@ -88,7 +88,7 @@ const UploadFileContent = ({ onNewUrl }: ContentProps) => {
       >
         Choose an image
       </UploadButton>
-    </Stack>
+    </Flex>
   )
 }
 
@@ -106,11 +106,14 @@ const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => {
     setImageUrl(e.target.value)
 
   return (
-    <Input
-      placeholder={'Paste the image link...'}
-      onChange={handleImageUrlChange}
-      value={imageUrl}
-    />
+    <Stack py="2">
+      <Input
+        my="2"
+        placeholder={'Paste the image link...'}
+        onChange={handleImageUrlChange}
+        value={imageUrl}
+      />
+    </Stack>
   )
 }
 
diff --git a/apps/builder/libs/chakra.ts b/apps/builder/libs/chakra.ts
index 27be24e640..973f71dd2d 100644
--- a/apps/builder/libs/chakra.ts
+++ b/apps/builder/libs/chakra.ts
@@ -90,6 +90,14 @@ const components = {
       _hover: { textDecoration: 'none' },
     },
   },
+  Menu: {
+    parts: ['list'],
+    defaultProps: {
+      list: {
+        shadow: 'lg',
+      },
+    },
+  },
 }
 
 export const customTheme = extendTheme({ colors, fonts, components })
diff --git a/apps/builder/pages/api/auth/[...nextauth].ts b/apps/builder/pages/api/auth/[...nextauth].ts
index 3efa15328d..52b12f5b05 100644
--- a/apps/builder/pages/api/auth/[...nextauth].ts
+++ b/apps/builder/pages/api/auth/[...nextauth].ts
@@ -12,7 +12,7 @@ const providers: Provider[] = [
   EmailProvider({
     server: {
       host: process.env.EMAIL_SERVER_HOST,
-      port: process.env.EMAIL_SERVER_PORT,
+      port: Number(process.env.EMAIL_SERVER_PORT),
       auth: {
         user: process.env.EMAIL_SERVER_USER,
         pass: process.env.EMAIL_SERVER_PASSWORD,
diff --git a/apps/builder/services/publicTypebot.tsx b/apps/builder/services/publicTypebot.tsx
index fbe28bc8fc..36ea0be07e 100644
--- a/apps/builder/services/publicTypebot.tsx
+++ b/apps/builder/services/publicTypebot.tsx
@@ -2,7 +2,7 @@ import { PublicTypebot, Typebot } from 'models'
 import shortId from 'short-uuid'
 import { HStack, Text } from '@chakra-ui/react'
 import { CalendarIcon } from 'assets/icons'
-import { StepIcon } from 'components/board/StepTypesList/StepIcon'
+import { StepIcon } from 'components/board/StepsSideBar/StepIcon'
 import { isInputStep, sendRequest } from 'utils'
 
 export const parseTypebotToPublicTypebot = (