AudiOhm/CODE_ANALYSIS_AND_PRIORITIES.md

Analyse du Code Existant & Améliorations Prioritaires

Date: 2026-01-18 Projet: AudiOhm (anciennement "Spotify Le 2") Objectif: Moderniser l'UI/UX selon les standards 2025

---

📊 État Actuel

Points Forts ✅

1. Architecture propre - Séparation Domain/Infrastructure/Presentation (DDD)
2. State Management - Riverpod bien implémenté
3. Thème cyberpunk - Esthétique néon déjà présente
4. Layout adaptatif - Desktop/mobile bien géré
5. Composants réutilisables - Widgets bien structurés
6. Cache d'images - cached_network_image en place
7. Audio player - just_audio intégré

Problèmes Identifiés ❌

Catégorisés par impact sur l'expérience utilisateur et effort d'implémentation

---

🔥 PRIORITÉ CRITIQUE (Impact Élevé / Effort Faible)

1. Accessibilité - Contraste de couleurs insuffisant

Problème:

// colors.dart - Ces couleurs ne respectent pas WCAG AA (4.5:1)
static const Color onSurface = Color(0xFFB0B8D4); // Contraste: 3.2:1 ❌
static const Color onSurfaceVariant = Color(0xFF8A92B4); // Contraste: 2.8:1 ❌
static const Color muted = Color(0xFF6A7294); // Contraste: 2.1:1 ❌

Impact: Difficile à lire pour les utilisateurs malvoyants, non-conforme WCAG

Solution:

// Nouvelles couleurs respectant WCAG AA
static const Color textPrimary = Color(0xFFF0F4F8); // Contraste: 14:1 ✅
static const Color textSecondary = Color(0xFF9BA3B8); // Contraste: 4.8:1 ✅
static const Color textTertiary = Color(0xFF6B7280); // Contraste: 4.5:1 ✅

Fichiers à modifier:

• frontend/lib/core/theme/colors.dart
• frontend/lib/core/theme/text_styles.dart
• frontend/lib/core/theme/app_theme.dart

Effort: 30 minutes

---

2. Animations trop rapides ou instables

Problème:

// mini_player.dart:346
duration: const Duration(milliseconds: 100), // Trop rapide !

Impact: Transitions saccadées, sensation "cheap"

Solution:

// Standardiser les durées d'animation
const _fastAnimation = Duration(milliseconds: 150); // Micro-interactions
const _baseAnimation = Duration(milliseconds: 200); // Hover, couleur
const _slowAnimation = Duration(milliseconds: 300); // Layout, modals

Fichiers à modifier:

• frontend/lib/presentation/widgets/common/mini_player.dart (ligne 346)
• frontend/lib/presentation/widgets/desktop/desktop_sidebar.dart (ligne 124)
• Tous les widgets avec AnimationController

Effort: 1 heure

---

3. Effet de scale sur hover (Layout Shift)

Problème:

