# 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.