162 lines
6.3 KiB
Markdown
162 lines
6.3 KiB
Markdown
# 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.
|