🌐(frontend) add language name to LanguagePicker

The language picker were only showing the language
code, now it shows the language name.

Author: AntoLC

src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts

@@ -13,9 +13,11 @@ test.describe('Language', () => {
     ).toBeVisible();
 
     const header = page.locator('header').first();
-    await header.getByRole('combobox').getByText('EN').click();
-    await header.getByRole('option', { name: 'FR' }).click();
-    await expect(header.getByRole('combobox').getByText('FR')).toBeVisible();
+    await header.getByRole('combobox').getByText('English').click();
+    await header.getByRole('option', { name: 'Français' }).click();
+    await expect(
+      header.getByRole('combobox').getByText('Français'),
+    ).toBeVisible();
 
     await expect(
       page.getByRole('button', {

src/frontend/apps/impress/src/features/language/LanguagePicker.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import { Box, Text } from '@/components/';
+import { LANGUAGES_ALLOWED } from '@/i18n/conf';
 
 import IconLanguage from './assets/icon-language.svg?url';
 
@@ -49,7 +50,7 @@ export const LanguagePicker = () => {
           $align="center"
         >
           <Image priority src={IconLanguage} alt={t('Language Icon')} />
-          <Text $theme="primary">{lang.toUpperCase()}</Text>
+          <Text $theme="primary">{LANGUAGES_ALLOWED[lang]}</Text>
         </Box>
       ),
     }));

src/frontend/apps/impress/src/i18n/conf.ts

@@ -1,3 +1,6 @@
-export const LANGUAGES_ALLOWED = ['en', 'fr'];
+export const LANGUAGES_ALLOWED: { [key: string]: string } = {
+  en: 'English',
+  fr: 'Français',
+};
 export const LANGUAGE_LOCAL_STORAGE = 'impress-language';
 export const BASE_LANGUAGE = 'fr';

src/frontend/apps/impress/src/i18n/initI18n.ts

@@ -13,7 +13,7 @@ i18n
     interpolation: {
       escapeValue: false,
     },
-    preload: LANGUAGES_ALLOWED,
+    preload: Object.keys(LANGUAGES_ALLOWED),
     nsSeparator: '||',
   })
   .catch(() => {

src/frontend/apps/impress/src/i18n/utils.ts

@@ -22,5 +22,7 @@ export const getLanguage = () => {
 
   const language = splitLocaleCode(languageStore).language;
 
-  return LANGUAGES_ALLOWED.includes(language) ? language : BASE_LANGUAGE;
+  return Object.keys(LANGUAGES_ALLOWED).includes(language)
+    ? language
+    : BASE_LANGUAGE;
 };