managarten/memoro/apps/mobile/docs/ADDING_LANGUAGES.md

# Anleitung zum Hinzufügen neuer Sprachen in Memoro

Diese Dokumentation beschreibt den Prozess zum Hinzufügen neuer Sprachen zur Memoro-App.

## Übersicht

Die Memoro-App verwendet i18next für die Internationalisierung. Die Sprachkonfiguration befindet sich im Verzeichnis `features/i18n`. Um eine neue Sprache hinzuzufügen, müssen folgende Schritte durchgeführt werden:

1. Erstellen einer neuen Übersetzungsdatei
2. Aktualisieren der i18n-Konfiguration
3. Testen der neuen Sprache

## 1. Erstellen einer neuen Übersetzungsdatei

### Schritt 1.1: Erstellen der JSON-Datei

Erstelle eine neue JSON-Datei im Verzeichnis `features/i18n/translations/` mit dem entsprechenden Sprachcode als Dateinamen (z.B. `es.json` für Spanisch).

Verwende eine bestehende Übersetzungsdatei (z.B. `en.json`) als Vorlage und übersetze alle Werte in die neue Sprache. Die Schlüssel müssen identisch bleiben.

Beispiel für eine Übersetzungsdatei:

```json
{
  "common": {
    "save": "Speichern",
    "cancel": "Abbrechen",
    // weitere Übersetzungen...
  },
  // weitere Kategorien...
}
```

### Schritt 1.2: Struktur der Übersetzungsdatei

Stelle sicher, dass die Struktur der neuen Übersetzungsdatei exakt der Struktur der vorhandenen Dateien entspricht. Alle Schlüssel müssen vorhanden sein, um Fehler zu vermeiden.

Die Hauptkategorien sind:
- `common`: Allgemeine Begriffe
- `auth`: Authentifizierungsbezogene Texte
- `home`: Texte für die Startseite
- `tabs`: Bezeichnungen für die Tabs
- `menu`: Menüeinträge
- `blueprints`: Texte für Blueprints
- `app`: App-spezifische Texte
- `tags`: Tag-bezogene Texte
- `memo`: Memo-bezogene Texte
- `settings`: Einstellungstexte
- `recording`: Aufnahme-bezogene Texte
- `layout`: Layout-bezogene Texte
- `audio_archive`: Texte für das Audio-Archiv

## 2. Aktualisieren der i18n-Konfiguration

### Schritt 2.1: Import der neuen Übersetzungsdatei

Öffne die Datei `features/i18n/index.ts` und füge einen Import für die neue Übersetzungsdatei hinzu:

```typescript
import xx from './translations/xx.json'; // xx ist der Sprachcode der neuen Sprache
```

### Schritt 2.2: Aktualisieren der LANGUAGES-Konstante

Füge die neue Sprache zur `LANGUAGES`-Konstante hinzu:

```typescript
export const LANGUAGES = {
  // bestehende Sprachen...
  xx: { nativeName: 'Sprachname', emoji: '🇽🇽' }, // Sprachname in der Originalsprache und entsprechendes Flaggen-Emoji
};
```

Verwende für das Emoji die entsprechende Länderflagge im Unicode-Format (z.B. 🇪🇸 für Spanien).

### Schritt 2.3: Aktualisieren der i18n-Ressourcen

Füge die neue Sprache zu den Ressourcen in der i18n-Initialisierung hinzu:

```typescript
i18n
  .use(initReactI18next)
  .init({
    resources: {
      // bestehende Sprachen...
      xx: { translation: xx },
    },
    // weitere Konfigurationen...
  });
```

## 3. Testen der neuen Sprache

### Schritt 3.1: Überprüfen der Sprachauswahl

Starte die App und navigiere zu den Einstellungen. Die neue Sprache sollte in der Sprachauswahl erscheinen.

### Schritt 3.2: Testen der Übersetzungen

Wähle die neue Sprache aus und überprüfe, ob alle Texte korrekt übersetzt werden. Achte besonders auf:
- Formatierungen (z.B. bei Datumsangaben)
- Pluralformen
- Spezielle Zeichen
- Textlängen (einige Übersetzungen können länger sein als die Originaltexte)

### Schritt 3.3: Überprüfen der RTL-Unterstützung (falls erforderlich)

Wenn die neue Sprache von rechts nach links geschrieben wird (z.B. Arabisch, Hebräisch), überprüfe, ob die RTL-Unterstützung korrekt funktioniert. In der Datei `features/i18n/LanguageContext.tsx` wird die RTL-Unterstützung für bestimmte Sprachen aktiviert:

```typescript
setIsRTL(['ar', 'he'].includes(language)); // Füge hier den neuen Sprachcode hinzu, falls nötig
```

## 4. Erweitern der Blueprint-Funktionalität

Wenn die App Blueprints mit mehrsprachigen Inhalten unterstützt, müssen möglicherweise auch die Blueprint-Formulare und -Komponenten aktualisiert werden, um die neue Sprache zu unterstützen.

### Schritt 4.1: Aktualisieren der Blueprint-Formulare

