72 lines
4.2 KiB
Markdown
72 lines
4.2 KiB
Markdown
|
# UI Quality Log
|
||
|
|
|
||
|
|
Suivi des leviers traités pour atteindre le niveau premium Discord/Spotify-like.
|
||
|
|
Chaque entrée documente : levier, fichiers impactés, impact visuel, risques évités.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 2025-02-08 — Session 1
|
||
|
|
|
||
|
|
### Levier 1 : Contraste `muted-foreground` (WCAG AA+)
|
||
|
|
|
||
|
|
- **Fichiers** : `src/index.css` (3 variables)
|
||
|
|
- **Changement** : dark mode oklch(0.65 → 0.70), light mode oklch(0.45 → 0.42), sidebar-foreground synchronisé
|
||
|
|
- **Impact** : texte secondaire plus lisible sur toutes les surfaces (labels, timestamps, placeholders, sidebar nav items). Rapproche du ratio Spotify (~0.70) et Discord (~0.76).
|
||
|
|
- **Risques évités** : pas de régression de hiérarchie (delta foreground/muted reste 0.28, suffisant pour distinction visuelle)
|
||
|
|
|
||
|
|
### Levier 2 : Migration `text-[10px]` → `text-xs` (23 composants)
|
||
|
|
|
||
|
|
- **Fichiers** : 23 composants (admin, marketplace, player, settings, chat, upload, etc.)
|
||
|
|
- **Changement** : remplacement de toutes les tailles arbitraires `text-[10px]` par `text-xs`. Exceptions documentées : avatar xs, badge JSDoc.
|
||
|
|
- **Impact** : typographie cohérente et conforme au design system sur toute l'app
|
||
|
|
- **Risques évités** : vérification que text-xs (0.75rem = 12px vs 10px) ne casse pas la densité des composants compacts
|
||
|
|
|
||
|
|
### Levier 3 : Migration `max-h-[XXvh]` → tokens layout (15 composants)
|
||
|
|
|
||
|
|
- **Fichiers** : 15 composants (modales, panels, player, hero)
|
||
|
|
- **Changement** : toutes les hauteurs arbitraires viewport remplacées par `max-h-layout-modal*`, `max-h-layout-list`, `max-h-layout-drawer`, `h-layout-lyrics`
|
||
|
|
- **Impact** : système de hauteurs cohérent, modales qui respectent un contrat visuel
|
||
|
|
- **Risques évités** : tokens déjà définis et testés dans index.css avant usage
|
||
|
|
|
||
|
|
### Levier 4 : Shell DashboardLayout + Header transparence
|
||
|
|
|
||
|
|
- **Fichiers** : `DashboardLayout.tsx`, `Header.tsx`
|
||
|
|
- **Changement** : `min-w-0` (fix overflow), `max-lg:ml-0` (responsive), `bg-transparent backdrop-blur-md` header
|
||
|
|
- **Impact** : header seamless type Spotify, meilleur scroll
|
||
|
|
- **Risques évités** : pas de modification des tokens — changements locaux aux composants
|
||
|
|
|
||
|
|
### Levier 5 : Player sidebar-aware + synced lyrics
|
||
|
|
|
||
|
|
- **Fichiers** : `GlobalPlayer.tsx`, `PlayerExpanded.tsx`, `PlayerQueue.tsx`, `types.ts`
|
||
|
|
- **Changement** : positionnement player aligné sur sidebar, vue étendue avec lyrics synchronisées, queue repositionnée
|
||
|
|
- **Impact** : player qui ne chevauche plus la sidebar sur desktop, expérience lyrics type Spotify
|
||
|
|
- **Risques évités** : z-index vérifié, reduced-motion respecté
|
||
|
|
|
||
|
|
### Levier 6 : Focus-visible rings (16 composants)
|
||
|
|
|
||
|
|
- **Fichiers** : 16 composants (TrackCard, ConversationItem, SelectOptionItem, etc.)
|
||
|
|
- **Changement** : ajout `focus-visible:ring-2 focus-visible:ring-ring` sur éléments interactifs sans indicateur focus
|
||
|
|
- **Impact** : navigation clavier fonctionnelle sur les contrôles manquants
|
||
|
|
- **Risques évités** : pattern cohérent avec les composants déjà couverts (Button, Sidebar)
|
||
|
|
|
||
|
|
### Levier 7 : Arbitrary min-w → Tailwind scale (5 composants)
|
||
|
|
|
||
|
|
- **Fichiers** : AdminModerationView, PasswordStrengthIndicator, PlaylistFollowButton, FollowButton, collapsible
|
||
|
|
- **Changement** : `min-w-[Xpx]` → `min-w-N` Tailwind, exception documentée pour collapsible
|
||
|
|
- **Impact** : cohérence du spacing system
|
||
|
|
- **Risques évités** : valeurs Tailwind les plus proches vérifées (140px → 36 = 144px, 100px → 24 = 96px, 80px → 20 = 80px)
|
||
|
|
|
||
|
|
### Levier 8 : Unification scrollbar
|
||
|
|
|
||
|
|
- **Fichiers** : `global-effects.css`, `fixDisplayIssues.ts`
|
||
|
|
- **Changement** : suppression des définitions scrollbar dupliquées, index.css comme source unique
|
||
|
|
- **Impact** : scrollbar cohérente dans toute l'app (dev et prod)
|
||
|
|
- **Risques évités** : pas de conflit d'ordre de chargement CSS
|
||
|
|
|
||
|
|
### Levier 9 : Nettoyage `fixDisplayIssues.ts` (719 → 70 lignes)
|
||
|
|
|
||
|
|
- **Fichiers** : `fixDisplayIssues.ts`, `aggressiveVisualFix.ts`
|
||
|
|
- **Changement** : suppression de l'injection CSS nucléaire, MutationObserver, setInterval. Conservation des outils diagnostic opt-in.
|
||
|
|
- **Impact** : dev mode fidèle à la prod (borders, backgrounds, éléments étroits visibles)
|
||
|
|
- **Risques évités** : vérification que le problème original (lignes verticales) est toujours corrigé à la source CSS
|