# Spotify Le 2 - UI/UX Design Document

**Date:** 2025-01-18
**Thème:** Néon Cyberpunk
**Priorité:** Interface fluide (navigation instantanée, contrôles réactifs, chargement progressif)

---

## 1. Architecture Globale

### Stack Technique
- **Frontend:** Flutter (Dart 3.2+) avec Riverpod pour state management
- **Backend:** Python + FastAPI
- **Base de données:** PostgreSQL 15+
- **Cache:** Redis 7+

### Layout Adaptatif

**Desktop (Windows/Linux):**
- Sidebar navigation à gauche (240px fixe)
- Zone de contenu principale avec AdaptiveScaffold
- Player persistant en bas de l'écran (mini player)
- Modal fullscreen pour player complet

**Mobile (Android):**
- Bottom navigation bar (4 onglets)
- Content zone avec AppBars dynamiques
- Mini player en bas (sticky)
- Fullscreen player avec swipe-up

### State Management (Riverpod)

```dart
- StateProvider → UI simple (current page, theme)
- StateNotifierProvider → Player state (contrôles réactifs)
- AsyncNotifierProvider → API data avec cache automatique
- StreamProvider → Player progress (60fps)
```

### Optimisations Fluidité

1. **Preloading** - Données page suivante en arrière-plan
2. **Image caching** - cached_network_image avec cache disque infini
3. **ListView builder** - Rendu progressif longues listes
4. **Isolates** - Traitement lourd dans isolates séparés

---

## 2. Thème Néon Cyberpunk

### Palette de Couleurs

```dart
class AppColors {
  // Backgrounds
  static const primary = Color(0xFF0A0E27);    // Bleu nuit très foncé
  static const surface = Color(0xFF1A1F3A);    // Bleu nuit
  static const surfaceVariant = Color(0xFF252B4A);

  // Accent colors
  static const cyan = Color(0xFF00F0FF);       // Cyan électrique néon
  static const violet = Color(0xFFBF00FF);     // Violet/magenta néon
  static const rose = Color(0xFFFF006E);       // Rose néon vif
  static const vert = Color(0xFF39FF14);       // Vert néon matrix
  static const jaune = Color(0xFFFFD600);      // Jaune néon
  static const rouge = Color(0xFFFF2A6D);      // Rouge néon

  // Text
  static const onBg = Color(0xFFE0E6FF);       // Blanc bleuté
  static const onSurface = Color(0xFFB0B8D4);  // Bleu gris clair
  static const muted = Color(0xFF6A7294);      // Bleu gris désaturé
}
```

### Typographie

```dart
Font family: 'Outfit' (Google Fonts)

Sizes:
- H1: 32px/700 (titres pages)
- H2: 24px/600 (sections)
- H3: 20px/600 (cards headers)
- Body large: 16px/400
- Body: 14px/400
- Caption: 12px/400
```

### Effets Visuels

1. **Glow effects**
```dart
BoxShadow(
  color: AppColors.cyan.withOpacity(0.3),
  blurRadius: 20,
  spreadRadius: 2,
)
```

2. **Gradient borders** - Dégradés cyan→violet sur cards importantes

3. **Glassmorphism** - Surfaces semi-transparentes avec blur

4. **Scanlines** - Overlay subtil sur backgrounds (style retro)

### Animation Standards

- Durée: 200ms (rapide pour réactivité)
- Courbe: curves.easeOutCubic
- Hover: scale(1.02) + glow intensifié
- Press: scale(0.98) immédiat

---

## 3. Composants UI Critiques

### Mini Player

**Priorité:** Contrôles réactifs (réponse < 50ms)

```dart
- Stream 60fps pour progress bar
- setState synchrone pour mises à jour
- Slider sans animation de transition
- Contrôles avec feedback immédiat
```

### Infinite Scroll

```dart
- ListView.builder pour rendu progressif
- Préchargement 5 items avant fin
- PaginatedAsyncNotifier
- Shimmer placeholder pendant chargement
```

### Image Caching

```dart
- CachedNetworkImage avec cache infini
- Placeholder gradient animé
- Fallback gradient on error
- FadeIn 200ms
```

---

## 4. Navigation

### Desktop Layout

```
┌────────────────────────────────────────────────────┐
│ Sidebar │ Main Content │ Right Panel               │
│ (240px) │               │ (320px)                  │
│         │               │                           │
│ - Home  │ Top Bar       │ Queue / Now Playing       │
│ - Search│──────────────│                           │
│ - Lib   │ Page Content │                           │
│ - Play  │               │                           │
│         │               │                           │
│         │               │                           │
├─────────┴───────────────┴───────────────────────────┤
│ Mini Player (persistent)                            │
└────────────────────────────────────────────────────┘
```

### Mobile Layout

```
┌────────────────────┐
│ Top Bar           │
├────────────────────┤
│                    │
│ Page Content       │
│                    │
│                    │
├────────────────────┤
│ Mini Player        │
├────────────────────┤
│ Bottom Nav (56px)  │
└────────────────────┘
```

### Pages Principales

- Home (Sections: Recommanded, Recently Played, New Releases)
- Search (Barre recherche + Résultats)
- Library (Playlists, Albums, Artists)
- Settings

---

## 5. Structure du Projet Flutter

```
lib/
├── main.dart
├── core/
│   ├── constants/
│   │   ├── app_constants.dart
│   │   └── api_constants.dart
│   ├── theme/
│   │   ├── app_theme.dart
│   │   ├── colors.dart
│   │   └── text_styles.dart
│   └── utils/
│       ├── validators.dart
│       └── formatters.dart
├── domain/
│   ├── entities/
│   │   ├── user.dart
│   │   ├── track.dart
│   │   ├── playlist.dart
│   │   └── artist.dart
│   └── repositories/
│       └── (repository interfaces)
├── infrastructure/
│   ├── datasources/
│   │   ├── local/
│   │   └── remote/
│   └── repositories/
│       └── (repository implementations)
└── presentation/
    ├── providers/
    │   ├── auth_provider.dart
    │   ├── music_provider.dart
    │   └── navigation_provider.dart
    ├── pages/
    │   ├── desktop/
    │   ├── mobile/
    │   ├── home/
    │   ├── search/
    │   └── library/
    └── widgets/
        ├── common/
        ├── player/
        └── adaptive/
```

---

## 6. Critères de Succès

### Performance
- Navigation < 100ms entre pages
- Contrôles player < 50ms de latence
- Scroll 60fps constant
- Images chargées progressivement sans blocking

### UX
- Interface adaptative seamless
- Feedback visuel immédiat sur toutes interactions
- États de chargement clairs
- Gestion d'erreur gracieuse

### Design
- Cohérence visuelle néon cyberpunk
- Hiérarchie visuelle claire
- Accessibilité (contrast ratios)
- Animations fluides (200ms)

---

## Prototype

Un preview HTML du design est disponible dans: `docs/design-preview.html`

Ouvrir dans un navigateur pour voir:
- Palette de couleurs interactive
- Composants UI stylisés
- Effets néon cyberpunk
- Animations et interactions