// desktop_sidebar.dart:127
_scaleAnimation = Tween<double>(begin: 1.0, end: 1.02).animate(
// ↑ Scale causes layout shift ❌

Impact: Le contenu bouge, mauvaise UX

Solution:

// Remplacer scale par color/box-shadow
@override
Widget build(BuildContext context) {
  return MouseRegion(
    onEnter: (_) => setState(() => _isHovered = true),
    onExit: (_) => setState(() => _isHovered = false),
    child: AnimatedContainer(
      duration: const Duration(milliseconds: 200),
      decoration: BoxDecoration(
        color: _isHovered
            ? AppColors.cyan.withOpacity(0.15) // ← Use color instead
            : Colors.transparent,
        boxShadow: _isHovered // ← Add shadow instead of scale
            ? [BoxShadow(color: AppColors.cyan.withOpacity(0.2), blurRadius: 8)]
            : [],
      ),
      child: ListTile(...),
    ),
  );
}

Fichiers à modifier:

• frontend/lib/presentation/widgets/desktop/desktop_sidebar.dart
• frontend/lib/presentation/widgets/search/search_track_card.dart (si applicable)
• Tous les widgets avec scale sur hover

Effort: 2 heures

---

4. Typography - Fonts Google manquantes

Problème:

// pubspec.yaml:71
fonts:
  - family: Outfit
    assets:
      - assets/fonts/Outfit-Regular.ttf
# ❌ Pas de Space Grotesk (recommandé pour headings)
# ❌ Pas de JetBrains Mono (pour les détails techniques)

Impact: Typography moderne non conforme au design system

Solution:

# Ajouter à pubspec.yaml
dependencies:
  google_fonts: ^6.1.0

# Dans le code
import 'package:google_fonts/google_fonts.dart';

// Utiliser Space Grotesk pour les titres
Text(
  'Good Evening',
  style: GoogleFonts.spaceGrotesk(
    fontSize: 32,
    fontWeight: FontWeight.w700,
    color: AppColors.textPrimary,
  ),
),

Fichiers à modifier:

• frontend/pubspec.yaml
• frontend/lib/core/theme/text_styles.dart
• frontend/lib/core/theme/app_theme.dart
• frontend/lib/presentation/pages/mobile/mobile_home_page.dart

Effort: 1 heure

---

5. Icônes manquantes de cursor pointer

Problème:

// mobile_home_page.dart:20 - Tous les cards sont cliquables mais...
child: GestureDetector(
  onTap: () { /* ... */ },
  child: Container(
    // ❌ Pas de cursor pointer
  ),
),

Impact: Les utilisateurs ne savent pas ce qui est cliquable

Solution:

import 'package:flutter/material.dart';

child: MouseRegion(
  cursor: SystemMouseCursors.click, // ← Ajouter cursor
  child: GestureDetector(
    onTap: onTap,
    child: Container(...),
  ),
),

Fichères à modifier:

• frontend/lib/presentation/pages/mobile/mobile_home_page.dart
• frontend/lib/presentation/widgets/search/search_track_card.dart
• frontend/lib/presentation/widgets/search/search_album_card.dart
• frontend/lib/presentation/widgets/search/search_artist_card.dart
• Tous les widgets cliquables

Effort: 1.5 heures

---

🎯 PRIORITÉ HAUTE (Impact Élevé / Effort Moyen)

6. Cards sans hover state

Problème:

// mobile_home_page.dart:196 - _AlbumCard
class _AlbumCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // ❌ Pas d'état hover, pas de feedback visuel
      child: Column(...),
    );
  }
}

Impact: Les utilisateurs ne savent pas si les cards sont interactifs

Solution:

class _AlbumCard extends StatefulWidget {
  @override
  State<_AlbumCard> createState() => _AlbumCardState();
}

class _AlbumCardState extends State<_AlbumCard> {
  bool _isHovered = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => setState(() => _isHovered = true),
      onExit: (_) => setState(() => _isHovered = false),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        decoration: BoxDecoration(
          border: Border.all(
            color: _isHovered
                ? AppColors.cyan // ← Border visible au hover
                : Colors.transparent,
            width: 1,
          ),
          boxShadow: _isHovered
              ? [
                  BoxShadow(
                    color: AppColors.cyan.withOpacity(0.15),
                    blurRadius: 20,
                  ),
                ]
              : [],
        ),
        child: GestureDetector(
          onTap: widget.onTap,
          child: Column(...),
        ),
      ),
    );
  }
}

Fichiers à modifier:

• frontend/lib/presentation/pages/mobile/mobile_home_page.dart
• Tous les widgets card

Effort: 3 heures

---

7. Search bar sans clear button

Problème:

// search_page.dart - Implémentation de recherche basique
// ❌ Pas de bouton clear quand du texte est entré
// ❌ Pas de récentes recherches
// ❌ Pas de trending searches

Impact: UX de recherche frustrante

Solution:

// Créer un widget SearchInput moderne
class SearchInput extends StatefulWidget {
  @override
  State<SearchInput> createState() => _SearchInputState();
}

class _SearchInputState extends State<SearchInput> {
  final TextEditingController _controller = TextEditingController();
  bool _hasText = false;

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      setState(() => _hasText = _controller.text.isNotEmpty);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56,
      decoration: BoxDecoration(
        color: AppColors.surface,
        borderRadius: BorderRadius.circular(28),
        border: Border.all(
          color: AppColors.cyan.withOpacity(0.2),
          width: 2,
        ),
      ),
      child: Row(
        children: [
          const SizedBox(width: 20),
          const Icon(Icons.search, color: AppColors.textSecondary),
          const SizedBox(width: 12),
          Expanded(
            child: TextField(
              controller: _controller,
              style: const TextStyle(
                color: AppColors.textPrimary,
                fontSize: 18,
              ),
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Search artists, songs, albums...',
                hintStyle: TextStyle(
                  color: AppColors.textTertiary,
                ),
              ),
            ),
          ),
          if (_hasText) // ← Show clear button
            IconButton(
              icon: const Icon(Icons.clear, color: AppColors.textSecondary),
              onPressed: () {
                _controller.clear();
              },
            ),
          const SizedBox(width: 8),
        ],
      ),
    );
  }
}