Füge neue Felder für die neue Sprache in den Blueprint-Erstellungs- und -Bearbeitungsformularen hinzu.

### Schritt 4.2: Aktualisieren der Blueprint-Anzeige

Stelle sicher, dass die Blueprint-Anzeige die Inhalte in der neuen Sprache korrekt darstellt.

## 5. Bekannte Einschränkungen

- Die Memoro-App unterstützt derzeit keine dynamische Nachladen von Übersetzungen. Alle Übersetzungen müssen zum Build-Zeitpunkt vorhanden sein.
- Einige Teile der App könnten hardcodierte Texte enthalten, die nicht über das i18n-System übersetzt werden.

## 6. Tipps für Übersetzer

- Verwende konsistente Terminologie innerhalb der Übersetzung.
- Achte auf den Kontext der Texte, um eine angemessene Übersetzung zu gewährleisten.
- Teste die Übersetzungen in der App, um sicherzustellen, dass sie im UI-Kontext gut funktionieren.
- Berücksichtige Platzbeschränkungen in der UI, besonders bei längeren Übersetzungen.

## 7. Beispiel: Hinzufügen neuer Sprachen

### 7.1 Beispiel: Hinzufügen von Spanisch

```typescript
// 1. Erstelle die Datei features/i18n/translations/es.json mit allen Übersetzungen

// 2. Aktualisiere features/i18n/index.ts
import es from './translations/es.json';

export const LANGUAGES = {
  de: { nativeName: 'Deutsch', emoji: '🇩🇪' },
  en: { nativeName: 'English', emoji: '🇬🇧' },
  it: { nativeName: 'Italiano', emoji: '🇮🇹' },
  fr: { nativeName: 'Français', emoji: '🇫🇷' },
  es: { nativeName: 'Español', emoji: '🇪🇸' },
};

i18n
  .use(initReactI18next)
  .init({
    resources: {
      de: { translation: de },
      en: { translation: en },
      it: { translation: it },
      fr: { translation: fr },
      es: { translation: es },
    },
    // weitere Konfigurationen...
  });
```

### 7.2 Beispiel: Hinzufügen von Griechisch

```typescript
// 1. Erstelle die Datei features/i18n/translations/el.json mit allen Übersetzungen

// 2. Aktualisiere features/i18n/index.ts
import el from './translations/el.json';

export const LANGUAGES = {
  // bestehende Sprachen...
  el: { nativeName: 'Ελληνικά', emoji: '🇬🇷' },
};

i18n
  .use(initReactI18next)
  .init({
    resources: {
      // bestehende Sprachen...
      el: { translation: el },
    },
    // weitere Konfigurationen...
  });
```

### 7.3 Beispiel: Hinzufügen von Lettisch

```typescript
// 1. Erstelle die Datei features/i18n/translations/lv.json mit allen Übersetzungen

// 2. Aktualisiere features/i18n/index.ts
import lv from './translations/lv.json';

export const LANGUAGES = {
  // bestehende Sprachen...
  lv: { nativeName: 'Latviešu', emoji: '🇱🇻' },
};

i18n
  .use(initReactI18next)
  .init({
    resources: {
      // bestehende Sprachen...
      lv: { translation: lv },
    },
    // weitere Konfigurationen...
  });
```

### 7.4 Beispiel: Hinzufügen von Litauisch

```typescript
// 1. Erstelle die Datei features/i18n/translations/lt.json mit allen Übersetzungen

// 2. Aktualisiere features/i18n/index.ts
import lt from './translations/lt.json';

export const LANGUAGES = {
  // bestehende Sprachen...
  lt: { nativeName: 'Lietuvių', emoji: '🇱🇹' },
};

i18n
  .use(initReactI18next)
  .init({
    resources: {
      // bestehende Sprachen...
      lt: { translation: lt },
    },
    // weitere Konfigurationen...
  });
```

### 7.5 Beispiel: Hinzufügen von Slowakisch

```typescript
// 1. Erstelle die Datei features/i18n/translations/sk.json mit allen Übersetzungen

// 2. Aktualisiere features/i18n/index.ts
import sk from './translations/sk.json';

export const LANGUAGES = {
  // bestehende Sprachen...
  sk: { nativeName: 'Slovenčina', emoji: '🇸🇰' },
};

i18n
  .use(initReactI18next)
  .init({
    resources: {
      // bestehende Sprachen...
      sk: { translation: sk },
    },
    // weitere Konfigurationen...
  });
```

### 7.6 Beispiel: Hinzufügen von Slowenisch

```typescript
// 1. Erstelle die Datei features/i18n/translations/sl.json mit allen Übersetzungen

// 2. Aktualisiere features/i18n/index.ts
import sl from './translations/sl.json';

export const LANGUAGES = {
  // bestehende Sprachen...
  sl: { nativeName: 'Slovenščina', emoji: '🇸🇮' },
};

i18n
  .use(initReactI18next)
  .init({
    resources: {
      // bestehende Sprachen...
      sl: { translation: sl },
    },
    // weitere Konfigurationen...
  });
```