senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/docs/FRONTEND_ROADMAP_SPOTIFY_DISCORD_QUALITY.md
senke 995063383f docs(frontend): update roadmap checklist and implementation log 
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 19:52:48 +01:00

7.7 KiB
Raw Blame History

Feuille de route : Qualité visuelle type Spotify/Discord

Date : 2026-02-07
Référence : Captures frontend_screenshots/ + docs/FRONTEND_AUDIT_VISUAL.md
Objectif : Atteindre une qualité visuelle immersive, sans régression, avec commits atomiques.

1. État des lieux (à partir des screenshots)

1.1 Points déjà alignés (post-refactor immersif)

  • Palette .dark : background 0.12, sidebar 0.09, card 0.16 (oklch froid).
  • Sidebar : fond var(--sidebar), backdrop-blur-md, icônes muted/60 → primary au hover/actif, barre active 2px teal, rounded-xl.
  • Global Player : h-20, backdrop-blur-md, bordure white/5, bouton play teal avec glow.
  • Header : recherche bg-card border-white/10, transitions 200ms.
  • Card : variante surface (border white/5, hover ombre diffuse).
  • Tokens : badges sidebar en primary ; AdminDashboardStatCard trend 0% masqué/neutre ; dashboard StatCard en tokens sémantiques ; AdminAuditLogsView, AdminModerationView, AdminSettingsView migrés (plus de kodo-*).

1.2 Problèmes restants (par écran)

Écran / zone Problème observé Action requise
Login Champs parfois clairs (autofill), checkbox non thématisée, rounded-lg au lieu de rounded-xl, bouton sans glow AuthInput + fix-login-form : tokens, rounded-xl, checkbox dark
Dashboard Cartes stats en default au lieu de surface, coins pas tous rounded-xl StatCard : variant surface, rounded-xl partout
Gear Locker Cartes produit anguleuses, style "glass" / champs bordés type spreadsheet Gear cards : variant surface, rounded-xl, bordures douces
Playlists Empty state correct ; boutons Créer/Sélectionner déjà cohérents Vérifier empty states globaux (tokens, rounded-xl)
Live / Chat Player bar parfois perçue trop noire, bordures visibles Déjà traité (blur, white/5) ; vérifier en build
Header NETWORK STABLE : vert dans une capture, teal dans une autre Unifier sur primary (teal) pour cohérence
Formulaires Inputs/search : rounded-xl partout, focus ring primary, 200ms Audit inputs globaux (AuthInput, Input, search)
Empty states Style unifié : icône + texte + CTA, tokens, rounded-xl KodoEmptyState + vues (Playlists, Library, etc.)
Skeletons Pas de régression ; garder tokens et radius cohérents Vérifier composants Skeleton utilisent bg-muted, rounded-xl

2. Checklist exhaustive par catégorie

2.1 Palette et tokens

  • .dark : --background 0.12, --card 0.16, --sidebar 0.09
  • Aucun kodo-* dans Sidebar, Admin (AuditLogs, Moderation, Settings), dashboard StatCard
  • Supprimer ou migrer tout kodo-* restant (AuthInput, fix-login-form, autres composants)
  • Aucune couleur hex en dur (sauf fix-login-form autofill si nécessaire) ; préférer var(--primary), etc.
  • Header "NETWORK STABLE" : bg-primary/10 + text-primary (déjà le cas ; confirmer)

2.2 Transitions et micro-interactions

  • --duration-immersive 200ms dans index.css
  • Sidebar, Header, Player, Card surface : duration-[var(--duration-immersive)] ease-in-out
  • Tous les boutons/liens interactifs : transition 200ms (boutons auth, OAuth, checkbox)
  • Focus visible : ring primary, 200ms

2.3 Border radius

  • Cartes / surfaces : rounded-xl (Sidebar, Card surface)
  • Formulaire login : inputs, bouton, card → rounded-xl
  • StatCard : conteneur et icône → rounded-xl
  • Boutons auth → rounded-xl
  • Empty states (KodoEmptyState) → rounded-xl

