UI: Split language/currency selector into two dropdowns #10

New Issue

johan · 2026-04-09T07:30:40Z

johan commented

2026-04-09 07:30:40 +00:00

Summary

The current locale selector combines language and currency in one dropdown ("🇺🇸 EN / $"). Split into two separate select boxes: one for language, one for currency.

Current State

In clavitor.ai/test-index.html (lines 49-60):

Single dropdown shows "🌐 EN / $"
Mixed language and currency options in one menu

Desired State

Two independent dropdowns side-by-side:

Language selector: flag + 2-letter code (e.g., "🇺🇸 EN")
Currency selector: symbol + 3-letter code (e.g., "$ USD")

Design Requirements

Language dropdown: shows flag + 2-letter code
Currency dropdown: shows symbol + 3-letter code
Both dropdowns fit within nav bar without wrapping
Mobile: stack vertically in hamburger menu
Maintain current hover/click behavior

Files to Modify

clavitor.ai/test-index.html — structure
clavitor.ai/clavitor.css — styling for split selectors
JavaScript handler for independent state management

CSS Considerations

Current .nav-dropdown--locale has special positioning
Ensure --right alignment works for both dropdowns
Gap between selectors: 8px (use existing spacing vars)

Priority

Medium — UX improvement for international users.

Assignee

Luna (design) / Emma (implementation)

## Summary The current locale selector combines language and currency in one dropdown ("🇺🇸 EN / $"). Split into two separate select boxes: one for language, one for currency. ## Current State In `clavitor.ai/test-index.html` (lines 49-60): - Single dropdown shows "🌐 EN / $" - Mixed language and currency options in one menu ## Desired State Two independent dropdowns side-by-side: - Language selector: flag + 2-letter code (e.g., "🇺🇸 EN") - Currency selector: symbol + 3-letter code (e.g., "$ USD") ## Design Requirements - [ ] Language dropdown: shows flag + 2-letter code - [ ] Currency dropdown: shows symbol + 3-letter code - [ ] Both dropdowns fit within nav bar without wrapping - [ ] Mobile: stack vertically in hamburger menu - [ ] Maintain current hover/click behavior ## Files to Modify - [ ] `clavitor.ai/test-index.html` — structure - [ ] `clavitor.ai/clavitor.css` — styling for split selectors - [ ] JavaScript handler for independent state management ## CSS Considerations - Current `.nav-dropdown--locale` has special positioning - Ensure `--right` alignment works for both dropdowns - Gap between selectors: `8px` (use existing spacing vars) ## Priority Medium — UX improvement for international users. ## Assignee Luna (design) / Emma (implementation)

johan referenced this issue from a commit

2026-04-09 07:40:46 +00:00

web: split language/currency selector into two dropdowns

emma referenced a pull request that will close this issue

2026-04-09 07:41:12 +00:00

Emma: Split language/currency selector into two dropdowns #16

johan referenced this issue from a commit

2026-04-09 07:43:55 +00:00

templates: split language/currency selector into two dropdowns

luna referenced a pull request that will close this issue

2026-04-09 07:44:01 +00:00

Luna: Split language/currency selector into two dropdowns #17