Corrections i18n - Résumé des changements

Problème identifié

Beaucoup d'éléments de l'interface restaient en français car ils étaient codés en dur dans le HTML sans système de traduction dynamique.

Solution implémentée

1. Système d'attributs `data-i18n`

Ajout d'attributs data-i18n sur les éléments HTML statiques pour permettre la traduction automatique :

<!-- Avant -->
<button onclick="showNewNoteModal()">✨ Nouvelle note</button>

<!-- Après -->
<button onclick="showNewNoteModal()" data-i18n="menu.newNote">✨ Nouvelle note</button>

2. Amélioration de `translateStaticUI()`

La fonction translateStaticUI() dans frontend/src/language-manager.js a été améliorée pour :

Traduire automatiquement tous les éléments avec data-i18n :

const elementsWithI18n = document.querySelectorAll('[data-i18n]');
elementsWithI18n.forEach(element => {
    const key = element.getAttribute('data-i18n');
    const translation = t(key);
    if (translation && translation !== key) {
        element.textContent = translation;
    }
});

Gérer les attributs spéciaux :
- data-i18n-placeholder : pour traduire les placeholders d'input
- data-i18n-title : pour traduire les attributs title (tooltips)
Préserver les emojis : détecte les emojis en début de texte et les conserve lors de la traduction

3. Éléments HTML mis à jour

Header (`templates/index.html`)

✅ Bouton "Accueil" → data-i18n="menu.home"
✅ Bouton "Nouvelle note" → data-i18n="menu.newNote"
✅ Input de recherche → data-i18n-placeholder="search.placeholder"

Sidebar

✅ Bouton "Nouveau dossier" → data-i18n="fileTree.newFolder"
✅ Bouton "Paramètres" → data-i18n="settings.title" sur le span
✅ Section "⭐ Favoris" → data-i18n="sidebar.favorites"
✅ Section "📅 Daily Notes" → data-i18n="sidebar.daily"

Modals (traduites dynamiquement)

✅ Modal "Nouvelle note" (titre, label, boutons)
✅ Modal "Nouveau dossier" (titre, label, boutons)
✅ Modal "Paramètres" (titre, onglets, boutons)

✅ Bouton "Supprimer"
✅ Bouton "Annuler"

4. Nouvelles clés de traduction ajoutées

Fichiers : locales/en.json et locales/fr.json

{
  "fileTree": {
    "newFolder": "New Folder" / "Nouveau Dossier"
  },
  "tabs": {
    "themes": "Themes" / "Thèmes",
    "fonts": "Fonts" / "Polices",
    "shortcuts": "Shortcuts" / "Raccourcis",
    "other": "Other" / "Autre"
  },
  "newNoteModal": {
    "title": "New Note" / "Nouvelle Note",
    "label": "Note name" / "Nom de la note",
    "placeholder": "my-note.md" / "ma-note.md",
    "create": "Create / Open" / "Créer / Ouvrir",
    "cancel": "Cancel" / "Annuler"
  },
  "newFolderModal": {
    "title": "New Folder" / "Nouveau Dossier",
    "label": "Folder name" / "Nom du dossier",
    "placeholder": "my-folder" / "mon-dossier",
    "create": "Create" / "Créer",
    "cancel": "Cancel" / "Annuler"
  },
  "selectionToolbar": {
    "delete": "Delete" / "Supprimer",
    "cancel": "Cancel" / "Annuler"
  },
  "sidebar": {
    "files": "Files" / "Fichiers",
    "favorites": "Favorites" / "Favoris",
    "daily": "Daily Notes" / "Notes Quotidiennes",
    "search": "Search" / "Recherche"
  }
}

Prochaines étapes

Builder le frontend :
```
cd frontend
npm run build
```
Tester :
- Lancer le serveur : go run ./cmd/server
- Ouvrir http://localhost:8080
- Changer la langue dans Settings > Autre
- Vérifier que tous les éléments se traduisent

Éléments encore à traduire (optionnel)

Pour une traduction complète à 100%, il faudrait aussi traduire :

Les messages d'erreur JavaScript (alert, confirm)
Les commentaires HTML (peu visible par l'utilisateur)
Les tooltips (attributs title)
Les templates dynamiques (file-tree, favorites, daily-notes, etc.)

Ces éléments peuvent être ajoutés progressivement avec le même système data-i18n.

Conclusion

Le système i18n est maintenant fonctionnel avec :

✅ Support automatique des attributs data-i18n
✅ Traduction des éléments principaux de l'interface
✅ Sélecteur de langue fonctionnel
✅ Persistance de la préférence utilisateur
✅ Structure extensible pour ajouter facilement de nouvelles langues

4.3 KiB Raw Permalink Blame History