story-research-zapwall/features/language-preference-settings.md

Language preference selector in settings

Date

2025-01-27

Objectif

Permettre aux utilisateurs de configurer leur langue de préférence (fr/en) dans la page des paramètres, avec chargement automatique au démarrage de l'application depuis localStorage.

Motivations

• Centraliser la gestion de la langue dans la page des paramètres
• Permettre aux utilisateurs de changer facilement leur langue préférée
• Charger automatiquement la préférence de langue au démarrage pour configurer l'application
• Utiliser localStorage pour un accès plus rapide et synchrone

Impacts

• Utilisateurs : Peuvent maintenant configurer leur langue préférée dans les paramètres
• Performance : Chargement synchrone depuis localStorage au démarrage (plus rapide qu'IndexedDB)
• Cohérence : Tous les composants utilisent maintenant localStorage pour la langue

Modifications

Fichiers créés

• components/LanguageSettingsManager.tsx : Composant de gestion de la langue dans les paramètres avec sélection fr/en

Fichiers modifiés

• pages/settings.tsx : Ajout du composant LanguageSettingsManager en première position
• pages/_app.tsx : Modification pour charger la langue depuis localStorage de manière synchrone au démarrage
• hooks/useI18n.ts : Migration de IndexedDB vers localStorage pour la langue
• components/LanguageSelector.tsx : Migration de IndexedDB vers localStorage pour la cohérence
• locales/fr.txt : Ajout des traductions pour les paramètres de langue
• locales/en.txt : Ajout des traductions pour les paramètres de langue

Fonctionnalités implémentées

Composant LanguageSettingsManager

• Affichage de la langue actuelle
• Boutons pour sélectionner français ou anglais
• Sauvegarde automatique dans localStorage
• Rechargement de la page après changement pour appliquer les traductions

Chargement au démarrage

• Lecture synchrone depuis localStorage dans _app.tsx
• Détection de la langue du navigateur en fallback
• Configuration de la locale avant le chargement des traductions

Migration vers localStorage

• Remplacement de IndexedDB par localStorage pour la langue
• Accès synchrone plus rapide
• Compatibilité avec tous les navigateurs

Traductions ajoutées

Français (fr.txt)

• settings.language.title : Langue de préférence
• settings.language.description : Choisissez votre langue préférée pour l'interface
• settings.language.loading : Chargement...
• settings.language.french : Français
• settings.language.english : Anglais

Anglais (en.txt)

• settings.language.title : Preferred Language
• settings.language.description : Choose your preferred language for the interface
• settings.language.loading : Loading...
• settings.language.french : French
• settings.language.english : English

Modalités de déploiement

1. Les modifications sont rétrocompatibles
2. Les utilisateurs existants avec une préférence dans IndexedDB devront la reconfigurer (migration automatique possible si nécessaire)
3. Aucune action spéciale requise, déploiement standard

Modalités d'analyse

• Vérifier que la langue est bien chargée au démarrage dans localStorage
• Tester le changement de langue depuis les paramètres
• Vérifier que le sélecteur dans le header fonctionne toujours correctement
• Confirmer que les traductions sont appliquées après changement de langue