Internationalization (i18n)

Closegram uses i18next with react-i18next to support multiple languages.

Setup

Configured in src/i18n/ with i18next-browser-languagedetector to automatically detect the user's browser language.

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({ resources, fallbackLng: "en", interpolation: { escapeValue: false } });

Supported languages

Code	Language	Status
en	English	✅ Complete
es	Spanish	✅ Complete

See TRANSLATION_STATUS.md for detailed coverage per key.

Usage in components

import { useTranslation } from "react-i18next";

export function MyComponent() {
  const { t } = useTranslation();
  return <h1>{t("settings.account_privacy")}</h1>;
}

Translation files

src/i18n/
  locales/
    en/
      translation.json
    es/
      translation.json

The backend also ships its own translation files at apps/backend/translations/en.json and es.json for server-side error messages.

Language switcher

The LanguageSelector component (in Settings) switches the language at runtime. The selection is persisted via localStorage through i18next-browser-languagedetector.

Adding a new language

1. Create src/i18n/locales/<code>/translation.json
2. Copy all keys from en/translation.json
3. Translate each value
4. Register the new locale in the i18n config
5. Add the option to LanguageSelector.tsx
6. Add the corresponding file to apps/backend/translations/