From 716c681f17f2ea71c10ea80263896585c8dc0f2f Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Fri, 17 Oct 2025 09:07:42 +1300
Subject: [PATCH] refactor(i18n): simplify language selector to icons-only for
 all devices
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UX Simplification:
- Remove dropdown selector completely (was causing rendering conflicts)
- Use icon-only buttons on ALL devices (mobile and desktop)
- Show all 4 languages: 🇬🇧 English, 🇩🇪 Deutsch, 🇫🇷 Français, 🇳🇿 Te Reo Māori
- Māori button shows as disabled with "Planned" tooltip

Technical Changes:
- Eliminate all responsive breakpoint logic (md:hidden, md:block, md:flex)
- Single unified rendering path for all screen sizes
- Removed desktop dropdown and associated event handlers
- Simplified to one flex container with 4 icon buttons
- Active state management works across all buttons including disabled

Fixes:
- Resolves persistent issue where both dropdown and icons appeared on desktop
- Eliminates Tailwind responsive class conflicts
- Consistent UX across all devices
- Better touch targets (44x44px) on all platforms

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/js/components/language-selector.js | 83 +++++++----------------
 1 file changed, 24 insertions(+), 59 deletions(-)

diff --git a/public/js/components/language-selector.js b/public/js/components/language-selector.js
index da18537e..434426df 100644
--- a/public/js/components/language-selector.js
+++ b/public/js/components/language-selector.js
@@ -1,6 +1,6 @@
 /**
  * Language Selector Component
- * Mobile-friendly: Icons on mobile, dropdown on desktop
+ * Simple icon-based selector for all devices
  */
 
 (function() {
@@ -18,51 +18,23 @@
     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"
+      <!-- Language icon buttons (all devices) -->
+      <div class="flex gap-1">
+        ${supportedLanguages.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'
+            } ${lang.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
+            aria-label="${lang.disabled ? lang.name + ' (' + lang.tooltip + ')' : 'Switch to ' + lang.name}"
+            title="${lang.name}${lang.disabled ? ' (' + lang.tooltip + ')' : ''}"
+            ${lang.disabled ? 'disabled' : ''}
           >
-            ${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>
+            <span class="text-2xl" role="img" aria-label="${lang.name} flag">${lang.flag}</span>
+          </button>
+        `).join('')}
       </div>
     `;
 
@@ -73,17 +45,8 @@
   }
 
   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');
+    // Icon buttons
+    const iconButtons = document.querySelectorAll('.language-icon-btn:not([disabled])');
     iconButtons.forEach(button => {
       button.addEventListener('click', function() {
         const selectedLang = this.getAttribute('data-lang');
@@ -92,9 +55,11 @@
         }
 
         // Update active state
-        iconButtons.forEach(btn => {
-          btn.classList.remove('border-blue-600', 'bg-blue-50');
-          btn.classList.add('border-gray-300', 'bg-white');
+        document.querySelectorAll('.language-icon-btn').forEach(btn => {
+          if (!btn.disabled) {
+            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');