This commit modernizes the language selector UI across the ZeroClaw web dashboard by replacing
native <select> elements with a shared custom dropdown component featuring styled flag icons,
proper RTL/LTR text direction support, and consistent left-aligned text for all languages.
Changes:
- Add LanguageSelector component with custom dropdown, flag badges, and check mark for selected option
- Wire document direction updates on locale change for Arabic, Hebrew, Urdu, and other RTL languages
- Fix RTL text alignment in dropdown options by applying dir attribute only to text spans
- Update pairing dialog and authenticated header to use the shared LanguageSelector
- Add locale metadata helpers: getLanguageOption, getLanguageOptionLabel, getLocaleDirection, applyLocaleToDocument
- Add Vitest configuration and unit tests for i18n helpers
- Add Playwright E2E tests verifying all 31 locales with flag visibility and lang/dir attributes
Testing:
- Unit tests: 5 passed (npm run test:unit)
- Build: passed (npm run build)
- E2E tests: 34 passed (npx playwright test)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
3f5c57634b