story-research-zapwall/docs/migration-status.md

État de la migration des composants UI

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)

Composants UI réutilisables créés

Les composants suivants ont été créés dans components/ui/ :

• Button : Boutons avec variants (primary, secondary, success, danger, ghost) et tailles
• Card : Containers avec variants (default, interactive)
• Input : Champs de saisie avec support d'icônes
• Textarea : Zones de texte avec label et helperText
• ErrorState : Affichage d'erreurs
• EmptyState : États vides
• Badge : Badges
• Skeleton : Loaders skeleton
• Modal : Modales
• Toast : Notifications toast
• MobileMenu : Menu mobile

Composants migrés

Composants principaux

• ✅ ArticlesList.tsx - ErrorState, EmptyState
• ✅ AuthorsList.tsx - ErrorState, EmptyState
• ✅ ArticleCard.tsx - Card
• ✅ AuthorCard.tsx - Card
• ✅ SearchBar.tsx - Input
• ✅ ArticleFilters.tsx - Card, Button
• ✅ ArticlePreview.tsx - Button
• ✅ PaymentModal.tsx - Button, Card
• ✅ ConnectButton.tsx - Button
• ✅ ArticleFormButtons.tsx - Button
• ✅ ConditionalPublishButton.tsx - Button, Card
• ✅ AlbyInstaller.tsx - Button
• ✅ CacheUpdateManager.tsx - Button, Card, ErrorState
• ✅ UserArticlesList.tsx - Button, ErrorState
• ✅ ConnectedUserMenu.tsx - Button
• ✅ SeriesCard.tsx - Button
• ✅ ProfileSeriesBlock.tsx - Button
• ✅ SeriesSection.tsx - Button

Formulaires

• ✅ reviewForms/ReviewFormView.tsx - Button, ErrorState, Input, Textarea, Card
• ✅ reviewForms/ReviewTipFormView.tsx - Button, ErrorState, Textarea, Card
• ✅ reviewForms/ConnectRequiredCard.tsx - Button, Card
• ✅ SponsoringForm.tsx - Button, Card, Textarea, ErrorState
• ✅ authorPresentationEditor/PresentationForm.tsx - Button, Card, ErrorState
• ✅ authorPresentationEditor/NoAccountView.tsx - Button, Card
• ✅ authorPresentationEditor/AuthorPresentationEditor.tsx - Button
• ✅ createSeriesModal/CreateSeriesModalView.tsx - Button, ErrorState, Input, Textarea
• ✅ CreateAccountModalComponents.tsx - Button, Card, ErrorState, Textarea

Gestion de configuration

• ✅ relayManager/RelayManagerContent.tsx - Button, Card, Input, ErrorState
• ✅ relayManager/RelayCard.tsx - Button, Input
• ✅ nip95Config/Nip95ConfigContent.tsx - Button, Card, Input, ErrorState
• ✅ nip95Config/Nip95ApiCard.tsx - Button, Input
• ✅ keyManagement/KeyManagementImportSection.tsx - Button, Card, ErrorState
• ✅ keyManagement/KeyManagementImportForm.tsx - Textarea

Autres composants

• ✅ ArticleReviews.tsx - Card, ErrorState, Button
• ✅ ArticlePages.tsx - Card
• ✅ authorPage/SeriesList.tsx - Button, Card, EmptyState
• ✅ authorPage/SponsoringSummary.tsx - Button, Card
• ✅ syncProgressBar/view.tsx - Button, ErrorState
• ✅ MarkdownEditor.tsx - Button

Composants restants à migrer

Aucun composant prioritaire restant. Tous les composants principaux ont été migrés vers les composants UI réutilisables.

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

Priorité basse

• Aucun composant prioritaire bas restant. Tous les composants principaux ont été migrés.

Composants récemment migrés

