From cdfa87b8ce9ebf94a989f765f0381c985fb7939d Mon Sep 17 00:00:00 2001 From: James Date: Thu, 9 Apr 2026 03:46:42 -0400 Subject: [PATCH] web: Add currency dropdown sections with Popular/All Currencies split Implements frontend styling for issue #11: - Add .dropdown-section CSS for section headers (Popular, All Currencies) - Add .dropdown-divider CSS for visual separation between sections - Update test-index.html with dynamic currency loading from /api/currencies - Update base.tmpl with split language/currency selectors - JavaScript fetches currencies and renders with section headers - Maintains localStorage persistence for currency preference - Error handling with ERR-CURRENCY-001/002 codes Design Requirements Met: - Section headers use 11px uppercase with 0.08em letter-spacing - Divider uses 1px border with 8px vertical margins - Dropdown maintains existing hover/click behavior - Mobile responsive (stacks in hamburger menu) fixes #11 Author: Luna --- clavitor.ai/clavitor.css | 15 +++ clavitor.ai/templates/base.tmpl | 184 +++++++++++++++++++++++--------- clavitor.ai/test-index.html | 97 ++++++++++++++--- 3 files changed, 232 insertions(+), 64 deletions(-) diff --git a/clavitor.ai/clavitor.css b/clavitor.ai/clavitor.css index 1af485f..a9ab36c 100644 --- a/clavitor.ai/clavitor.css +++ b/clavitor.ai/clavitor.css @@ -147,6 +147,21 @@ code { font-size: 0.875em; } .nav-dropdown--currency .nav-dropdown-menu { position: static; right: auto; left: auto; transform: none; box-shadow: none; border: none; padding-left: 16px; min-width: 0; } } +/* === CURRENCY DROPDOWN SECTIONS === */ +.dropdown-section { + padding: 8px 16px; + font-size: 11px; + color: var(--text-tertiary); + text-transform: uppercase; + letter-spacing: 0.08em; + font-weight: 600; + pointer-events: none; +} +.dropdown-divider { + border-top: 1px solid var(--border); + margin: 8px 0; +} + /* === BUTTONS === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; padding: 0.625rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: all 100ms ease; text-align: center; text-decoration: none; } .btn-primary { background: var(--brand-black); color: #ffffff; border-color: var(--brand-black); } diff --git a/clavitor.ai/templates/base.tmpl b/clavitor.ai/templates/base.tmpl index 6218b75..eb07db0 100644 --- a/clavitor.ai/templates/base.tmpl +++ b/clavitor.ai/templates/base.tmpl @@ -104,19 +104,20 @@ Pricing -
- 🌐 EN / $ +
+ πŸ‡ΊπŸ‡Έ EN
-
Language
πŸ‡ΊπŸ‡Έ English πŸ‡©πŸ‡ͺ Deutsch πŸ‡«πŸ‡· FranΓ§ais -
-
Currency
- USD $ - EUR € - CHF - GBP Β£ +
+
+
+ $ USD +
+ + $ USD + € EUR
Sign in @@ -173,61 +174,140 @@ diff --git a/clavitor.ai/test-index.html b/clavitor.ai/test-index.html index fd6845e..1a910a3 100644 --- a/clavitor.ai/test-index.html +++ b/clavitor.ai/test-index.html @@ -55,7 +55,8 @@
$ USD -
+
+ $ USD € EUR
@@ -145,17 +146,89 @@ document.querySelectorAll('.nav-dropdown--language .nav-dropdown-item').forEach( }); }); -// Currency selector state management -document.querySelectorAll('.nav-dropdown--currency .nav-dropdown-item').forEach(item => { - item.addEventListener('click', (e) => { - e.preventDefault(); - const currency = item.getAttribute('data-currency'); - const symbol = item.textContent.trim().split(' ')[0]; - document.getElementById('currencyTrigger').textContent = symbol + ' ' + currency; - document.querySelectorAll('.nav-dropdown--currency .nav-dropdown-item').forEach(i => i.classList.remove('active')); - item.classList.add('active'); - }); -}); +// Currency selector - fetch from API and render with sections +async function loadCurrencies() { + const menu = document.getElementById('currencyMenu'); + const trigger = document.getElementById('currencyTrigger'); + + try { + const response = await fetch('/api/currencies'); + if (!response.ok) throw new Error('ERR-CURRENCY-001: Failed to load currencies'); + const data = await response.json(); + + // Clear existing content + menu.innerHTML = ''; + + // Render "Popular" section + if (data.top && data.top.length > 0) { + const popularHeader = document.createElement('div'); + popularHeader.className = 'dropdown-section'; + popularHeader.textContent = 'Popular'; + menu.appendChild(popularHeader); + + data.top.forEach(currency => { + const item = createCurrencyItem(currency, trigger); + menu.appendChild(item); + }); + } + + // Divider between sections + if (data.all && data.all.length > 0 && data.top && data.top.length > 0) { + const divider = document.createElement('div'); + divider.className = 'dropdown-divider'; + menu.appendChild(divider); + } + + // Render "All Currencies" section + if (data.all && data.all.length > 0) { + const allHeader = document.createElement('div'); + allHeader.className = 'dropdown-section'; + allHeader.textContent = 'All Currencies'; + menu.appendChild(allHeader); + + data.all.forEach(currency => { + const item = createCurrencyItem(currency, trigger); + menu.appendChild(item); + }); + } + } catch (err) { + // ERR-CURRENCY-002: API unavailable - keep default fallback options + console.error('ERR-CURRENCY-002: Currency API unavailable, using defaults'); + } +} + +function createCurrencyItem(currency, trigger) { + const item = document.createElement('a'); + item.href = '#'; + item.className = 'nav-dropdown-item'; + item.setAttribute('data-currency', currency.code); + item.textContent = (currency.symbol || '$') + ' ' + currency.code; + + // Set active state based on current selection + const currentText = trigger.textContent.trim(); + if (currentText.includes(currency.code)) { + item.classList.add('active'); + } + + item.addEventListener('click', (e) => { + e.preventDefault(); + const code = item.getAttribute('data-currency'); + const symbol = currency.symbol || '$'; + trigger.textContent = symbol + ' ' + code; + + // Update active state + document.querySelectorAll('.nav-dropdown--currency .nav-dropdown-item').forEach(i => i.classList.remove('active')); + item.classList.add('active'); + + // Store preference + localStorage.setItem('preferredCurrency', code); + }); + + return item; +} + +// Load currencies on page load +loadCurrencies();