2.4 Composants critiques

  • AuthInput : bg-card border-border focus:border-primary rounded-xl ; plus de kodo-*
  • AuthLayout : Card variant surface, logo primary ; rounded-xl
  • AuthButton : rounded-xl, transition 200ms, focus ring primary
  • fix-login-form.css : border-radius 0.75rem (xl) ; checkbox accent primary
  • StatCard (dashboard) : variant surface, rounded-xl
  • Gear cards (GearView, EquipmentCard, etc.) : variant surface, rounded-xl (optionnel)
  • KodoEmptyState : bouton primary, tokens, variant surface, rounded-xl

2.5 Données et placeholders

  • AdminDashboardTrafficCard : plus de Math.random(), empty state
  • AdminDashboardStatCard : trend 0% / undefined masqué ou neutre
  • Aucun autre Math.random() ou données factices dans l’UI (déjà audité)

2.6 Accessibilité et contraste

  • --muted-foreground 0.73 en dark
  • Progress bar player : rail white/10, fill primary
  • Contraste des icônes secondaires (muted-foreground/60 ou 70)
  • Focus visible sur tous les contrôles

2.7 Typographie

  • --font-sans avec fallback Inter (Rajdhani)
  • Titres de section : hiérarchie claire (font-display / font-bold)
  • Corps : font-sans, tailles cohérentes (text-sm, text-xs pour secondaire)

3. Fichiers à modifier (référence)

Fichier Modifications
apps/web/src/index.css Déjà à jour (palette, duration-immersive)
apps/web/src/components/layout/Sidebar.tsx Déjà à jour
apps/web/src/components/layout/Header.tsx Déjà à jour ; confirmer NETWORK STABLE
apps/web/src/components/player/MiniPlayer.tsx Déjà à jour
apps/web/src/components/player/PlayerControls.tsx Déjà à jour
apps/web/src/components/ui/card.tsx Variant surface présent
apps/web/src/features/auth/components/AuthInput.tsx Tokens, rounded-xl, focus
apps/web/src/features/auth/components/AuthLayout.tsx Card surface, logo primary, rounded-xl
apps/web/src/features/auth/components/AuthButton.tsx rounded-xl, transition
apps/web/src/styles/fix-login-form.css Variables, rounded-xl, checkbox dark
apps/web/src/components/dashboard/StatCard.tsx variant surface, rounded-xl
apps/web/src/components/ui/KodoEmptyState.tsx Tokens, rounded-xl
Vues Gear (GearView, EquipmentCard, etc.) variant surface, rounded-xl

4. Ordre d’exécution recommandé

  1. Commit 1 – Rapport : Ajouter ce document (docs/FRONTEND_ROADMAP_SPOTIFY_DISCORD_QUALITY.md).
  2. Commit 2 – Login immersif : AuthInput (tokens, rounded-xl), AuthLayout (surface, primary), AuthButton (rounded-xl), fix-login-form (radius xl, checkbox, variables où possible).
  3. Commit 3 – Dashboard & cartes : StatCard variant surface + rounded-xl ; vérifier grille gap (déjà gap-8 admin).
  4. Commit 4 – Empty states & cohérence : KodoEmptyState tokens + rounded-xl ; Header NETWORK STABLE si besoin.
  5. Commit 5 – Gear / autres vues : Cartes gear en surface + rounded-xl (si temps).
  6. Vérification finale : Lint, build, test manuel ou test:storybook ; aucun revert nécessaire.

5. Implémentations réalisées (2026-02-07)

  • Rapport : docs/FRONTEND_ROADMAP_SPOTIFY_DISCORD_QUALITY.md créé.
  • Login immersif : AuthInput, AuthLayout, AuthButton, fix-login-form (tokens, rounded-xl, surface, primary CTA).
  • Dashboard & empty state : StatCard variant surface + rounded-xl ; KodoEmptyState tokens + surface + primary.
  • Build : vérifié (npm run build OK).

6. Critères de succès (zéro régression)

  • Aucun test existant en échec.
  • Aucune régression visuelle sur les écrans déjà fonctionnels (navigation, auth, dashboard, player).
  • Tokens uniquement (plus de kodo-* dans les composants modifiés).
  • Border radius unifié (rounded-xl pour cartes/surfaces, rounded-full pour pills).
  • Transitions 200ms sur les éléments interactifs modifiés.
  • Rapport à jour et checklist partiellement cochée dans ce document après implémentation.

Dernière mise à jour : 2026-02-07 (implémentation login + dashboard + empty state).