yourpart3/docs/KONZEPT_UI_SPRACHE_FRANZOESISCH.md

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)

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