167 lines
8.2 KiB
Markdown
167 lines
8.2 KiB
Markdown
# 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.
|