feat(i18n): enhance browser language detection with clear priority logging

SUMMARY:
Enhanced i18n language detection to clearly show priority order and
provide better logging for debugging user language preferences.

PRIORITY ORDER:
1. User's manual selection (localStorage) - HIGHEST
   - Clicking language flags saves preference here
   - Allows users to override browser language

2. Browser's language setting (navigator.language) - AUTOMATIC
   - Detects from browser preferences
   - Only applies if no user override exists

3. Default to English (fallback)
   - Used when browser language not supported

CHANGES:

1. Enhanced detectLanguage():
   - Added clear comments documenting priority order
   - Added console.log for each detection path
   - Shows which source determined the language
   - Logs browser language even when not supported

2. Enhanced setLanguage():
   - Added log when user manually selects language
   - Clarifies that preference overrides browser detection
   - Shows that preference persists across pages

BENEFITS:
✓ Users see automatic language detection from browser
✓ Users can override via flag clicks (persists via localStorage)
✓ Clear logging helps debug language selection issues
✓ Developers can see exactly how language was determined

EXAMPLE LOGS:
- Browser detection: '[i18n] Language detected from browser: de (from de-DE)'
- User override: '[i18n] User manually selected language: fr (saved to localStorage)'
- Fallback: '[i18n] Language defaulted to: en (browser language 'ja-JP' not supported)'

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow 2025-10-19 15:01:14 +13:00
parent f851725608
commit 1ccaf14c5b

View file

@ -25,19 +25,27 @@ const I18n = {
},
detectLanguage() {
// Check localStorage first
// Priority order:
// 1. User's manual selection (localStorage) - allows override via flag clicks
// 2. Browser's language setting (automatic detection)
// 3. Default to English (fallback)
// 1. Check localStorage first (user override)
const saved = localStorage.getItem('tractatus-lang');
if (saved && this.supportedLanguages.includes(saved)) {
console.log(`[i18n] Language detected from user preference: ${saved}`);
return saved;
}
// Check browser language
// 2. Check browser language (automatic detection)
const browserLang = (navigator.language || navigator.userLanguage).split('-')[0];
if (this.supportedLanguages.includes(browserLang)) {
console.log(`[i18n] Language detected from browser: ${browserLang} (from ${navigator.language})`);
return browserLang;
}
// Default to English
// 3. Default to English
console.log(`[i18n] Language defaulted to: en (browser language '${navigator.language}' not supported)`);
return 'en';
},
@ -160,22 +168,23 @@ const I18n = {
console.error(`[i18n] Unsupported language: ${lang}`);
return;
}
// Save preference
// Save preference (overrides browser language detection)
localStorage.setItem('tractatus-lang', lang);
console.log(`[i18n] User manually selected language: ${lang} (saved to localStorage)`);
// Update current language
this.currentLang = lang;
// Reload translations
await this.loadTranslations(lang);
// Reapply to page
this.applyTranslations();
// Update selector
this.updateLanguageSelector();
// Update HTML lang attribute
document.documentElement.lang = lang;
@ -184,7 +193,7 @@ const I18n = {
detail: { language: lang }
}));
console.log(`[i18n] Language changed to: ${lang}`);
console.log(`[i18n] Language changed to: ${lang} (will persist across pages)`);
},
updateLanguageSelector() {