veza/docs/archive/frontend-sessions-2026/PLAN_FINALISATION_FRONTEND.md
senke 0e7097ed1b chore(cleanup): J1 — purge 220MB debris, archive session docs (complete)
First-attempt commit 3a5c6e184 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 bec75f143 (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
3a5c6e184 and remain in place — this commit does not modify .gitignore.

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

5.1 KiB

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)

  • Identifier tous les imports incorrects
  • Corriger les imports Cardcard
  • Corriger les imports Buttonbutton
  • Corriger les imports Inputinput
  • Corriger les imports Badgebadge
  • Corriger les imports Progressprogress
  • 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)

  1. Nettoyer les variables non utilisées
  2. Améliorer la couverture de tests (50% → 80%)
  3. Documenter les composants UI critiques

Phase 3: Amélioration (Semaine 3-4)

  1. Migrer tokens vers cookies httpOnly
  2. Optimiser le bundle size
  3. 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

# 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