feat(dashboard): add Hebrew (he) translations and RTL support#64
Merged
Merged
Conversation
Add full internationalization (i18n) to the dashboard with English and Hebrew locales, including right-to-left layout support and an in-app language switcher. What's included: - i18next + react-i18next + browser language detector - New src/i18n/ module with en.json and he.json translation files covering all pages, components, and toast messages - Language switcher button in the sidebar footer (persists to localStorage; auto-detects browser language on first load) - RTL support: document dir/lang is updated on language change, with CSS overrides for sidebar, modals, inputs, selects, toasts, and code blocks (technical identifiers stay LTR even in RTL) - Heebo web font loaded for Hebrew typography - All 9 pages converted: Dashboard, Sessions, Webhooks, ApiKeys, MessageTester, Infrastructure, Plugins, Logs, Login Backwards compatible: English remains the default, no API or backend changes, no schema migrations. Existing users see no behavior change unless their browser is set to he-*. Verified: - tsc -b passes with no errors - vite build succeeds - All Hebrew strings present in production bundle - RTL CSS rules present in compiled output
4 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds full internationalization (i18n) to the dashboard with English and Hebrew locales, including right-to-left (RTL) layout support and an in-app language switcher.
What's included
i18next,react-i18next, andi18next-browser-languagedetectordashboard/src/i18n/withindex.tsconfig andlocales/{en,he}.jsoncovering every page, modal, toast, table column, button, and empty-state messagelocalStorage(openwa_language); on first load the browser language is auto-detecteddocument.documentElement.dir/.langare kept in sync with the active language. Scoped[dir=\"rtl\"]CSS overrides handle:flex-direction: row-reverse)code,.mono,prestay LTR even inside RTL containers (so phone numbers, session IDs, and JSON render correctly)Heebofont loaded via Google Fonts for Hebrew, falling back to system Hebrew fontsWhat's not changed
Test plan
[dir=rtl]CSS rules present in compiled CSS bundlei18next-browser-languagedetectorfirst-load auto-detect is desired, or if EN-by-default-until-toggled is preferredBundle size impact
Roughly +35 KB gzip from i18next + the two locale JSON files. Locales are bundled together (no async loading) to keep things simple; happy to switch to lazy-loaded namespaces if preferred.