veza/docs/archive/frontend-sessions-2026/PLAN_FINALISATION_FRONTEND.md
senke 7c9eece09a
Some checks failed
Backend API CI / test-unit (push) Has been cancelled
Backend API CI / test-integration (push) Has been cancelled
Veza CI / Rust (Stream Server) (push) Has been cancelled
Veza CI / Backend (Go) (push) Has been cancelled
Veza CI / Notify on failure (push) Has been cancelled
Veza CI / Frontend (Web) (push) Has been cancelled
Frontend CI / test (push) Has been cancelled
Security Scan / Secret Scanning (gitleaks) (push) Has been cancelled
chore(cleanup): J1 — purge 220MB debris, archive session docs (complete)
First-attempt commit 02728909f only captured the .gitignore change; the
pre-commit hook silently dropped the 343 staged moves/deletes during
lint-staged's "no matching task" path. This commit re-applies the intended
J1 content on top of 24af2f72b (which was pushed in parallel).

Uses --no-verify because:
- J1 only touches .md/.json/.log/.png/binaries — zero code that would
  benefit from lint-staged, typecheck, or vitest
- The hook demonstrated it corrupts pure-rename commits in this repo
- Explicitly authorized by user for this one commit

Changes (343 total: 169 deletions + 174 renames):

Binaries purged (~167 MB):
- veza-backend-api/{server,modern-server,encrypt_oauth_tokens,seed,seed-v2}

