Merge branch 'feat/translations'

Author: MathisBarre

I18N_IMPLEMENTATION.md

@@ -0,0 +1,277 @@
+# i18n Implementation Guide
+
+## ✅ Completed
+
+### Infrastructure
+
+- ✅ Installed `i18next` and `react-i18next`
+- ✅ Created i18n configuration (`src/_common/i18n/config.ts`)
+- ✅ Created locale store (`src/_common/store/locale.store.ts`)
+- ✅ Created translation files for all 9 locales:
+  - en-US (English - United States) **FALLBACK**
+  - en-GB (English - United Kingdom)
+  - en-CA (English - Canada)
+  - en-AU (English - Australia)
+  - en-NZ (English - New Zealand)
+  - fr-FR (French - France)
+  - de-DE (German - Germany)
+  - it-IT (Italian - Italy)
+  - nl-NL (Dutch - Netherlands)
+
+### Components
+
+- ✅ Locale selection screen (`src/localeSelection/LocaleSelection.screen.tsx`)
+- ✅ Locale selector component (`src/_common/components/LocaleSelector.tsx`)
+- ✅ Integrated into Router (`src/Router.tsx`)
+- ✅ Integrated into main app (`src/main.tsx`)
+
+### Translated Screens & Components
+
+- ✅ Router.tsx - Error fallback
+- ✅ NavigationBar.tsx - Full navigation with all labels and dialogs
+- ✅ Boathouse.screen.tsx - Boathouse screen with boat lists
+- ✅ Parameters.screen.tsx - Parameter navigation tabs
+- ✅ Stats.screen.tsx - Statistics screen with month names and stats
+- ✅ Onboarding.screen.tsx - Complete onboarding flow
+- ✅ SessionLogs.tsx - Session history with pagination
+- ✅ StartSession.Dialog.tsx - Start session dialog
+- ✅ StopSession.Dialog.tsx - Stop session dialog
+
+### Utilities
+
+- ✅ Created `boat.rules.i18n.ts` for translated boat type labels
+
+## 🔄 In Progress / Remaining
+
+### Components Still Needing Translation (~70+ files)
+
+Use this pattern for each component:
+
+#### Pattern to Follow:
+
+1. **Import useTranslation**:
+
+```typescript
+import { useTranslation } from "react-i18next";
+```
+
+2. **Add in component**:
+
+```typescript
+const { t } = useTranslation();
+```
+
+3. **Replace hardcoded strings**:
+
+```typescript
+// Before:
+<button>Valider</button>
+
+// After:
+<button>{t("common.confirm")}</button>
+```
+
+#### Priority Files to Translate:
+
+**Boathouse Components:**
+
+- `src/boathouse/components/StartSessionDialog/StartSession.Form.tsx`
+- `src/boathouse/components/StartSessionDialog/BoatSection.tsx`
+- `src/boathouse/components/StartSessionDialog/RowersSection.tsx`
+- `src/boathouse/components/StartSessionDialog/RouteSection.tsx`
+- `src/boathouse/components/StartSessionDialog/CommentSection.tsx`
+- `src/boathouse/components/StartSessionDialog/StartDatetimeSection.tsx`
+- `src/boathouse/components/StartSessionDialog/DurationEstimationSelect.tsx`
+- `src/boathouse/components/StopSessionDialog/StopSession.Form.tsx`
+- `src/boathouse/components/BoatList/*.tsx`
+
+**Logbook Components:**
+
+- `src/logbook/components/IncidentLogs.tsx`
+- `src/logbook/components/IncidentLogsTable.tsx`
+- `src/logbook/components/SessionLogsTable.tsx`
+- `src/logbook/components/ExportSessions.tsx`
+
+**Parameters Components:**
+
+- `src/parameters/components/RowersCrud.tsx`
+- `src/parameters/components/BoatsCrud.tsx`
+- `src/parameters/components/MiscParams.tsx`
+- `src/parameters/components/UpdateRower.tsx`
+- `src/parameters/components/UpdateBoat.tsx`
+- `src/parameters/components/BulkUpdateRower.tsx`
+- `src/parameters/components/RowerStats.tsx`
+- `src/parameters/components/BoatStats.tsx`
+- `src/parameters/components/RowerStatsComparisons.tsx`
+- `src/parameters/components/BoatStatsComparisons.tsx`
+- `src/parameters/components/RouteConfigModal.tsx`
+- `src/parameters/components/BoatLevelConfigModal.tsx`
+- `src/parameters/components/BoatLevelSystem.tsx`
+- `src/parameters/components/DeleteDatas.tsx`
+- `src/parameters/components/dialogs/*.tsx`
+
+**Stats Components:**
+
+- `src/stats/components/SeasonSelector.tsx`
+- `src/stats/components/MonthSelector.tsx`
+- `src/stats/components/StackedBarChart.tsx`
+
+**Common Components:**
+
+- `src/_common/components/Loading.tsx`
+- `src/_common/components/ErrorBlock.tsx`
+- `src/_common/components/WindowAlert.tsx`
+- `src/_common/components/WindowConfirm.tsx`
+- `src/_common/components/WindowPrompt.tsx`
+
+### Adding New Translation Keys
+
+When you find a string that needs translation:
+
+1. **Add to `src/_common/i18n/locales/en-US.json`** (English base):
+
+```json
+{
+  "category": {
+    "newKey": "New English Text"
+  }
+}
+```
+
+2. **Add to `src/_common/i18n/locales/fr-FR.json`** (French):
+
+```json
+{
+  "category": {
+    "newKey": "Nouveau texte français"
+  }
+}
+```
+
+3. **Add to all other locale files** with appropriate translations.
+
+### Common Translation Categories
+
+The translation files are organized into these categories:
+
+- `common`: General UI elements (buttons, labels, etc.)
+- `navigation`: App navigation and menus
+- `onboarding`: Onboarding/setup flow
+- `boathouse`: Boathouse screen specific
+- `session`: Session management (start, stop, details)
+- `logbook`: Logbook and history
+- `stats`: Statistics screen
+- `parameters`: Settings/parameters screen
+- `boat`: Boat-related terms
+- `rower`: Rower-related terms
+- `error`: Error messages
+- `time`: Time-related terms
+
+### Using Translation with Parameters
+
+For dynamic values:
+
+```typescript
+// In translation file:
+"pageOf": "Page {{current}} of {{total}}"
+
+// In component:
+{t("session.pageOf", { current: 5, total: 10 })}
+// Output: "Page 5 of 10"
+```
+
+### Pluralization
+
+For plurals, use the i18next convention:
+
+```json
+{
+  "session_one": "{{count}} session",
+  "session_other": "{{count}} sessions"
+}
+```
+
+Then use:
+
+```typescript
+t(`stats.session_${count === 1 ? "one" : "other"}`, { count });
+```
+
+### Boat Type Labels
+
+Use the utility function for boat type labels:
+
+```typescript
+import { getTypeLabelTranslated } from "../_common/business/boat.rules.i18n";
+
+// In component:
+const label = getTypeLabelTranslated(boatType, t);
+```
+
+## 📋 Testing
+
+1. **Test Locale Selection**: On first launch, you should see the locale selection screen
+2. **Test Translations**: Change locale and verify text changes
+3. **Test Fallback**: If a translation is missing, it should fall back to en-US
+
+## 🔧 Development Commands
+
+```bash
+# Run dev server
+yarn dev
+
+# Build (includes TypeScript check and tests)
+yarn build
+
+# Type check only
+yarn tsc
+
+# Lint
+yarn lint
+```
+
+## 📝 Quick Reference
+
+### Import Pattern
+
+```typescript
+import { useTranslation } from "react-i18next";
+
+export const MyComponent = () => {
+  const { t } = useTranslation();
+
+  return <div>{t("category.key")}</div>;
+};
+```
+
+### Change Language Programmatically
+
+```typescript
+import { changeLanguage } from "../_common/i18n/config";
+import { Locale } from "../_common/store/locale.store";
+
+changeLanguage("fr-FR" as Locale);
+```
+
+### Access Current Locale
+
+```typescript
+import { useLocaleStore } from "../_common/store/locale.store";
+
+const { locale } = useLocaleStore();
+```
+
+## 🎯 Next Steps
+
+1. Go through each component file in the priority list
+2. Add `useTranslation` hook
+3. Replace hardcoded strings with `t()` calls
+4. Add missing translation keys to all 9 locale files
+5. Test each screen by switching locales
+6. Update utility functions that return user-facing text
+
+## 📚 Resources
+
+- [i18next Documentation](https://www.i18next.com/)
+- [react-i18next Documentation](https://react.i18next.com/)
+- Translation files: `src/_common/i18n/locales/*.json`

package.json

@@ -1,7 +1,7 @@
 {
   "name": "boathouse.rowingbeacon.com",
   "private": true,
-  "version": "1.19.0",
+  "version": "1.20.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -38,12 +38,14 @@
     "clsx": "^2.0.0",
     "cmdk": "^1.0.0",
     "drizzle-orm": "^0.38.0",
+    "i18next": "^25.6.0",
     "jssha": "^3.3.1",
     "lucide-react": "^0.412.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^5.0.0",
     "react-hook-form": "^7.46.2",
+    "react-i18next": "^16.2.1",
     "react-select": "^5.8.0",
     "recharts": "^2.15.1",
     "sonner": "^1.6.0",

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "rowing-beacon-tauri-app"
-version = "1.19.0"
+version = "1.20.0"
 description = "A Tauri App"
 authors = ["you"]
 license = ""

src-tauri/Cargo.toml

@@ -18,7 +18,7 @@
   },
   "productName": "Rowing Beacon",
   "mainBinaryName": "Rowing Beacon",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "identifier": "com.rowing-beacon-tauri-app.app",
   "plugins": {
     "sql": {

src-tauri/tauri.conf.json

@@ -10,8 +10,14 @@ import { useOnboardingStore } from "./onboarding/onboarding.store";
 import { ParametersScreen } from "./parameters/Parameters.screen";
 import { StatsScreen } from "./stats/Stats.screen";
 import { ErrorBoundary } from "react-error-boundary";
+import { useLocaleStore } from "./_common/store/locale.store";
+import { LocaleSelectionScreen } from "./localeSelection/LocaleSelection.screen";
+import { useEffect } from "react";
+import { changeLanguage } from "./_common/i18n/config";
+import { useTranslation } from "react-i18next";
 
 export function Router() {
+  const { locale } = useLocaleStore();
   const isOnboardingDone = useOnboardingStore((state) => state.isOnboarded);
   const setIsOnboardingDone = useOnboardingStore((state) => state.setOnboarded);
   const {
@@ -23,6 +29,18 @@ export function Router() {
     setPage("parameters");
   });
 
+  // Initialize language from store on mount
+  useEffect(() => {
+    if (locale) {
+      changeLanguage(locale);
+    }
+  }, [locale]);
+
+  // Show locale selection first if not set
+  if (!locale) {
+    return <LocaleSelectionScreen onComplete={() => {}} />;
+  }
+
   if (!isOnboardingDone) {
     return (
       <OnboardingScreen
@@ -61,16 +79,17 @@ export function Router() {
 }
 
 const ErrorFallback = () => {
+  const { t } = useTranslation();
   return (
     <div className="flex-1 flex items-center justify-center flex-col gap-4 p-4 h-full">
       <AlertCircleIcon className="w-12 h-12 text-red-500" />
-      <p className="text-lg">Une erreur est survenue</p>
+      <p className="text-lg">{t("error.generic")}</p>
       <button
         onClick={() => window.location.reload()}
         className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center gap-2"
       >
         <RefreshCwIcon className="w-4 h-4" />
-        Recharger la page
+        {t("error.reload")}
       </button>
     </div>
   );