fix(hydration): init theme and language stores with SSR-safe defaults

Both useThemeStore and currentLanguage were reading localStorage/navigator
at module evaluation time on the client, producing different initial values
than the server ('light'/'en'). This caused React error #418 (hydration
mismatch) on every page load — the Navbar rendered different icons and
translated strings than the server HTML.

Fix: both stores now always initialize to 'light'/'en'. ClientLayout's
existing mount useEffect already calls themeUtils.setTheme() to apply the
stored theme; a new language-init block does the same for i18n. Non-English
users still get their language applied immediately after hydration.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ralyodio

src/app/client-layout.jsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { usePathname } from 'next/navigation';
 import { useThemeStore, themeUtils } from '@/lib/stores/theme.js';
 import { useI18n } from '@/lib/hooks/useI18n.js';
+import { i18nUtils, languages } from '@/lib/stores/i18n.js';
 import Navbar from '@/lib/components/Navbar.jsx';
 import Footer from '@/lib/components/Footer.jsx';
 import PWAToastManager from '@/lib/components/PWAToastManager.jsx';
@@ -21,12 +22,22 @@ export default function ClientLayout({ children }) {
   useEffect(() => {
     setMounted(true);
 
+    // Apply stored or system theme
     let theme = localStorage.getItem('qrypt-theme');
     if (!theme) {
       theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
     themeUtils.setTheme(theme);
 
+    // Apply stored or browser language (non-English only — 'en' is already loaded)
+    const storedLang = localStorage.getItem('qrypt-language');
+    const browserLang = navigator.language.split('-')[0];
+    const lang = (storedLang && languages[storedLang]) ? storedLang
+                : (languages[browserLang] ? browserLang : 'en');
+    if (lang !== 'en') {
+      i18nUtils.setLanguage(lang);
+    }
+
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker
         .register('/sw.js')

src/lib/stores/i18n.js

@@ -38,10 +38,9 @@ async function loadTranslations(languageCode) {
   }
 }
 
-// Svelte writable store for the current language code
-export const currentLanguage = writable(
-  typeof window === 'undefined' ? 'en' : getInitialLanguage()
-);
+// Always start with 'en' so server and client initial renders match.
+// ClientLayout's useEffect applies the stored/preferred language after mount.
+export const currentLanguage = writable('en');
 
 // Svelte writable store holding all loaded translation objects keyed by language code
 export const _translations = writable({ en: enTranslations });

src/lib/stores/theme.js

@@ -82,6 +82,8 @@ export const themeUtils = {
   },
 };
 
+// Always start with 'light' so server and client initial renders match.
+// ClientLayout's useEffect applies the stored/preferred theme after mount.
 export const useThemeStore = create(() => ({
-  currentTheme: typeof window !== 'undefined' ? getInitialTheme() : 'light',
+  currentTheme: 'light',
 }));