Languages

The languages that ship

English and Arabic, in both apps. Arabic lays the whole dashboard out right to left, with its own font.

English is the default. Catalogue content (exercises, workouts, programs, dishes, groups, events, challenges, badges) is stored with its name and description in both languages, entered side by side on the Content screens.

How the language is chosen

• The language is the first part of the address. A path without one goes to /en; the browser's language is not detected.
• The language switcher swaps that part of the address and keeps the page.
• The direction is set before the first paint, so an Arabic page never flashes left to right.
• The dashboard sends the page's language to the API in Accept-Language, so its messages come back in the same language.

Change a text

Every visible word lives in messages/<namespace>/en.json and ar.json, in the dashboard's folder. Change the value, keep the key, and change it in both files.

• A key missing from ar.json shows as a missing-message error on the Arabic side, so keep the two files in step.
• The sidebar labels are the exception: they are written in English and Arabic in src/layouts/dashboard/sidebar/config/navigationData.ts, which also feeds the search.
• Text inside {curly} braces is filled in by the app, such as {count} or {name}. Keep those words as they are in both languages.
• Notifications are stored as what happened, never as a sentence, and the dashboard writes the words from its own message files. A new language for them is a translation, not an API change.

The dashboard's own Arabic labels

When you write about Kinora in Arabic, use the labels its screens show:

What the API translates

• Error messages and the message of a successful write come back in the language of the Accept-Language header. ar-SA counts as Arabic; any language the API does not have falls back to English.
• Its texts are JSON files in back-end/src/i18n/translations/en/ and ar/, one per area: auth, coach, common, roles, settings, users.
• Content stored in both languages comes back as { "en": "…", "ar": "…" }, and the dashboard picks one.

Add a language to the dashboard

The two languages are written into several files, so adding a third touches each of them. Paths are inside dashboard/.

1. 01

   Add the language code

   Add it to the locale lists in src/config/i18n.ts, src/proxy.ts, src/app/[locale]/layout.tsx and src/components/LanguageSwitcher.tsx.
2. 02

   Translate the messages

   Add a <code>.json beside every en.json under messages/, including the folders inside messages/dashboard/.
3. 03

   Translate the sidebar and the brand

   Add your language to each label in src/layouts/dashboard/sidebar/config/navigationData.ts, and to the texts in src/config/brand.config.ts.
4. 04

   Set the direction

   For a right-to-left language, add it to RTL_LOCALES in src/app/layout.tsx and to src/hooks/locale/useDirection.ts.

Add a language to the API

1. 01

   Add the language code

   Add it to supportedLocales in back-end/src/i18n/i18n.service.ts.
2. 02

   Translate the messages

   Copy back-end/src/i18n/translations/en/ to a folder named after the code and translate the values. A key you leave out falls back to English.