fixed language switching in the frontend

resources/js/app.tsx

@@ -11,9 +11,28 @@ import { Toaster } from 'react-hot-toast';
 import { ConsentProvider } from './contexts/consent';
 import CookieBanner from '@/components/consent/CookieBanner';
 import React from 'react';
+import { usePage } from '@inertiajs/react';
+import { useEffect } from 'react';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
+const LocaleSync: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    // usePage is only available inside Inertia-provided tree; guard for SSR/raw mounts
+    try {
+        const { props } = usePage<{ locale?: string }>();
+
+        useEffect(() => {
+            if (props.locale && i18n.language !== props.locale) {
+                i18n.changeLanguage(props.locale);
+            }
+        }, [props.locale]);
+    } catch (error) {
+        // noop – will be hydrated once Inertia provides context
+    }
+
+    return <>{children}</>;
+};
+
 createInertiaApp({
     title: (title) => title ? `${title} - ${appName}` : appName,
     resolve: (name) =>
@@ -46,7 +65,9 @@ createInertiaApp({
         root.render(
             <ConsentProvider>
                 <I18nextProvider i18n={i18n}>
-                    <App {...props} />
+                    <LocaleSync>
+                        <App {...props} />
+                    </LocaleSync>
                     <CookieBanner />
                     <Toaster position="top-right" toastOptions={{ duration: 4000 }} />
                 </I18nextProvider>