Langues

Les langues livrées

Chaque libellé, bouton, titre de tableau, légende de graphique, message de formulaire et titre de page existe dans les deux langues, et l'interface de l'assistant IA aussi.

Comment la langue est choisie

• La langue est la première partie de chaque adresse : /en/dashboard/users/all, /ar/dashboard/users/all.
• Une adresse sans langue, comme /, est envoyée vers sa page dans la dernière langue utilisée, ou en anglais la première fois, et / lui-même vers le tableau de bord. src/proxy.ts s'en charge, et mémorise la langue dans un cookie.
• Le menu de langue dans l'en-tête, un drapeau avec son code, change de langue et vous garde sur la même page.
• Le tableau de bord envoie la langue avec chaque requête, donc les messages de l'API, comme une erreur de connexion, reviennent dans la même langue.

De droite à gauche

Sur /ar, un petit script dans src/app/layout.tsx définit lang="ar" et dir="rtl" sur la page avant son affichage, si bien que toute la mise en page est inversée dès la première image : la barre latérale passe à droite, et les cartes, tableaux et menus se lisent de droite à gauche.

Les composants utilisent des classes Tailwind logiques qui suivent le sens d'écriture, comme ms-2, pe-4, start-0 et text-start. Quand vous ajoutez du code, utilisez-les à la place de ml-*, pr-*, left-* ou text-left, sinon la page arabe s'affiche mal.

Où se trouvent les textes

Dans le dossier du tableau de bord, les textes sont répartis par zone sous messages/, chaque dossier avec un en.json et un ar.json :

Les messages de l'API

L'API répond dans la langue de l'en-tête Accept-Language de la requête, anglais ou arabe, et en anglais pour toute autre. Ses textes sont dans back-end/src/i18n/translations/en/ et ar/, un fichier par module. Les pays, les permissions et les paramètres d'application portent les deux langues dans la base de données.

Modifier un texte

• Changez la valeur dans le fichier anglais et celle qui lui correspond dans le fichier arabe. Gardez les mêmes clés dans les deux.
• Une clé absente d'un fichier affiche son nom à la place du texte sur la page de cette langue.
• Les mots entre accolades, comme {count}, sont remplis par l'application. Gardez-les tels quels.

Les libellés arabes du tableau de bord

Quand vous écrivez sur le tableau de bord en arabe, utilisez les libellés qu'il affiche :

Ajouter une langue

1. 01

   Ajouter son code dans les trois listes de langues

   Ajoutez le code de la langue à locales dans src/config/i18n.ts, dans src/proxy.ts et dans src/app/[locale]/layout.tsx. Pour le français :

   src/config/i18n.tsCopier

   export const locales = ['en', 'ar', 'fr'] as const
2. 02

   Ajoutez ses fichiers de messages

   Dans chaque dossier sous messages/ qui contient un en.json, copiez-le sous le nouveau code et traduisez les valeurs. Gardez chaque clé et chaque mot entre accolades.
3. 03

   Ajoutez-la au menu de langue

   Ajoutez-la à languages dans src/components/LanguageSwitcher.tsx, avec son code et un drapeau de country-flag-icons, comme { code: "fr", country: "FR" as const, Flag: FR } avec FR ajouté à l'import des drapeaux.
4. 04

   Définir son sens d'écriture, si nécessaire

   Seul l'arabe est traité comme une langue de droite à gauche. Pour une autre langue de droite à gauche, ajoutez son code à RTL_LOCALES dans src/app/layout.tsx et étendez les vérifications locale === "ar", en commençant par src/hooks/locale/useDirection.ts.

Redémarrez yarn dev, ou reconstruisez, et la nouvelle langue répond à sa propre adresse. L'API continue de lui répondre en anglais tant que vous n'avez pas ajouté ses traductions dans back-end/src/i18n/, où supportedLocales dans i18n.service.ts liste les langues qu'elle charge.