feat: update index language buttons with Google Translate selection

web-app/django/VIM/apps/instruments/views/instrument_list.py

@@ -105,10 +105,21 @@ def get_active_language_en_label(self) -> str:
         Returns:
             str: The English label of the active language
         """
-        language_en = self.request.GET.get("language")
-        if language_en:
-            return language_en
-        return self.request.session.get("active_language_en", settings.DEFAULT_LANGUAGE)
+        language_param = self.request.GET.get("language") or self.request.session.get(
+            "active_language_en"
+        )
+
+        if language_param:
+            # Check if the language is an English label
+            try:
+                lang_obj = Language.objects.get(en_label__iexact=language_param)
+                return lang_obj.en_label
+
+            except Language.DoesNotExist:
+                pass
+
+        # Return the defult if nothing matches
+        return settings.DEFAULT_LANGUAGE
 
     def get_active_language(self) -> Language:
         """

web-app/django/VIM/templates/main/index.html

@@ -50,7 +50,8 @@ <h1>
           </div>
           <div class="row">
             <div class="col-6">
-              <a href="{% url "instrument-list" %}?language=English">
+              <a class="dynamic-language-link"
+                 href="{% url 'instrument-list' %}?language=English">
                 <button class="btn btn-warning rounded-pill start-btn en-site-btn desktop">
                   Visit English Site
                 </button>
@@ -80,7 +81,8 @@ <h1>
               <br />
               Explore, share, connect musical instruments in every language.
             </p>
-            <a href="{% url "instrument-list" %}?language=English">
+            <a class="dynamic-language-link"
+               href="{% url 'instrument-list' %}?language=English">
               <button class="btn btn-warning rounded-pill start-btn en-site-btn mobile">
                 Visit English Site
               </button>

web-app/frontend/src/GoogleTranslate.ts

@@ -58,6 +58,7 @@ function googleTranslateElementInit() {
       'google_translate_element',
     );
     customizeGoogleTranslate();
+    attachGTLanguageListener();
   } catch (error) {
     console.error('Google Translate initialization failed:', error);
     setTimeout(googleTranslateElementInit, 200);
@@ -94,6 +95,29 @@ function customizeGoogleTranslate() {
   watchGTDefaultText(googleSelect);
 }
 
+function attachGTLanguageListener() {
+  const googleSelect =
+    document.querySelector<HTMLSelectElement>('.goog-te-combo');
+
+  if (!googleSelect) {
+    setTimeout(attachGTLanguageListener, 100);
+    return;
+  }
+
+  // Wait to GT set its current value (from another tab)
+  setTimeout(() => {
+    if (googleSelect.value) {
+      updateLanguageButtons(googleSelect.value);
+    }
+  }, 500);
+
+  // Update when user changes language
+  googleSelect.addEventListener('change', () => {
+    if (!googleSelect.value) return;
+    updateLanguageButtons(googleSelect.value);
+  });
+}
+
 // Watch for the default text of the Google Translate widget to be "Select Language"
 // and set it to "English"
 function watchGTDefaultText(googleSelect: HTMLSelectElement) {
@@ -148,6 +172,42 @@ function getGTLanguage(googleSelect: HTMLSelectElement) {
   return readCookie('googtrans');
 }
 
+function updateLanguageButtons(langCode: string) {
+  // Skip French languages
+  if (langCode.toLowerCase().includes('fr')) return;
+
+  let displayName = langCode;
+
+  // Convert code → English display name
+  if (typeof Intl?.DisplayNames === 'function') {
+    const dn = new Intl.DisplayNames(['en'], { type: 'language' });
+    displayName = dn.of(langCode) ?? langCode;
+  }
+
+  document
+    .querySelectorAll<HTMLAnchorElement>('a.dynamic-language-link')
+    .forEach((link) => {
+      try {
+        const url = new URL(link.href, window.location.origin);
+        // Put DISPLAY NAME in URL
+        url.searchParams.set('language', displayName);
+        link.href = url.pathname + url.search + url.hash;
+      } catch {}
+
+      let btn = link.querySelector<HTMLButtonElement>('.en-site-btn');
+
+      if (btn) {
+        // Remove cookie Listeners
+        const newBtn = btn.cloneNode(true) as HTMLButtonElement;
+        btn.replaceWith(newBtn);
+        btn = newBtn;
+      }
+      if (!btn) return;
+
+      btn.textContent = `Visit ${displayName} Site`;
+    });
+}
+
 // Export the initialization function so it's globally accessible for backwards compatibility
 window.googleTranslateElementInit = googleTranslateElementInit;