feat(editor): ♿️ Improve graph navigation setting

apps/builder/components/editor/EditorSettingsModal.tsx

@@ -1,21 +1,12 @@
 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'
+import { EditorSettings } from 'components/account/EditorSection'
+import React from 'react'
 
 type Props = {
   isOpen: boolean
@@ -35,63 +26,3 @@ export const EditorSettingsModal = ({ isOpen, onClose }: Props) => {
     </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>
-  )
-}