story-research-zapwall/docs/todo-remaining.md

Reste à faire sur le site

Date : 2025-01-27 Auteur : Équipe 4NK Dernière mise à jour : 2025-01-27 (Amélioration modal paiement + Recherche avec suggestions + Filtres persistants + Navigation clavier complète + ARIA amélioré + Messages d'erreur actionnables)

Migration des composants UI

Voir docs/migration-status.md pour la liste complète des composants migrés et restants.

État actuel : ✅ La plupart des composants principaux ont été migrés vers les composants UI réutilisables.

Composants restants (priorité moyenne)

• Uploads de fichiers - Les labels d'upload utilisent encore des span avec styles inline car ils nécessitent une structure HTML spécifique (<label> + <input type="file"> caché) :
  • ImageUploadField.tsx - Déjà partiellement migré avec Button pour RemoveButton
  • MarkdownEditor.tsx - Label d'upload de média
  • markdownEditorTwoColumns/MarkdownEditorTwoColumns.tsx - ToolbarUploadButton
  • markdownEditorTwoColumns/PagesManager.tsx - PageImageUploadButton

Note : Ces éléments nécessitent une structure HTML spécifique et ne peuvent pas être directement migrés vers Button. Une solution serait de créer un composant FileUploadButton spécialisé si nécessaire.

Améliorations UX documentées

Voir features/ux-improvements.md pour la liste complète des améliorations UX proposées.

Priorité haute

1. ✅ Skeleton loaders - Implémenté

   • Remplacé les messages "Loading..." par des skeleton loaders dans :
     • Liste d'articles (ArticlesList.tsx)
     • Cartes d'auteurs (AuthorsList.tsx)
     • Articles utilisateur (UserArticlesList.tsx)
     • Page auteur (AuthorPageContent.tsx)
     • Formulaire de présentation (AuthorPresentationEditor.tsx)
     • Contenu markdown (DocsContent.tsx)
     • Gauge de financement (FundingGauge.tsx)
   • Animation subtile (pulse) pour indiquer le chargement

2. ✅ Toast notifications - Implémenté

   • Système de gestion des toasts créé (ToastContainer.tsx avec ToastProvider et useToast hook)
   • Toasts de succès intégrés :
     • Après déblocage réussi d'un article (ArticleCard.tsx)
     • Après publication réussie (ArticleEditor.tsx)
     • Après copie d'invoice (PaymentModal.tsx)
     • Après initiation du paiement avec Alby (PaymentModal.tsx)
   • Toasts avec variants (success, info, warning, error), durée configurable, fermeture automatique et manuelle
   • Accessibilité : role="alert" et aria-live="polite" pour les screen readers

3. ✅ Indicateur visuel pour contenu débloqué - Implémenté

   • Badge "Débloqué" avec icône de cadenas ouvert dans le header de l'article (ArticleCard.tsx)
   • Bordure distinctive (border-neon-green/40) et glow vert (shadow-glow-green) sur les cartes d'articles débloqués
   • Accessibilité : aria-label sur le badge pour les screen readers

4. ✅ Raccourcis clavier de base - Implémenté

   • / : Focus automatique sur la barre de recherche (détection via role="search")
   • Esc : Fermeture des modals et overlays :
     • Déjà implémenté pour les modals (Modal.tsx) et le menu mobile (MobileMenu.tsx)
     • Ajouté pour NotificationPanel et CreateSeriesModalView
   • Ctrl/Cmd + K : Ouvrir une recherche rapide (command palette) - À implémenter

5. ✅ Amélioration de la modal de paiement - Implémenté

   • Bouton "Payer avec Alby" en priorité (variant "success", taille "large", plus visible)
   • Auto-détection d'Alby avec vérification périodique
   • Instructions étape par étape affichées conditionnellement selon la présence d'Alby
   • QR code amélioré (taille 300px, fond blanc, bordure cyan avec glow)
   • Compte à rebours plus visible (Badge avec animation pulse si < 60s)

Priorité moyenne

6. ✅ Recherche améliorée avec suggestions - Implémenté

   • Autocomplétion basée sur les titres d'articles (5 suggestions max)
   • Suggestions d'auteurs (3 suggestions max)
   • Historique de recherche récente (5 dernières recherches, stocké dans IndexedDB)

7. ✅ Filtres persistants - Implémenté

   • Sauvegarder les préférences de filtres dans IndexedDB (service lib/filterPreferences.ts)
   • Restaurer les filtres au retour sur la page (chargement automatique dans useHomeState())
   • Sauvegarde automatique à chaque modification des filtres

8. ✅ Navigation clavier complète - Implémenté

   • Tab order logique (IDs ajoutés pour les sections principales)
   • Navigation par flèches dans les listes (hook useArrowNavigation avec support ArrowUp/Down/Home/End)
   • Skip links pour navigation rapide (composant SkipLinks avec liens vers main-content, filters-section, articles-section)

9. ✅ ARIA amélioré - Implémenté

   • Labels ARIA pour tous les boutons iconiques (liens dans PageHeader, KeyIndicator, NotificationBadgeButton, AuthorFilterButton, ClearButton, Toast close button)
   • Régions ARIA (role="navigation" pour le header, role="main" pour le contenu principal, role="complementary" pour les filtres, role="contentinfo" pour le footer, role="tablist" pour CategoryTabs)
   • Annonces screen reader (aria-live="polite" dans ToastContainer et Toast, role="alert" pour les toasts)

10. ✅ Messages d'erreur actionnables - Implémenté

    • Messages clairs avec explication (système de classification des erreurs dans lib/errorClassification.ts)
    • Actions de récupération (bouton "Réessayer", "Vérifier la connexion", "Voir la documentation")
    • Suggestions de solutions contextuelles selon le type d'erreur (réseau, paiement, validation, chargement)
    • Composant ErrorState amélioré avec support des actions de récupération
    • Intégration dans ArticlesList, AuthorsList, et PaymentModal

Priorité basse

11. Mode lecture
12. Partage et engagement
13. Guide de première utilisation
14. Prévisualisation avant publication
15. Chargement progressif avancé

Améliorations UI documentées

Voir features/ui-improvements.md pour la liste complète des améliorations UI proposées.

État actuel : ✅ Les composants UI réutilisables ont été créés et la plupart des composants ont été migrés.

Corrections de cohérence restantes

• Audit des couleurs : Identifier tous les usages de couleurs non-thème et remplacer par les couleurs du design system (cyber/neon)
• Cohérence des états : États hover, focus, disabled, actifs/selected uniformes
• Typographie : Système de tailles et poids cohérents
• Espacement : Utiliser l'échelle Tailwind de manière cohérente

Améliorations visuelles

• Background grid : Utiliser bg-cyber-grid sur certains containers (optionnel)
• Gradients : Gradients subtils pour certains backgrounds
• Shadows et glows : Utiliser shadow-glow-cyan et shadow-glow-green de manière cohérente

Infrastructure nécessaire

Voir docs/remaining-tasks.md pour les détails.

Transferts Lightning automatiques

État actuel : Les transferts sont loggés dans lib/automaticTransfer.ts mais nécessitent un nœud Lightning pour être exécutés automatiquement.

À implémenter :

• Configuration nœud Lightning de la plateforme
• API pour créer et payer des invoices Lightning
• Queue de transferts pour gestion asynchrone
• Retry en cas d'échec
• Monitoring et alertes

Optimisations

• Performance : À évaluer après migration complète
• Accessibilité : Vérification complète après migration (contraste, focus, ARIA)
• SEO : À évaluer si nécessaire

Tests

• Tests unitaires : À définir selon la stratégie du projet
• Tests d'intégration : À définir selon la stratégie du projet
• Tests manuels : À effectuer après chaque migration

Documentation

• ✅ Documentation des composants UI créés
• ✅ Documentation de l'état de migration
• ⏳ Documentation des améliorations UX (en cours)
• ⏳ Documentation des améliorations UI (en cours)

Déploiement

Le site peut être déployé en utilisant les scripts disponibles :

• deploy.sh : Déploiement initial complet
• update-from-git.sh : Mise à jour depuis Git local
• update-remote-git.sh : Mise à jour via Git sur le serveur

Note : Le déploiement nécessite une validation explicite avant exécution.