# 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)
- [x] Formulaire login : inputs, bouton, card → rounded-xl
- [x] StatCard : conteneur et icône → rounded-xl
- [x] Boutons auth → rounded-xl
- [x] Empty states (KodoEmptyState) → rounded-xl

### 2.4 Composants critiques
- [x] **AuthInput** : bg-card border-border focus:border-primary rounded-xl ; plus de kodo-*
- [x] **AuthLayout** : Card variant surface, logo primary ; rounded-xl
- [x] **AuthButton** : rounded-xl, transition 200ms, focus ring primary
- [x] **fix-login-form.css** : border-radius 0.75rem (xl) ; checkbox accent primary
- [x] **StatCard** (dashboard) : variant surface, rounded-xl
- [ ] **Gear cards** (GearView, EquipmentCard, etc.) : variant surface, rounded-xl (optionnel)
- [x] **KodoEmptyState** : bouton primary, tokens, variant surface, 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. 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).*