refactor(editor): ♻️ Undo / Redo buttons + structure refacto

Yet another huge refacto... While implementing undo and redo features I understood that I updated the stored typebot too many times (i.e. on each key input) so I had to rethink it entirely. I also moved around some files.

apps/builder/components/shared/Graph/Endpoints/SourceEndpoint.tsx

@@ -0,0 +1,50 @@
+import { Box, BoxProps, Flex } from '@chakra-ui/react'
+import { useGraph } from 'contexts/GraphContext'
+import { Source } from 'models'
+import React, { MouseEvent, useEffect, useRef, useState } from 'react'
+
+export const SourceEndpoint = ({
+  source,
+  ...props
+}: BoxProps & {
+  source: Source
+}) => {
+  const [ranOnce, setRanOnce] = useState(false)
+  const { setConnectingIds, addSourceEndpoint, blocksCoordinates } = useGraph()
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    setConnectingIds({ source })
+  }
+
+  useEffect(() => {
+    if (ranOnce || !ref.current) return
+    const id = source.buttonId ?? source.stepId + (source.conditionType ?? '')
+    addSourceEndpoint({
+      id,
+      ref,
+    })
+    setRanOnce(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref.current])
+
+  if (!blocksCoordinates) return <></>
+  return (
+    <Flex
+      ref={ref}
+      boxSize="18px"
+      rounded="full"
+      onMouseDown={handleMouseDown}
+      cursor="copy"
+      borderWidth="1px"
+      borderColor="gray.400"
+      bgColor="white"
+      justify="center"
+      align="center"
+      {...props}
+    >
+      <Box bgColor="gray.400" rounded="full" boxSize="6px" />
+    </Flex>
+  )
+}

apps/builder/components/shared/Graph/Endpoints/TargetEndpoint.tsx

@@ -0,0 +1,36 @@
+import { Box, BoxProps } from '@chakra-ui/react'
+import { useGraph } from 'contexts/GraphContext'
+import React, { useEffect, useRef } from 'react'
+
+export const TargetEndpoint = ({
+  stepId,
+  isVisible,
+  ...props
+}: BoxProps & {
+  stepId: string
+  isVisible?: boolean
+}) => {
+  const { addTargetEndpoint } = useGraph()
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+    addTargetEndpoint({
+      id: stepId,
+      ref,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref])
+
+  return (
+    <Box
+      ref={ref}
+      boxSize="15px"
+      rounded="full"
+      bgColor="blue.500"
+      cursor="pointer"
+      visibility={isVisible ? 'visible' : 'hidden'}
+      {...props}
+    />
+  )
+}

apps/builder/components/shared/Graph/Endpoints/index.tsx

@@ -0,0 +1,2 @@
+export { SourceEndpoint } from './SourceEndpoint'
+export { TargetEndpoint } from './TargetEndpoint'