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

# Phase 1 — Rapport visuel initial (baseline)

Vue fixe : **1280×720**, thème **dark**, **reduced motion**.  
Screenshots de référence : `visual-tests/baselines/*-desktop.png`.  
Génération : `npm run visual:baseline` (serveur dev démarré sur http://localhost:5173).

---

## 1. Écrans critiques et fichiers

| # | Écran | URL | Fichier baseline | Rôle |
|---|--------|-----|-------------------|------|
| 1 | Login | `/login` | `login-desktop.png` | Auth, formulaire centré |
| 2 | Register | `/register` | `register-desktop.png` | Auth, formulaire |
| 3 | Dashboard | `/dashboard` | `dashboard-desktop.png` | Écran principal, shell + contenu |
| 4 | Sidebar | `/dashboard` (locator `aside`) | `sidebar-desktop.png` | Navigation latérale |
| 5 | Playlists (liste) | `/playlists` | `playlists-desktop.png` | Vue liste dense |
| 6 | Library | `/library` | `library-desktop.png` | Liste / grille |
| 7 | 404 | `/non-existent-route-404` | `404-desktop.png` | Erreur, empty state |

---

## 2. Annotations par écran

À remplir ou compléter après capture des baselines. Chaque écran est évalué sur : **hiérarchie visuelle**, **densité verticale**, **alignements**, **contraste texte/fond**, **incohérences visibles**.

### 2.1 Login (`login-desktop.png`)

- **Hiérarchie** : Titre / sous-titre / champs / bouton. À vérifier : ordre de lecture et poids visuel (font-size, graisse).
- **Densité** : Espacement vertical entre blocs. Référence design system : `--layout-page-min-height-sm` (400px), pas de valeurs arbitraires.
- **Alignements** : Formulaire centré ; alignement des labels et champs (grid ou stack).
- **Contraste** : Texte secondaire (`muted-foreground`) vs fond (`background`). Vérifier ratio WCAG.
- **Incohérences** : Liens “Forgot password” / “Register” : même style que le reste ? Bordures des inputs cohérentes avec `--input`, `--ring` ?

### 2.2 Register (`register-desktop.png`)

- **Hiérarchie** : Même logique que login ; étapes ou sections si présentes.
- **Densité** : Souvent plus long ; vérifier que la page ne soit pas “étouffée” (spacing tokens).
- **Alignements** : Cohérence avec login (même layout centré).
- **Contraste** : Labels, hints, messages d’erreur.
- **Incohérences** : Boutons et champs identiques au login (même composants design system).

### 2.3 Dashboard (`dashboard-desktop.png`)

- **Hiérarchie** : Header (titre, actions) > contenu principal. Cartes / stats : niveau de titre (h2/h3) et corps.
- **Densité** : Espacement entre cartes et entre sections (tokens `space-*`, `gap-*`). Ni trop vide ni trop serré.
- **Alignements** : Grille ou colonnes alignées ; header et main partagent la même grille (ou max-width).
- **Contraste** : Texte des cartes, labels de graphiques, texte secondaire lisible.
- **Incohérences** : Sidebar vs zone contenu (même hauteur, séparateur net) ; player bar en bas (fixe, pas de chevauchement).

### 2.4 Sidebar (`sidebar-desktop.png`)

- **Hiérarchie** : Logo/titre > sections (labels) > items. Labels de section en `text-xs`, items en `text-sm`.
- **Densité** : Espacement entre sections (`space-y-6` dans le code) ; entre items (`space-y-0.5`). Vérifier alignement avec Discord/Spotify (cf. Phase 2).
- **Alignements** : Icônes + texte alignés (gap fixe) ; rétrécissement collapsed cohérent.
- **Contraste** : Item actif (primary) vs inactif (muted-foreground) ; hover (sidebar-accent).
- **Incohérences** : Pas de valeurs arbitraires (ex. `w-64`, `z-[90]`) — à migrer vers tokens. Scrollbar visible si contenu long.

### 2.5 Playlists — liste dense (`playlists-desktop.png`)

- **Hiérarchie** : Titre de page > toolbar (filtres, actions) > liste (lignes ou cartes). Titre de liste > ligne.
- **Densité** : Hauteur de ligne ou carte ; espacement entre lignes. Comparer à une liste Discord (canaux) ou Spotify (playlists) pour rythme.
- **Alignements** : Colonnes (nom, durée, etc.) alignées ; icônes d’action alignées.
- **Contraste** : Ligne hover vs normale ; texte secondaire (durée, métadonnées).
- **Incohérences** : Skeleton vs état chargé (même layout pour éviter layout shift).

### 2.6 Library (`library-desktop.png`)

- **Hiérarchie** : Titre > filtres/vue > grille ou liste.
- **Densité** : Grille : gap et taille des cartes (tokens) ; liste : comme playlists.
- **Alignements** : Grille régulière ; en liste, alignement des métadonnées.
- **Contraste** : Couverture vs texte ; états hover/focus.
- **Incohérences** : Cohérence avec playlists (même patterns de liste/carte).

### 2.7 404 (`404-desktop.png`)

- **Hiérarchie** : Message principal > explication > CTA (retour).
- **Densité** : Centré, pas trop serré (min-h-layout-page-sm).
- **Contraste** : Lisible sur fond dark.
- **Incohérences** : Utilisation de KodoEmptyState ou composant dédié ; pas de style ad hoc.

---

## 3. Synthèse des incohérences (à mettre à jour après capture)

- **Layout** : Valeurs arbitraires (ex. Sidebar `w-64`, `z-[90]`) à remplacer par tokens / primitives.
- **Spacing** : Vérifier que partout on utilise l’échelle Tailwind ou les layout primitives (`index.css`).
- **Focus / états** : Vérifier focus visible (ring) et hover sur tous les écrans critiques ; continuité des durées (`--duration-*`, `--ease-*`).
- **Contrastes** : Audit ponctuel (axe ou outil) sur login, dashboard, sidebar pour respect WCAG.

---

## 4. Prochaines étapes (Phase 2)

- Comparaison **explicite** avec équivalents Discord / Spotify (sidebar, liste, header) : spacing en px, font-size, line-height, contraste secondaire, radius, ombres.
- Extraire des **règles implicites** (pas copier) pour ajuster les tokens si nécessaire.
- Une seule **catégorie de correction à la fois** (spacing, typo, alignement, couleurs, états) puis capture + pixelmatch + validation.