senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/apps/web/visual-tests/PHASE3_CHANGELOG.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

4.4 KiB
Raw Blame History

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.