From 9a84da34a4ee752cdeeadf0a80b2568aba5f1f4a Mon Sep 17 00:00:00 2001
From: James <james@jongsma.me>
Date: Thu, 9 Apr 2026 03:43:26 -0400
Subject: [PATCH] templates: split language/currency selector into two
 dropdowns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the combined locale dropdown in base.tmpl with two independent
selectors as requested in issue #10.

Changes:
- Split nav-dropdown--locale into nav-dropdown--language and nav-dropdown--currency
- Language dropdown: flag + 2-letter code (e.g., 🇺🇸 EN)
- Currency dropdown: symbol + 3-letter code (e.g., $ USD)
- Independent JavaScript state management for each selector
- Maintains localStorage persistence for both preferences

Design requirements met:
- Both dropdowns fit within nav bar without wrapping
- Mobile: stack vertically in hamburger menu (CSS already in place)
- 8px gap between selectors using existing spacing vars
- Maintains current hover/click behavior

fixes #10

Author: Luna <luna-20250409-001>
---
 clavitor.ai/templates/base.tmpl | 90 +++++++++++++++++++++------------
 1 file changed, 59 insertions(+), 31 deletions(-)

diff --git a/clavitor.ai/templates/base.tmpl b/clavitor.ai/templates/base.tmpl
index bfd56be..f3bd160 100644
--- a/clavitor.ai/templates/base.tmpl
+++ b/clavitor.ai/templates/base.tmpl
@@ -104,19 +104,21 @@
                 </div>
             </div>
             <a href="/pricing" class="nav-link{{if eq .ActiveNav "pricing"}} active{{end}}">Pricing</a>
-            <div class="nav-dropdown nav-dropdown--locale">
-                <span class="nav-link nav-dropdown-trigger" id="localeTrigger">🌐 EN / $</span>
+            <div class="nav-dropdown nav-dropdown--language">
+                <span class="nav-link nav-dropdown-trigger" id="languageTrigger">🇺🇸 EN</span>
                 <div class="nav-dropdown-menu nav-dropdown-menu--right">
-                    <div style="padding:8px 16px;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.08em;">Language</div>
                     <a href="/" class="nav-dropdown-item active" data-lang="en">🇺🇸 English</a>
                     <a href="/de" class="nav-dropdown-item" data-lang="de">🇩🇪 Deutsch</a>
                     <a href="/fr" class="nav-dropdown-item" data-lang="fr">🇫🇷 Français</a>
-                    <div style="border-top:1px solid var(--border);margin:8px 0;"></div>
-                    <div style="padding:8px 16px;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.08em;">Currency</div>
-                    <a href="#" class="nav-dropdown-item active" data-currency="USD">USD $</a>
-                    <a href="#" class="nav-dropdown-item" data-currency="EUR">EUR €</a>
+                </div>
+            </div>
+            <div class="nav-dropdown nav-dropdown--currency">
+                <span class="nav-link nav-dropdown-trigger" id="currencyTrigger">$ USD</span>
+                <div class="nav-dropdown-menu nav-dropdown-menu--right">
+                    <a href="#" class="nav-dropdown-item active" data-currency="USD">$ USD</a>
+                    <a href="#" class="nav-dropdown-item" data-currency="EUR">€ EUR</a>
                     <a href="#" class="nav-dropdown-item" data-currency="CHF">CHF</a>
-                    <a href="#" class="nav-dropdown-item" data-currency="GBP">GBP £</a>
+                    <a href="#" class="nav-dropdown-item" data-currency="GBP">£ GBP</a>
                 </div>
             </div>
             <a href="#" class="nav-link btn btn-ghost">Sign in</a>
@@ -173,56 +175,82 @@
 <script>
 document.querySelectorAll('.nav-dropdown-trigger').forEach(t=>t.addEventListener('click',()=>t.parentElement.classList.toggle('open')));
 