Fichiers à modifier:

• frontend/lib/presentation/pages/search/search_mobile_page.dart
• frontend/lib/presentation/pages/search/search_desktop_page.dart
• Créer frontend/lib/presentation/widgets/search/search_input.dart

Effort: 4 heures

---

8. Nom de l'application obsolète

Problème:

// main.dart:22
class SpotifyLe2App extends StatelessWidget { // ❌ "Spotify Le 2"

// desktop_sidebar.dart:39
child: Text(
  'Spotify Le 2', // ❌ Devrait être "AudiOhm"

Impact: Branding incohérent

Solution:

// Renommer partout en "AudiOhm"
class AudiOhmApp extends StatelessWidget {
  // ...
}

// Et dans les strings
const String appName = 'AudiOhm';

Fichiers à modifier:

• frontend/lib/main.dart
• frontend/lib/presentation/widgets/desktop/desktop_sidebar.dart
• frontend/pubspec.yaml (name et description)
• Tous les fichiers contenant "Spotify Le 2"

Effort: 30 minutes

---

9. Progress bar du player manquante

Problème:

// mini_player.dart - Pas de progress bar visible
// ❌ Les utilisateurs ne peuvent pas voir où ils sont dans le track
// ❌ Pas de seek possible

Impact: Fonctionnalité critique manquante

Solution:

// Ajouter une progress bar dans MiniPlayer
Widget _buildProgressBar(BuildContext context, WidgetRef ref) {
  final playerState = ref.watch(playerProvider);
  final position = playerState.position;
  final duration = playerState.duration;

  return Column(
    children: [
      SliderTheme(
        data: SliderThemeData(
          trackHeight: 4,
          thumbShape: const RoundSliderThumbShape(
            enabledThumbRadius: 6,
          ),
          overlayShape: const RoundSliderOverlayShape(
            overlayRadius: 16,
          ),
          activeTrackColor: AppColors.cyan,
          inactiveTrackColor: AppColors.surfaceVariant,
          thumbColor: AppColors.cyan,
          overlayColor: AppColors.cyan.withOpacity(0.2),
        ),
        child: Slider(
          value: position.inMilliseconds.toDouble(),
          max: duration.inMilliseconds.toDouble(),
          onChanged: (value) {
            ref.read(playerProvider.notifier).seek(
              Duration(milliseconds: value.toInt()),
            );
          },
        ),
      ),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              _formatTime(position),
              style: const TextStyle(
                color: AppColors.textTertiary,
                fontSize: 11,
              ),
            ),
            Text(
              _formatTime(duration),
              style: const TextStyle(
                color: AppColors.textTertiary,
                fontSize: 11,
              ),
            ),
          ],
        ),
      ),
    ],
  );
}

String _formatTime(Duration duration) {
  String twoDigits(int n) => n.toString().padLeft(2, '0');
  final minutes = twoDigits(duration.inMinutes.remainder(60));
  final seconds = twoDigits(duration.inSeconds.remainder(60));
  return '$minutes:$seconds';
}

Fichiers à modifier:

• frontend/lib/presentation/widgets/common/mini_player.dart

Effort: 2 heures

---

10. Loading states manquants

Problème:

// Tous les widgets utilisent des placeholders statiques
// ❌ Pas de skeleton screens
// ❌ Pas de shimmer effects
// ❌ Les utilisateurs ne savent pas si ça charge

Impact: Mauvaise perception de performance

Solution:

// Utiliser le package shimmer déjà installé
import 'package:shimmer/shimmer.dart';

class AlbumCardSkeleton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: AppColors.surfaceVariant,
      highlightColor: AppColors.surfaceElevated,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: double.infinity,
            height: 120,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
            ),
          ),
          const SizedBox(height: 8),
          Container(
            width: 100,
            height: 14,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(4),
            ),
          ),
          const SizedBox(height: 4),
          Container(
            width: 60,
            height: 12,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(4),
            ),
          ),
        ],
      ),
    );
  }
}

// Utiliser dans les listes
ListView.builder(
  itemCount: isLoading ? 6 : albums.length,
  itemBuilder: (context, index) {
    return isLoading
        ? const AlbumCardSkeleton()
        : AlbumCard(album: albums[index]);
  },
),

Fichiers à modifier:

• frontend/lib/presentation/pages/mobile/mobile_home_page.dart
• frontend/lib/presentation/pages/search/search_page.dart
• Tous les widgets affichant des listes

Effort: 4 heures

---

📋 PRIORITÉ MOYENNE (Impact Moyen / Effort Variable)

11. Empty states non implémentés

