tractatus/public/js/components/language-selector.js

/**
 * Language Selector Component
 * Mobile-friendly: Icons on mobile, dropdown on desktop
 */

(function() {
  const supportedLanguages = [
    { code: 'en', name: 'English', flag: '🇬🇧' },
    { code: 'de', name: 'Deutsch', flag: '🇩🇪' },
    { code: 'fr', name: 'Français', flag: '🇫🇷' },
    { code: 'mi', name: 'Te Reo Māori', flag: '🇳🇿', disabled: true, tooltip: 'Planned' }
  ];

  function createLanguageSelector() {
    const container = document.getElementById('language-selector-container');
    if (!container) return;

    const currentLang = (window.I18n && window.I18n.currentLang) || 'en';

    const selectorHTML = `
      <!-- Desktop: Dropdown only (visible md and up) -->
      <div class="hidden md:block">
        <div class="relative">
          <label for="language-selector-desktop" class="sr-only">Select Language</label>
          <select
            id="language-selector-desktop"
            class="px-3 py-2 pr-8 border border-gray-300 rounded-lg bg-white text-gray-700 text-sm focus:border-blue-600 focus:outline-none cursor-pointer appearance-none"
            aria-label="Select language"
          >
            ${supportedLanguages.map(lang => `
              <option
                value="${lang.code}"
                ${lang.code === currentLang ? 'selected' : ''}
                ${lang.disabled ? 'disabled' : ''}
              >
                ${lang.flag} ${lang.name}${lang.disabled ? ' (Planned)' : ''}
              </option>
            `).join('')}
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
            </svg>
          </div>
        </div>
      </div>

      <!-- Mobile: Icon buttons only (visible below md) -->
      <div class="block md:hidden">
        <div class="flex gap-1">
          ${supportedLanguages.filter(lang => !lang.disabled).map(lang => `
            <button
              data-lang="${lang.code}"
              class="language-icon-btn w-11 h-11 flex items-center justify-center rounded-lg border-2 transition-all ${
                lang.code === currentLang
                  ? 'border-blue-600 bg-blue-50'
                  : 'border-gray-300 bg-white hover:border-blue-400 hover:bg-blue-50'
              }"
              aria-label="Switch to ${lang.name}"
              title="${lang.name}"
            >
              <span class="text-2xl" role="img" aria-label="${lang.name} flag">${lang.flag}</span>
            </button>
          `).join('')}
        </div>
      </div>
    `;

    container.innerHTML = selectorHTML;

    // Add event listeners
    attachEventListeners(currentLang);
  }

  function attachEventListeners(currentLang) {
    // Desktop dropdown
    const desktopSelector = document.getElementById('language-selector-desktop');
    if (desktopSelector && window.I18n) {
      desktopSelector.addEventListener('change', function(e) {
        const selectedLang = e.target.value;
        window.I18n.setLanguage(selectedLang);
      });
    }

    // Mobile icon buttons
    const iconButtons = document.querySelectorAll('.language-icon-btn');
    iconButtons.forEach(button => {
      button.addEventListener('click', function() {
        const selectedLang = this.getAttribute('data-lang');
        if (window.I18n) {
          window.I18n.setLanguage(selectedLang);
        }

        // Update active state
        iconButtons.forEach(btn => {
          btn.classList.remove('border-blue-600', 'bg-blue-50');
          btn.classList.add('border-gray-300', 'bg-white');
        });
        this.classList.remove('border-gray-300', 'bg-white');
        this.classList.add('border-blue-600', 'bg-blue-50');
      });
    });
  }

  // Initialize when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', createLanguageSelector);
  } else {
    createLanguageSelector();
  }

  // Re-initialize when language changes (to update active state)
  if (window.I18n) {
    const originalSetLanguage = window.I18n.setLanguage;
    window.I18n.setLanguage = function(lang) {
      originalSetLanguage.call(window.I18n, lang);
      createLanguageSelector(); // Refresh selector with new active language
    };
  }
})();