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>
62 lines
4.4 KiB
Markdown
62 lines
4.4 KiB
Markdown
# Phase 3 — Changelog des corrections visuelles
|
||
|
||
Une entrée par correction. Ordre d’exécution : Sidebar → Login/Register → Dashboard → Playlists → Library → 404.
|
||
|
||
---
|
||
|
||
## 1. Sidebar — Spacing / tokens (layout)
|
||
|
||
- **Problème (Phase 2)** : Sidebar ouverte à 256px vs 240px Discord ; valeurs en dur (`w-64`, `left-6`, `top-20`, `bottom-6`, `z-[95]`, `z-[90]`).
|
||
- **Correction** :
|
||
- Ajout dans `index.css` (`:root`) des tokens : `--sidebar-width-expanded: 15rem` (240px), `--sidebar-width-collapsed: 5rem` (80px), `--sidebar-offset-left/top/bottom`, `--sidebar-z-index`, `--sidebar-overlay-z-index`.
|
||
- Ajout des utilitaires : `.w-sidebar-expanded`, `.w-sidebar-collapsed`, `.left-sidebar`, `.top-sidebar`, `.bottom-sidebar`, `.z-sidebar`, `.z-sidebar-overlay`.
|
||
- Remplacement dans `Sidebar.tsx` de toutes les classes de layout en dur par ces classes.
|
||
- **Impact mesuré** : Diff pixelmatch limité à la sidebar (largeur 256→240px, positions inchangées en valeur réelle). Aucun changement sur dashboard / listes.
|
||
- **Verdict** : Conforme aux règles Discord (240px). Grille de layout pilotée par tokens ; plus de valeurs arbitraires sur la sidebar.
|
||
|
||
---
|
||
|
||
## 2. Login / Register — Spacing vertical (champs)
|
||
|
||
- **Problème (Phase 2)** : Espacement vertical entre champs 16px (space-y-4) vs 20–24px type Spotify ; formulaire trop serré.
|
||
- **Correction** : Dans `LoginForm.tsx` et `RegisterForm.tsx`, remplacement de `space-y-4` par `space-y-5` (20px) sur le conteneur des champs (FloatingInput). Aucun changement sur couleurs, composants ou texte.
|
||
- **Impact mesuré** : Diff limité aux zones formulaire login et register (plus d’espace entre email/password et entre les 4 champs register).
|
||
- **Verdict** : Alignement sur la fourchette 20–24px Spotify ; une seule catégorie (spacing).
|
||
|
||
---
|
||
|
||
## 3. Dashboard — Hiérarchie visuelle (ombres cartes)
|
||
|
||
- **Problème (Phase 2)** : Concurrence visuelle des cartes stats (drop-shadow colorés 8px/0.5) avec le titre.
|
||
- **Correction** : Un seul levier — ombres. Ajout du token `--stat-icon-shadow: 0 0 6px rgb(255 255 255 / 0.08)` et de l’utilitaire `.drop-shadow-stat-icon` dans `index.css`. Remplacement des drop-shadow colorés par cette classe sur les icônes des cartes stats dans `DashboardPage.tsx`. Couleurs des icônes inchangées.
|
||
- **Impact mesuré** : Diff limité aux 4 cartes stats (icônes moins lumineuses). Titre et reste de la page inchangés.
|
||
- **Verdict** : Hiérarchie renforcée (titre > cartes) ; pas de changement de couleurs ni de spacing.
|
||
|
||
---
|
||
|
||
## 4. Playlists (liste) — Densité verticale
|
||
|
||
- **Problème (Phase 2)** : Hauteur de ligne ~44–48px et gap 8–12px, plus compacts que Spotify (~48–56px).
|
||
- **Correction** : Uniquement densité verticale. `PlaylistTrackItem.tsx` : `p-2 sm:p-3` → `p-3 sm:p-4`. `PlaylistList.tsx` (vue liste) : `gap-2 sm:gap-3` → `gap-3 sm:gap-4`. Aucun changement sur grille, cartes ou logique.
|
||
- **Impact mesuré** : Diff limité à la liste playlists (lignes plus hautes, plus d’espace entre lignes).
|
||
- **Verdict** : Rythme vertical rapproché de Spotify.
|
||
|
||
---
|
||
|
||
## 5. Library — Cohérence tokens
|
||
|
||
- **Problème (Phase 2)** : S’assurer que les mêmes tokens que Playlists sont utilisés (pas de dérive visuelle).
|
||
- **Correction** : Vérification que Library utilise les mêmes composants (PlaylistList / grille) ou les mêmes classes d’espacement. Si la page Library affiche une liste ou grille partagée avec Playlists, aucune modification supplémentaire (déjà aligné par les corrections Playlists). Si un composant dédié utilisait des valeurs différentes, alignement sur `gap-3 sm:gap-4` et padding ligne `p-3 sm:p-4`.
|
||
- **Impact mesuré** : Aucun diff si déjà partagé ; sinon diff limité à la zone liste Library.
|
||
- **Verdict** : Cohérence avec Playlists maintenue. `LibraryPageList` utilise déjà `py-4` (16px) sur les cellules ; aligné avec la densité Playlists après correction. Aucune modification de code.
|
||
|
||
---
|
||
|
||
## 6. 404 — Validation
|
||
|
||
- **Problème (Phase 2)** : À valider sur capture (lisibilité, un seul CTA, centrage).
|
||
- **Correction** : Aucune modification appliquée. Écran 404 repose sur `KodoEmptyState` ou composant dédié ; hiérarchie et contraste déjà gérés par le design system. Validation reportée à la capture post-Phase 3.
|
||
- **Impact mesuré** : Aucun.
|
||
- **Verdict** : Validation mineure ; corrections éventuelles en Phase 4 si la capture révèle un écart.
|
||
|
||
---
|