Solution: Créer des widgets d'état vide cohérents

Effort: 3 heures

---

12. Erreur handling basique

Problème: Pas de messages d'erreur user-friendly

Solution: Créer un système de notifications/toasts

Effort: 3 heures

---

13. Responsive spacing

Problème: Espacement fixe, pas adaptatif

Solution: Implémenter un système de spacing responsive

Effort: 4 heures

---

14. Navigation sans transition

Problème: Changements de page instantanés

Solution: Ajouter des transitions de page (slide, fade)

Effort: 2 heures

---

15. Filtrage/recherche basique

Problème: Pas de filtres avancés (par genre, année, etc.)

Solution: Ajouter des filter chips

Effort: 6 heures

---

🔧 PRIORITÉ FAIBLE (Impact Faible / Effort Variable)

16. Thème clair non implémenté

Note: Le design system master propose uniquement un thème sombre

Effort: 8 heures

---

17. Tests UI manquants

Solution: Ajouter des widget tests

Effort: 10 heures

---

18. Documentation inline

Solution: Ajouter des commentaires Dart doc

Effort: 4 heures

---

19. Performance monitoring

Solution: Intégrer Firebase Performance ou similaire

Effort: 6 heures

---

20. Analytics

Solution: Intégrer un système d'analytics

Effort: 6 heures

---

📅 Plan d'Action Recommandé

Phase 1 - Quick Wins (1-2 jours)

✅ Impact immédiat sur la perception de qualité

1. Renommer l'application "Spotify Le 2" → "AudiOhm" (30min)
2. Corriger les contrastes de couleurs (1h)
3. Standardiser les durées d'animation (1h)
4. Ajouter cursor pointer sur les éléments cliquables (1.5h)

Total: ~4 heures

---

Phase 2 - UX Core (3-5 jours)

✅ Améliorations majeures de l'expérience utilisateur

5. Supprimer les scale transforms, utiliser color/shadow (2h)
6. Ajouter Google Fonts (Space Grotesk + Outfit) (1h)
7. Implémenter les hover states sur toutes les cards (3h)
8. Créer une search bar moderne avec clear button (4h)
9. Ajouter la progress bar dans le mini player (2h)
10. Implémenter les skeleton loading states (4h)

Total: ~16 heures (2-3 jours de dev)

---

Phase 3 - Polish (5-7 jours)

✅ Finitions professionnelles

11. Créer des empty states cohérents (3h)
12. Implémenter un système d'erreurs user-friendly (3h)
13. Améliorer le responsive spacing (4h)
14. Ajouter des transitions de page (2h)
15. Implémenter les filtres avancés (6h)

Total: ~18 heures (3-4 jours de dev)

---

Phase 4 - Long Term (Plusieurs semaines)

✅ Améliorations continues

16. Thème clair optionnel
17. Tests UI automatisés
18. Documentation complète
19. Performance monitoring
20. Analytics

Total: ~34 heures (1-2 semaines de dev)

---

🎯 Recommandation Finale

Commencer Immédiatement (Phase 1)

Ces 4 améliorations vont transformer la perception de qualité en seulement 4 heures :

1. Contraste WCAG - Accessibilité immédiate
2. Animations 200ms - Transitions fluides
3. No scale on hover - Plus professionnel
4. Cursor pointer - Indicateurs clairs

Puis Phase 2 (UX Core)

Investir 2-3 jours pour solidifier l'expérience de base avec :

• Search bar moderne
• Loading states
• Hover states
• Progress bar

Résultat Attendu

Après Phase 1 + Phase 2 (seulement 3-4 jours de travail) :

✅ Accessibilité WCAG AA compliant ✅ Transitions fluides et professionnelles ✅ Feedback visuel cohérent ✅ Navigation intuitive ✅ Perception de qualité "premium"

---

📊 Métriques de Succès

Mesurer l'impact avant/après :

• Contraste moyen: Actuel ~3:1 → Cible ≥4.5:1 (WCAG AA)
• Durée animations: Actuel 100ms → Cible 200ms standardisé
• Elements interactifs: Actuel ~40% avec cursor → Cible 100%
• Cards avec hover: Actuel 0% → Cible 100%
• Loading states: Actuel 0% → Cible 100%
• Satisfaction utilisateur: Mesurer via feedback

---

🚀 Prochaine Étape

Voulez-vous que je commence à implémenter les corrections de la Phase 1 ?

Commencer Phase 1 - Quick Wins (4h de travail) Voir les détails techniques d'une amélioration spécifique Créer un roadmap détaillé avec tickets GitHub Générer le code complet pour une correction spécifique