Add i18 support

frontend/src/i18n/index.ts

@@ -1,13 +1,33 @@
 // frontend/src/i18n/index.ts
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import { resources, defaultLanguage } from '../locales';
+import { resources, defaultLanguage, supportedLanguages } from '../locales';
+
+// Get saved language from localStorage or default
+const getSavedLanguage = () => {
+  try {
+    const stored = localStorage.getItem('ui-storage');
+    if (stored) {
+      const { state } = JSON.parse(stored);
+      if (state?.language && supportedLanguages.includes(state.language)) {
+        console.log(`🔍 Found stored language: ${state.language}`);
+        return state.language;
+      }
+    }
+  } catch (error) {
+    console.warn('Failed to parse stored language:', error);
+  }
+  console.log(`📌 Using default language: ${defaultLanguage}`);
+  return defaultLanguage;
+};
+
+const initialLanguage = getSavedLanguage();
 
 i18n
   .use(initReactI18next)
   .init({
     resources,
-    lng: defaultLanguage,
+    lng: initialLanguage,
     fallbackLng: defaultLanguage,
 
     interpolation: {
@@ -33,6 +53,29 @@ i18n
     react: {
       useSuspense: false,
     },
+
+    // Return key with namespace if translation is missing
+    saveMissing: process.env.NODE_ENV === 'development',
+  })
+  .then(() => {
+    console.log(`🚀 i18n initialized with language: ${initialLanguage}`);
   });
 
+// Listen for language changes and update UI store
+i18n.on('languageChanged', (lng) => {
+  if (typeof window !== 'undefined') {
+    // Update document direction for RTL languages
+    document.dir = i18n.dir(lng);
+
+    // Update UI store to keep it in sync (without triggering i18n again)
+    import('../stores/ui.store').then(({ useUIStore }) => {
+      const currentLanguage = useUIStore.getState().language;
+      if (currentLanguage !== lng) {
+        // Set directly to avoid recursive calls
+        useUIStore.setState({ language: lng as any });
+      }
+    });
+  }
+});
+
 export default i18n;