senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/apps/web/visual-tests/PHASE1_REPORT.md
senke 39b2b642d2 feat(web): UI premium Discord/Spotify-like — tokens, shadows, focus, layout 
Plan UI premium 6–8 semaines (design system, shell, Storybook, a11y):

- Design system: DESIGN_TOKENS.md, APP_SHELL.md, FULL_LAYOUT_PAGE.md. Single source
  for layout/shell (index.css), shadows (design-system.css), durations/easing.
- Tokens: shadow-cover-depth, shadow-gold-glow, shadow-fab-glow; layout max-height
  (max-h-layout-drawer, max-h-layout-panel, max-h-layout-list). All duration-200/300/500
  replaced by --duration-fast/normal/slow. Arbitrary shadows replaced by token classes.
- Shell & player: Sidebar, Header, GlobalPlayer, MiniPlayer, PlayerQueue, PlayerControls,
  AudioPlayer use tokens; focus-visible on Sidebar, PlayerQueue, DropdownMenuTrigger/Item,
  TabsTrigger. Typography: text-[10px]/[9px] → text-xs where applicable.
- ESLint: no-restricted-syntax (warn) for w-/h-/rounded-/shadow-/text-/spacing arbitrary.
- Scripts: report-arbitrary-values.mjs, capture/compare/generate visual; visual-complete.spec.ts.
- Stories full layout: Dashboard, Playlists, Library, Settings, Profile in DashboardLayout.stories.
- .cursorrules + README: DESIGN_TOKENS, APP_SHELL, visual commands, no arbitrary without justification.
- apps/web/.gitignore: e2e test artifacts (test-results-visual, playwright-report-visual).

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-08 17:15:58 +01:00

5.7 KiB
Raw Blame History

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.