Problem Statement

Currently, the Template Playground interface is hardcoded in English. As an open-source project aiming for global adoption, limiting the interface to a single language creates a barrier for non-English speaking developers and lawyers. Users from different regions (France, Spain, Japan, etc.) cannot comfortably use the tool in their native language, which hinders the adoption of the Accord Project ecosystem.

Expected Behavior

The application should support multiple languages (starting with English, French, and Spanish).

• A Language Switcher should be available in the Navbar.
• When a user selects a language, all UI text (buttons, menus, help tooltips, error headers) should instantly update to that language.
• The user's language preference should be saved (persisted) so it remains selected on their next visit.

Actual Behavior

The application strings are currently hardcoded in English within the React components (e.g., <span className="text-white">Template Playground</span>), making translation impossible without code changes.

Possible Fix

Implement Internationalization (i18n) using react-i18next.

Implementation Plan:

1. Dependencies: Install react-i18next, i18next, and i18next-browser-languagedetector.
2. Structure: Create a src/locales/ directory to manage translation JSON files (e.g., en/translation.json, fr/translation.json).
3. Configuration: Initialize i18n in a new src/i18n.ts file.
4. Refactoring:
   • Update Navbar.tsx, MainContainer.tsx, and ProblemPanel.tsx to use the useTranslation hook.
   • Extract hardcoded strings into the JSON files.
5. UI Components: Add a dropdown component in the Navbar for switching languages.

Steps to Reproduce

1. Open the Template Playground.
2. Look at the Navbar or any panel header.
3. Observer that all text is in English with no option to change it.

Context

This feature is critical for:

• Increasing the accessibility of the tool.
• Supporting a global community of contributors.
• Making complex error messages easier to understand for non-native speakers.