refactor(ux): consolidate BMAD skills, update design system, and clean up Prisma generated client

keep-notes/lib/i18n/LanguageProvider.tsx

@@ -4,6 +4,9 @@ import { createContext, useContext, useEffect, useState, useCallback, useRef } f
 import type { ReactNode } from 'react'
 import { SupportedLanguage, loadTranslations, getTranslationValue, Translations } from './load-translations'
 
+// Static imports for SSR-safe initial translations (prevents hydration mismatch)
+import enTranslations from '@/locales/en.json'
+
 type LanguageContextType = {
   language: SupportedLanguage
   setLanguage: (lang: SupportedLanguage) => void
@@ -14,26 +17,52 @@ type LanguageContextType = {
 const LanguageContext = createContext<LanguageContextType | undefined>(undefined)
 
 const RTL_LANGUAGES: SupportedLanguage[] = ['ar', 'fa']
+const SUPPORTED_LANGS: SupportedLanguage[] = ['en', 'fr', 'es', 'de', 'fa', 'it', 'pt', 'ru', 'zh', 'ja', 'ko', 'ar', 'hi', 'nl', 'pl']
 
 function updateDocumentDirection(lang: SupportedLanguage) {
   document.documentElement.lang = lang
   document.documentElement.dir = RTL_LANGUAGES.includes(lang) ? 'rtl' : 'ltr'
 }
 
-export function LanguageProvider({ children, initialLanguage = 'en' }: {
+/**
+ * Resolve the actual language to use:
+ * 1. If localStorage has a saved preference, use that (client only)
+ * 2. Otherwise fall back to the server-detected initialLanguage
+ */
+function resolveLanguage(fallback: SupportedLanguage): SupportedLanguage {
+  if (typeof window !== 'undefined') {
+    try {
+      const saved = localStorage.getItem('user-language') as SupportedLanguage
+      if (saved && SUPPORTED_LANGS.includes(saved)) return saved
+    } catch {}
+  }
+  return fallback
+}
+
+export function LanguageProvider({ children, initialLanguage = 'en', initialTranslations }: {
   children: ReactNode
   initialLanguage?: SupportedLanguage
+  initialTranslations?: Translations
 }) {
-  const [language, setLanguageState] = useState<SupportedLanguage>(initialLanguage)
-  const [translations, setTranslations] = useState<Translations | null>(null)
+  // Resolve language synchronously from localStorage BEFORE any effect runs.
+  // This prevents the flash where initialLanguage ('en') overrides RTL.
+  const [language, setLanguageState] = useState<SupportedLanguage>(() => resolveLanguage(initialLanguage))
+
+  // Start with server-provided translations or English fallback
+  const [translations, setTranslations] = useState<Translations>(
+    (initialTranslations || enTranslations) as unknown as Translations
+  )
   const cacheRef = useRef<Map<SupportedLanguage, Translations>>(new Map())
+  const isFirstRender = useRef(true)
 
   // Load translations when language changes (with caching)
+  // On first render, skip updateDocumentDirection since the inline script already set it.
   useEffect(() => {
     const cached = cacheRef.current.get(language)
     if (cached) {
       setTranslations(cached)
-      updateDocumentDirection(language)
+      if (!isFirstRender.current) updateDocumentDirection(language)
+      isFirstRender.current = false
       return
     }
 
@@ -41,28 +70,12 @@ export function LanguageProvider({ children, initialLanguage = 'en' }: {
       const loaded = await loadTranslations(language)
       cacheRef.current.set(language, loaded)
       setTranslations(loaded)
-      updateDocumentDirection(language)
+      if (!isFirstRender.current) updateDocumentDirection(language)
+      isFirstRender.current = false
     }
     loadLang()
   }, [language])
 
-  // Load saved language from localStorage on mount
-  useEffect(() => {
-    const saved = localStorage.getItem('user-language') as SupportedLanguage
-    if (saved) {
-      setLanguageState(saved)
-    } else {
-      // Auto-detect from browser language
-      const browserLang = navigator.language.split('-')[0] as SupportedLanguage
-      const supportedLangs: SupportedLanguage[] = ['en', 'fr', 'es', 'de', 'fa', 'it', 'pt', 'ru', 'zh', 'ja', 'ko', 'ar', 'hi', 'nl', 'pl']
-
-      if (supportedLangs.includes(browserLang)) {
-        setLanguageState(browserLang)
-        localStorage.setItem('user-language', browserLang)
-      }
-    }
-  }, [])
-
   const setLanguage = useCallback((lang: SupportedLanguage) => {
     setLanguageState(lang)
     localStorage.setItem('user-language', lang)
@@ -84,21 +97,6 @@ export function LanguageProvider({ children, initialLanguage = 'en' }: {
     return typeof value === 'string' ? value : key
   }, [translations])
 
-  // During initial load, show children with the initial language as fallback
-  // to prevent blank flash
-  if (!translations) {
-    return (
-      <LanguageContext.Provider value={{
-        language: initialLanguage,
-        setLanguage,
-        t: (key: string) => key,
-        translations: {} as Translations
-      }}>
-        {children}
-      </LanguageContext.Provider>
-    )
-  }
-
   return (
     <LanguageContext.Provider value={{ language, setLanguage, t, translations }}>
       {children}