veza/docs/FRONTEND_ROADMAP_SPOTIFY_DISCORD_QUALITY.md

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).