🌐 Translate workspace (#528)

apps/builder/src/features/account/components/UserPreferencesForm.tsx

@@ -1,15 +1,36 @@
-import { Stack, Heading, useColorMode } from '@chakra-ui/react'
+import {
+  Stack,
+  Heading,
+  useColorMode,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Button,
+  HStack,
+} from '@chakra-ui/react'
 import { GraphNavigation } from '@typebot.io/prisma'
 import React, { useEffect } from 'react'
 import { GraphNavigationRadioGroup } from './GraphNavigationRadioGroup'
 import { AppearanceRadioGroup } from './AppearanceRadioGroup'
 import { useUser } from '../hooks/useUser'
-import { useScopedI18n } from '@/locales'
+import { useChangeLocale, useCurrentLocale, useScopedI18n } from '@/locales'
+import { ChevronDownIcon } from '@/components/icons'
+import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
+
+const localeHumanReadable = {
+  en: 'English',
+  fr: 'Français',
+  de: 'Deutsch',
+  pt: 'Português',
+} as const
 
 export const UserPreferencesForm = () => {
   const scopedT = useScopedI18n('account.preferences')
   const { colorMode, setColorMode } = useColorMode()
   const { user, updateUser } = useUser()
+  const changeLocale = useChangeLocale()
+  const currentLocale = useCurrentLocale()
 
   useEffect(() => {
     if (!user?.graphNavigation)
@@ -25,8 +46,40 @@ export const UserPreferencesForm = () => {
     updateUser({ preferredAppAppearance: value })
   }
 
+  const updateLocale = (locale: keyof typeof localeHumanReadable) => () => {
+    changeLocale(locale)
+    document.cookie = `NEXT_LOCALE=${locale}; path=/; max-age=31536000`
+  }
+
   return (
     <Stack spacing={12}>
+      <HStack spacing={4}>
+        <Heading size="md">{scopedT('language.heading')}</Heading>
+        <Menu>
+          <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+            {localeHumanReadable[currentLocale]}
+          </MenuButton>
+          <MenuList>
+            {Object.keys(localeHumanReadable).map((locale) => (
+              <MenuItem
+                key={locale}
+                onClick={updateLocale(
+                  locale as keyof typeof localeHumanReadable
+                )}
+              >
+                {
+                  localeHumanReadable[
+                    locale as keyof typeof localeHumanReadable
+                  ]
+                }
+              </MenuItem>
+            ))}
+          </MenuList>
+        </Menu>
+        {currentLocale !== 'en' && (
+          <MoreInfoTooltip>{scopedT('language.tooltip')}</MoreInfoTooltip>
+        )}
+      </HStack>
       <Stack spacing={6}>
         <Heading size="md">{scopedT('graphNavigation.heading')}</Heading>
         <GraphNavigationRadioGroup