Add editor header translation keys (#1110)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Implemented internationalization support across various components
using the `useTranslate` function for dynamic content translation.

- **Enhancements**
- Updated UI elements such as buttons, tooltips, placeholders, and
labels to display translated text, improving accessibility and user
experience for non-English speakers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>

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

@@ -22,6 +22,7 @@ import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
 import { EditorSettingsModal } from './EditorSettingsModal'
 import { parseDefaultPublicId } from '@/features/publish/helpers/parseDefaultPublicId'
+import { useTranslate } from '@tolgee/react'
 
 export const BoardMenuButton = (props: FlexProps) => {
   const { query } = useRouter()
@@ -29,6 +30,7 @@ export const BoardMenuButton = (props: FlexProps) => {
   const { user } = useUser()
   const [isDownloading, setIsDownloading] = useState(false)
   const { isOpen, onOpen, onClose } = useDisclosure()
+  const { t } = useTranslate()
 
   useEffect(() => {
     if (user && !user.graphNavigation && !query.isFirstBot) onOpen()
@@ -71,13 +73,13 @@ export const BoardMenuButton = (props: FlexProps) => {
         />
         <MenuList>
           <MenuItem icon={<BookIcon />} onClick={redirectToDocumentation}>
-            Documentation
+            {t('editor.graph.menu.documentationItem.label')}
           </MenuItem>
           <MenuItem icon={<SettingsIcon />} onClick={onOpen}>
-            Editor settings
+            {t('editor.graph.menu.editorSettingsItem.label')}
           </MenuItem>
           <MenuItem icon={<DownloadIcon />} onClick={downloadFlow}>
-            Export flow
+            {t('editor.graph.menu.exportFlowItem.label')}
           </MenuItem>
         </MenuList>
         <EditorSettingsModal isOpen={isOpen} onClose={onClose} />

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

@@ -116,7 +116,7 @@ export const TypebotHeader = () => {
           variant={router.pathname.includes('/edit') ? 'outline' : 'ghost'}
           size="sm"
         >
-          {t('editor.headers.flowButton.label')}
+          {t('editor.header.flowButton.label')}
         </Button>
         <Button
           as={Link}
@@ -125,7 +125,7 @@ export const TypebotHeader = () => {
           variant={router.pathname.endsWith('theme') ? 'outline' : 'ghost'}
           size="sm"
         >
-          {t('editor.headers.themeButton.label')}
+          {t('editor.header.themeButton.label')}
         </Button>
         <Button
           as={Link}
@@ -134,7 +134,7 @@ export const TypebotHeader = () => {
           variant={router.pathname.endsWith('settings') ? 'outline' : 'ghost'}
           size="sm"
         >
-          {t('editor.headers.settingsButton.label')}
+          {t('editor.header.settingsButton.label')}
         </Button>
         <Button
           as={Link}
@@ -143,7 +143,7 @@ export const TypebotHeader = () => {
           variant={router.pathname.endsWith('share') ? 'outline' : 'ghost'}
           size="sm"
         >
-          {t('editor.headers.shareButton.label')}
+          {t('share.button.label')}
         </Button>
         {isDefined(publishedTypebot) && (
           <Button
@@ -153,7 +153,7 @@ export const TypebotHeader = () => {
             variant={router.pathname.includes('results') ? 'outline' : 'ghost'}
             size="sm"
           >
-            {t('editor.headers.resultsButton.label')}
+            {t('editor.header.resultsButton.label')}
           </Button>
         )}
       </HStack>
@@ -211,7 +211,11 @@ export const TypebotHeader = () => {
           {currentUserMode === 'write' && (
             <HStack>
               <Tooltip
-                label={isUndoShortcutTooltipOpen ? 'Changes reverted!' : 'Undo'}
+                label={
+                  isUndoShortcutTooltipOpen
+                    ? t('editor.header.undo.tooltip.label')
+                    : t('editor.header.undoButton.label')
+                }
                 isOpen={isUndoShortcutTooltipOpen ? true : undefined}
                 hasArrow={isUndoShortcutTooltipOpen}
               >
@@ -219,18 +223,18 @@ export const TypebotHeader = () => {
                   display={['none', 'flex']}
                   icon={<UndoIcon />}
                   size="sm"
-                  aria-label="Undo"
+                  aria-label={t('editor.header.undoButton.label')}
                   onClick={undo}
                   isDisabled={!canUndo}
                 />
               </Tooltip>
 
-              <Tooltip label="Redo">
+              <Tooltip label={t('editor.header.redoButton.label')}>
                 <IconButton
                   display={['none', 'flex']}
                   icon={<RedoIcon />}
                   size="sm"
-                  aria-label="Redo"
+                  aria-label={t('editor.header.redoButton.label')}
                   onClick={redo}
                   isDisabled={!canRedo}
                 />
@@ -238,14 +242,14 @@ export const TypebotHeader = () => {
             </HStack>
           )}
           <Button leftIcon={<BuoyIcon />} onClick={handleHelpClick} size="sm">
-            {t('editor.headers.helpButton.label')}
+            {t('editor.header.helpButton.label')}
           </Button>
         </HStack>
         {isSavingLoading && (
           <HStack>
             <Spinner speed="0.7s" size="sm" color="gray.400" />
             <Text fontSize="sm" color="gray.400">
-              {t('editor.headers.savingSpinner.label')}
+              {t('editor.header.savingSpinner.label')}
             </Text>
           </HStack>
         )}
@@ -263,7 +267,7 @@ export const TypebotHeader = () => {
             leftIcon={<PlayIcon />}
             size="sm"
           >
-            {t('editor.headers.previewButton.label')}
+            {t('editor.header.previewButton.label')}
           </Button>
         )}
         {currentUserMode === 'write' && <PublishButton size="sm" />}

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

@@ -62,7 +62,7 @@ export const GuestTypebotHeader = () => {
           variant={router.pathname.includes('/edit') ? 'outline' : 'ghost'}
           size="sm"
         >
-          {t('editor.headers.flowButton.label')}
+          {t('editor.header.flowButton.label')}
         </Button>
         <Button
           as={Link}
@@ -71,7 +71,7 @@ export const GuestTypebotHeader = () => {
           variant={router.pathname.endsWith('theme') ? 'outline' : 'ghost'}
           size="sm"
         >
-          {t('editor.headers.themeButton.label')}
+          {t('editor.header.themeButton.label')}
         </Button>
         <Button
           as={Link}
@@ -80,7 +80,7 @@ export const GuestTypebotHeader = () => {
           variant={router.pathname.endsWith('settings') ? 'outline' : 'ghost'}
           size="sm"
         >
-          {t('editor.headers.settingsButton.label')}
+          {t('editor.header.settingsButton.label')}
         </Button>
       </HStack>
       <HStack