first bro

groups/ApeNameTeamE/assets/js/i18n.js

@@ -105,24 +105,32 @@ function applyTranslations(lang) {
   document.documentElement.lang = lang === 'id' ? 'id' : 'en';
 }
 
+// Override setLanguage to delegate to localization.js when available,
+// so both systems stay in sync (localization.js dispatches 'languageChanged'
+// which triggers our listener below to re-apply dot-key translations).
 function setLanguage(lang) {
   if (lang !== 'id' && lang !== 'en') return;
-  currentLang = lang;
-  sessionStorage.setItem('lang', lang);
-
-  // Update button visual states
-  document.querySelectorAll('.lang-btn').forEach(btn => {
-    const isActive = btn.dataset.lang === lang;
-    btn.classList.toggle('active', isActive);
-  });
-
-  applyTranslations(lang);
+  if (typeof setLang === 'function') {
+    setLang(lang); // localization.js handles state + dispatches languageChanged
+  } else {
+    currentLang = lang;
+    sessionStorage.setItem('lang', lang);
+    applyTranslations(lang);
+  }
 }
-
-// Expose globally so onclick in HTML works
 window.setLanguage = setLanguage;
 
+// Re-apply dot-key translations whenever localization.js changes the language.
+// This fixes the race where localization.js overwrites dot-key elements with the
+// raw key string (its fallback for unknown keys).
+document.addEventListener('languageChanged', (e) => {
+  applyTranslations(e.detail.lang);
+});
+
 // Initialize on DOM ready
 document.addEventListener('DOMContentLoaded', () => {
-  setLanguage(currentLang);
+  // Use localization.js state if it's already loaded, otherwise fall back.
+  const initLang = (typeof getLang === 'function') ? getLang()
+    : (sessionStorage.getItem('lang') || 'id');
+  applyTranslations(initLang);
 });