• ✅ LanguageSelector.tsx - Migration vers Button
• ✅ NotificationBadge.tsx - Migration vers Button
• ✅ NotificationBadgeButton.tsx - Migration vers Button
• ✅ ClearButton.tsx - Migration vers Button
• ✅ keyManagement/KeyManagementImportSection.tsx - Migration de KeyManagementNoAccountBanner vers Card et KeyManagementImportButton vers Button
• ✅ ArticleEditor.tsx - Migration de SuccessMessage vers Card
• ✅ NotificationPanel.tsx - Migration du conteneur principal vers Card
• ✅ AuthorFilterButton.tsx - Migration vers Button avec support forwardRef
• ✅ AuthorFilterDropdown.tsx - Migration de AuthorOption et AllAuthorsOption vers Button
• ✅ components/ui/Button.tsx - Ajout du support forwardRef, aria-expanded, aria-haspopup, aria-selected, aria-controls, role, id
• ✅ components/ui/MobileMenu.tsx - Migration des boutons vers Button
• ✅ components/ui/Toast.tsx - Migration du bouton de fermeture vers Button
• ✅ components/ui/ErrorState.tsx - Migration du conteneur vers Card
• ✅ components/ui/Card.tsx - Ajout du support role pour l'accessibilité
• ✅ components/ui/Modal.tsx - Migration du bouton de fermeture vers Button
• ✅ components/SeriesStats.tsx - Migration des conteneurs de statistiques vers Card
• ✅ components/UserArticlesEditPanel.tsx - Migration du conteneur principal vers Card
• ✅ components/markdownEditorTwoColumns/PagesManager.tsx - Migration de PageEditor vers Card et message d'état vide vers EmptyState
• ✅ components/authorPresentationEditor/AuthorPresentationEditor.tsx - Migration de SuccessNotice vers Card
• ✅ components/MarkdownEditor.tsx - Migration de MarkdownPreview vers Card et textarea vers Textarea
• ✅ components/markdownEditorTwoColumns/MarkdownEditorTwoColumns.tsx - Migration de MarkdownPreview vers Card et textarea vers Textarea
• ✅ components/markdownEditorTwoColumns/PagesManager.tsx - Nettoyage des classes CSS redondantes dans Textarea (w-full, border, rounded, p-* gérés par le composant)

Améliorations UX implémentées

