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>
   )
 }