docs(frontend): add Spotify/Discord quality roadmap and checklist

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/FRONTEND_ROADMAP_SPOTIFY_DISCORD_QUALITY.md

@@ -0,0 +1,122 @@
+# 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
+- [x] `.dark` : --background 0.12, --card 0.16, --sidebar 0.09
+- [x] 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
+- [x] --duration-immersive 200ms dans index.css
+- [x] 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
+- [x] Cartes / surfaces : rounded-xl (Sidebar, Card surface)
+- [ ] Formulaire login : inputs, bouton, card → rounded-xl
+- [ ] StatCard : conteneur et icône → rounded-xl
+- [ ] Tous les boutons primaires/secondaires auth → rounded-xl (ou rounded-full pour pills)
+- [ ] Empty states, modales, champs de recherche → rounded-xl
+
+### 2.4 Composants critiques
+- [ ] **AuthInput** : bg-card border-border focus:border-primary rounded-xl ; plus de kodo-*
+- [ ] **AuthLayout** : Card variant surface (ou elevated), logo primary ; rounded-xl
+- [ ] **AuthButton** : rounded-xl, transition 200ms, focus ring primary
+- [ ] **fix-login-form.css** : bordures/couleurs via variables si possible ; border-radius 0.75rem (xl) ; checkbox dark
+- [ ] **StatCard** (dashboard) : variant surface, rounded-xl, transition hover
+- [ ] **Gear cards** (GearView, EquipmentCard, etc.) : variant surface, rounded-xl
+- [ ] **KodoEmptyState** : bouton primary, tokens, rounded-xl
+
+### 2.5 Données et placeholders
+- [x] AdminDashboardTrafficCard : plus de Math.random(), empty state
+- [x] 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
+- [x] --muted-foreground 0.73 en dark
+- [x] 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
+- [x] --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. 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.