Add i18n support to the project

[coderabbitai]

As discussed in PR #6 and this comment, we need to add i18n support in a future PR. Requested by @SvenVw.

[SvenVw]

Objective

This task is to set up and integrate the LinguiJS library into the fdm-app to enable internationalization (i18n), allowing the application to support multiple languages. The initial setup will support Dutch (nl) as the default language and English (en) as a secondary language.

Background

After evaluating several i18n libraries, LinguiJS was chosen for its excellent tooling (CLI for message extraction and compilation), use of industry-standard .po files, powerful ICU message syntax for handling complex translations, and great integration with our existing Vite and React stack.

Implementation Plan

1. Installation

Add LinguiJS dependencies to the fdm-app package.

pnpm add @lingui/core @lingui/react
pnpm add -D @lingui/cli @lingui/vite-plugin

2. Configuration

Create a lingui.config.js file in the fdm-app root with the following configuration:

/** @type {import('@lingui/conf').LinguiConfig} */
export default {
  locales: ['en', 'nl'],
  sourceLocale: 'nl',
  catalogs: [
    {
      path: '<rootDir>/app/locales/{locale}/messages',
      include: ['<rootDir>/app'],
    },
  ],
  format: 'po',
};

• locales: Defines the languages the app will support.
• sourceLocale: Sets the default language of the application to Dutch.
• catalogs: Configures where to find translatable messages and where to store the translation files (.po).

3. Vite Integration

Update the fdm-app/vite.config.ts file to include the LinguiJS Vite plugin.

// vite.config.ts
import { defineConfig } from 'vite';
import { lingui } from '@lingui/vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react(),
    lingui(),
  ],
});

4. Add Scripts to package.json

Add the Lingui CLI commands to the scripts section of fdm-app/package.json.

"scripts": {
  // ... existing scripts
  "i18n:extract": "lingui extract",
  "i18n:compile": "lingui compile"
},

• i18n:extract: Scans the source code and extracts messages into .po files.
• i18n:compile: Compiles the .po files into optimized JavaScript modules.

5. Setup and Provider Configuration

Create a utility file (e.g., fdm-app/app/lib/i18n.ts) to manage the LinguiJS setup.

// fdm-app/app/lib/i18n.ts
import { i18n } from '@lingui/core';
import { messages as enMessages } from '../locales/en/messages';
import { messages as nlMessages } from '../locales/nl/messages';

i18n.load('en', enMessages);
i18n.load('nl', nlMessages);
i18n.activate('nl'); // Activate the default language

export { i18n };

Then, wrap the application in the I18nProvider in fdm-app/app/root.tsx.

// fdm-app/app/root.tsx
import { I18nProvider } from '@lingui/react';
import { i18n } from './lib/i18n';

export default function App() {
  return (
    <I18nProvider i18n={i18n}>
      {/* Rest of the application */}
    </I18nProvider>
  );
}

6. Implementation Strategy

The implementation will be rolled out in phases, starting with a PoC to validate the setup, followed by a systematic translation of the entire application.

Phase 1: Proof of Concept (PoC)

This phase is identical to the original PoC to ensure the core setup is working correctly.

1. Internationalize the signin._index.tsx route by wrapping text with the <Trans> component.
2. Run pnpm i18n:extract to generate message catalogs.
3. Add translations for "Sign In" to the nl and en .po files.
4. Run pnpm i18n:compile to build the translations.
5. Implement a basic language switcher (e.g., in the main navigation or footer) to test language activation.

Phase 2: Full Application Rollout

Once the PoC is successful, we will systematically internationalize the entire fdm-app.

1. Shared Components: Go through all shared components in fdm-app/app/components/ (including ui/, blocks/, etc.) and wrap all static text for translation.
2. Application Routes: Go through every file in fdm-app/app/routes/ and wrap all user-facing strings. This includes page titles, labels, button text, and static content.
3. Forms and Validation: Pay special attention to forms. All field labels, placeholders, and helper texts must be translated. Validation messages, especially those coming from Zod schemas, will also need to be internationalized.
4. Run i18n:extract and i18n:compile: After translating a batch of components or routes, run the extraction and compilation scripts to update the message catalogs.
5. Translate Content: Fill in all the Dutch and English translations in the generated .po files.

Acceptance Criteria

• All LinguiJS dependencies are added and configured in fdm-app.
• The initial PoC on the signin._index.tsx route is successful.
• A permanent, user-facing language switcher is implemented in a suitable location (e.g., header or user settings).
• All user-facing strings in shared components (fdm-app/app/components/) are internationalized.
• All user-facing strings in application routes (fdm-app/app/routes/) are internationalized.
• All .po message catalogs for nl and en are fully translated.
• The README is updated with instructions on how to manage translations using the new i18n:* scripts.