# Konzept: Französisch (`fr`) als Bedien-/UI-Sprache

**Stand:** April 2026  
**Bezug:** Bestehende Locales `de`, `en`, `es`, `ceb` (Vue I18n, Store, SEO, Header).

---

## 1. Ziel

- Nutzer können die Oberfläche auf **Französisch** stellen (Endonym: **Français**).
- **Vollständige Key-Parität** mit der deutschen Referenz (`de`), analog zu **Spanisch** (`es`): keine stillen Lücken, die nur über Fallback sichtbar werden.
- **Locale-Code:** `fr` (BCP 47). Regionale Varianten (`fr-CA`, `fr-CH`) nur bei Bedarf später; vorerst eine gemeinsame `fr`-UI.

---

## 2. Inhaltliche Leitplanken

| Thema | Empfehlung |
|--------|------------|
| **Anrede** | Einheitlich festlegen: **„vous“** (formell) oder **„tu“** (duzt); für eine Community-Plattform oft **vous** bei Systemtexten, ggf. Ausnahmen in Spieldialogen abstimmen. **Umsetzung:** Die erste französische UI-Version wurde maschinell aus dem Deutschen erzeugt (`google-translate-api-x`); menschliche Nachbearbeitung sollte **vous** durchgängig prüfen (v. a. Social/Vocab/Falukant). |
| **Referenz für Keys** | `de` als maßgebliche Struktur; Übersetzung nach Französisch. |
| **Qualität** | Große Module (Falukant, Admin, Social/Vocab) iterativ oder durch TMS/Übersetzer; CI-Check auf Key-Parität `de` ↔ `fr`. |

---

## 3. Technische Umsetzung (Frontend)

### 3.1 Neue Übersetzungsdateien

- Ordner: `frontend/src/i18n/locales/fr/`
- Dieselben **19 JSON-Dateien** wie unter `en` / `de` / `es` / `ceb` (z. B. `general.json`, `header.json`, … `seo.json`).

### 3.2 I18n-Bundling

- Datei: `frontend/src/i18n/index.js`
  - Alle `fr*` importieren.
  - Block `messages.fr = { ...frGeneral, …, ...frSeo }` analog zu `es`.
  - **`fallbackLocale`:** gesetzt als **`fr: ['de']`** (Lücken fallen auf Deutsch zurück).
- **`ceb`** nutzt `deepMerge` über `en`+`ceb`; **`fr`** wie **`es`**: nur `fr`-Bundles, kein deepMerge nötig.

### 3.3 Zentrale Liste unterstützter UI-Locales

Aktuell mehrfach dieselbe Liste (`de`, `en`, `ceb`, `es`), u. a. in:

- `frontend/src/store/index.js`
- `frontend/src/main.js` (`?lang=`, localStorage)
- `frontend/src/components/AppHeader.vue`
- `frontend/src/components/SettingsWidget.vue`
- `frontend/src/utils/seo.js`

**Empfehlung:** Eine exportierte Konstante z. B. `frontend/src/i18n/supportedLocales.js` (`SUPPORTED_UI_LOCALES`, ggf. `SEO_UI_LOCALES` daraus ableiten oder gemeinsam pflegen) und alle Stellen darauf umstellen – **vor oder beim** Einführen von `fr`, damit keine Stelle vergessen wird.

### 3.4 Sprachauswahl UI

- **`AppHeader.vue`:** Option `{ value: 'fr', nativeLabel: 'Français' }`; `supported` aus Zentralmodul.
- **`SettingsWidget.vue`:** Nach Speichern der Profil-Sprache Store synchron halten; `languagesList` aktuell unvollständig vs. Header – **alle** UI-Sprachen (`de`, `en`, `ceb`, `es`, `fr`) konsistent anbieten oder vollständig aus API-`setting.options` speisen.

### 3.5 Register / Einstellungen (JSON)

- In `settings.personal.language` (und falls nötig `register.languages`) in **allen** relevanten Locales den Eintrag **`fr`** / **„Français“** ergänzen.

### 3.6 SEO & Einstieg per URL

- **`frontend/src/utils/seo.js`:** `fr` in die Locale-Liste aufnehmen; `hreflang` für `fr`; `og:locale` / Alternates wie bei bestehenden Sprachen.
- **`main.js`:** Query `?lang=fr` über zentrale erlaubte Locales freischalten.
- **`index.html`:** falls hreflang/noscript manuell gepflegt wird – `fr` ergänzen.

### 3.7 Browser-Sprache (optional)

- In `store` / `main.js`: Wenn `navigator.language` mit `fr` beginnt (z. B. `fr`, `fr-FR`, `fr-BE`, `fr-CH`), Standard-UI auf `fr` setzen – analog zu bestehender Logik für Deutsch und Bisaya.

---

## 4. Backend

- Falls die **Account-Sprache** serverseitig validiert oder als feste Optionsliste ausgeliefert wird: **`fr`** zur Whitelist / zu den Optionen hinzufügen.
- **Vocab-Sprachen** in der Datenbank (Kurse, Zielsprachen) sind unabhängig von der **UI-Locale**; keine Pflichtänderung für reines UI-Französisch.

---

## 5. Qualitätssicherung & Abnahme

- Skript: flache Key-Parität `de` vs. `fr` pro JSON-Datei (wie bereits für `es` genutzt).
- `npm run build` ohne Fehler.
- Manuell: `?lang=fr`, Wechsel im Header ohne vollständigen Reload, Smoke über Login, Einstellungen, eine Social-/Falukant-Ansicht.

---

## 6. Definition of Done (Checkliste)

- [x] `frontend/src/i18n/locales/fr/*.json` vollständig (Key-Parität zu `de`)
- [x] `i18n/index.js`: `fr` eingebunden, `fallbackLocale` für `fr` gesetzt (`['de']`)
- [x] Zentrale `SUPPORTED_UI_LOCALES` in `frontend/src/i18n/supportedLocales.js`; Store, `main.js`, Header, Settings-Widget, `seo.js` importieren daraus
- [x] `AppHeader`, `main.js`, `store`, `seo.js`, `RegisterDialog` um `fr` / Browser-Erkennung `fr*` erweitert
- [x] `settings` / `register` JSON: Sprache `fr` (und Register um `es` wo gefehlt) ergänzt
- [x] `SettingsWidget`: `languagesList` über alle UI-Sprachen aus `SUPPORTED_UI_LOCALES`
- [x] Backend: `initializeTypes` + `authService` + Migration `type.user_param_value` für `fr`
- [x] SEO/hreflang/`?lang=fr` + `index.html` Alternate + noscript `lang="fr"`
- [x] QA: `npm run i18n:check-parity` (de↔fr), `npm run build`
- [x] Anrede / MT-Hinweis in Abschnitt 2 (Tabelle) und Skript `frontend/scripts/generate-fr-locale-from-de.mjs` für Regenerierung

---

## 7. Nächste Schritte (optional als Tickets)

1. **Infra:** `supportedLocales.js` + `fr` in allen technischen Stellen + leere/kopierte `fr`-JSONs aus `de` als Stub.
2. **SEO:** hreflang, `seo.json` `fr`, `main.js` / `index.html`.
3. **Übersetzung:** modulweise (Core → Social → Falukant → Admin).
4. **QA & CI:** Key-Check im Workflow.

---

*Ende des Konzepts.*