Skeleton loaders (Priorité haute #1)

• ✅ components/ArticlesList.tsx - Remplacement du message "Loading..." par des skeleton loaders pour les cartes d'articles
• ✅ components/AuthorsList.tsx - Remplacement du message "Loading..." par des skeleton loaders pour les cartes d'auteurs
• ✅ components/UserArticlesList.tsx - Remplacement du message "Loading..." par des skeleton loaders pour les articles utilisateur
• ✅ components/authorPage/AuthorPageContent.tsx - Remplacement du message "Loading..." par des skeleton loaders pour la page auteur
• ✅ components/authorPresentationEditor/AuthorPresentationEditor.tsx - Remplacement du message "Loading..." par des skeleton loaders pour le formulaire de présentation
• ✅ components/DocsContent.tsx - Remplacement du message "Loading..." par des skeleton loaders pour le contenu markdown
• ✅ components/FundingGauge.tsx - Remplacement du message "Loading..." par des skeleton loaders pour le gauge de financement

Toast notifications (Priorité haute #2)

• ✅ components/ui/ToastContainer.tsx - Création du système de gestion des toasts avec ToastProvider et useToast hook
• ✅ pages/_app.tsx - Intégration du ToastProvider dans l'application
• ✅ components/ArticleCard.tsx - Ajout d'un toast de succès après déblocage réussi d'un article
• ✅ components/ArticleEditor.tsx - Ajout d'un toast de succès après publication réussie
• ✅ components/PaymentModal.tsx - Ajout d'un toast de succès après copie d'invoice et après initiation du paiement
• ✅ hooks/useArticlePayment.ts - Ajout du support showToast pour afficher les toasts après paiement
• ✅ locales/fr.txt et locales/en.txt - Ajout des clés de traduction pour les toasts (article.unlock.success, article.publish.success, payment.modal.copySuccess, payment.modal.paymentInitiated)

Indicateur visuel pour contenu débloqué (Priorité haute #3)

• ✅ components/ArticleCard.tsx - Ajout d'un badge "Débloqué" avec icône de cadenas ouvert dans le header de l'article
• ✅ components/ArticleCard.tsx - Ajout d'une bordure distinctive (border-neon-green/40) et d'un glow vert (shadow-glow-green) sur les cartes d'articles débloqués
• ✅ locales/fr.txt et locales/en.txt - Ajout de la clé de traduction article.unlocked.badge

Raccourcis clavier de base (Priorité haute #4)

• ✅ hooks/useKeyboardShortcuts.ts (nouveau) - Création du hook pour gérer les raccourcis clavier globaux
• ✅ pages/_app.tsx - Intégration du hook useKeyboardShortcuts dans l'application
• ✅ components/ui/Input.tsx - Ajout du support forwardRef pour permettre le focus programmatique
• ✅ components/SearchBar.tsx - Ajout du support forwardRef et role="search" pour l'accessibilité
• ✅ components/NotificationPanel.tsx - Ajout de la gestion de Esc pour fermer le panel
• ✅ components/createSeriesModal/CreateSeriesModalView.tsx - Ajout de la gestion de Esc pour fermer la modal
• ✅ Raccourci / : Focus automatique sur la barre de recherche (détection via role="search")
• ✅ Raccourci Esc : Déjà implémenté pour les modals via useModalKeyboard dans components/ui/Modal.tsx, pour MobileMenu via useEffect, et ajouté pour NotificationPanel et CreateSeriesModalView

Amélioration de la modal de paiement (Priorité haute #5)

• ✅ components/PaymentModal.tsx - Refactorisation avec extraction de composants dans components/paymentModal/PaymentModalComponents.tsx
• ✅ lib/paymentModalHelpers.ts (nouveau) - Extraction des fonctions utilitaires de paiement
• ✅ components/paymentModal/PaymentModalComponents.tsx (nouveau) - Composants de présentation extraits
• ✅ Bouton "Payer avec Alby" en priorité (variant "success", taille "large", affiché en premier si Alby détecté)
• ✅ Auto-détection d'Alby avec hook useAlbyDetection() vérifiant périodiquement la disponibilité
• ✅ 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 shadow-[0_0_20px_rgba(0,255,255,0.3)])
• ✅ Compte à rebours plus visible (Badge avec animation pulse si < 60s, variant "error" si urgent)
• ✅ locales/fr.txt et locales/en.txt - Ajout des clés de traduction pour les instructions

Recherche améliorée avec suggestions (Priorité moyenne #6)

• ✅ components/SearchSuggestions.tsx (nouveau) - Composant de suggestions avec autocomplétion
• ✅ components/SearchBar.tsx - Intégration du composant de suggestions avec gestion du focus
• ✅ lib/searchHistory.ts (nouveau) - Service de gestion de l'historique de recherche dans IndexedDB
• ✅ Autocomplétion basée sur les titres d'articles (5 suggestions max, recherche insensible à la casse)
• ✅ Suggestions d'auteurs (3 suggestions max, basées sur le nom extrait du titre)
• ✅ Historique de recherche récente (5 dernières recherches, stocké dans IndexedDB, affiché quand la recherche est vide)
• ✅ locales/fr.txt et locales/en.txt - Ajout des clés de traduction pour les types de suggestions

Filtres persistants (Priorité moyenne #7)

• ✅ lib/filterPreferences.ts (nouveau) - Service de gestion de la persistance des filtres dans IndexedDB
• ✅ pages/index.tsx - Hook useFilterPersistence() pour charger et sauvegarder automatiquement les filtres
• ✅ Chargement automatique des filtres sauvegardés au démarrage de la page
• ✅ Sauvegarde automatique des filtres à chaque modification
• ✅ Utilisation de la même base de données IndexedDB (nostr_paywall_settings) avec un store dédié (filter_preferences)

Navigation clavier complète (Priorité moyenne #8)

• ✅ components/SkipLinks.tsx (nouveau) - Composant de skip links pour navigation rapide
• ✅ hooks/useArrowNavigation.ts (nouveau) - Hook pour navigation par flèches dans les listes (ArrowUp/Down/Home/End)
• ✅ components/ArticlesList.tsx - Intégration de la navigation par flèches et ajout de role="list" et role="listitem"
• ✅ components/AuthorsList.tsx - Intégration de la navigation par flèches et ajout de role="list" et role="listitem"
• ✅ components/HomeView.tsx - Ajout des IDs pour les skip links (main-content, filters-section, articles-section)
• ✅ Tab order logique avec tabIndex={-1} sur les sections pour permettre le focus programmatique
• ✅ locales/fr.txt et locales/en.txt - Ajout des traductions pour les skip links et sections

ARIA amélioré (Priorité moyenne #9)

• ✅ components/PageHeader.tsx - Ajout de role="navigation" et aria-label pour tous les liens iconiques (DocsIcon, FundingIcon, GitIcon)
• ✅ components/HomeView.tsx - Ajout de role="main" au contenu principal
• ✅ components/HomeView.tsx - Ajout de role="complementary" aux filtres (section changée en <aside>)
• ✅ components/Footer.tsx - Ajout de role="contentinfo"
• ✅ components/CategoryTabs.tsx - Ajout de role="tablist" et aria-label, role="tab" et aria-selected pour les onglets
• ✅ components/ui/ToastContainer.tsx - Ajout de role="region", aria-live="polite" et aria-label="Notifications"
• ✅ components/ui/Toast.tsx - Amélioration avec aria-label traduit pour le bouton de fermeture
• ✅ components/AuthorFilterButton.tsx - Ajout de aria-label dynamique selon l'état (sélectionné ou non)
• ✅ components/NotificationBadgeButton.tsx - Amélioration de aria-label avec traductions (singulier/pluriel)
• ✅ components/KeyIndicator.tsx - Ajout de aria-label pour le lien iconique
• ✅ components/ClearButton.tsx - Déjà présent avec aria-label
• ✅ locales/fr.txt et locales/en.txt - Ajout des traductions pour les notifications, filtres, et navigation

Messages d'erreur actionnables (Priorité moyenne #10)

• ✅ lib/errorClassification.ts (nouveau) - Système de classification des erreurs (réseau, paiement, validation, chargement, inconnu)
• ✅ components/ui/ErrorState.tsx - Amélioration avec support des actions de récupération (onRetry, onCheckConnection, showDocumentationLink)
• ✅ components/ArticlesList.tsx - Intégration des messages d'erreur actionnables avec boutons de récupération
• ✅ components/AuthorsList.tsx - Intégration des messages d'erreur actionnables avec boutons de récupération
• ✅ components/paymentModal/PaymentModalComponents.tsx - Amélioration de PaymentError avec actions de récupération
• ✅ components/PaymentModal.tsx - Passage de onRetry à PaymentError
• ✅ locales/fr.txt et locales/en.txt - Ajout des traductions pour les messages d'erreur et actions (suggestions, boutons)

Erreurs corrigées

TypeScript

• ✅ hooks/useAuthorPresentation.ts : Ajout de l'import manquant nostrService
• ✅ lib/authorQueries.ts : Correction du type picture avec exactOptionalPropertyTypes: true

Linting

• ✅ Toutes les erreurs de linting ont été corrigées
• ✅ react/no-array-index-key warnings corrigés dans :
  • components/ArticlesList.tsx - Clés uniques pour les skeletons (article-skeleton-${index})
  • components/AuthorsList.tsx - Clés uniques pour les skeletons (author-skeleton-${index})
  • components/UserArticlesList.tsx - Clés uniques pour les skeletons (user-article-skeleton-${index})
  • components/authorPage/AuthorPageContent.tsx - Clés uniques pour les skeletons (author-page-skeleton-${index})
  • components/SearchSuggestions.tsx - Clés uniques pour les suggestions (${type}-${query}-${timestamp ?? index})

Réduction de la complexité

• ✅ components/PaymentModal.tsx - Extraction de composants vers components/paymentModal/PaymentModalComponents.tsx et fonctions utilitaires vers lib/paymentModalHelpers.ts pour respecter max-lines (250) et max-lines-per-function (40)
• ✅ components/SearchBar.tsx - Extraction de hooks personnalisés (useSearchBarLocalValue, useSearchBarFocusState, useSearchBarHandlers, useClickOutsideHandler) pour réduire la complexité
• ✅ components/SearchSuggestions.tsx - Extraction de fonctions utilitaires (loadHistorySuggestions, loadSuggestions, getSuggestionIcon, getSuggestionAriaLabel) et hooks personnalisés (useSuggestionsLoader, useClickOutsideHandler) pour réduire la complexité

État actuel

• ✅ TypeScript : Aucune erreur
• ✅ Linting : Aucune erreur
• ✅ Compilation : Succès

Prochaines étapes

1. Continuer la migration des composants restants
2. Tester l'application après chaque migration
3. Documenter les changements dans fixKnowledge/ ou features/