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
Story 7 — Language Switcher UI Component
Epic: EPIC-010 — Global Internationalization & Multi-Language Support (GitHub #100)
Priority: P1
User Story
Requirements
Switcher Design
Behavior
?lang=xxon first switch, then session/cookie persistname_info.locale) for persistence across sessionsLogin Page
Public Profile Pages
/@username,/p/{id}) detect visitor language from browserAccept-LanguageResponsive Design
Acceptance Criteria
Files to Create
app/app.portalv2/app/Views/partials/language-switcher.phpapp/app.portalv2/public/css/language-switcher.cssFiles to Modify
app/app.portalv2/app/Views/layouts/main.php— include switcher partial in navapp/app.portalv2/app/Views/auth/login.php— add switcher to login pageapp/app.portalv2/app/Controllers/BaseController.php— save locale to DB on change