feat(editor): ✨ Zoom in/out

apps/builder/components/editor/BoardMenuButton.tsx

@@ -5,16 +5,19 @@ import {
   MenuButtonProps,
   MenuItem,
   MenuList,
+  useDisclosure,
 } from '@chakra-ui/react'
 import assert from 'assert'
-import { DownloadIcon, MoreVerticalIcon } from 'assets/icons'
+import { DownloadIcon, MoreVerticalIcon, SettingsIcon } from 'assets/icons'
 import { useTypebot } from 'contexts/TypebotContext'
 import React, { useState } from 'react'
 import { parseDefaultPublicId } from 'services/typebots'
+import { EditorSettingsModal } from './EditorSettingsModal'
 
 export const BoardMenuButton = (props: MenuButtonProps) => {
   const { typebot } = useTypebot()
   const [isDownloading, setIsDownloading] = useState(false)
+  const { isOpen, onOpen, onClose } = useDisclosure()
 
   const downloadFlow = () => {
     assert(typebot)
@@ -36,18 +39,22 @@ export const BoardMenuButton = (props: MenuButtonProps) => {
     <Menu>
       <MenuButton
         as={IconButton}
-        variant="outline"
-        colorScheme="blue"
+        bgColor="white"
         icon={<MoreVerticalIcon transform={'rotate(90deg)'} />}
         isLoading={isDownloading}
         size="sm"
+        shadow="lg"
         {...props}
       />
       <MenuList>
+        <MenuItem icon={<SettingsIcon />} onClick={onOpen}>
+          Editor settings
+        </MenuItem>
         <MenuItem icon={<DownloadIcon />} onClick={downloadFlow}>
           Export flow
         </MenuItem>
       </MenuList>
+      <EditorSettingsModal isOpen={isOpen} onClose={onClose} />
     </Menu>
   )
 }

apps/builder/components/editor/EditorSettingsModal.tsx

@@ -0,0 +1,97 @@
+import {
+  Heading,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  Stack,
+  Text,
+  Radio,
+  VStack,
+  RadioGroup,
+  HStack,
+} from '@chakra-ui/react'
+import { LaptopIcon, MouseIcon } from 'assets/icons'
+import { useUser } from 'contexts/UserContext'
+import { GraphNavigation } from 'db'
+import React, { useEffect, useState } from 'react'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const EditorSettingsModal = ({ isOpen, onClose }: Props) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalCloseButton />
+        <ModalBody pt="12" pb="8" px="8">
+          <EditorSettings />
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+const EditorSettings = () => {
+  const { user, saveUser } = useUser()
+  const [value, setValue] = useState<string>(
+    user?.graphNavigation ?? GraphNavigation.TRACKPAD
+  )
+
+  useEffect(() => {
+    if (user?.graphNavigation === value) return
+    saveUser({ graphNavigation: value as GraphNavigation }).then()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  const options = [
+    {
+      value: GraphNavigation.MOUSE,
+      label: 'Mouse',
+      description:
+        'Move by dragging the board and zoom in/out using the scroll wheel',
+      icon: <MouseIcon boxSize="35px" />,
+    },
+    {
+      value: GraphNavigation.TRACKPAD,
+      label: 'Trackpad',
+      description: 'Move the board using 2 fingers and zoom in/out by pinching',
+      icon: <LaptopIcon boxSize="35px" />,
+    },
+  ]
+
+  return (
+    <Stack spacing={4}>
+      <Heading size="md">Navigation</Heading>
+      <RadioGroup onChange={setValue} value={value}>
+        <HStack spacing={4} w="full">
+          {options.map((option) => (
+            <VStack
+              key={option.value}
+              as="label"
+              htmlFor={option.label}
+              cursor="pointer"
+              borderWidth="1px"
+              borderRadius="md"
+              w="full"
+              p="6"
+              spacing={6}
+            >
+              {option.icon}
+              <Stack>
+                <Text fontWeight="bold">{option.label}</Text>
+                <Text>{option.description}</Text>
+              </Stack>
+
+              <Radio value={option.value} id={option.label} />
+            </VStack>
+          ))}
+        </HStack>
+      </RadioGroup>
+    </Stack>
+  )
+}