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

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é

   • Badge "Débloqué" sur les articles
   • Icône de cadenas ouvert
   • Couleur différente ou bordure distinctive

4. Raccourcis clavier de base

   • / : Focus automatique sur la barre de recherche
   • Esc : Fermer les modals et overlays
   • Ctrl/Cmd + K : Ouvrir une recherche rapide (command palette)

5. Amélioration de la modal de paiement

   • Bouton "Payer avec Alby" en priorité (plus grand et plus visible)
   • Auto-détection d'Alby
   • Instructions étape par étape
   • QR code amélioré (plus grand, meilleur contraste)
   • Compte à rebours plus visible

Priorité moyenne

6. Recherche améliorée avec suggestions

   • Autocomplétion basée sur les titres d'articles
   • Suggestions d'auteurs
   • Historique de recherche récente

7. Filtres persistants

   • Sauvegarder les préférences de filtres dans IndexedDB
   • Restaurer les filtres au retour sur la page

8. Navigation clavier complète

   • Tab order logique
   • Navigation par flèches dans les listes
   • Skip links pour navigation rapide

9. ARIA amélioré

   • Labels ARIA pour tous les boutons iconiques
   • Régions ARIA (role="navigation", role="main", role="search")
   • Annonces screen reader (aria-live)

10. Messages d'erreur actionnables

    • Messages clairs avec explication
    • Actions de récupération (bouton "Réessayer")
    • Suggestions de solutions

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.