Fix TypeError: this.store is undefined in i18next changeLanguage

The i18next.init() call was not being awaited, so changeLanguage could be
called before the internal store was initialized. Also guard the language
sync effect to only run after locale initialization completes.

https://claude.ai/code/session_01BCqa4WXYDrCn2ARTEA8jdd

Author: claude

apps/frontend/src/lib/i18n/index.ts

@@ -16,8 +16,8 @@ export const languageNames: Record<SupportedLanguage, string> = {
 /**
  * Initialize i18next with the given language or auto-detect
  */
-export function initI18n(initialLanguage?: SupportedLanguage) {
-  i18next.use(LanguageDetector).init({
+export async function initI18n(initialLanguage?: SupportedLanguage) {
+  await i18next.use(LanguageDetector).init({
     resources: {
       en: { translation: en },
       de: { translation: de },

apps/frontend/src/lib/stores/locale.ts

@@ -32,7 +32,7 @@ function createLocaleStore() {
      */
     initialize: async (userLanguage?: SupportedLanguage) => {
       // Initialize i18next with user's preference or auto-detect
-      initI18n(userLanguage);
+      await initI18n(userLanguage);
       const detectedLang = getCurrentLanguage();
 
       // Update document lang attribute

apps/frontend/src/routes/+layout.svelte

@@ -19,7 +19,7 @@ import {
   userPreferences,
 } from '$lib/stores/auth';
 import { circles } from '$lib/stores/circles';
-import { locale } from '$lib/stores/locale';
+import { isLocaleInitialized, locale } from '$lib/stores/locale';
 
 interface Props {
   children: Snippet;
@@ -52,7 +52,7 @@ $effect(() => {
 // Sync language when user preferences change (e.g., after login)
 $effect(() => {
   const prefs = $userPreferences;
-  if (prefs?.language && prefs.language !== locale.getLanguage()) {
+  if ($isLocaleInitialized && prefs?.language && prefs.language !== locale.getLanguage()) {
     locale.setLanguage(prefs.language as SupportedLanguage);
   }
 });