Set up localization with feature flag control (#9649)

Refers #8128 

Changes Introduced:
- Added i18n configuration.
- Added a feature flag for localization.
- Enabled language switching based on the flag.

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

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

@@ -0,0 +1,96 @@
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+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 { isDefined } from '~/utils/isDefined';
+import { logError } from '~/utils/logError';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const LocalePicker = () => {
+  const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
+    currentWorkspaceMemberState,
+  );
+
+  const { updateOneRecord } = useUpdateOneRecord({
+    objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
+  });
+
+  const updateWorkspaceMember = async (changedFields: any) => {
+    if (!currentWorkspaceMember?.id) {
+      throw new Error('User is not logged in');
+    }
+
+    try {
+      await updateOneRecord({
+        idToUpdate: currentWorkspaceMember.id,
+        updateOneRecordInput: changedFields,
+      });
+    } catch (error) {
+      logError(error);
+    }
+  };
+
+  if (!isDefined(currentWorkspaceMember)) return;
+
+  const handleLocaleChange = (value: string) => {
+    setCurrentWorkspaceMember({
+      ...currentWorkspaceMember,
+      ...{ locale: value },
+    });
+    updateWorkspaceMember({ locale: value });
+
+    i18n.activate(value);
+  };
+
+  return (
+    <StyledContainer>
+      <Select
+        dropdownId="preferred-locale"
+        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',
+          },
+        ]}
+        onChange={(value) => handleLocaleChange(value)}
+      />
+    </StyledContainer>
+  );
+};