Generated reports purged:
- 9 apps/web/lint_report*.json (~32 MB)
- 8 apps/web/tsc_*.{log,txt} + ts_*.log (TS error snapshots)
- 3 apps/web/storybook_*.json (1375+ stored errors)
- apps/web/{build_errors*,build_output,final_errors}.txt
- 70 veza-backend-api/coverage*.out + coverage_groups/ (~4 MB)
- 3 veza-backend-api/internal/handlers/*.bak

Root cleanup:
- 54 audit-*.png (visual regression baselines, ~11 MB)
- 9 stale MVP-era scripts (Jan 27, hardcoded v0.101):
  start_{iteration,mvp,recovery}.sh,
  test_{mvp_endpoints,protected_endpoints,user_journey}.sh,
  validate_v0101.sh, verify_logs_setup.sh, gen_hash.py

Session docs archived (not deleted — preserved under docs/archive/):
- 78 apps/web/*.md     → docs/archive/frontend-sessions-2026/
- 43 veza-backend-api/*.md → docs/archive/backend-sessions-2026/
- 53 docs/{RETROSPECTIVE_V,SMOKE_TEST_V,PLAN_V0_,V0_*_RELEASE_SCOPE,
          AUDIT_,PLAN_ACTION_AUDIT,REMEDIATION_PROGRESS}*.md
                        → docs/archive/v0-history/

README.md and CONTRIBUTING.md preserved in apps/web/ and veza-backend-api/.

Note: The .gitignore rules preventing recurrence were already pushed in
02728909f and remain in place — this commit does not modify .gitignore.

Refs: AUDIT_REPORT.md §11
2026-04-14 17:12:03 +02:00

193 lines
5.1 KiB
Markdown

# Plan de Finalisation du Frontend Apps/Web
**Date:** 2025-01-27
**Objectif:** Compléter et finaliser le frontend selon les recommandations du tableau comparatif
---
## 📋 Checklist des Tâches
### 1. ✅ Corriger les Erreurs TypeScript (~100+)
#### 1.1. Imports de Composants UI (PRIORITÉ CRITIQUE)
- [x] Identifier tous les imports incorrects
- [ ] Corriger les imports `Card``card`
- [ ] Corriger les imports `Button``button`
- [ ] Corriger les imports `Input``input`
- [ ] Corriger les imports `Badge``badge`
- [ ] Corriger les imports `Progress``progress`
- [ ] Vérifier tous les autres composants UI
**Fichiers affectés:** ~100+ fichiers dans `src/components/`
#### 1.2. Types Manquants
- [ ] Ajouter propriétés manquantes au type `User`:
- `status` (online, offline, dnd, idle)
- `roles` (array)
- `tier`
- `joinDate`
- `lastLogin`
- [ ] Ajouter propriétés manquantes au type `Track`:
- `coverUrl` (ou utiliser `cover_url`)
- `plays`
- [ ] Ajouter propriétés manquantes au type `Product`:
- `type`
- `coverUrl`
- `isHot`
- `author`
- [ ] Corriger le type `Checkbox` pour supporter `onCheckedChange`
#### 1.3. Paramètres avec Type `any` Implicite
- [ ] Corriger tous les event handlers (`e: React.ChangeEvent`, etc.)
- [ ] Ajouter types explicites pour tous les callbacks
- [ ] Corriger les paramètres de fonctions anonymes
#### 1.4. Variables Non Utilisées
- [ ] Supprimer ou utiliser toutes les variables déclarées mais non utilisées
- [ ] Corriger les imports non utilisés
---
### 2. ⏳ Améliorer la Couverture de Tests (Objectif: 80%+)
#### 2.1. Tests Unitaires
- [ ] Tests pour tous les stores Zustand
- [ ] Tests pour tous les hooks personnalisés
- [ ] Tests pour les utilitaires (`utils/`)
- [ ] Tests pour les services (`services/`)
- [ ] Tests pour les composants UI critiques
#### 2.2. Tests d'Intégration
- [ ] Tests pour les flux d'authentification
- [ ] Tests pour les flux d'upload
- [ ] Tests pour les flux de player
- [ ] Tests pour les flux de chat
#### 2.3. Tests E2E
- [ ] Parcours utilisateur complets
- [ ] Tests de régression
- [ ] Tests de performance
**Outils:** Vitest (unit), Playwright (E2E), MSW (mocking)
---
### 3. ⏳ Migrer Tokens vers Cookies httpOnly (Sécurité)
#### 3.1. Backend
- [ ] Modifier backend Go pour accepter/setter cookies httpOnly
- [ ] Implémenter CSRF protection côté backend
- [ ] Configurer SameSite cookies
#### 3.2. Frontend
- [ ] Adapter `tokenStorage.ts` pour utiliser cookies
- [ ] Modifier `apiClient` pour envoyer cookies automatiquement
- [ ] Supprimer localStorage pour refresh token
- [ ] Garder access_token en mémoire uniquement
- [ ] Tester la persistance de session
**Impact:** Sécurité améliorée (protection XSS)
---
### 4. ⏳ Documenter Tous les Composants UI
#### 4.1. Documentation JSDoc
- [ ] Ajouter JSDoc à tous les composants UI
- [ ] Documenter les props et leurs types
- [ ] Documenter les variants disponibles
- [ ] Ajouter des exemples d'utilisation
#### 4.2. Storybook (Optionnel)
- [ ] Configurer Storybook
- [ ] Créer des stories pour chaque composant
- [ ] Documenter les variants visuels
**Composants à documenter:** 54 composants UI
---
### 5. ⏳ Optimiser le Bundle Size
#### 5.1. Analyse
- [ ] Analyser le bundle avec `rollup-plugin-visualizer`
- [ ] Identifier les dépendances volumineuses
- [ ] Identifier les code dupliqué
#### 5.2. Optimisations
- [ ] Code splitting plus agressif
- [ ] Lazy load des composants lourds (charts, editors)
- [ ] Tree-shaking des dépendances non utilisées
- [ ] Optimiser les imports (imports nommés vs default)
- [ ] Compresser les assets (images, fonts)
**Objectif:** Réduire le bundle initial de 20-30%
---
## 🎯 Priorisation
### Phase 1: Critique (Semaine 1)
1. ✅ Corriger les imports UI (en cours)
2. Corriger les types manquants
3. Corriger les paramètres `any`
### Phase 2: Important (Semaine 2)
4. Nettoyer les variables non utilisées
5. Améliorer la couverture de tests (50% → 80%)
6. Documenter les composants UI critiques
### Phase 3: Amélioration (Semaine 3-4)
7. Migrer tokens vers cookies httpOnly
8. Optimiser le bundle size
9. Documentation complète
---
## 📊 Métriques de Succès
| Métrique | Actuel | Objectif | Statut |
|----------|--------|----------|--------|
| **Erreurs TypeScript** | ~100+ | 0 | ⏳ En cours |
| **Couverture Tests** | ~40% | 80%+ | ⏳ À faire |
| **Bundle Size** | ? | -20-30% | ⏳ À analyser |
| **Documentation UI** | 0% | 100% | ⏳ À faire |
| **Sécurité Tokens** | localStorage | httpOnly | ⏳ À faire |
---
## 🚀 Commandes Utiles
```bash
# Vérifier les erreurs TypeScript
npm run typecheck
# Lancer les tests
npm test
npm run test:e2e
# Analyser le bundle
npm run build
# Voir bundle-analysis.html dans dist/
# Linter
npm run lint
npm run lint:fix
# Formatter
npm run format
```
---
## 📝 Notes
- Les erreurs TypeScript bloquent la compilation, donc c'est la priorité #1
- Les tests sont importants pour éviter les régressions
- La sécurité des tokens est critique pour la production
- La documentation améliore la maintenabilité
---
**Dernière mise à jour:** 2025-01-27