frontend: defaults to en for lang selector

The commit fixes a bug where the selected
default language fell back to Arabic
instead of English when the system's
language wasn't supported.

Author: shonsirsha

frontends/web/src/components/language/language.test.tsx

@@ -27,10 +27,11 @@ vi.mock('react-i18next', () => ({
 
 describe('components/language/language', () => {
   const supportedLangs = [
-    { code: 'en-US', display: 'English' },
-    { code: 'pt', display: 'Portugues' },
-    { code: 'ms', display: 'Bahasa Melayu' },
+    { code: 'ar', display: 'Arabic' },
     { code: 'de', display: 'Deutsch' },
+    { code: 'en', display: 'English' },
+    { code: 'ms', display: 'Bahasa Melayu' },
+    { code: 'pt', display: 'Portugues' },
   ] as TLanguagesList;
 
   /**
@@ -81,7 +82,7 @@ describe('components/language/language', () => {
         },
       });
       const { getByTestId } = renderSwitchAndOpenDialog();
-      const defaultLang = getByTestId('language-selection-en-US');
+      const defaultLang = getByTestId('language-selection-en');
       expect(defaultLang.getAttribute('class')).toContain('selected');
     });
   });

frontends/web/src/utils/language.ts

@@ -19,9 +19,10 @@ export const getSelectedIndex = (languages: TLanguagesList, i18n: Ii18n) => {
     index = languages.findIndex(({ code }) => code === tag);
   }
 
-  // Give up. We tried.
+  // Default fallback to English
+  // or the first index if English isn't defined
   if (index === -1) {
-    return 0;
+    return languages.findIndex(({ code }) => code === 'en') || 0;
   }
 
   return index;