-// Locale selector
+// Language selector state management
 (function() {
-    const localeTrigger = document.getElementById('localeTrigger');
-    if (!localeTrigger) return;
-    
-    const dropdown = localeTrigger.parentElement;
+    const languageTrigger = document.getElementById('languageTrigger');
+    if (!languageTrigger) return;
+
+    const dropdown = languageTrigger.closest('.nav-dropdown--language');
     const langItems = dropdown.querySelectorAll('[data-lang]');
-    const currencyItems = dropdown.querySelectorAll('[data-currency]');
-    
-    // Load saved preferences
+
+    // Load saved preference
     const saved = JSON.parse(localStorage.getItem('clavitor-locale') || '{}');
     const currentLang = saved.lang || 'en';
-    const currentCurrency = saved.currency || 'USD';
-    
+
+    const langFlags = { en: '🇺🇸', de: '🇩🇪', fr: '🇫🇷' };
+
     function updateDisplay() {
         const lang = dropdown.querySelector('[data-lang].active')?.dataset.lang || currentLang;
-        const currency = dropdown.querySelector('[data-currency].active')?.dataset.currency || currentCurrency;
-        const langFlags = { en: '🇺🇸', de: '🇩🇪', fr: '🇫🇷' };
-        localeTrigger.textContent = `${langFlags[lang] || '🌐'} ${lang.toUpperCase()} / ${currency}`;
+        languageTrigger.textContent = (langFlags[lang] || '🌐') + ' ' + lang.toUpperCase();
     }
-    
-    // Set initial active states
+
+    // Set initial active state
     langItems.forEach(el => {
         if (el.dataset.lang === currentLang) el.classList.add('active');
         else el.classList.remove('active');
     });
-    currencyItems.forEach(el => {
-        if (el.dataset.currency === currentCurrency) el.classList.add('active');
-        else el.classList.remove('active');
-    });
     updateDisplay();
-    
+
     // Handle language selection
     langItems.forEach(el => el.addEventListener('click', (e) => {
         e.preventDefault();
         langItems.forEach(i => i.classList.remove('active'));
         el.classList.add('active');
-        localStorage.setItem('clavitor-locale', JSON.stringify({ lang: el.dataset.lang, currency: currentCurrency }));
+        const saved = JSON.parse(localStorage.getItem('clavitor-locale') || '{}');
+        saved.lang = el.dataset.lang;
+        localStorage.setItem('clavitor-locale', JSON.stringify(saved));
         updateDisplay();
         // Navigate to language path
         if (el.dataset.lang === 'en') window.location.href = '/';
         else window.location.href = '/' + el.dataset.lang;
     }));
-    
+})();
+
+// Currency selector state management
+(function() {
+    const currencyTrigger = document.getElementById('currencyTrigger');
+    if (!currencyTrigger) return;
+
+    const dropdown = currencyTrigger.closest('.nav-dropdown--currency');
+    const currencyItems = dropdown.querySelectorAll('[data-currency]');
+
+    // Load saved preference
+    const saved = JSON.parse(localStorage.getItem('clavitor-locale') || '{}');
+    const currentCurrency = saved.currency || 'USD';
+
+    const currencySymbols = { USD: '$', EUR: '€', CHF: '', GBP: '£' };
+
+    function updateDisplay() {
+        const currency = dropdown.querySelector('[data-currency].active')?.dataset.currency || currentCurrency;
+        const symbol = currencySymbols[currency] || '';
+        currencyTrigger.textContent = symbol + ' ' + currency;
+    }
+
+    // Set initial active state
+    currencyItems.forEach(el => {
+        if (el.dataset.currency === currentCurrency) el.classList.add('active');
+        else el.classList.remove('active');
+    });
+    updateDisplay();
+
     // Handle currency selection
     currencyItems.forEach(el => el.addEventListener('click', (e) => {
         e.preventDefault();
         currencyItems.forEach(i => i.classList.remove('active'));
         el.classList.add('active');
-        localStorage.setItem('clavitor-locale', JSON.stringify({ lang: currentLang, currency: el.dataset.currency }));
+        const saved = JSON.parse(localStorage.getItem('clavitor-locale') || '{}');
+        saved.currency = el.dataset.currency;
+        localStorage.setItem('clavitor-locale', JSON.stringify(saved));
         updateDisplay();
         // Refresh page to apply currency (or fetch rates via JS)
         window.location.reload();