✨ Add variables panel

Closes #398

apps/builder/src/features/editor/components/BoardMenuButton.tsx

@@ -1,17 +1,18 @@
 import {
-  Flex,
-  FlexProps,
+  HStack,
   IconButton,
   Menu,
   MenuButton,
   MenuItem,
   MenuList,
+  StackProps,
   useColorModeValue,
   useDisclosure,
 } from '@chakra-ui/react'
 import assert from 'assert'
 import {
   BookIcon,
+  BracesIcon,
   DownloadIcon,
   MoreVerticalIcon,
   SettingsIcon,
@@ -23,14 +24,16 @@ import { parseDefaultPublicId } from '@/features/publish/helpers/parseDefaultPub
 import { useTranslate } from '@tolgee/react'
 import { useUser } from '@/features/account/hooks/useUser'
 import { useRouter } from 'next/router'
+import { RightPanel, useEditor } from '../providers/EditorProvider'
 
-export const BoardMenuButton = (props: FlexProps) => {
+export const BoardMenuButton = (props: StackProps) => {
   const { query } = useRouter()
   const { typebot, currentUserMode } = useTypebot()
   const { user } = useUser()
   const [isDownloading, setIsDownloading] = useState(false)
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { t } = useTranslate()
+  const { setRightPanel } = useEditor()
 
   useEffect(() => {
     if (user && !user.graphNavigation && !query.isFirstBot) onOpen()
@@ -57,11 +60,15 @@ export const BoardMenuButton = (props: FlexProps) => {
     window.open('https://docs.typebot.io/editor/graph', '_blank')
 
   return (
-    <Flex
-      bgColor={useColorModeValue('white', 'gray.900')}
-      rounded="md"
-      {...props}
-    >
+    <HStack rounded="md" spacing="4" {...props}>
+      <IconButton
+        icon={<BracesIcon />}
+        aria-label="Open variables drawer"
+        size="sm"
+        shadow="lg"
+        bgColor={useColorModeValue('white', undefined)}
+        onClick={() => setRightPanel(RightPanel.VARIABLES)}
+      />
       <Menu>
         <MenuButton
           as={IconButton}
@@ -86,6 +93,6 @@ export const BoardMenuButton = (props: FlexProps) => {
         </MenuList>
         <EditorSettingsModal isOpen={isOpen} onClose={onClose} />
       </Menu>
-    </Flex>
+    </HStack>
   )
 }

apps/builder/src/features/editor/components/EditorPage.tsx

@@ -18,6 +18,7 @@ import { EventsCoordinatesProvider } from '@/features/graph/providers/EventsCoor
 import { TypebotNotFoundPage } from './TypebotNotFoundPage'
 import { SuspectedTypebotBanner } from './SuspectedTypebotBanner'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
+import { VariablesDrawer } from '@/features/preview/components/VariablesDrawer'
 
 export const EditorPage = () => {
   const { typebot, currentUserMode, is404 } = useTypebot()
@@ -78,6 +79,14 @@ export const EditorPage = () => {
 }
 
 const RightPanel = () => {
-  const { rightPanel } = useEditor()
-  return rightPanel === RightPanelEnum.PREVIEW ? <PreviewDrawer /> : <></>
+  const { rightPanel, setRightPanel } = useEditor()
+
+  switch (rightPanel) {
+    case RightPanelEnum.PREVIEW:
+      return <PreviewDrawer />
+    case RightPanelEnum.VARIABLES:
+      return <VariablesDrawer onClose={() => setRightPanel(undefined)} />
+    case undefined:
+      return null
+  }
 }

apps/builder/src/features/editor/components/TypebotHeader.tsx

@@ -278,20 +278,21 @@ const RightElements = ({
       <Flex pos="relative">
         <ShareTypebotButton isLoading={isNotDefined(typebot)} />
       </Flex>
-      {router.pathname.includes('/edit') && isNotDefined(rightPanel) && (
-        <Button
-          colorScheme="gray"
-          onClick={handlePreviewClick}
-          isLoading={isNotDefined(typebot) || isSavingLoading}
-          leftIcon={<PlayIcon />}
-          size="sm"
-          iconSpacing={{ base: 0, xl: 2 }}
-        >
-          <chakra.span display={{ base: 'none', xl: 'inline' }}>
-            {t('editor.header.previewButton.label')}
-          </chakra.span>
-        </Button>
-      )}
+      {router.pathname.includes('/edit') &&
+        rightPanel !== RightPanel.PREVIEW && (
+          <Button
+            colorScheme="gray"
+            onClick={handlePreviewClick}
+            isLoading={isNotDefined(typebot) || isSavingLoading}
+            leftIcon={<PlayIcon />}
+            size="sm"
+            iconSpacing={{ base: 0, xl: 2 }}
+          >
+            <chakra.span display={{ base: 'none', xl: 'inline' }}>
+              {t('editor.header.previewButton.label')}
+            </chakra.span>
+          </Button>
+        )}
       {currentUserMode === 'guest' && (
         <Button
           as={Link}