Skip to content

feat(webui): replace language toggle with scalable dropdown - #304

Merged
ngosang merged 1 commit into
amule-org:masterfrom
ngosang:feature/web-lang
Jul 5, 2026
Merged

feat(webui): replace language toggle with scalable dropdown#304
ngosang merged 1 commit into
amule-org:masterfrom
ngosang:feature/web-lang

Conversation

@ngosang

@ngosang ngosang commented Jul 5, 2026

Copy link
Copy Markdown
Member

The navbar language selector was a cycle button that stepped through languages one click at a time. This does not scale beyond a couple of locales, so replace it with a native dropdown that lists every language and works identically on desktop and mobile. app.js: LangButton (cycle button) -> LangSelect, a native
populated from LANGS; selecting an option calls setLang() which
persists and reloads. Rendered in both the desktop tools and the
mobile drawer.

  • i18n.js: drop the now-obsolete cycleLang(); add langName() to show each language as its own autonym via Intl.DisplayNames (no data to maintain).
  • app.css: style .lang-select to blend into the ghost toolbar; make it a full-width 44px row in the mobile drawer and hide its redundant text label there (icon + select are self-explanatory).
  • The navbar language selector was a cycle button that stepped through
    languages one click at a time, which does not scale beyond a couple of
    locales. Replace it with a native <select> dropdown that lists every
    language and works identically on desktop and mobile.
    
    - app.js: LangButton (cycle button) -> LangSelect, a native <select>
      populated from LANGS; selecting an option calls setLang() to persist
      and reload. Rendered in both the desktop tools and the mobile drawer.
    - i18n.js: drop the obsolete cycleLang(); add langName() to show each
      language as its own autonym via Intl.DisplayNames (no data to maintain).
    - app.css: style .lang-select to blend into the ghost toolbar and make it
      a full-width 44px row in the mobile drawer.
    
    Accessibility is covered by the select's aria-label plus the label title.
    @ngosang
    ngosang merged commit 86f5047 into amule-org:master Jul 5, 2026
    12 checks passed
    @ngosang
    ngosang deleted the feature/web-lang branch July 5, 2026 07:49
    Cflsft pushed a commit to Cflsft/amule that referenced this pull request Jul 6, 2026
    …g#304)
    
    The navbar language selector was a cycle button that stepped through
    languages one click at a time, which does not scale beyond a couple of
    locales. Replace it with a native <select> dropdown that lists every
    language and works identically on desktop and mobile.
    
    - app.js: LangButton (cycle button) -> LangSelect, a native <select>
      populated from LANGS; selecting an option calls setLang() to persist
      and reload. Rendered in both the desktop tools and the mobile drawer.
    - i18n.js: drop the obsolete cycleLang(); add langName() to show each
      language as its own autonym via Intl.DisplayNames (no data to maintain).
    - app.css: style .lang-select to blend into the ghost toolbar and make it
      a full-width 44px row in the mobile drawer.
    
    Accessibility is covered by the select's aria-label plus the label title.
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Labels

    None yet

    Projects

    None yet

    Development

    Successfully merging this pull request may close these issues.

    1 participant