Langues

L'app est en anglais et en français, comme le site web.

Les fichiers

Fichier	Rôle
src/i18n/en.ts	Tous les textes en anglais. C'est la référence.
src/i18n/fr.ts	Les mêmes clés, en français
src/i18n/index.ts	La configuration d'i18next

Les textes sont rangés par écran ou par sujet :

export const en = {
  tabs: { clock: 'Clock', dashboard: 'Dashboard', ... },
  clock: {
    title: 'Clock',
    workedToday: 'Worked today {worked} · Daily target {target}',
    ...
  },
  ...
};

export type Messages = typeof en;

// fr.ts
export const fr: Messages = {
  tabs: { clock: 'Pointage', ... },
  clock: {
    workedToday: 'Travaillé aujourd’hui {worked} · Objectif du jour {target}',
    ...
  },
};

fr a le type Messages, calculé à partir de en. Si une clé manque en français, TypeScript refuse de compiler. Impossible d'oublier une traduction.

Afficher un texte

const { t } = useTranslation();

<Text>{t('clock.title')}</Text>
<Text>{t('clock.workedToday', { worked: '3 h 20', target: '7 h 00' })}</Text>

Les valeurs entre accolades ({worked}) sont remplacées par celles passées en second argument. La syntaxe {...} est configurée dans index.ts (i18next utilise {{...}} par défaut) :

interpolation: { escapeValue: false, prefix: '{', suffix: '}' },

Les pluriels

i18next choisit la bonne forme avec les suffixes _one et _other :

countMine_one: 'You manage {count} team',
countMine_other: 'You manage {count} teams',

t('teams.countMine', { count: 3 }); // "You manage 3 teams"

Le choix de la langue

// src/i18n/index.ts
export function deviceLocale(): Locale {
  return getLocales()[0]?.languageCode === 'fr' ? 'fr' : 'en';
}

// src/state/session.tsx
function applyLocale(user: SignedInUser | null) {
  i18n.changeLanguage(user?.preferences.locale ?? deviceLocale());
}

Dans Compte, « Langue » enregistre le choix sur le compte (PUT /users/:id/preferences), puis recharge l'utilisateur. Le choix suit donc la personne sur le web et sur tous ses téléphones.

Les dates

Les dates et heures s'affichent avec toLocaleDateString et toLocaleTimeString, dans la langue active :

export function dateLocale() {
  return i18n.language === 'fr' ? 'fr-FR' : 'en-US';
}

date.toLocaleDateString(dateLocale(), { weekday: 'short', month: 'short', day: 'numeric' });
// fr : "lun. 13 oct."   en : "Mon, Oct 13"

Les messages d'erreur de l'API

L'API envoie une phrase en anglais et un code stable. L'app n'affiche jamais la phrase : elle choisit son propre texte traduit à partir du code. Voir Parler à l'API.

Ajouter un texte

1. Ajoute la clé dans src/i18n/en.ts, au bon endroit.
2. TypeScript signale aussitôt que fr.ts est incomplet.
3. Ajoute la traduction dans src/i18n/fr.ts.
4. Utilise t('section.cle') dans l'écran.