Progress on translations (#9703)

Start adding a few translations on setting pages, introduce
pseudo-locale, switch to dynamic import, add eslint rule

packages/twenty-front/src/pages/settings/profile/appearance/components/LocalePicker.tsx

@@ -1,12 +1,14 @@
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { Select } from '@/ui/input/components/Select';
 
 import { i18n } from '@lingui/core';
+import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
 import { isDefined } from '~/utils/isDefined';
 import { logError } from '~/utils/logError';
 
@@ -20,6 +22,7 @@ export const LocalePicker = () => {
   const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
     currentWorkspaceMemberState,
   );
+  const isDebugMode = useRecoilValue(isDebugModeState);
 
   const { updateOneRecord } = useUpdateOneRecord({
     objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
@@ -49,9 +52,47 @@ export const LocalePicker = () => {
     });
     updateWorkspaceMember({ locale: value });
 
-    i18n.activate(value);
+    dynamicActivate(value);
   };
 
+  const localeOptions = [
+    {
+      label: 'Portuguese',
+      value: 'pt',
+    },
+    {
+      label: 'French',
+      value: 'fr',
+    },
+    {
+      label: 'German',
+      value: 'de',
+    },
+    {
+      label: 'Italian',
+      value: 'it',
+    },
+    {
+      label: 'Spanish',
+      value: 'es',
+    },
+    {
+      label: 'English',
+      value: 'en',
+    },
+    {
+      label: 'Chinese',
+      value: 'zh',
+    },
+  ];
+
+  if (isDebugMode) {
+    localeOptions.push({
+      label: 'Pseudo-English',
+      value: 'pseudo-en',
+    });
+  }
+
   return (
     <StyledContainer>
       <Select
@@ -59,36 +100,7 @@ export const LocalePicker = () => {
         dropdownWidthAuto
         fullWidth
         value={i18n.locale}
-        options={[
-          {
-            label: 'Portuguese',
-            value: 'pt',
-          },
-          {
-            label: 'French',
-            value: 'fr',
-          },
-          {
-            label: 'German',
-            value: 'de',
-          },
-          {
-            label: 'Italian',
-            value: 'it',
-          },
-          {
-            label: 'Spanish',
-            value: 'es',
-          },
-          {
-            label: 'English',
-            value: 'en',
-          },
-          {
-            label: 'Chinese',
-            value: 'zh',
-          },
-        ]}
+        options={localeOptions}
         onChange={(value) => handleLocaleChange(value)}
       />
     </StyledContainer>