Skip to content

MAGIK-928: Language Switcher UI Component #107

@MAGIKBIT

Description

@MAGIKBIT

Story 7 — Language Switcher UI Component

Epic: EPIC-010 — Global Internationalization & Multi-Language Support (GitHub #100)
Priority: P1

User Story

As a MagikTap user, I want a visible language switcher in the navigation bar, so I can quickly change the UI language at any time.

Requirements

Switcher Design

  • Dropdown in the top navigation bar (header), next to user avatar/logout
  • Shows current language with flag emoji and short code (e.g., 🇺🇸 EN)
  • Dropdown options show all 5 languages with native names:
    • 🇺🇸 English
    • 🇪🇸 Español
    • 🇸🇦 العربية
    • 🇪🇹 አማርኛ
    • 🇪🇷 ትግርኛ

Behavior

  • Clicking a language updates: session locale, cookie, and reloads the current page
  • URL changes to include ?lang=xx on first switch, then session/cookie persist
  • No page content loss on language switch (form data preserved via session flash)
  • Language preference saved to user profile (name_info.locale) for persistence across sessions

Login Page

  • Language switcher also available on the login page (before authentication)
  • Uses cookie-only persistence (no session before login)

Public Profile Pages

  • Public pages (/@username, /p/{id}) detect visitor language from browser Accept-Language
  • No switcher on public pages (follows browser locale)

Responsive Design

  • Mobile: compact flag-only button, expands to dropdown
  • Desktop: flag + language code, hover dropdown
  • RTL: dropdown opens left-aligned (mirrors from right)

Acceptance Criteria

# Criteria Priority
1 Language switcher visible in top nav on all authenticated pages P0
2 Clicking language reloads page in selected language P0
3 Selection persisted in session + cookie + database P0
4 Native language names displayed (not English names) P1
5 Flag emojis render on all supported platforms P1
6 Switcher available on login page P1
7 Mobile responsive (flag-only compact mode) P2
8 RTL dropdown opens correctly P1

Files to Create

  • app/app.portalv2/app/Views/partials/language-switcher.php
  • app/app.portalv2/public/css/language-switcher.css

Files to Modify

  • app/app.portalv2/app/Views/layouts/main.php — include switcher partial in nav
  • app/app.portalv2/app/Views/auth/login.php — add switcher to login page
  • app/app.portalv2/app/Controllers/BaseController.php — save locale to DB on change

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions