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

Phase 2 — Analyse comparative visuelle (Discord × Spotify)

Contexte : Baselines Veza en conditions contrôlées (1280×720, dark, reduced motion).
Métriques Veza : déduites du code (composants, index.css, Tailwind).
Métriques Discord/Spotify : reverse-engineering communautaire et documentation publique ; lorsqu’aucune valeur px n’est disponible, la méthode de mesure sur capture de référence est indiquée.
Aucune modification de code ou de tokens : phase analytique uniquement.

---

1. Référents par écran

Écran Veza	Fichier baseline	Équivalent Discord	Équivalent Spotify
Login	login-desktop.png	N/A (Discord desktop = app native)	Login web (desktop)
Register	register-desktop.png	N/A	Inscription web
Dashboard	dashboard-desktop.png	Vue principale (canal actif + liste messages)	Home / Search (zone centrale)
Sidebar	sidebar-desktop.png	Liste serveurs + liste canaux (channel list)	Left nav (Home, Search, Library)
Playlists (liste)	playlists-desktop.png	Liste canaux (texte) / liste DMs	Liste playlists / liste titres
Library	library-desktop.png	—	Your Library (grille/liste)
404	404-desktop.png	Page erreur / lien mort	Page non trouvée

---

2. Analyse par écran

2.1 Login (login-desktop.png)

Référent : Spotify login (desktop web) — formulaire centré, fond sombre, un seul CTA.

Métriques déduites du code (Veza)

• Typographie : Titre de page (non présent dans LoginForm ; dépend du layout) ; labels/inputs via FloatingInput ; bouton text-sm font-medium (14px), CTA avec font-bold tracking-wide (button primary). Pas de titre explicite dans le formulaire dans le snippet — à confirmer sur baseline.
• Spacing : space-y-8 entre blocs (32px), space-y-4 dans le groupe champs (16px). Champs espacés 16px verticalement.
• Conteneur : Formulaire w-full ; conteneur centré dépend du layout parent (AuthLayout).
• Bouton : h-10 (40px), rounded-full, rounded-xl sur le CTA login (override dans le form).

Comparaison Spotify login (pratiques courantes)

• Typographie : Titre principal lisible (souvent 24–28px), sous-texte plus petit (14–16px). Ratio titre/corps marqué.
• Spacing : Espacement vertical généreux entre champs (20–24px) ; padding du conteneur 32–40px.
• Densité : Une seule colonne, peu d’éléments ; pas de surcharge.

Diagnostic

Critère	Veza (code)	Spotify (référence)	Écart
Espacement vertical entre champs	16px (space-y-4)	20–24px typique	Veza plus serré ; risque de sensation "compact"
Espacement entre sections	32px (space-y-8)	Souvent 32–40px	Proche
Hauteur bouton principal	40px (h-10)	~40–48px	Proche
Radius bouton	full / xl	Souvent 24–28px (pill)	Cohérent

Verdict : Densité légèrement sur-dense par rapport à un login type Spotify (espacement entre champs). Hiérarchie à vérifier sur capture : titre de page vs labels vs lien "Forgot password" (taille, contraste).

Écarts précis :

• L’espacement vertical entre champs (16px) est inférieur aux ~20–24px courants sur login Spotify, ce qui réduit la respiration du formulaire.
• Si le titre de page est absent ou en petit, la hiérarchie "titre > sous-titre > champs > CTA" est faible.

---

2.2 Register (register-desktop.png)

Même référent que login (formulaire d’inscription web).

Métriques Veza (code)

• Même système que login : space-y-8 / space-y-4, boutons et inputs partagés.
• Formulaire plus long (plus de champs) → plus de scroll.

Diagnostic

• Densité : Identique au login ; si le nombre de champs est élevé, 16px entre champs peut donner une liste étouffée.
• Hiérarchie : Sections (étapes ou blocs) doivent se distinguer par un espacement ou un titre ; à vérifier sur baseline.

Verdict : Même problème potentiel que login (spacing entre champs). Risque moyen si beaucoup de champs sans séparation visuelle.

---

2.3 Dashboard (dashboard-desktop.png)

Référents : Discord = zone canal + liste messages ; Spotify = Home (cartes, sections).

Métriques déduites du code (Veza)

• Conteneur : space-y-6 p-6 pb-24 → 24px entre sections, 24px padding, 96px en bas (player).
• Titre : text-3xl font-display font-bold (30px) + sous-texte text-muted-foreground (p = leading-relaxed).
• Grille cartes : grid gap-4 md:grid-cols-2 lg:grid-cols-4 → 16px entre cartes, 4 colonnes en large.
• Cartes : Card + CardHeader/CardContent ; pas de padding explicite dans le snippet — dépend de card.tsx.

Comparaison Discord (zone principale)

• Densité : Élevée ; messages serrés (padding vertical ~4–8px par message), scroll long.
• Hiérarchie : Nom d’utilisateur / heure en petit ; contenu en corps ; contraste typographique fort.

Comparaison Spotify Home

• Densité : Moyenne ; sections avec titres (ex. 24px), cartes horizontales scrollables, espacement vertical entre sections ~24–32px.
• Rythme : Répétition section titre + carrousel ; padding latéral marqué.

Diagnostic

Critère	Veza (code)	Discord	Spotify Home
Padding zone principale	24px (p-6)	~16px	~24–32px
Espacement entre sections	24px (space-y-6)	—	24–32px
Espacement entre cartes	16px (gap-4)	—	16–24px
Titre page	30px (text-3xl)	—	24–28px section

Verdict : Ni sous-dense ni sur-dense pour un dashboard type "command center". Hiérarchie à valider sur capture : le titre avec gradient (Welcome back, {name}) doit dominer ; les cartes stats ne doivent pas rivaliser en poids visuel (couleurs, ombres).

Écarts précis :

• Les stats utilisent des couleurs vives (cyan, lime, destructive, magenta) et des ombres (drop-shadow) : risque de concurrence visuelle avec le titre et entre cartes.
• space-y-6 (24px) entre blocs est cohérent avec Spotify ; à confirmer que le premier bloc (titre + sous-titre) est bien séparé du bloc cartes.

---

2.4 Sidebar (sidebar-desktop.png)

Référents : Discord = liste serveurs (icônes) + liste canaux (texte) ; Spotify = left nav (icônes + labels).

Métriques déduites du code (Veza)

• Dimensions : Ouverte w-64 (256px), fermée lg:w-20 (80px). Position left-6 bottom-6 top-20 → 24px gauche/bas, 80px haut (sous header).
• Header : px-4 py-4 (16px), gap-3 (12px). Logo 32×32px. Titre text-sm font-semibold, sous-texte text-xs text-muted-foreground.
• Sections : space-y-6 (24px entre groupes), px-3 py-2 (12px/8px), labels text-xs font-medium uppercase tracking-wider mb-2 px-3.
• Items : px-3 py-2 (12px/8px), space-y-0.5 (2px entre items), text-sm font-medium. Hauteur approximative par item : 8+8+line-height(14px) ≈ 36–40px.
• Radius : rounded-xl sur l’aside (12px avec --radius 0.5rem + 4px).

Comparaison Discord (reverse-engineering communautaire)

• Liste canaux : Largeur étendue 240px, collapsed 72px.
• Items : Hauteur d’item ~32–40px ; padding horizontal ~8–12px ; texte canal en 14–16px.
• Sections : Séparation nette ; labels en petit, uppercase ou titre court.

Comparaison Spotify (pratiques courantes)

• Left nav : Largeur variable (resizable) ; collapsed = icônes seules (~56–72px), étendu ~200–280px.
• Items : Hauteur ~40–48px ; icône + label ; peu d’items visibles sans scroll.
• Rythme : Espacement vertical régulier ; pas de surcharge.

Diagnostic

Critère	Veza (code)	Discord	Spotify
Largeur ouverte	256px (w-64)	240px	~200–280px
Largeur fermée	80px (w-20)	72px	~56–72px
Padding horizontal items	12px (px-3)	~8–12px	~12–16px
Padding vertical item	8px (py-2)	~6–8px	~10–12px
Espacement entre items	2px (space-y-0.5)	~0–2px	~0–4px
Espacement entre sections	24px (space-y-6)	~16–24px	~8–16px
Taille label section	12px (text-xs)	~11–12px	~11–12px
Taille item	14px (text-sm)	~14px	~14px

Verdict : Densité et largeur dans la fourchette Discord/Spotify. Points à valider sur capture : alignement icône–texte (gap-3 = 12px), contraste item actif vs inactif, et incohérences de mise en page (valeurs en dur : left-6, top-20, bottom-6, z-[95] non issues de tokens).

Écarts précis :

• La sidebar Veza fait 256px ouverte contre 240px Discord : 16px de plus, pas bloquant mais à aligner sur un token si on vise la même densité que Discord.
• space-y-0.5 (2px) entre items donne une liste très serrée ; Discord/Spotify sont souvent dans la même gamme ; à confirmer que la ligne de base du texte ne touche pas l’item suivant.
• Alignements : Le header utilise gap-3, les items gap-3 (icône–texte) ; vérifier sur capture que les icônes des items sont alignées verticalement avec le titre "System Hub" (grille implicite).

---

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

Référents : Discord = liste de canaux texte ; Spotify = liste de playlists ou liste de titres.

Métriques déduites du code (Veza)

• Vue liste : flex flex-col gap-2 sm:gap-3 → 8px (mobile) / 12px (desktop) entre lignes.
• PlaylistTrackItem : p-2 sm:p-3 (8px / 12px), gap-2 sm:gap-4 (8px / 16px). Titre text-sm sm:text-base (14px / 16px), secondaire text-xs sm:text-sm (12px / 14px). Hauteur de ligne ≈ 12+12+20 (line-height) ≈ 44px (sm) ou 12+12+~24 ≈ 48px avec text-base.
• Vue grille : grid gap-4, grid-cols-2 md:grid-cols-3 lg:grid-cols-4. PlaylistCard avec aspect-square pour la cover.
• Espacement global : space-y-4 entre toolbar et liste.

Comparaison Spotify (liste titres / playlists)

• Liste titres : Hauteur de ligne souvent ~48–56px ; padding horizontal ~16px ; titre 14–16px, secondaire 12–14px.
• Liste playlists : Cartes ou lignes ; espacement régulier (gap 16–24px).

Comparaison Discord (liste canaux)

• Items : Hauteur ~32–40px ; texte 14px ; padding serré.
• Densité : Élevée pour afficher beaucoup de canaux.

Diagnostic

Critère	Veza (code)	Spotify (liste)	Discord (canaux)
Padding vertical ligne	8–12px (p-2/p-3)	~12–16px	~6–10px
Espacement entre lignes	8–12px (gap-2/gap-3)	~0–4px (liste)	~0–2px
Taille titre ligne	14–16px	14–16px	~14px
Taille secondaire	12–14px	12–14px	~12px
Hauteur approximative ligne	~44–48px	~48–56px	~32–40px

Verdict : Légèrement plus compact que Spotify (padding et gap plus faibles), proche de Discord en densité. Pour une "liste dense" type Spotify, augmenter le padding vertical des lignes (p-3 → p-4) et/ou le gap entre lignes (gap-3 → gap-4) rapprocherait du rythme Spotify sans changer la structure.

Écarts précis :

• L’item de liste fait environ 44–48px de hauteur (p-2/p-3 + texte) contre 48–56px typique Spotify, ce qui donne une liste plus serrée.
• En vue grille, gap-4 (16px) est cohérent ; vérifier sur capture que les cartes ne semblent pas collées (ratio cover/titre cohérent).

---

2.6 Library (library-desktop.png)

Référent : Spotify "Your Library" (grille ou liste d’albums/playlists).

Métriques Veza (code)

• Même composants que playlists (PlaylistList, grille/liste) ; écran library peut réutiliser des vues liste ou grille selon le code.
• Si grille : gap-4, colonnes 2/3/4 ; si liste : même métriques que playlists.

Verdict : Aligner sur le même diagnostic que Playlists (densité, hauteur de ligne, gap). Cohérence entre Library et Playlists à confirmer sur baselines (mêmes tokens, pas d’écart visuel entre les deux écrans).

---

2.7 404 (404-desktop.png)

Référent : Page erreur minimale (Spotify / Discord : message + CTA).

Points à vérifier sur baseline

• Hiérarchie : message principal > explication > bouton.
• Densité : centré, pas trop vide (min-h-layout-page-sm = 400px).
• Contraste : texte lisible sur fond dark.
• Composant : KodoEmptyState ou équivalent (icône, titre, description, action).

Verdict : Pas de référent métrique strict ; qualité = lisibilité et un seul CTA clair. À valider en Phase 3 avec une capture.

---

3. Synthèse transverse

3.1 Règles implicites Discord (extraites)

1. Densité élevée avec contraste typographique fort : Beaucoup d’éléments visibles (canaux, messages) ; différenciation par taille (labels petits, contenu en corps) et poids (gras pour noms), pas par espacement excessif.
2. Sidebar à largeur fixe et prévisible : 72px (collapsed) / 240px (étendu) ; peu de variation. Hiérarchie visuelle par sections (serveurs vs canaux) et par état actif/hover.
3. Alignements stricts : Icônes et texte alignés sur une grille ; pas de décalage entre zones équivalentes (même padding gauche pour tous les items de même niveau).

3.2 Règles implicites Spotify (extraites)

1. Densité modérée, rythme vertical régulier : Espacement entre sections et entre lignes cohérent (16–24px) ; moins d’items visibles que Discord mais lecture plus confortable.
2. Sidebar resizable avec états clairs : Collapsed = icônes seules ; étendu = icône + label ; transition nette. Pas de demi-mesure visuelle.
3. Hiérarchie par taille et contraste secondaire : Titres de section 24px ou équivalent ; corps 14–16px ; secondaire (métadonnées) plus petit et plus terne ; peu de couleurs vives en dehors des covers et CTAs.

3.3 Ce que l’app actuelle fait déjà bien

• Sidebar : Largeur et structure (sections, items, collapsed) dans la fourchette Discord/Spotify ; tokens sémantiques (sidebar-primary, sidebar-accent) présents.
• Dashboard : Padding et espacement entre blocs (p-6, space-y-6, gap-4) proches de Spotify Home.
• Formulaires auth : Structure space-y-8 / space-y-4 et boutons (h-10, rounded-full) cohérents avec des patterns courants.
• Listes : Typo (text-sm / text-xs) et structure (titre + secondaire) alignées avec les référents.

3.4 Ce qui éloigne structurellement des référents

• Spacing formulaires : 16px entre champs (space-y-4) plus serré que le 20–24px type Spotify login → sensation plus dense.
• Liste playlists : Lignes ~44–48px et gap 8–12px plus compacts que Spotify (~48–56px, 0–4px gap) → liste plus "Discord" que "Spotify".
• Dashboard : Multiplicité de couleurs vives et ombres sur les cartes → risque de concurrence visuelle avec le titre ; Discord/Spotify limitent les couleurs vives à des zones précises (accents, états).
• Sidebar : Valeurs en dur (left-6, top-20, bottom-6, z-[95], w-64) non issues de tokens → incohérence potentielle et maintenance difficile ; Discord/Spotify s’appuient sur des variables de layout.
• Alignements : Non audités pixel-perfect sur les captures ; ruptures de grille ou padding incohérents entre zones équivalentes restent possibles.

---

4. Tableau de synthèse (ordre de traitement Phase 3)

Écran	Problème principal	Type	Impact perçu
Login	Espacement vertical entre champs trop faible (16px vs 20–24px)	Spacing	Moyen
Register	Idem login ; risque d’étouffement si nombreux champs	Spacing	Moyen
Dashboard	Concurrence visuelle cartes (couleurs + ombres) vs titre	Hiérarchie	Fort
Sidebar	Valeurs en dur (position, z-index, w-64) ; 256px vs 240px Discord	Spacing / Alignement	Moyen
Playlists (liste)	Hauteur de ligne et gap plus compacts que Spotify	Spacing / Densité	Moyen
Library	Cohérence avec Playlists (mêmes tokens)	Alignement	Faible
404	À valider sur capture (lisibilité, CTA unique)	Hiérarchie / Contraste	Faible

---

5. Ordre recommandé pour la Phase 3

1. Sidebar : Remplacer les valeurs en dur par des tokens (largeur, positions, z-index) ; optionnellement aligner la largeur ouverte sur 240px si cible Discord.
2. Login / Register : Augmenter l’espacement vertical entre champs (nouveau token ou space-y-5 / space-y-6) ; une seule catégorie à la fois, puis capture + pixelmatch.
3. Dashboard : Réduire la concurrence visuelle des cartes (ombres ou couleurs) pour renforcer la hiérarchie titre > cartes ; vérifier contrastes.
4. Playlists (liste) : Ajuster padding vertical des lignes et/ou gap entre lignes pour se rapprocher du rythme Spotify ; mesurer sur baseline après correction.
5. Library : S’assurer que les mêmes tokens que Playlists sont utilisés ; pas de dérive visuelle.
6. 404 : Validation visuelle et contraste ; corrections mineures si besoin.

---

Fin du rapport Phase 2. Aucune modification de code ou de tokens n’a été effectuée ; les corrections seront appliquées en Phase 3, une catégorie à la fois, avec capture et diff pixelmatch pour chaque changement.