Update language selection intially displays prefered language unless manually changed

src/hooks/useLanguage.ts

@@ -16,8 +16,14 @@ export const useLanguage = () => {
     i18n.changeLanguage(lang);
   };
 
+  // Normalize language to 'en' or 'de' (strip region codes like 'en-US')
+  const normalizeLanguage = (lang: string): string => {
+    const baseLang = lang.split('-')[0].toLowerCase();
+    return ['en', 'de'].includes(baseLang) ? baseLang : 'en';
+  };
+
   return {
-    currentLanguage: i18n.language,
+    currentLanguage: normalizeLanguage(i18n.language),
     changeLanguage,
     t,
     availableLanguages: Object.keys(i18n.services.resourceStore.data),

src/i18n.ts

@@ -20,6 +20,8 @@ i18n
   .init({
     resources,
     fallbackLng: 'en',
+    supportedLngs: ['en', 'de'],
+    load: 'languageOnly', // Only use 'en' instead of 'en-US'
     debug: process.env.NODE_ENV === 'development',
 
     interpolation: {
@@ -33,4 +35,10 @@ i18n
     },
   });
 
+// Ensure the detected language is saved to localStorage
+const detectedLang = i18n.language;
+if (detectedLang && !localStorage.getItem('medPlanAssistant_language')) {
+  localStorage.setItem('medPlanAssistant_language', detectedLang);
+}
+
 export default i18n;