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>
74 lines
4.1 KiB
Markdown
74 lines
4.1 KiB
Markdown
# 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.
|