veza/apps/web/visual-tests/VISUAL_AUDIT_REPORT.md

Audit visuel — Résumé et écarts World-Class

Date : 2025-02-08
Référents : Discord (densité, clarté sidebar), Spotify (rythme vertical, rounded-xl, listes).

---

Ce qui a été capturé

• Login (full page) — spacing inputs, social buttons, primary CTA
• Register (full page) — idem
• Dashboard (full page) — cartes stats, activité récente
• Playlists (full page) — liste / grille
• Library (full page) — contenu bibliothèque
• 404 (full page)
• Header (composant isolé) — barre supérieure
• Sidebar et Player — locators mis à jour (data-testid="app-sidebar", data-testid="global-player" sur GlobalPlayer). Si toujours skippés, vérifier ordre de rendu ou visibilité (sidebar collapsed par défaut, player sans piste).

---

Ce que j’ai “vu” (analyse des screenshots)

1. Login & Register (focus spacing & inputs)

• Points positifs : Inputs en rounded-xl, bouton principal en gradient bien mis en avant, champs avec space-y-5 cohérent.
• Écarts :
  • Espace entre la ligne “Remember me / Forgot password?” et le bouton “Sign In” un peu grand ou variable par rapport au rythme des champs → à caler sur l’échelle (ex. mt-4 / mt-5).
  • Texte secondaire (“OR CONTINUE WITH”, “Don’t have an account?”) en contraste un peu faible → vérifier muted-foreground / tokens pour respect AA.
• Tokens : Pas de valeurs arbitraires visibles dans les forms ; space-y-5 / space-y-8 alignés sur l’échelle Tailwind.

2. Dashboard (hiérarchie des cartes)

• Points positifs : Cartes stats utilisent déjà drop-shadow-stat-icon (ombre neutre), grille gap-4 / gap-6, pas de glow coloré sur les icônes.
• Écarts : Activité récente / listes internes : ombres ou bordures encore marquées sur certains blocs → à atténuer pour renforcer la hiérarchie (contenu > chrome).

3. Sidebar (alignements, 240px)

• Code : Largeur gérée par tokens (--sidebar-width-expanded: 15rem = 240px), classes left-sidebar, top-sidebar, etc. → aligné Discord.
• Capture : Test sidebar skippé (locator trop strict). À corriger en aside[class*="left-sidebar"] pour rendre la capture fiable.

4. Playlists & Library (densité verticale)

• Points positifs : PlaylistTrackItem en p-3 sm:p-4, gap-2 sm:gap-4 ; liste en gap-3 sm:gap-4 → rythme correct.
• Écarts : Vérifier qu’aucun gap-[Xpx] ou p-[Xpx] ne reste ; tout doit passer par l’échelle ou des tokens.

5. Global Player

• Code : Barre fixe en bas (fixed bottom-0 left-0 right-0, h-16).
• Capture : Skippée car le locator div.fixed.bottom-0.left-0.right-0 peut matcher un autre élément ou l’ordre du DOM. À cibler via div.fixed.bottom-0.left-0.right-0.h-16 (ou une classe dédiée).

---

Synthèse des corrections appliquées

Zone	Action
Login/Register	Espacement explicite entre la ligne “Remember me” et le bouton submit (mt-5) pour un rythme vertical cohérent.
Tokens	Vérification que --layout-gap ou équivalent est documenté/utilisé là où c’est pertinent.
Spec visuelle	Locators sidebar → aside[class*="left-sidebar"] ; player → div.fixed.bottom-0.left-0.right-0.h-16 pour capturer les deux composants.
Hiérarchie	Déjà en bonne voie (stat cards, ombres). Pas de changement supplémentaire dans ce cycle.

---

Contraste (muted-foreground)

Les textes secondaires (“Sign in to your account”, “OR CONTINUE WITH”, “Don’t have an account?”) reposent sur text-muted-foreground. Pour viser un niveau “World-Class” et AA, garder ou ajuster la variable --muted-foreground (dark) dans index.css pour un ratio ≥ 4.5:1 sur le fond sombre.

---

Prochaines étapes recommandées

1. Relancer npm run visual:capture après correction des locators → vérifier que sidebar et player sont bien capturés.
2. Mettre à jour les baselines avec npm run visual:update si les changements de spacing sont validés.
3. Optionnel : audit contraste (muted-foreground) avec outil type axe DevTools ou Contrast Checker.