39b2b642d2
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>
97 lines
5.7 KiB
Markdown
97 lines
5.7 KiB
Markdown
# 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.
|