chore: update various components and services for improved functionality and consistency, including formatting adjustments and minor refactors

ENV.md

@@ -1,6 +1,7 @@
 # Variables d'environnement requises
 
 ## Production (.env)
+
 ```env
 # Database Configuration (SQLite)
 DATABASE_URL=file:./data/stripstream.db
@@ -30,9 +31,11 @@ NODE_ENV=production
 ```
 
 ## Génération du secret NextAuth
+
 ```bash
 openssl rand -base64 32
 ```
 
 ## Développement
+
 Pour le développement, les variables sont définies directement dans `docker-compose.dev.yml`.

docs/cache-debug.md

@@ -15,12 +15,14 @@ CACHE_DEBUG=true
 ### Configuration
 
 #### Développement (docker-compose.dev.yml)
+
 ```yaml
 environment:
   - CACHE_DEBUG=true
 ```
 
 #### Production (.env)
+
 ```env
 CACHE_DEBUG=true
 ```
@@ -30,49 +32,61 @@ CACHE_DEBUG=true
 Les logs de cache apparaissent dans la console serveur avec le format suivant :
 
 ### Cache HIT (donnée valide)
+
 ```
 [CACHE HIT] home-ongoing | HOME | 0.45ms
 ```
+
 - ✅ Donnée trouvée en cache
 - ✅ Donnée encore valide (pas expirée)
 - ⚡ Retour immédiat (très rapide)
 
 ### Cache STALE (donnée expirée)
+
 ```
 [CACHE STALE] home-ongoing | HOME | 0.52ms
 ```
+
 - ✅ Donnée trouvée en cache
 - ⚠️ Donnée expirée mais toujours retournée
 - 🔄 Revalidation lancée en background
 
 ### Cache MISS (pas de donnée)
+
 ```
 [CACHE MISS] home-ongoing | HOME
 ```
+
 - ❌ Aucune donnée en cache
 - 🌐 Fetch normal depuis Komga
 - 💾 Mise en cache automatique
 
 ### Cache SET (mise en cache)
+
 ```
 [CACHE SET] home-ongoing | HOME | 324.18ms
 ```
+
 - 💾 Donnée mise en cache après fetch
 - 📊 Temps total incluant le fetch Komga
 - ✅ Prochaines requêtes seront rapides
 
 ### Cache REVALIDATE (revalidation background)
+
 ```
 [CACHE REVALIDATE] home-ongoing | HOME | 287.45ms
 ```
+
 - 🔄 Revalidation en background (après STALE)
 - 🌐 Nouvelle donnée fetched depuis Komga
 - 💾 Cache mis à jour pour les prochaines requêtes
 
 ### Erreur de revalidation
+
 ```
 [CACHE REVALIDATE ERROR] home-ongoing: Error: ...
 ```
+
 - ❌ Échec de la revalidation background
 - ⚠️ Cache ancien conservé
 - 🔄 Retry au prochain STALE
@@ -81,14 +95,14 @@ Les logs de cache apparaissent dans la console serveur avec le format suivant :
 
 Les logs affichent le type de TTL utilisé :
 
-| Type | TTL | Usage |
+| Type        | TTL     | Usage              |
-|------|-----|-------|
+| ----------- | ------- | ------------------ |
-| `DEFAULT` | 5 min | Données génériques |
+| `DEFAULT`   | 5 min   | Données génériques |
-| `HOME` | 10 min | Page d'accueil |
+| `HOME`      | 10 min  | Page d'accueil     |
-| `LIBRARIES` | 24h | Bibliothèques |
+| `LIBRARIES` | 24h     | Bibliothèques      |
-| `SERIES` | 5 min | Séries |
+| `SERIES`    | 5 min   | Séries             |
-| `BOOKS` | 5 min | Livres |
+| `BOOKS`     | 5 min   | Livres             |
-| `IMAGES` | 7 jours | Images |
+| `IMAGES`    | 7 jours | Images             |
 
 ## Exemple de session complète
 
@@ -113,22 +127,27 @@ Les logs affichent le type de TTL utilisé :
 ### 1. DevTools du navigateur
 
 #### Network Tab
+
 - Temps de réponse < 50ms = probablement du cache serveur
 - Headers `X-Cache` si configurés
 - Onglet "Timing" pour détails
 
 #### Application → Cache Storage
+
 Inspectez le cache du Service Worker :
+
 - `stripstream-cache-v1` : Ressources statiques
 - `stripstream-images-v1` : Images (covers + pages)
 
 Actions disponibles :
+
 - ✅ Voir le contenu de chaque cache
 - 🔍 Chercher une URL spécifique
 - 🗑️ Supprimer des entrées
 - 🧹 Vider complètement un cache
 
 #### Application → Service Workers
+
 - État du Service Worker
 - "Unregister" pour le désactiver
 - "Update" pour forcer une mise à jour
@@ -137,10 +156,13 @@ Actions disponibles :
 ### 2. API de monitoring
 
 #### Taille du cache
+
 ```bash
 curl http://localhost:3000/api/komga/cache/size
 ```
+
 Response :
+
 ```json
 {
   "sizeInBytes": 15728640,
@@ -149,10 +171,13 @@ Response :
 ```
 
 #### Mode actuel
+
 ```bash
 curl http://localhost:3000/api/komga/cache/mode
 ```
+
 Response :
+
 ```json
 {
   "mode": "memory"
@@ -160,11 +185,13 @@ Response :
 ```
 
 #### Vider le cache
+
 ```bash
 curl -X POST http://localhost:3000/api/komga/cache/clear
 ```
 
 #### Changer de mode
+
 ```bash
 curl -X POST http://localhost:3000/api/komga/cache/mode \
   -H "Content-Type: application/json" \
@@ -190,6 +217,7 @@ cat .cache/user-id/home-ongoing.json | jq
 ```
 
 Exemple de contenu :
+
 ```json
 {
   "data": {
@@ -206,6 +234,7 @@ Exemple de contenu :
 ### Identifier un problème de cache
 
 **Symptôme** : Les données ne se rafraîchissent pas
+
 ```bash
 # 1. Vérifier si STALE + REVALIDATE se produisent
 CACHE_DEBUG=true
@@ -222,6 +251,7 @@ CACHE_DEBUG=true
 ### Optimiser les performances
 
 **Objectif** : Identifier les requêtes lentes
+
 ```bash
 # Activer les logs
 CACHE_DEBUG=true
@@ -231,7 +261,8 @@ CACHE_DEBUG=true
 [CACHE SET] library-456-all-series | SERIES | 2847.32ms  # ⚠️ Très lent !
 ```
 
-**Solution** : 
+**Solution** :
+
 - Vérifier la taille des bibliothèques
 - Augmenter le TTL pour ces données
 - Considérer la pagination
@@ -251,29 +282,33 @@ En mode `file` : les caches survivent au redémarrage
 
 ### Temps de réponse normaux
 
-| Scénario | Temps attendu | Log |
+| Scénario                | Temps attendu | Log                                  |
-|----------|---------------|-----|
+| ----------------------- | ------------- | ------------------------------------ |
-| Cache HIT | < 1ms | `[CACHE HIT] ... \| 0.45ms` |
+| Cache HIT               | < 1ms         | `[CACHE HIT] ... \| 0.45ms`          |
-| Cache STALE | < 1ms | `[CACHE STALE] ... \| 0.52ms` |
+| Cache STALE             | < 1ms         | `[CACHE STALE] ... \| 0.52ms`        |
-| Cache MISS (petit) | 50-200ms | `[CACHE SET] ... \| 124.18ms` |
+| Cache MISS (petit)      | 50-200ms      | `[CACHE SET] ... \| 124.18ms`        |
-| Cache MISS (gros) | 200-1000ms | `[CACHE SET] ... \| 847.32ms` |
+| Cache MISS (gros)       | 200-1000ms    | `[CACHE SET] ... \| 847.32ms`        |
-| Revalidate (background) | Variable | `[CACHE REVALIDATE] ... \| 287.45ms` |
+| Revalidate (background) | Variable      | `[CACHE REVALIDATE] ... \| 287.45ms` |
 
 ### Signaux d'alerte
 
 ⚠️ **Cache HIT > 10ms**
+
 - Problème : Disque lent (mode file)
 - Solution : Vérifier les I/O, passer en mode memory
 
 ⚠️ **Cache MISS > 2000ms**
+
 - Problème : Komga très lent ou données énormes
 - Solution : Vérifier Komga, optimiser la requête
 
 ⚠️ **REVALIDATE ERROR fréquents**
+
 - Problème : Komga instable ou réseau
 - Solution : Augmenter les timeouts, vérifier la connectivité
 
 ⚠️ **Trop de MISS successifs**
+
 - Problème : Cache pas conservé ou TTL trop court
 - Solution : Vérifier le mode, augmenter les TTL
 
@@ -294,12 +329,14 @@ Les logs sont **automatiquement désactivés** si la variable n'est pas définie
 ## Logs et performance
 
 **Impact sur les performances** :
+
 - Overhead : < 0.1ms par opération
 - Pas d'écriture disque (juste console)
 - Pas d'accumulation en mémoire
 - Safe pour la production
 
 **Recommandations** :
+
 - ✅ Activé en développement
 - ✅ Activé temporairement en production pour diagnostics
 - ❌ Pas nécessaire en production normale
@@ -307,6 +344,7 @@ Les logs sont **automatiquement désactivés** si la variable n'est pas définie
 ## Conclusion
 
 Le système de logs de cache est conçu pour être :
+
 - 🎯 **Simple** : Format clair et concis
 - ⚡ **Rapide** : Impact négligeable sur les performances
 - 🔧 **Utile** : Informations essentielles pour le debug
@@ -314,4 +352,3 @@ Le système de logs de cache est conçu pour être :
 
 Pour la plupart des besoins de debug, les DevTools du navigateur suffisent.  
 Les logs serveur sont utiles pour comprendre le comportement du cache côté backend.
-

docs/caching.md

@@ -34,9 +34,11 @@ Le système de caching est organisé en **3 couches indépendantes** avec des re
 ## Couche 1 : Service Worker (Client)
 
 ### Fichier
+
 `public/sw.js`
 
 ### Responsabilité
+
 - Support offline de l'application
 - Cache persistant des images (couvertures et pages de livres)
 - Cache des ressources statiques Next.js
@@ -44,20 +46,22 @@ Le système de caching est organisé en **3 couches indépendantes** avec des re
 ### Stratégies
 
 #### Images : Cache-First
+
 ```javascript
 // Pour toutes les images (covers + pages)
 const isImageResource = (url) => {
   return (
-    (url.includes("/api/v1/books/") && 
+    (url.includes("/api/v1/books/") &&
       (url.includes("/pages") || url.includes("/thumbnail") || url.includes("/cover"))) ||
-    (url.includes("/api/komga/images/") && 
+    (url.includes("/api/komga/images/") &&
-      (url.includes("/series/") || url.includes("/books/")) && 
+      (url.includes("/series/") || url.includes("/books/")) &&
       url.includes("/thumbnail"))
   );
 };
 ```
 
 **Comportement** :
+
 1. Vérifier si l'image est dans le cache
 2. Si oui → retourner depuis le cache
 3. Si non → fetch depuis le réseau
@@ -65,11 +69,13 @@ const isImageResource = (url) => {
 5. Si échec → retourner 404
 
 **Avantages** :
+
 - Performance maximale (lecture instantanée depuis le cache)
 - Fonctionne offline une fois les images chargées
 - Économise la bande passante
 
 #### Navigation et ressources statiques : Network-First
+
 ```javascript
 // Pour les pages et ressources _next/static
 event.respondWith(
@@ -85,7 +91,7 @@ event.respondWith(
       // Fallback sur le cache si offline
       const cachedResponse = await cache.match(request);
       if (cachedResponse) return cachedResponse;
-      
+
       // Page offline si navigation
       if (request.mode === "navigate") {
         return cache.match("/offline.html");
@@ -95,18 +101,20 @@ event.respondWith(
 ```
 
 **Avantages** :
+
 - Toujours la dernière version quand online
 - Fallback offline si nécessaire
 - Navigation fluide même sans connexion
 
 ### Caches
 
-| Cache | Usage | Stratégie | Taille |
+| Cache                   | Usage                        | Stratégie     | Taille   |
-|-------|-------|-----------|--------|
+| ----------------------- | ---------------------------- | ------------- | -------- |
-| `stripstream-cache-v1` | Ressources statiques + pages | Network-First | ~5 MB |
+| `stripstream-cache-v1`  | Ressources statiques + pages | Network-First | ~5 MB    |
-| `stripstream-images-v1` | Images (covers + pages) | Cache-First | Illimité |
+| `stripstream-images-v1` | Images (covers + pages)      | Cache-First   | Illimité |
 
 ### Nettoyage
+
 - Automatique lors de l'activation du Service Worker
 - Suppression des anciennes versions de cache
 - Pas d'expiration (contrôlé par l'utilisateur via les paramètres du navigateur)
@@ -114,9 +122,11 @@ event.respondWith(
 ## Couche 2 : ServerCacheService (Serveur)
 
 ### Fichier
+
 `src/lib/services/server-cache.service.ts`
 
 ### Responsabilité
+
 - Cache des réponses API Komga côté serveur
 - Optimisation des temps de réponse
 - Réduction de la charge sur Komga
@@ -126,6 +136,7 @@ event.respondWith(
 Cette stratégie est **la clé de la performance** de l'application.
 
 #### Principe
+
 ```
 Requête → Cache existe ?
   ├─ Non    → Fetch normal + mise en cache
@@ -136,6 +147,7 @@ Requête → Cache existe ?
 ```
 
 #### Implémentation
+
 ```typescript
 async getOrSet<T>(
   key: string,
@@ -144,7 +156,7 @@ async getOrSet<T>(
 ): Promise<T> {
   const cacheKey = `${user.id}-${key}`;
   const cachedResult = this.getStale(cacheKey);
-  
+
   if (cachedResult !== null) {
     const { data, isStale } = cachedResult;
 
@@ -164,12 +176,14 @@ async getOrSet<T>(
 ```
 
 #### Avantages
+
 ✅ **Temps de réponse constant** : Le cache expiré est retourné instantanément  
 ✅ **Données fraîches** : Revalidation en background pour la prochaine requête  
 ✅ **Pas de délai** : L'utilisateur ne subit jamais l'attente de revalidation  
 ✅ **Résilience** : Même si Komga est lent, l'app reste rapide
 
 #### Inconvénients
+
 ⚠️ Les données peuvent être légèrement obsolètes (jusqu'au prochain refresh)  
 ⚠️ Nécessite un cache initialisé (première requête toujours lente)
 
@@ -178,9 +192,11 @@ async getOrSet<T>(
 L'utilisateur peut choisir entre deux modes :
 
 #### Mode Mémoire (par défaut)
+
 ```typescript
-cacheMode: "memory"
+cacheMode: "memory";
 ```
+
 - Cache stocké en RAM
 - **Performances** : Très rapide (lecture < 1ms)
 - **Persistance** : Perdu au redémarrage du serveur
@@ -188,9 +204,11 @@ cacheMode: "memory"
 - **Idéal pour** : Développement, faible charge
 
 #### Mode Fichier
+
 ```typescript
-cacheMode: "file"
+cacheMode: "file";
 ```
+
 - Cache stocké sur disque (`.cache/`)
 - **Performances** : Rapide (lecture 5-10ms)
 - **Persistance** : Survit aux redémarrages
@@ -201,14 +219,14 @@ cacheMode: "file"
 
 Chaque type de données a un TTL configuré :
 
-| Type | TTL par défaut | Justification |
+| Type        | TTL par défaut | Justification                      |
-|------|----------------|---------------|
+| ----------- | -------------- | ---------------------------------- |
-| `DEFAULT` | 5 minutes | Données génériques |
+| `DEFAULT`   | 5 minutes      | Données génériques                 |
-| `HOME` | 10 minutes | Page d'accueil (données agrégées) |
+| `HOME`      | 10 minutes     | Page d'accueil (données agrégées)  |
-| `LIBRARIES` | 24 heures | Bibliothèques (rarement modifiées) |
+| `LIBRARIES` | 24 heures      | Bibliothèques (rarement modifiées) |
-| `SERIES` | 5 minutes | Séries (métadonnées + progression) |
+| `SERIES`    | 5 minutes      | Séries (métadonnées + progression) |
-| `BOOKS` | 5 minutes | Livres (métadonnées + progression) |
+| `BOOKS`     | 5 minutes      | Livres (métadonnées + progression) |
-| `IMAGES` | 7 jours | Images (immuables) |
+| `IMAGES`    | 7 jours        | Images (immuables)                 |
 
 #### Configuration personnalisée
 
@@ -235,6 +253,7 @@ const cacheKey = `${user.id}-${key}`;
 ```
 
 **Avantages** :
+
 - Pas de collision entre utilisateurs
 - Progression de lecture individuelle
 - Préférences personnalisées
@@ -244,18 +263,21 @@ const cacheKey = `${user.id}-${key}`;
 Le cache peut être invalidé :
 
 #### Manuellement
+
 ```typescript
-await cacheService.delete(key);        // Une clé
+await cacheService.delete(key); // Une clé
-await cacheService.deleteAll(prefix);  // Toutes les clés avec préfixe
+await cacheService.deleteAll(prefix); // Toutes les clés avec préfixe
-await cacheService.clear();            // Tout le cache
+await cacheService.clear(); // Tout le cache
 ```
 
 #### Automatiquement
+
 - Lors d'une mise à jour de progression
 - Lors d'un changement de favoris
 - Lors de la suppression d'une série
 
 #### API
+
 ```
 DELETE /api/komga/cache/clear    // Vider tout le cache
 DELETE /api/komga/home           // Invalider le cache home
@@ -264,12 +286,14 @@ DELETE /api/komga/home           // Invalider le cache home
 ## Couche 3 : Cache HTTP (Navigateur)
 
 ### Responsabilité
+
 - Cache basique géré par le navigateur
 - Headers HTTP standard
 
 ### Configuration
 
 #### Next.js ISR (Incremental Static Regeneration)
+
 ```typescript
 export const revalidate = 60; // Revalidation toutes les 60 secondes
 ```
@@ -279,20 +303,23 @@ Utilisé uniquement pour les routes avec rendu statique.
 #### Headers explicites (désactivé)
 
 Les headers HTTP explicites ont été **supprimés** car :
+
 - Le ServerCacheService gère déjà le caching efficacement
 - Évite la confusion entre plusieurs couches de cache
 - Simplifie le debugging
 
 Avant (supprimé) :
+
 ```typescript
 NextResponse.json(data, {
   headers: {
-    'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=120'
+    "Cache-Control": "public, s-maxage=60, stale-while-revalidate=120",
-  }
+  },
 });
 ```
 
 Maintenant :
+
 ```typescript
 NextResponse.json(data); // Pas de headers
 ```
@@ -322,29 +349,32 @@ Exemple : Chargement de la page d'accueil
 
 ### Temps de réponse typiques
 
-| Scénario | Temps | Détails |
+| Scénario                      | Temps       | Détails                    |
-|----------|-------|---------|
+| ----------------------------- | ----------- | -------------------------- |
-| Cache ServerCache valide + SW | ~50ms | Optimal |
+| Cache ServerCache valide + SW | ~50ms       | Optimal                    |
-| Cache ServerCache expiré + SW | ~50ms | Revalidation en background |
+| Cache ServerCache expiré + SW | ~50ms       | Revalidation en background |
-| Pas de cache ServerCache + SW | ~200-500ms | Première requête |
+| Pas de cache ServerCache + SW | ~200-500ms  | Première requête           |
-| Cache SW uniquement | ~10ms | Images seulement |
+| Cache SW uniquement           | ~10ms       | Images seulement           |
-| Tout à froid | ~500-1000ms | Pire cas |
+| Tout à froid                  | ~500-1000ms | Pire cas                   |
 
 ## Cas d'usage
 
 ### 1. Première visite
+
 ```
 User → App → Komga (tous les caches vides)
 Temps : ~500-1000ms
 ```
 
 ### 2. Visite suivante (online)
+
 ```
 User → ServerCache (valide) → Images SW
 Temps : ~50ms
 ```
 
 ### 3. Cache expiré (online)
+
 ```
 User → ServerCache (stale) → Retour immédiat
        ↓
@@ -353,6 +383,7 @@ Temps ressenti : ~50ms (aucun délai)
 ```
 
 ### 4. Mode offline
+
 ```
 User → Service Worker cache uniquement
 Fonctionnalités :
@@ -373,6 +404,7 @@ CACHE_DEBUG=true
 ```
 
 **Format des logs** :
+
 ```
 [CACHE HIT] home-ongoing | HOME | 0.45ms      # Cache valide
 [CACHE STALE] home-ongoing | HOME | 0.52ms    # Cache expiré (retourné + revalidation)
@@ -386,24 +418,28 @@ CACHE_DEBUG=true
 ### API de monitoring
 
 #### Taille du cache serveur
+
 ```bash
 GET /api/komga/cache/size
 Response: { sizeInBytes: 15728640, itemCount: 234 }
 ```
 
 #### Mode de cache actuel
+
 ```bash
 GET /api/komga/cache/mode
 Response: { mode: "memory" }
 ```
 
 #### Changer le mode
+
 ```bash
 POST /api/komga/cache/mode
 Body: { mode: "file" }
 ```
 
 #### Vider le cache
+
 ```bash
 POST /api/komga/cache/clear
 ```
@@ -411,21 +447,26 @@ POST /api/komga/cache/clear
 ### DevTools du navigateur
 
 #### Network Tab
+
 - Temps de réponse < 50ms = cache serveur
 - Headers `X-Cache` si configurés
 - Onglet "Timing" pour détails
 
 #### Application → Cache Storage
+
 Inspecter le Service Worker :
+
 - `stripstream-cache-v1` : Ressources statiques
 - `stripstream-images-v1` : Images
 
 Actions disponibles :
+
 - Voir le contenu
 - Supprimer des entrées
 - Vider complètement
 
 #### Application → Service Workers
+
 - État du Service Worker
 - "Unregister" pour le désactiver
 - "Update" pour forcer une mise à jour
@@ -433,21 +474,25 @@ Actions disponibles :
 ## Optimisations futures possibles
 
 ### 1. Cache Redis (optionnel)
+
 - Pour un déploiement multi-instances
 - Cache partagé entre plusieurs serveurs
 - TTL natif Redis
 
 ### 2. Compression
+
 - Compresser les données en cache (Brotli/Gzip)
 - Économie d'espace disque/mémoire
 - Trade-off CPU vs espace
 
 ### 3. Prefetching intelligent
+
 - Précharger les séries en cours de lecture
 - Précharger les pages suivantes dans le reader
 - Basé sur l'historique utilisateur
 
 ### 4. Cache Analytics
+
 - Ratio hit/miss
 - Temps de réponse moyens
 - Identification des données les plus consultées
@@ -456,7 +501,8 @@ Actions disponibles :
 
 ### Pour les développeurs
 
-✅ **Utiliser BaseApiService.fetchWithCache()**  
+✅ **Utiliser BaseApiService.fetchWithCache()**
+
 ```typescript
 await this.fetchWithCache<T>(
   "cache-key",
@@ -465,12 +511,14 @@ await this.fetchWithCache<T>(
 );
 ```
 
-✅ **Invalider le cache après modification**  
+✅ **Invalider le cache après modification**
+
 ```typescript
 await HomeService.invalidateHomeCache();
 ```
 
-✅ **Choisir le bon TTL**  
+✅ **Choisir le bon TTL**
+
 - Court (1-5 min) : Données qui changent souvent
 - Moyen (10-30 min) : Données agrégées
 - Long (24h+) : Données quasi-statiques
@@ -499,4 +547,3 @@ Le système de caching de StripStream est conçu pour :
 🧹 **Simplicité** : 3 couches bien définies, pas de redondance
 
 Le système est maintenu simple avec des responsabilités claires pour chaque couche, facilitant la maintenance et l'évolution future.
-

docs/services.md

@@ -7,12 +7,10 @@ Service de gestion de l'authentification
 ### Méthodes
 
 - `loginUser(email: string, password: string): Promise<UserData>`
-
   - Authentifie un utilisateur
   - Retourne les données utilisateur
 
 - `createUser(email: string, password: string): Promise<UserData>`
-
   - Crée un nouvel utilisateur
   - Retourne les données utilisateur
 
@@ -26,12 +24,10 @@ Service de gestion des bibliothèques
 ### Méthodes
 
 - `getLibraries(): Promise<Library[]>`
-
   - Récupère la liste des bibliothèques
   - Met en cache les résultats
 
 - `getLibrary(libraryId: string): Promise<Library>`
-
   - Récupère une bibliothèque spécifique
   - Lance une erreur si non trouvée
 
@@ -51,11 +47,9 @@ Service de gestion des séries
 ### Méthodes
 
 - `getSeries(seriesId: string): Promise<Series>`
-
   - Récupère les détails d'une série
 
 - `getSeriesBooks(seriesId: string, page: number = 0, size: number = 24, unreadOnly: boolean = false): Promise<LibraryResponse<KomgaBook>>`
-
   - Récupère les livres d'une série
   - Supporte la pagination et le filtrage
 
@@ -69,19 +63,15 @@ Service de gestion des livres
 ### Méthodes
 
 - `getBook(bookId: string): Promise<{ book: KomgaBook; pages: number[] }>`
-
   - Récupère les détails d'un livre et ses pages
 
 - `updateReadProgress(bookId: string, page: number, completed: boolean = false): Promise<void>`
-
   - Met à jour la progression de lecture
 
 - `getPage(bookId: string, pageNumber: number): Promise<Response>`
-
   - Récupère une page spécifique d'un livre
 
 - `getCover(bookId: string): Promise<Response>`
-
   - Récupère la couverture d'un livre
 
 - `getPageThumbnail(bookId: string, pageNumber: number): Promise<Response>`
@@ -94,16 +84,13 @@ Service de gestion des images
 ### Méthodes
 
 - `getImage(path: string): Promise<ImageResponse>`
-
   - Récupère une image depuis le serveur
   - Gère le cache des images
 
 - `getSeriesThumbnailUrl(seriesId: string): string`
-
   - Génère l'URL de la miniature d'une série
 
 - `getBookThumbnailUrl(bookId: string): string`
-
   - Génère l'URL de la miniature d'un livre
 
 - `getBookPageUrl(bookId: string, pageNumber: number): string`
@@ -116,15 +103,12 @@ Service de gestion de la configuration
 ### Méthodes
 
 - `getConfig(): Promise<Config>`
-
   - Récupère la configuration Komga
 
 - `saveConfig(config: Config): Promise<Config>`
-
   - Sauvegarde la configuration Komga
 
 - `getTTLConfig(): Promise<TTLConfig>`
-
   - Récupère la configuration TTL
 
 - `saveTTLConfig(config: TTLConfig): Promise<TTLConfig>`
@@ -137,7 +121,6 @@ Service de gestion du cache serveur
 ### Méthodes
 
 - `getCacheMode(): string`
-
   - Récupère le mode de cache actuel
 
 - `clearCache(): void`
@@ -159,7 +142,6 @@ Service de gestion des préférences
 ### Méthodes
 
 - `getPreferences(): Promise<Preferences>`
-
   - Récupère les préférences utilisateur
 
 - `savePreferences(preferences: Preferences): Promise<void>`
@@ -182,15 +164,12 @@ Service de base pour les appels API
 ### Méthodes
 
 - `buildUrl(config: Config, path: string, params?: Record<string, string>): string`
-
   - Construit une URL d'API
 
 - `getAuthHeaders(config: Config): Headers`
-
   - Génère les en-têtes d'authentification
 
 - `fetchFromApi<T>(url: string, headers: Headers, raw?: boolean): Promise<T>`
-
   - Effectue un appel API avec gestion d'erreurs
 
 - `fetchWithCache<T>(key: string, fetcher: () => Promise<T>, type: CacheType): Promise<T>`

next.config.js

@@ -8,13 +8,13 @@ const nextConfig = {
     return config;
   },
   // Configuration pour améliorer la résolution DNS
-  serverExternalPackages: ['dns', 'pino', 'pino-pretty'],
+  serverExternalPackages: ["dns", "pino", "pino-pretty"],
   // Optimisations pour Docker dev
   turbopack: {
     rules: {
-      '*.svg': {
+      "*.svg": {
-        loaders: ['@svgr/webpack'],
+        loaders: ["@svgr/webpack"],
-        as: '*.js',
+        as: "*.js",
       },
     },
   },

public/offline.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="fr">
   <head>
     <meta charset="UTF-8" />
@@ -8,7 +8,10 @@
       body {
         margin: 0;
         padding: 0;
-        font-family: system-ui, -apple-system, sans-serif;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
         background-color: #0f172a;
         color: #e2e8f0;
         min-height: 100vh;

public/sw.js

@@ -172,9 +172,7 @@ self.addEventListener("activate", (event) => {
       const cacheNames = await caches.keys();
       const cachesToDelete = cacheNames.filter(
         (name) =>
-          name.startsWith("stripstream-") &&
+          name.startsWith("stripstream-") && name !== BOOKS_CACHE && !name.endsWith(`-${VERSION}`)
-          name !== BOOKS_CACHE &&
-          !name.endsWith(`-${VERSION}`)
       );
 
       await Promise.all(cachesToDelete.map((name) => caches.delete(name)));

scripts/check-db.mjs

@@ -10,7 +10,7 @@ const prisma = new PrismaClient();
 async function checkDatabase() {
   try {
     console.log("🔍 Checking database content...");
-    
+
     // Vérifier les utilisateurs
     const users = await prisma.user.findMany({
       select: {
@@ -20,22 +20,23 @@ async function checkDatabase() {
         createdAt: true,
       },
     });
-    
+
     console.log(`📊 Found ${users.length} users:`);
-    users.forEach(user => {
+    users.forEach((user) => {
-      console.log(`  - ID: ${user.id}, Email: ${user.email}, Roles: ${JSON.stringify(user.roles)}, Created: ${user.createdAt}`);
+      console.log(
+        `  - ID: ${user.id}, Email: ${user.email}, Roles: ${JSON.stringify(user.roles)}, Created: ${user.createdAt}`
+      );
     });
-    
+
     // Vérifier les configurations
     const komgaConfigs = await prisma.komgaConfig.count();
     const preferences = await prisma.preferences.count();
     const favorites = await prisma.favorite.count();
-    
+
     console.log(`📊 Database stats:`);
     console.log(`  - KomgaConfigs: ${komgaConfigs}`);
     console.log(`  - Preferences: ${preferences}`);
     console.log(`  - Favorites: ${favorites}`);
-    
   } catch (error) {
     console.error("❌ Error checking database:", error);
   } finally {
@@ -44,4 +45,3 @@ async function checkDatabase() {
 }
 
 checkDatabase();
-

scripts/init-db.mjs

@@ -22,7 +22,7 @@ async function initializeAdminUser() {
     if (existingAdmin) {
       // Vérifier si l'utilisateur a le rôle admin
       const hasAdminRole = existingAdmin.roles.includes("ROLE_ADMIN");
-      
+
       if (hasAdminRole) {
         console.log(`✅ Admin user ${ADMIN_EMAIL} already exists with admin role`);
       } else {
@@ -60,7 +60,7 @@ async function initializeAdminUser() {
 
 async function main() {
   console.log("🔧 Initializing SQLite database...");
-  
+
   try {
     await initializeAdminUser();
     console.log("✅ Database initialization completed");
@@ -72,4 +72,3 @@ async function main() {
 }
 
 main();
-

scripts/reset-admin-password.mjs

@@ -2,8 +2,8 @@
 /**
  * Script de réinitialisation forcée du mot de passe admin
  * Force la mise à jour du mot de passe du compte admin
- * 
+ *
- * Usage: 
+ * Usage:
  *   pnpm reset-admin-password [nouveau-mot-de-passe]
  *   pnpm reset-admin-password [email] [nouveau-mot-de-passe]
  *   docker compose exec app pnpm reset-admin-password [nouveau-mot-de-passe]
@@ -71,7 +71,7 @@ async function resetAdminPassword() {
 
 async function main() {
   console.log("🔧 Starting admin password reset...");
-  
+
   try {
     await resetAdminPassword();
     console.log("✅ Admin password reset completed");
@@ -83,4 +83,3 @@ async function main() {
 }
 
 main();
-

src/app/account/page.tsx

@@ -4,7 +4,7 @@ import { UserService } from "@/lib/services/user.service";
 import { redirect } from "next/navigation";
 import logger from "@/lib/logger";
 
-export const dynamic = 'force-dynamic';
+export const dynamic = "force-dynamic";
 
 export default async function AccountPage() {
   try {

src/app/admin/page.tsx

@@ -4,12 +4,12 @@ import { isAdmin } from "@/lib/auth-utils";
 import { AdminContent } from "@/components/admin/AdminContent";
 import logger from "@/lib/logger";
 
-export const dynamic = 'force-dynamic';
+export const dynamic = "force-dynamic";
 
 export default async function AdminPage() {
   try {
     const hasAdminAccess = await isAdmin();
-    
+
     if (!hasAdminAccess) {
       redirect("/");
     }

src/app/api/admin/stats/route.ts

@@ -13,9 +13,13 @@ export async function GET() {
     if (error instanceof AppError) {
       return NextResponse.json(
         { error: error.message, code: error.code },
-        { 
+        {
-          status: error.code === "AUTH_FORBIDDEN" ? 403 : 
+          status:
-                  error.code === "AUTH_UNAUTHENTICATED" ? 401 : 500 
+            error.code === "AUTH_FORBIDDEN"
+              ? 403
+              : error.code === "AUTH_UNAUTHENTICATED"
+                ? 401
+                : 500,
         }
       );
     }
@@ -26,4 +30,3 @@ export async function GET() {
     );
   }
 }
-

src/app/api/admin/users/[userId]/password/route.ts

@@ -14,17 +14,14 @@ export async function PUT(
     const { newPassword } = body;
 
     if (!newPassword) {
-      return NextResponse.json(
+      return NextResponse.json({ error: "Nouveau mot de passe manquant" }, { status: 400 });
-        { error: "Nouveau mot de passe manquant" },
-        { status: 400 }
-      );
     }
 
     // Vérifier que le mot de passe est fort
     if (!AuthServerService.isPasswordStrong(newPassword)) {
       return NextResponse.json(
-        { 
+        {
-          error: "Le mot de passe doit contenir au moins 8 caractères, une majuscule et un chiffre" 
+          error: "Le mot de passe doit contenir au moins 8 caractères, une majuscule et un chiffre",
         },
         { status: 400 }
       );
@@ -39,11 +36,17 @@ export async function PUT(
     if (error instanceof AppError) {
       return NextResponse.json(
         { error: error.message, code: error.code },
-        { 
+        {
-          status: error.code === "AUTH_FORBIDDEN" ? 403 : 
+          status:
-                  error.code === "AUTH_UNAUTHENTICATED" ? 401 :
+            error.code === "AUTH_FORBIDDEN"
-                  error.code === "AUTH_USER_NOT_FOUND" ? 404 :
+              ? 403
-                  error.code === "ADMIN_CANNOT_RESET_OWN_PASSWORD" ? 400 : 500 
+              : error.code === "AUTH_UNAUTHENTICATED"
+                ? 401
+                : error.code === "AUTH_USER_NOT_FOUND"
+                  ? 404
+                  : error.code === "ADMIN_CANNOT_RESET_OWN_PASSWORD"
+                    ? 400
+                    : 500,
         }
       );
     }
@@ -54,4 +57,3 @@ export async function PUT(
     );
   }
 }
-

src/app/api/admin/users/[userId]/route.ts

@@ -13,10 +13,7 @@ export async function PATCH(
     const { roles } = body;
 
     if (!roles || !Array.isArray(roles)) {
-      return NextResponse.json(
+      return NextResponse.json({ error: "Rôles invalides" }, { status: 400 });
-        { error: "Rôles invalides" },
-        { status: 400 }
-      );
     }
 
     await AdminService.updateUserRoles(userId, roles);
@@ -28,10 +25,15 @@ export async function PATCH(
     if (error instanceof AppError) {
       return NextResponse.json(
         { error: error.message, code: error.code },
-        { 
+        {
-          status: error.code === "AUTH_FORBIDDEN" ? 403 : 
+          status:
-                  error.code === "AUTH_UNAUTHENTICATED" ? 401 :
+            error.code === "AUTH_FORBIDDEN"
-                  error.code === "AUTH_USER_NOT_FOUND" ? 404 : 500 
+              ? 403
+              : error.code === "AUTH_UNAUTHENTICATED"
+                ? 401
+                : error.code === "AUTH_USER_NOT_FOUND"
+                  ? 404
+                  : 500,
         }
       );
     }
@@ -58,11 +60,17 @@ export async function DELETE(
     if (error instanceof AppError) {
       return NextResponse.json(
         { error: error.message, code: error.code },
-        { 
+        {
-          status: error.code === "AUTH_FORBIDDEN" ? 403 : 
+          status:
-                  error.code === "AUTH_UNAUTHENTICATED" ? 401 :
+            error.code === "AUTH_FORBIDDEN"
-                  error.code === "AUTH_USER_NOT_FOUND" ? 404 :
+              ? 403
-                  error.code === "ADMIN_CANNOT_DELETE_SELF" ? 400 : 500 
+              : error.code === "AUTH_UNAUTHENTICATED"
+                ? 401
+                : error.code === "AUTH_USER_NOT_FOUND"
+                  ? 404
+                  : error.code === "ADMIN_CANNOT_DELETE_SELF"
+                    ? 400
+                    : 500,
         }
       );
     }
@@ -73,4 +81,3 @@ export async function DELETE(
     );
   }
 }
-

src/app/api/admin/users/route.ts

@@ -13,9 +13,13 @@ export async function GET() {
     if (error instanceof AppError) {
       return NextResponse.json(
         { error: error.message, code: error.code },
-        { 
+        {
-          status: error.code === "AUTH_FORBIDDEN" ? 403 : 
+          status:
-                  error.code === "AUTH_UNAUTHENTICATED" ? 401 : 500 
+            error.code === "AUTH_FORBIDDEN"
+              ? 403
+              : error.code === "AUTH_UNAUTHENTICATED"
+                ? 401
+                : 500,
         }
       );
     }

src/app/api/auth/[...nextauth]/route.ts

@@ -1,3 +1,3 @@
 import { handlers } from "@/lib/auth";
 
-export const { GET, POST } = handlers;
+export const { GET, POST } = handlers;

src/app/api/komga/books/[bookId]/pages/[pageNumber]/route.ts

@@ -44,10 +44,10 @@ export async function GET(
         return { buffer, contentType };
       }
     );
-    
+
     // Cloner le buffer pour cette requête pour éviter tout partage de référence
     const clonedBuffer = buffer.slice(0);
-    
+
     const headers = new Headers();
     headers.set("Content-Type", contentType);
     headers.set("Cache-Control", "public, max-age=31536000"); // Cache for 1 year

src/app/api/komga/books/[bookId]/route.ts

@@ -16,7 +16,7 @@ export async function GET(
 
     const data: KomgaBookWithPages = await BookService.getBook(bookId);
     const nextBook = await BookService.getNextBook(bookId, data.book.seriesId);
-    
+
     return NextResponse.json({ ...data, nextBook });
   } catch (error) {
     logger.error({ err: error }, "API Books - Erreur:");

src/app/api/komga/cache/clear/route.ts

@@ -10,13 +10,13 @@ export async function POST() {
   try {
     const cacheService: ServerCacheService = await getServerCacheService();
     await cacheService.clear();
-    
+
     // Revalider toutes les pages importantes après le vidage du cache
     revalidatePath("/");
     revalidatePath("/libraries");
     revalidatePath("/series");
     revalidatePath("/books");
-    
+
     return NextResponse.json({ message: "🧹 Cache vidé avec succès" });
   } catch (error) {
     logger.error({ err: error }, "Erreur lors de la suppression du cache:");

src/app/api/komga/cache/entries/route.ts

@@ -9,7 +9,7 @@ export async function GET() {
   try {
     const cacheService: ServerCacheService = await getServerCacheService();
     const entries = await cacheService.getCacheEntries();
-    
+
     return NextResponse.json({ entries });
   } catch (error) {
     logger.error({ err: error }, "Erreur lors de la récupération des entrées du cache");
@@ -25,4 +25,3 @@ export async function GET() {
     );
   }
 }
-

src/app/api/komga/cache/size/route.ts

@@ -9,11 +9,11 @@ export async function GET() {
   try {
     const cacheService: ServerCacheService = await getServerCacheService();
     const { sizeInBytes, itemCount } = await cacheService.getCacheSize();
-    
+
-    return NextResponse.json({ 
+    return NextResponse.json({
-      sizeInBytes, 
+      sizeInBytes,
       itemCount,
-      mode: cacheService.getCacheMode()
+      mode: cacheService.getCacheMode(),
     });
   } catch (error) {
     logger.error({ err: error }, "Erreur lors de la récupération de la taille du cache:");
@@ -29,4 +29,3 @@ export async function GET() {
     );
   }
 }
-

src/app/api/komga/favorites/route.ts

@@ -10,10 +10,10 @@ import logger from "@/lib/logger";
 export async function GET() {
   try {
     const favoriteIds: string[] = await FavoriteService.getAllFavoriteIds();
-    
+
     // Valider que chaque série existe encore dans Komga
     const validFavoriteIds: string[] = [];
-    
+
     for (const seriesId of favoriteIds) {
       try {
         await SeriesService.getSeries(seriesId);
@@ -27,7 +27,7 @@ export async function GET() {
         }
       }
     }
-    
+
     return NextResponse.json(validFavoriteIds);
   } catch (error) {
     if (error instanceof AppError) {

src/app/api/komga/home/route.ts

@@ -67,4 +67,3 @@ export async function DELETE() {
     );
   }
 }
-

src/app/api/komga/images/books/[bookId]/pages/[pageNumber]/route.ts

@@ -20,10 +20,10 @@ export async function GET(
     return response;
   } catch (error) {
     logger.error({ err: error }, "Erreur lors de la récupération de la page du livre:");
-    
+
     // Chercher un status HTTP 404 dans la chaîne d'erreurs
     const httpStatus = findHttpStatus(error);
-    
+
     if (httpStatus === 404) {
       const { bookId, pageNumber } = await params;
       // eslint-disable-next-line no-console
@@ -39,7 +39,7 @@ export async function GET(
         { status: 404 }
       );
     }
-    
+
     if (error instanceof AppError) {
       return NextResponse.json(
         {

src/app/api/komga/images/books/[bookId]/pages/[pageNumber]/thumbnail/route.ts

@@ -34,10 +34,10 @@ export async function GET(
     return response;
   } catch (error) {
     logger.error({ err: error }, "Erreur lors de la récupération de la miniature de la page:");
-    
+
     // Chercher un status HTTP 404 dans la chaîne d'erreurs
     const httpStatus = findHttpStatus(error);
-    
+
     if (httpStatus === 404) {
       const { bookId, pageNumber: pageNumberParam } = await params;
       const pageNumber: number = parseInt(pageNumberParam);
@@ -54,7 +54,7 @@ export async function GET(
         { status: 404 }
       );
     }
-    
+
     if (error instanceof AppError) {
       return NextResponse.json(
         {

src/app/api/komga/images/books/[bookId]/thumbnail/route.ts

@@ -18,10 +18,10 @@ export async function GET(
     return response;
   } catch (error) {
     logger.error({ err: error }, "Erreur lors de la récupération de la miniature du livre:");
-    
+
     // Chercher un status HTTP 404 dans la chaîne d'erreurs
     const httpStatus = findHttpStatus(error);
-    
+
     if (httpStatus === 404) {
       const bookId: string = (await params).bookId;
       // eslint-disable-next-line no-console
@@ -37,7 +37,7 @@ export async function GET(
         { status: 404 }
       );
     }
-    
+
     if (error instanceof AppError) {
       return NextResponse.json(
         {

src/app/api/komga/images/series/[seriesId]/first-page/route.ts

@@ -20,10 +20,10 @@ export async function GET(
     return response;
   } catch (error) {
     logger.error({ err: error }, "Erreur lors de la récupération de la couverture de la série:");
-    
+
     // Chercher un status HTTP 404 dans la chaîne d'erreurs
     const httpStatus = findHttpStatus(error);
-    
+
     if (httpStatus === 404) {
       const seriesId: string = (await params).seriesId;
       // eslint-disable-next-line no-console
@@ -39,7 +39,7 @@ export async function GET(
         { status: 404 }
       );
     }
-    
+
     if (error instanceof AppError) {
       return NextResponse.json(
         {

src/app/api/komga/images/series/[seriesId]/thumbnail/route.ts

@@ -17,10 +17,10 @@ export async function GET(
     return response;
   } catch (error) {
     logger.error({ err: error }, "Erreur lors de la récupération de la miniature de la série");
-    
+
     // Chercher un status HTTP 404 dans la chaîne d'erreurs
     const httpStatus = findHttpStatus(error);
-    
+
     if (httpStatus === 404) {
       const seriesId: string = (await params).seriesId;
       logger.info(`📷 Image not found for series: ${seriesId}`);
@@ -35,7 +35,7 @@ export async function GET(
         { status: 404 }
       );
     }
-    
+
     if (error instanceof AppError) {
       return NextResponse.json(
         {

src/app/api/komga/libraries/[libraryId]/scan/route.ts

@@ -12,7 +12,7 @@ export async function POST(
 ) {
   try {
     const libraryId: string = (await params).libraryId;
-    
+
     // Scan library with deep=false
     await LibraryService.scanLibrary(libraryId, false);
 
@@ -43,4 +43,3 @@ export async function POST(
     );
   }
 }
-

src/app/api/komga/libraries/[libraryId]/series/route.ts

@@ -16,7 +16,7 @@ export async function GET(
   try {
     const libraryId: string = (await params).libraryId;
     const searchParams = request.nextUrl.searchParams;
-    
+
     const page = parseInt(searchParams.get("page") || "0");
     const size = parseInt(searchParams.get("size") || String(DEFAULT_PAGE_SIZE));
     const unreadOnly = searchParams.get("unread") === "true";
@@ -24,15 +24,15 @@ export async function GET(
 
     const [series, library] = await Promise.all([
       LibraryService.getLibrarySeries(libraryId, page, size, unreadOnly, search),
-      LibraryService.getLibrary(libraryId)
+      LibraryService.getLibrary(libraryId),
     ]);
 
     return NextResponse.json(
       { series, library },
       {
         headers: {
-          'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=120'
+          "Cache-Control": "public, s-maxage=60, stale-while-revalidate=120",
-        }
+        },
       }
     );
   } catch (error) {
@@ -68,7 +68,7 @@ export async function DELETE(
 ) {
   try {
     const libraryId: string = (await params).libraryId;
-    
+
     await LibraryService.invalidateLibrarySeriesCache(libraryId);
 
     return NextResponse.json({ success: true });
@@ -98,4 +98,3 @@ export async function DELETE(
     );
   }
 }
-

src/app/api/komga/random-book/route.ts

@@ -51,4 +51,3 @@ export async function GET(request: NextRequest) {
     );
   }
 }
-

src/app/api/komga/series/[seriesId]/books/route.ts

@@ -16,22 +16,22 @@ export async function GET(
   try {
     const seriesId: string = (await params).seriesId;
     const searchParams = request.nextUrl.searchParams;
-    
+
     const page = parseInt(searchParams.get("page") || "0");
     const size = parseInt(searchParams.get("size") || String(DEFAULT_PAGE_SIZE));
     const unreadOnly = searchParams.get("unread") === "true";
 
     const [books, series] = await Promise.all([
       SeriesService.getSeriesBooks(seriesId, page, size, unreadOnly),
-      SeriesService.getSeries(seriesId)
+      SeriesService.getSeries(seriesId),
     ]);
 
     return NextResponse.json(
       { books, series },
       {
         headers: {
-          'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=120'
+          "Cache-Control": "public, s-maxage=60, stale-while-revalidate=120",
-        }
+        },
       }
     );
   } catch (error) {
@@ -67,10 +67,10 @@ export async function DELETE(
 ) {
   try {
     const seriesId: string = (await params).seriesId;
-    
+
     await Promise.all([
       SeriesService.invalidateSeriesBooksCache(seriesId),
-      SeriesService.invalidateSeriesCache(seriesId)
+      SeriesService.invalidateSeriesCache(seriesId),
     ]);
 
     return NextResponse.json({ success: true });
@@ -100,4 +100,3 @@ export async function DELETE(
     );
   }
 }
-

src/app/api/komga/series/[seriesId]/route.ts

@@ -18,8 +18,8 @@ export async function GET(
     const series: KomgaSeries = await SeriesService.getSeries(seriesId);
     return NextResponse.json(series, {
       headers: {
-        'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=120'
+        "Cache-Control": "public, s-maxage=60, stale-while-revalidate=120",
-      }
+      },
     });
   } catch (error) {
     logger.error({ err: error }, "API Series - Erreur:");

src/app/api/preferences/route.ts

@@ -1,4 +1,4 @@
-import type { NextRequest} from "next/server";
+import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 import { PreferencesService } from "@/lib/services/preferences.service";
 import { ERROR_CODES } from "@/constants/errorCodes";
@@ -41,9 +41,8 @@ export async function GET() {
 export async function PUT(request: NextRequest) {
   try {
     const preferences: UserPreferences = await request.json();
-    const updatedPreferences: UserPreferences = await PreferencesService.updatePreferences(
+    const updatedPreferences: UserPreferences =
-      preferences
+      await PreferencesService.updatePreferences(preferences);
-    );
     return NextResponse.json(updatedPreferences);
   } catch (error) {
     logger.error({ err: error }, "Erreur lors de la mise à jour des préférences:");

src/app/api/user/password/route.ts

@@ -10,17 +10,15 @@ export async function PUT(request: NextRequest) {
     const { currentPassword, newPassword } = body;
 
     if (!currentPassword || !newPassword) {
-      return NextResponse.json(
+      return NextResponse.json({ error: "Mots de passe manquants" }, { status: 400 });
-        { error: "Mots de passe manquants" },
-        { status: 400 }
-      );
     }
 
     // Vérifier que le nouveau mot de passe est fort
     if (!AuthServerService.isPasswordStrong(newPassword)) {
       return NextResponse.json(
-        { 
+        {
-          error: "Le nouveau mot de passe doit contenir au moins 8 caractères, une majuscule et un chiffre" 
+          error:
+            "Le nouveau mot de passe doit contenir au moins 8 caractères, une majuscule et un chiffre",
         },
         { status: 400 }
       );
@@ -35,9 +33,13 @@ export async function PUT(request: NextRequest) {
     if (error instanceof AppError) {
       return NextResponse.json(
         { error: error.message, code: error.code },
-        { 
+        {
-          status: error.code === "AUTH_INVALID_PASSWORD" ? 400 :
+          status:
-                  error.code === "AUTH_UNAUTHENTICATED" ? 401 : 500 
+            error.code === "AUTH_INVALID_PASSWORD"
+              ? 400
+              : error.code === "AUTH_UNAUTHENTICATED"
+                ? 401
+                : 500,
         }
       );
     }

src/app/books/[bookId]/layout.tsx

@@ -1,8 +1,3 @@
-export default function BookReaderLayout({
+export default function BookReaderLayout({ children }: { children: React.ReactNode }) {
-  children,
-}: {
-  children: React.ReactNode;
-}) {
   return <>{children}</>;
 }
-

src/app/books/[bookId]/page.tsx

@@ -4,7 +4,7 @@ import { BookSkeleton } from "@/components/skeletons/BookSkeleton";
 
 export default async function BookPage({ params }: { params: Promise<{ bookId: string }> }) {
   const { bookId } = await params;
-  
+
   return (
     <Suspense fallback={<BookSkeleton />}>
       <ClientBookPage bookId={bookId} />

src/app/downloads/page.tsx

@@ -1,6 +1,6 @@
 import { DownloadManager } from "@/components/downloads/DownloadManager";
 
-export const dynamic = 'force-dynamic';
+export const dynamic = "force-dynamic";
 
 export default function DownloadsPage() {
   return (

src/app/layout.tsx

@@ -12,7 +12,12 @@ import { defaultPreferences } from "@/types/preferences";
 import type { UserPreferences } from "@/types/preferences";
 import logger from "@/lib/logger";
 
-const inter = Inter({ subsets: ["latin"], display: "swap", adjustFontFallback: false, preload: false });
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+  adjustFontFallback: false,
+  preload: false,
+});
 
 export const metadata: Metadata = {
   title: {
@@ -90,10 +95,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   return (
     <html lang={locale} suppressHydrationWarning className="h-full">
       <head>
-        <meta
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-          name="viewport"
-          content="width=device-width, initial-scale=1, viewport-fit=cover"
-        />
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         <meta name="apple-touch-fullscreen" content="yes" />
@@ -145,16 +147,15 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         />
       </head>
       <body
-        className={cn("min-h-screen bg-background font-sans antialiased h-full no-pinch-zoom", inter.className)}
+        className={cn(
+          "min-h-screen bg-background font-sans antialiased h-full no-pinch-zoom",
+          inter.className
+        )}
       >
         <AuthProvider>
           <I18nProvider locale={locale}>
             <PreferencesProvider initialPreferences={preferences}>
-              <ClientLayout 
+              <ClientLayout initialLibraries={[]} initialFavorites={[]} userIsAdmin={userIsAdmin}>
-                initialLibraries={[]} 
-                initialFavorites={[]}
-                userIsAdmin={userIsAdmin}
-              >
                 {children}
               </ClientLayout>
             </PreferencesProvider>

src/app/libraries/[libraryId]/ClientLibraryPage.tsx

@@ -47,22 +47,22 @@ export function ClientLibraryPage({
     const fetchData = async () => {
       setLoading(true);
       setError(null);
-      
+
       try {
         const params = new URLSearchParams({
           page: String(currentPage - 1),
           size: String(effectivePageSize),
           unread: String(unreadOnly),
         });
-        
+
         if (search) {
           params.append("search", search);
         }
 
         const response = await fetch(`/api/komga/libraries/${libraryId}/series?${params}`, {
-          cache: 'default' // Utilise le cache HTTP du navigateur
+          cache: "default", // Utilise le cache HTTP du navigateur
         });
-        
+
         if (!response.ok) {
           const errorData = await response.json();
           throw new Error(errorData.error?.code || "SERIES_FETCH_ERROR");
@@ -86,28 +86,28 @@ export function ClientLibraryPage({
     try {
       // Invalidate cache via API
       const cacheResponse = await fetch(`/api/komga/libraries/${libraryId}/series`, {
-        method: 'DELETE',
+        method: "DELETE",
       });
 
       if (!cacheResponse.ok) {
         throw new Error("Error invalidating cache");
       }
-      
+
       // Recharger les données
       const params = new URLSearchParams({
         page: String(currentPage - 1),
         size: String(effectivePageSize),
         unread: String(unreadOnly),
       });
-      
+
       if (search) {
         params.append("search", search);
       }
 
       const response = await fetch(`/api/komga/libraries/${libraryId}/series?${params}`, {
-        cache: 'reload' // Force un nouveau fetch après invalidation
+        cache: "reload", // Force un nouveau fetch après invalidation
       });
-      
+
       if (!response.ok) {
         throw new Error("Error refreshing library");
       }
@@ -115,7 +115,7 @@ export function ClientLibraryPage({
       const data = await response.json();
       setLibrary(data.library);
       setSeries(data.series);
-      
+
       return { success: true };
     } catch (error) {
       logger.error({ err: error }, "Error during refresh:");
@@ -133,15 +133,15 @@ export function ClientLibraryPage({
         size: String(effectivePageSize),
         unread: String(unreadOnly),
       });
-      
+
       if (search) {
         params.append("search", search);
       }
 
       const response = await fetch(`/api/komga/libraries/${libraryId}/series?${params}`, {
-        cache: 'reload' // Force un nouveau fetch lors du retry
+        cache: "reload", // Force un nouveau fetch lors du retry
       });
-      
+
       if (!response.ok) {
         const errorData = await response.json();
         throw new Error(errorData.error?.code || "SERIES_FETCH_ERROR");

src/app/series/[seriesId]/ClientSeriesPage.tsx

@@ -50,7 +50,7 @@ export function ClientSeriesPage({
         });
 
         const response = await fetch(`/api/komga/series/${seriesId}/books?${params}`, {
-          cache: 'default' // Utilise le cache HTTP du navigateur
+          cache: "default", // Utilise le cache HTTP du navigateur
         });
 
         if (!response.ok) {
@@ -76,7 +76,7 @@ export function ClientSeriesPage({
     try {
       // Invalidate cache via API
       const cacheResponse = await fetch(`/api/komga/series/${seriesId}/books`, {
-        method: 'DELETE',
+        method: "DELETE",
       });
 
       if (!cacheResponse.ok) {
@@ -91,7 +91,7 @@ export function ClientSeriesPage({
       });
 
       const response = await fetch(`/api/komga/series/${seriesId}/books?${params}`, {
-        cache: 'reload' // Force un nouveau fetch après invalidation
+        cache: "reload", // Force un nouveau fetch après invalidation
       });
 
       if (!response.ok) {
@@ -121,7 +121,7 @@ export function ClientSeriesPage({
       });
 
       const response = await fetch(`/api/komga/series/${seriesId}/books?${params}`, {
-        cache: 'reload' // Force un nouveau fetch lors du retry
+        cache: "reload", // Force un nouveau fetch lors du retry
       });
 
       if (!response.ok) {
@@ -204,4 +204,3 @@ export function ClientSeriesPage({
     </>
   );
 }
-

src/app/series/[seriesId]/loading.tsx

@@ -53,4 +53,3 @@ export default function SeriesLoading() {
     </div>
   );
 }
-

src/app/settings/page.tsx

@@ -4,7 +4,7 @@ import type { Metadata } from "next";
 import type { KomgaConfig, TTLConfig } from "@/types/komga";
 import logger from "@/lib/logger";
 
-export const dynamic = 'force-dynamic';
+export const dynamic = "force-dynamic";
 
 export const metadata: Metadata = {
   title: "Préférences",

src/components/account/ChangePasswordForm.tsx

@@ -75,7 +75,8 @@ export function ChangePasswordForm() {
       <CardHeader>
         <CardTitle>Changer le mot de passe</CardTitle>
         <CardDescription>
-          Assurez-vous d&apos;utiliser un mot de passe fort (8 caractères minimum, une majuscule et un chiffre)
+          Assurez-vous d&apos;utiliser un mot de passe fort (8 caractères minimum, une majuscule et
+          un chiffre)
         </CardDescription>
       </CardHeader>
       <CardContent>
@@ -136,4 +137,3 @@ export function ChangePasswordForm() {
     </Card>
   );
 }
-

src/components/account/UserProfileCard.tsx

@@ -6,7 +6,9 @@ import { Mail, Calendar, Shield, Heart } from "lucide-react";
 import type { UserProfile } from "@/lib/services/user.service";
 
 interface UserProfileCardProps {
-  profile: UserProfile & { stats: { favoritesCount: number; hasPreferences: boolean; hasKomgaConfig: boolean } };
+  profile: UserProfile & {
+    stats: { favoritesCount: number; hasPreferences: boolean; hasKomgaConfig: boolean };
+  };
 }
 
 export function UserProfileCard({ profile }: UserProfileCardProps) {
@@ -65,12 +67,10 @@ export function UserProfileCard({ profile }: UserProfileCardProps) {
 
         <div className="pt-4 border-t">
           <p className="text-xs text-muted-foreground">
-            Dernière mise à jour:{" "}
+            Dernière mise à jour: {new Date(profile.updatedAt).toLocaleDateString("fr-FR")}
-            {new Date(profile.updatedAt).toLocaleDateString("fr-FR")}
           </p>
         </div>
       </CardContent>
     </Card>
   );
 }
-

src/components/admin/AdminContent.tsx

@@ -36,10 +36,7 @@ export function AdminContent({ initialUsers, initialStats }: AdminContentProps)
         throw new Error("Erreur lors du rafraîchissement");
       }
 
-      const [newUsers, newStats] = await Promise.all([
+      const [newUsers, newStats] = await Promise.all([usersResponse.json(), statsResponse.json()]);
-        usersResponse.json(),
-        statsResponse.json(),
-      ]);
 
       setUsers(newUsers);
       setStats(newStats);
@@ -65,9 +62,7 @@ export function AdminContent({ initialUsers, initialStats }: AdminContentProps)
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-3xl font-bold">Administration</h1>
-            <p className="text-muted-foreground mt-2">
+            <p className="text-muted-foreground mt-2">Gérez les utilisateurs de la plateforme</p>
-              Gérez les utilisateurs de la plateforme
-            </p>
           </div>
           <Button onClick={refreshData} disabled={isRefreshing}>
             <RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`} />
@@ -85,4 +80,3 @@ export function AdminContent({ initialUsers, initialStats }: AdminContentProps)
     </div>
   );
 }
-

src/components/admin/DeleteUserDialog.tsx

@@ -21,12 +21,7 @@ interface DeleteUserDialogProps {
   onSuccess: () => void;
 }
 
-export function DeleteUserDialog({
+export function DeleteUserDialog({ user, open, onOpenChange, onSuccess }: DeleteUserDialogProps) {
-  user,
-  open,
-  onOpenChange,
-  onSuccess,
-}: DeleteUserDialogProps) {
   const [isLoading, setIsLoading] = useState(false);
   const { toast } = useToast();
 
@@ -89,4 +84,3 @@ export function DeleteUserDialog({
     </AlertDialog>
   );
 }
-

src/components/admin/EditUserDialog.tsx

@@ -27,12 +27,7 @@ const AVAILABLE_ROLES = [
   { value: "ROLE_ADMIN", label: "Admin" },
 ];
 
-export function EditUserDialog({
+export function EditUserDialog({ user, open, onOpenChange, onSuccess }: EditUserDialogProps) {
-  user,
-  open,
-  onOpenChange,
-  onSuccess,
-}: EditUserDialogProps) {
   const [selectedRoles, setSelectedRoles] = useState<string[]>(user.roles);
   const [isLoading, setIsLoading] = useState(false);
   const { toast } = useToast();
@@ -125,4 +120,3 @@ export function EditUserDialog({
     </Dialog>
   );
 }
-

src/components/admin/ResetPasswordDialog.tsx

@@ -152,11 +152,7 @@ export function ResetPasswordDialog({
         </div>
 
         <DialogFooter>
-          <Button 
+          <Button variant="outline" onClick={() => handleOpenChange(false)} disabled={isLoading}>
-            variant="outline" 
-            onClick={() => handleOpenChange(false)} 
-            disabled={isLoading}
-          >
             Annuler
           </Button>
           <Button onClick={handleSubmit} disabled={isLoading}>
@@ -167,4 +163,3 @@ export function ResetPasswordDialog({
     </Dialog>
   );
 }
-

src/components/admin/StatsCards.tsx

@@ -60,4 +60,3 @@ export function StatsCards({ stats }: StatsCardsProps) {
     </div>
   );
 }
-

src/components/admin/UsersTable.tsx

@@ -57,10 +57,7 @@ export function UsersTable({ users, onUserUpdated }: UsersTableProps) {
                   <TableCell>
                     <div className="flex gap-1">
                       {user.roles.map((role) => (
-                        <Badge
+                        <Badge key={role} variant={role === "ROLE_ADMIN" ? "default" : "secondary"}>
-                          key={role}
-                          variant={role === "ROLE_ADMIN" ? "default" : "secondary"}
-                        >
                           {role.replace("ROLE_", "")}
                         </Badge>
                       ))}
@@ -89,9 +86,7 @@ export function UsersTable({ users, onUserUpdated }: UsersTableProps) {
                     )}
                   </TableCell>
                   <TableCell>{user._count?.favorites || 0}</TableCell>
-                  <TableCell>
+                  <TableCell>{new Date(user.createdAt).toLocaleDateString("fr-FR")}</TableCell>
-                    {new Date(user.createdAt).toLocaleDateString("fr-FR")}
-                  </TableCell>
                   <TableCell className="text-right">
                     <div className="flex justify-end gap-2">
                       <Button
@@ -164,4 +159,3 @@ export function UsersTable({ users, onUserUpdated }: UsersTableProps) {
     </>
   );
 }
-

src/components/auth/RegisterForm.tsx

@@ -52,11 +52,13 @@ export function RegisterForm({ from: _from }: RegisterFormProps) {
 
       if (!response.ok) {
         const data = await response.json();
-        setError(data.error || {
+        setError(
-          code: "AUTH_REGISTRATION_FAILED",
+          data.error || {
-          name: "Registration failed",
+            code: "AUTH_REGISTRATION_FAILED",
-          message: "Erreur lors de l'inscription",
+            name: "Registration failed",
-        });
+            message: "Erreur lors de l'inscription",
+          }
+        );
         return;
       }
 
@@ -96,13 +98,7 @@ export function RegisterForm({ from: _from }: RegisterFormProps) {
       </div>
       <div className="space-y-2">
         <Label htmlFor="password">{t("login.form.password")}</Label>
-        <Input
+        <Input id="password" name="password" type="password" autoComplete="new-password" required />
-          id="password"
-          name="password"
-          type="password"
-          autoComplete="new-password"
-          required
-        />
       </div>
       <div className="space-y-2">
         <Label htmlFor="confirmPassword">{t("login.form.confirmPassword")}</Label>

src/components/common/PullToRefreshIndicator.tsx

@@ -28,7 +28,9 @@ export function PullToRefreshIndicator({
       className={cn(
         "fixed top-0 left-1/2 transform -translate-x-1/2 z-50 transition-all",
         isHiding ? "duration-300 ease-out" : "duration-200",
-        (isPulling || isRefreshing) && !isHiding ? "translate-y-0 opacity-100" : "-translate-y-full opacity-0"
+        (isPulling || isRefreshing) && !isHiding
+          ? "translate-y-0 opacity-100"
+          : "-translate-y-full opacity-0"
       )}
       style={{
         transform: `translate(-50%, ${(isPulling || isRefreshing) && !isHiding ? (isRefreshing ? 60 : progress * 60) : -100}px)`,
@@ -40,27 +42,26 @@ export function PullToRefreshIndicator({
         <div
           className={cn(
             "h-full transition-all duration-200 rounded-full",
-            (canRefresh || isRefreshing) ? "bg-primary" : "bg-muted-foreground"
+            canRefresh || isRefreshing ? "bg-primary" : "bg-muted-foreground"
           )}
           style={{
             width: `${isRefreshing ? 200 : barWidth}px`,
           }}
         />
       </div>
-      
+
       {/* Icône centrée */}
       <div className="flex justify-center mt-2">
         <div
           className={cn(
             "flex items-center justify-center w-8 h-8 rounded-full transition-all duration-200",
-            (canRefresh || isRefreshing) ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+            canRefresh || isRefreshing
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted text-muted-foreground"
           )}
         >
           <RefreshCw
-            className={cn(
+            className={cn("h-4 w-4 transition-all duration-200", isRefreshing && "animate-spin")}
-              "h-4 w-4 transition-all duration-200",
-              isRefreshing && "animate-spin"
-            )}
             style={{
               transform: isRefreshing ? "rotate(0deg)" : `rotate(${rotation}deg)`,
               animationDuration: isRefreshing ? "2s" : undefined,
@@ -68,15 +69,21 @@ export function PullToRefreshIndicator({
           />
         </div>
       </div>
-      
+
       {/* Message */}
       <div
         className={cn(
           "mt-2 text-center text-xs transition-opacity duration-200",
-          (canRefresh || isRefreshing) ? "text-primary opacity-100" : "text-muted-foreground opacity-70"
+          canRefresh || isRefreshing
+            ? "text-primary opacity-100"
+            : "text-muted-foreground opacity-70"
         )}
       >
-        {isRefreshing ? "Actualisation..." : canRefresh ? "Relâchez pour actualiser" : "Tirez pour actualiser"}
+        {isRefreshing
+          ? "Actualisation..."
+          : canRefresh
+            ? "Relâchez pour actualiser"
+            : "Tirez pour actualiser"}
       </div>
     </div>
   );

src/components/common/ViewModeButton.tsx

@@ -33,4 +33,3 @@ export function ViewModeButton({ onToggle }: ViewModeButtonProps) {
     </Button>
   );
 }
-

src/components/downloads/DownloadManager.tsx

@@ -201,25 +201,8 @@ export function DownloadManager() {
             )}
           </div>
 
-        <TabsContent value="all" className="space-y-4">
+          <TabsContent value="all" className="space-y-4">
-          {downloadedBooks.map(({ book, status }) => (
+            {downloadedBooks.map(({ book, status }) => (
-            <BookDownloadCard
-              key={book.id}
-              book={book}
-              status={status}
-              onDelete={() => handleDeleteBook(book)}
-              onRetry={() => handleRetryDownload(book)}
-            />
-          ))}
-          {downloadedBooks.length === 0 && (
-            <p className="text-center text-muted-foreground p-8">{t("downloads.empty.all")}</p>
-          )}
-        </TabsContent>
-
-        <TabsContent value="downloading" className="space-y-4">
-          {downloadedBooks
-            .filter((b) => b.status.status === "downloading")
-            .map(({ book, status }) => (
               <BookDownloadCard
                 key={book.id}
                 book={book}
@@ -228,49 +211,66 @@ export function DownloadManager() {
                 onRetry={() => handleRetryDownload(book)}
               />
             ))}
-          {downloadedBooks.filter((b) => b.status.status === "downloading").length === 0 && (
+            {downloadedBooks.length === 0 && (
-            <p className="text-center text-muted-foreground p-8">
+              <p className="text-center text-muted-foreground p-8">{t("downloads.empty.all")}</p>
-              {t("downloads.empty.downloading")}
+            )}
-            </p>
+          </TabsContent>
-          )}
-        </TabsContent>
 
-        <TabsContent value="available" className="space-y-4">
+          <TabsContent value="downloading" className="space-y-4">
-          {downloadedBooks
+            {downloadedBooks
-            .filter((b) => b.status.status === "available")
+              .filter((b) => b.status.status === "downloading")
-            .map(({ book, status }) => (
+              .map(({ book, status }) => (
-              <BookDownloadCard
+                <BookDownloadCard
-                key={book.id}
+                  key={book.id}
-                book={book}
+                  book={book}
-                status={status}
+                  status={status}
-                onDelete={() => handleDeleteBook(book)}
+                  onDelete={() => handleDeleteBook(book)}
-                onRetry={() => handleRetryDownload(book)}
+                  onRetry={() => handleRetryDownload(book)}
-              />
+                />
-            ))}
+              ))}
-          {downloadedBooks.filter((b) => b.status.status === "available").length === 0 && (
+            {downloadedBooks.filter((b) => b.status.status === "downloading").length === 0 && (
-            <p className="text-center text-muted-foreground p-8">
+              <p className="text-center text-muted-foreground p-8">
-              {t("downloads.empty.available")}
+                {t("downloads.empty.downloading")}
-            </p>
+              </p>
-          )}
+            )}
-        </TabsContent>
+          </TabsContent>
 
-        <TabsContent value="error" className="space-y-4">
+          <TabsContent value="available" className="space-y-4">
-          {downloadedBooks
+            {downloadedBooks
-            .filter((b) => b.status.status === "error")
+              .filter((b) => b.status.status === "available")
-            .map(({ book, status }) => (
+              .map(({ book, status }) => (
-              <BookDownloadCard
+                <BookDownloadCard
-                key={book.id}
+                  key={book.id}
-                book={book}
+                  book={book}
-                status={status}
+                  status={status}
-                onDelete={() => handleDeleteBook(book)}
+                  onDelete={() => handleDeleteBook(book)}
-                onRetry={() => handleRetryDownload(book)}
+                  onRetry={() => handleRetryDownload(book)}
-              />
+                />
-            ))}
+              ))}
-          {downloadedBooks.filter((b) => b.status.status === "error").length === 0 && (
+            {downloadedBooks.filter((b) => b.status.status === "available").length === 0 && (
-            <p className="text-center text-muted-foreground p-8">{t("downloads.empty.error")}</p>
+              <p className="text-center text-muted-foreground p-8">
-          )}
+                {t("downloads.empty.available")}
-        </TabsContent>
+              </p>
-      </Tabs>
+            )}
+          </TabsContent>
+
+          <TabsContent value="error" className="space-y-4">
+            {downloadedBooks
+              .filter((b) => b.status.status === "error")
+              .map(({ book, status }) => (
+                <BookDownloadCard
+                  key={book.id}
+                  book={book}
+                  status={status}
+                  onDelete={() => handleDeleteBook(book)}
+                  onRetry={() => handleRetryDownload(book)}
+                />
+              ))}
+            {downloadedBooks.filter((b) => b.status.status === "error").length === 0 && (
+              <p className="text-center text-muted-foreground p-8">{t("downloads.empty.error")}</p>
+            )}
+          </TabsContent>
+        </Tabs>
       </div>
     </Container>
   );

src/components/home/ClientHomePage.tsx

@@ -23,19 +23,19 @@ export function ClientHomePage() {
 
     try {
       const response = await fetch("/api/komga/home", {
-        cache: 'default' // Utilise le cache HTTP du navigateur
+        cache: "default", // Utilise le cache HTTP du navigateur
       });
 
       if (!response.ok) {
         const errorData = await response.json();
         const errorCode = errorData.error?.code || ERROR_CODES.KOMGA.SERVER_UNREACHABLE;
-        
+
         // Si la config Komga est manquante, rediriger vers les settings
         if (errorCode === ERROR_CODES.KOMGA.MISSING_CONFIG) {
           router.push("/settings");
           return;
         }
-        
+
         throw new Error(errorCode);
       }
 
@@ -67,7 +67,7 @@ export function ClientHomePage() {
 
       // Récupérer les nouvelles données
       const response = await fetch("/api/komga/home", {
-        cache: 'reload' // Force un nouveau fetch après invalidation
+        cache: "reload", // Force un nouveau fetch après invalidation
       });
 
       if (!response.ok) {
@@ -128,4 +128,3 @@ export function ClientHomePage() {
     </>
   );
 }
-

src/components/home/HomeContent.tsx

@@ -20,10 +20,10 @@ export function HomeContent({ data, refreshHome }: HomeContentProps) {
 
   // Vérifier si la HeroSection a déjà été affichée
   useEffect(() => {
-    const heroShown = localStorage.getItem('heroSectionShown');
+    const heroShown = localStorage.getItem("heroSectionShown");
     if (!heroShown && data.ongoing && data.ongoing.length > 0) {
       setShowHero(true);
-      localStorage.setItem('heroSectionShown', 'true');
+      localStorage.setItem("heroSectionShown", "true");
     }
   }, [data.ongoing]);
 

src/components/home/MediaRow.tsx

@@ -79,13 +79,11 @@ function MediaCard({ item, onClick }: MediaCardProps) {
   const { t } = useTranslate();
   const isSeries = "booksCount" in item;
   const { isAccessible } = useBookOfflineStatus(isSeries ? "" : item.id);
-  
+
   const title = isSeries
     ? item.metadata.title
     : item.metadata.title ||
-      (item.metadata.number
+      (item.metadata.number ? t("navigation.volume", { number: item.metadata.number }) : "");
-        ? t("navigation.volume", { number: item.metadata.number })
-        : "");
 
   const handleClick = () => {
     // Pour les séries, toujours autoriser le clic
@@ -100,7 +98,7 @@ function MediaCard({ item, onClick }: MediaCardProps) {
       onClick={handleClick}
       className={cn(
         "flex-shrink-0 w-[200px] relative flex flex-col hover:bg-accent hover:text-accent-foreground transition-colors overflow-hidden",
-        (!isSeries && !isAccessible) ? "cursor-not-allowed" : "cursor-pointer"
+        !isSeries && !isAccessible ? "cursor-not-allowed" : "cursor-pointer"
       )}
     >
       <div className="relative aspect-[2/3] bg-muted">

src/components/layout/ClientLayout.tsx

@@ -24,7 +24,12 @@ interface ClientLayoutProps {
   userIsAdmin?: boolean;
 }
 
-export default function ClientLayout({ children, initialLibraries = [], initialFavorites = [], userIsAdmin = false }: ClientLayoutProps) {
+export default function ClientLayout({
+  children,
+  initialLibraries = [],
+  initialFavorites = [],
+  userIsAdmin = false,
+}: ClientLayoutProps) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [randomBookId, setRandomBookId] = useState<string | null>(null);
   const pathname = usePathname();
@@ -67,14 +72,14 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
   const backgroundStyle = useMemo(() => {
     const bg = preferences.background;
     const blur = bg.blur || 0;
-    
+
     if (bg.type === "gradient" && bg.gradient) {
       return {
         backgroundImage: bg.gradient,
         filter: blur > 0 ? `blur(${blur}px)` : undefined,
       };
     }
-    
+
     if (bg.type === "image" && bg.imageUrl) {
       return {
         backgroundImage: `url(${bg.imageUrl})`,
@@ -94,7 +99,7 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
         filter: blur > 0 ? `blur(${blur}px)` : undefined,
       };
     }
-    
+
     return {};
   }, [preferences.background, randomBookId]);
 
@@ -137,10 +142,10 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
   }, []);
 
   // Ne pas afficher le header et la sidebar sur les routes publiques et le reader
-  const isPublicRoute = publicRoutes.includes(pathname) || pathname.startsWith('/books/');
+  const isPublicRoute = publicRoutes.includes(pathname) || pathname.startsWith("/books/");
 
-  const hasCustomBackground = 
+  const hasCustomBackground =
-    preferences.background.type === "gradient" || 
+    preferences.background.type === "gradient" ||
     preferences.background.type === "image" ||
     (preferences.background.type === "komga-random" && randomBookId);
   const contentOpacity = (preferences.background.opacity || 100) / 100;
@@ -149,28 +154,27 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <ImageCacheProvider>
         {/* Background fixe pour les images et gradients */}
-        {hasCustomBackground && (
+        {hasCustomBackground && <div className="fixed inset-0 -z-10" style={backgroundStyle} />}
-          <div 
+        <div
-            className="fixed inset-0 -z-10" 
-            style={backgroundStyle}
-          />
-        )}
-        <div 
           className={`relative min-h-screen ${hasCustomBackground ? "" : "bg-background"}`}
-          style={hasCustomBackground ? { backgroundColor: `rgba(var(--background-rgb, 255, 255, 255), ${contentOpacity})` } : undefined}
+          style={
+            hasCustomBackground
+              ? { backgroundColor: `rgba(var(--background-rgb, 255, 255, 255), ${contentOpacity})` }
+              : undefined
+          }
         >
           {!isPublicRoute && (
-            <Header 
+            <Header
               onToggleSidebar={handleToggleSidebar}
               onRefreshBackground={fetchRandomBook}
               showRefreshBackground={preferences.background.type === "komga-random"}
             />
           )}
           {!isPublicRoute && (
-            <Sidebar 
+            <Sidebar
-              isOpen={isSidebarOpen} 
+              isOpen={isSidebarOpen}
-              onClose={handleCloseSidebar} 
+              onClose={handleCloseSidebar}
-              initialLibraries={initialLibraries} 
+              initialLibraries={initialLibraries}
               initialFavorites={initialFavorites}
               userIsAdmin={userIsAdmin}
             />

src/components/layout/Header.tsx

@@ -11,7 +11,11 @@ interface HeaderProps {
   showRefreshBackground?: boolean;
 }
 
-export function Header({ onToggleSidebar, onRefreshBackground, showRefreshBackground = false }: HeaderProps) {
+export function Header({
+  onToggleSidebar,
+  onRefreshBackground,
+  showRefreshBackground = false,
+}: HeaderProps) {
   const { theme, setTheme } = useTheme();
   const { t } = useTranslation();
   const [isRefreshing, setIsRefreshing] = useState(false);
@@ -56,7 +60,9 @@ export function Header({ onToggleSidebar, onRefreshBackground, showRefreshBackgr
                 className="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
                 aria-label="Rafraîchir l'image de fond"
               >
-                <RefreshCw className={`h-[1.2rem] w-[1.2rem] ${isRefreshing ? 'animate-spin' : ''}`} />
+                <RefreshCw
+                  className={`h-[1.2rem] w-[1.2rem] ${isRefreshing ? "animate-spin" : ""}`}
+                />
                 <span className="sr-only">Rafraîchir l&apos;image de fond</span>
               </button>
             )}

src/components/layout/Sidebar.tsx

@@ -1,6 +1,16 @@
 "use client";
 
-import { Home, Library, Settings, LogOut, RefreshCw, Star, Download, User, Shield } from "lucide-react";
+import {
+  Home,
+  Library,
+  Settings,
+  LogOut,
+  RefreshCw,
+  Star,
+  Download,
+  User,
+  Shield,
+} from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { signOut } from "next-auth/react";
@@ -24,7 +34,13 @@ interface SidebarProps {
   userIsAdmin?: boolean;
 }
 
-export function Sidebar({ isOpen, onClose, initialLibraries, initialFavorites, userIsAdmin = false }: SidebarProps) {
+export function Sidebar({
+  isOpen,
+  onClose,
+  initialLibraries,
+  initialFavorites,
+  userIsAdmin = false,
+}: SidebarProps) {
   const { t } = useTranslate();
   const pathname = usePathname();
   const router = useRouter();

src/components/library/LibraryHeader.tsx

@@ -16,19 +16,25 @@ interface LibraryHeaderProps {
   refreshLibrary: (libraryId: string) => Promise<{ success: boolean; error?: string }>;
 }
 
-export const LibraryHeader = ({ library, seriesCount, series, refreshLibrary }: LibraryHeaderProps) => {
+export const LibraryHeader = ({
+  library,
+  seriesCount,
+  series,
+  refreshLibrary,
+}: LibraryHeaderProps) => {
   const { t } = useTranslate();
 
   // Mémoriser la sélection des séries pour éviter les rerenders inutiles
   const { randomSeries, backgroundSeries } = useMemo(() => {
     // Sélectionner une série aléatoire pour l'image centrale
     const random = series.length > 0 ? series[Math.floor(Math.random() * series.length)] : null;
-    
+
     // Sélectionner une autre série aléatoire pour le fond (différente de celle du centre)
-    const background = series.length > 1 
+    const background =
-      ? series.filter(s => s.id !== random?.id)[Math.floor(Math.random() * (series.length - 1))]
+      series.length > 1
-      : random;
+        ? series.filter((s) => s.id !== random?.id)[Math.floor(Math.random() * (series.length - 1))]
-    
+        : random;
+
     return { randomSeries: random, backgroundSeries: background };
   }, [series]);
 
@@ -76,23 +82,20 @@ export const LibraryHeader = ({ library, seriesCount, series, refreshLibrary }:
           {/* Informations */}
           <div className="flex-1 space-y-3 text-center md:text-left">
             <h1 className="text-3xl md:text-4xl font-bold text-foreground">{library.name}</h1>
-            
+
             <div className="flex items-center gap-4 justify-center md:justify-start flex-wrap">
               <StatusBadge status="unread" icon={Library}>
-                {seriesCount === 1 
+                {seriesCount === 1
                   ? t("library.header.series", { count: seriesCount })
-                  : t("library.header.series_plural", { count: seriesCount })
+                  : t("library.header.series_plural", { count: seriesCount })}
-                }
               </StatusBadge>
-              
+
               <RefreshButton libraryId={library.id} refreshLibrary={refreshLibrary} />
               <ScanButton libraryId={library.id} />
             </div>
 
             {library.unavailable && (
-              <p className="text-sm text-destructive mt-2">
+              <p className="text-sm text-destructive mt-2">{t("library.header.unavailable")}</p>
-                {t("library.header.unavailable")}
-              </p>
             )}
           </div>
         </div>
@@ -100,4 +103,3 @@ export const LibraryHeader = ({ library, seriesCount, series, refreshLibrary }:
     </div>
   );
 };
-

src/components/library/PaginatedSeriesGrid.tsx

@@ -38,31 +38,31 @@ export function PaginatedSeriesGrid({
   const searchParams = useSearchParams();
   const [showOnlyUnread, setShowOnlyUnread] = useState(initialShowOnlyUnread);
   const { isCompact, itemsPerPage: displayItemsPerPage, viewMode } = useDisplayPreferences();
-  
+
   // Utiliser la taille de page effective (depuis l'URL ou les préférences)
   const effectivePageSize = pageSize || displayItemsPerPage;
   const { t } = useTranslate();
 
-  const updateUrlParams = useCallback(async (
+  const updateUrlParams = useCallback(
-    updates: Record<string, string | null>,
+    async (updates: Record<string, string | null>, replace: boolean = false) => {
-    replace: boolean = false
+      const params = new URLSearchParams(searchParams.toString());
-  ) => {
-    const params = new URLSearchParams(searchParams.toString());
 
-    Object.entries(updates).forEach(([key, value]) => {
+      Object.entries(updates).forEach(([key, value]) => {
-      if (value === null) {
+        if (value === null) {
-        params.delete(key);
+          params.delete(key);
+        } else {
+          params.set(key, value);
+        }
+      });
+
+      if (replace) {
+        await router.replace(`${pathname}?${params.toString()}`);
       } else {
-        params.set(key, value);
+        await router.push(`${pathname}?${params.toString()}`);
       }
-    });
+    },
-
+    [router, pathname, searchParams]
-    if (replace) {
+  );
-      await router.replace(`${pathname}?${params.toString()}`);
-    } else {
-      await router.push(`${pathname}?${params.toString()}`);
-    }
-  }, [router, pathname, searchParams]);
 
   // Update local state when prop changes
   useEffect(() => {
@@ -89,7 +89,6 @@ export function PaginatedSeriesGrid({
     });
   };
 
-
   const handlePageSizeChange = async (size: number) => {
     await updateUrlParams({
       page: "1",

src/components/library/ScanButton.tsx

@@ -67,8 +67,7 @@ export function ScanButton({ libraryId }: ScanButtonProps) {
       toast({
         variant: "destructive",
         title: t("library.scan.error.title"),
-        description:
+        description: error instanceof Error ? error.message : t("library.scan.error.description"),
-          error instanceof Error ? error.message : t("library.scan.error.description"),
       });
     }
   };
@@ -86,4 +85,3 @@ export function ScanButton({ libraryId }: ScanButtonProps) {
     </Button>
   );
 }
-

src/components/library/SeriesList.tsx

@@ -60,9 +60,8 @@ function SeriesListItem({ series, isCompact = false }: SeriesListItemProps) {
   };
 
   const isCompleted = series.booksCount === series.booksReadCount;
-  const progressPercentage = series.booksCount > 0 
+  const progressPercentage =
-    ? (series.booksReadCount / series.booksCount) * 100 
+    series.booksCount > 0 ? (series.booksReadCount / series.booksCount) * 100 : 0;
-    : 0;
 
   const statusInfo = getReadingStatusInfo(series, t);
 
@@ -91,7 +90,12 @@ function SeriesListItem({ series, isCompact = false }: SeriesListItemProps) {
             <h3 className="font-medium text-sm sm:text-base line-clamp-1 hover:text-primary transition-colors flex-1 min-w-0">
               {series.metadata.title}
             </h3>
-            <span className={cn("px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0", statusInfo.className)}>
+            <span
+              className={cn(
+                "px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0",
+                statusInfo.className
+              )}
+            >
               {statusInfo.label}
             </span>
           </div>
@@ -101,7 +105,7 @@ function SeriesListItem({ series, isCompact = false }: SeriesListItemProps) {
             <div className="flex items-center gap-1">
               <BookOpen className="h-3 w-3" />
               <span>
-                {series.booksCount === 1 
+                {series.booksCount === 1
                   ? t("series.book", { count: 1 })
                   : t("series.books", { count: series.booksCount })}
               </span>
@@ -109,9 +113,7 @@ function SeriesListItem({ series, isCompact = false }: SeriesListItemProps) {
             {series.booksMetadata?.authors && series.booksMetadata.authors.length > 0 && (
               <div className="flex items-center gap-1 hidden sm:flex">
                 <User className="h-3 w-3" />
-                <span className="line-clamp-1">
+                <span className="line-clamp-1">{series.booksMetadata.authors[0].name}</span>
-                  {series.booksMetadata.authors[0].name}
-                </span>
               </div>
             )}
           </div>
@@ -146,9 +148,14 @@ function SeriesListItem({ series, isCompact = false }: SeriesListItemProps) {
               {series.metadata.title}
             </h3>
           </div>
-          
+
           {/* Badge de statut */}
-          <span className={cn("px-2 py-1 rounded-full text-xs font-medium flex-shrink-0", statusInfo.className)}>
+          <span
+            className={cn(
+              "px-2 py-1 rounded-full text-xs font-medium flex-shrink-0",
+              statusInfo.className
+            )}
+          >
             {statusInfo.label}
           </span>
         </div>
@@ -166,7 +173,7 @@ function SeriesListItem({ series, isCompact = false }: SeriesListItemProps) {
           <div className="flex items-center gap-1">
             <BookOpen className="h-3 w-3" />
             <span>
-              {series.booksCount === 1 
+              {series.booksCount === 1
                 ? t("series.book", { count: 1 })
                 : t("series.books", { count: series.booksCount })}
             </span>
@@ -177,7 +184,7 @@ function SeriesListItem({ series, isCompact = false }: SeriesListItemProps) {
             <div className="flex items-center gap-1">
               <User className="h-3 w-3" />
               <span className="line-clamp-1">
-                {series.booksMetadata.authors.map(a => a.name).join(", ")}
+                {series.booksMetadata.authors.map((a) => a.name).join(", ")}
               </span>
             </div>
           )}
@@ -246,4 +253,3 @@ export function SeriesList({ series, isCompact = false }: SeriesListProps) {
     </div>
   );
 }
-

src/components/reader/ClientBookPage.tsx

@@ -27,7 +27,7 @@ export function ClientBookPage({ bookId }: ClientBookPageProps) {
       setError(null);
 
       const response = await fetch(`/api/komga/books/${bookId}`);
-      
+
       if (!response.ok) {
         const errorData = await response.json();
         throw new Error(errorData.error?.code || ERROR_CODES.BOOK.PAGES_FETCH_ERROR);
@@ -74,4 +74,3 @@ export function ClientBookPage({ bookId }: ClientBookPageProps) {
 
   return <ClientBookWrapper book={data.book} pages={data.pages} nextBook={data.nextBook} />;
 }
-

src/components/reader/ClientBookWrapper.tsx

@@ -19,5 +19,7 @@ export function ClientBookWrapper({ book, pages, nextBook }: ClientBookWrapperPr
     router.push(`/series/${book.seriesId}`);
   };
 
-  return <PhotoswipeReader book={book} pages={pages} onClose={handleCloseReader} nextBook={nextBook} />;
+  return (
+    <PhotoswipeReader book={book} pages={pages} onClose={handleCloseReader} nextBook={nextBook} />
+  );
 }

src/components/reader/PhotoswipeReader.tsx

@@ -29,20 +29,29 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
   const { direction, toggleDirection, isRTL } = useReadingDirection();
   const { isFullscreen, toggleFullscreen } = useFullscreen();
   const { isDoublePage, shouldShowDoublePage, toggleDoublePage } = useDoublePageMode();
-  const { loadedImages, imageBlobUrls, prefetchPages, prefetchNextBook, handleForceReload, getPageUrl, prefetchCount } = useImageLoader({ 
+  const {
-    bookId: book.id, 
+    loadedImages,
-    pages, 
+    imageBlobUrls,
-    prefetchCount: preferences.readerPrefetchCount,
+    prefetchPages,
-    nextBook: nextBook ? { id: nextBook.id, pages: [] } : null
+    prefetchNextBook,
-  });
+    handleForceReload,
-  const { currentPage, showEndMessage, navigateToPage, handlePreviousPage, handleNextPage } = usePageNavigation({
+    getPageUrl,
-    book,
+    prefetchCount,
+  } = useImageLoader({
+    bookId: book.id,
     pages,
-    isDoublePage,
+    prefetchCount: preferences.readerPrefetchCount,
-    shouldShowDoublePage: (page) => shouldShowDoublePage(page, pages.length),
+    nextBook: nextBook ? { id: nextBook.id, pages: [] } : null,
-    onClose,
-    nextBook,
   });
+  const { currentPage, showEndMessage, navigateToPage, handlePreviousPage, handleNextPage } =
+    usePageNavigation({
+      book,
+      pages,
+      isDoublePage,
+      shouldShowDoublePage: (page) => shouldShowDoublePage(page, pages.length),
+      onClose,
+      nextBook,
+    });
   const { pswpRef, handleZoom } = usePhotoSwipeZoom({
     loadedImages,
     currentPage,
@@ -58,32 +67,44 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
 
   // Activer le zoom dans le reader en enlevant la classe no-pinch-zoom
   useEffect(() => {
-    document.body.classList.remove('no-pinch-zoom');
+    document.body.classList.remove("no-pinch-zoom");
 
     return () => {
-      document.body.classList.add('no-pinch-zoom');
+      document.body.classList.add("no-pinch-zoom");
     };
   }, []);
 
-
   // Prefetch current and next pages
   // Deduplication in useImageLoader prevents redundant requests
   // Server queue (RequestQueueService) handles concurrency limits
   useEffect(() => {
     // Prefetch pages starting from current page
     prefetchPages(currentPage, prefetchCount);
-    
+
     // If double page mode, also prefetch additional pages for smooth double page navigation
-    if (isDoublePage && shouldShowDoublePage(currentPage, pages.length) && currentPage + prefetchCount < pages.length) {
+    if (
+      isDoublePage &&
+      shouldShowDoublePage(currentPage, pages.length) &&
+      currentPage + prefetchCount < pages.length
+    ) {
       prefetchPages(currentPage + prefetchCount, 1);
     }
-    
+
     // If we're near the end of the book, prefetch the next book
     const pagesFromEnd = pages.length - currentPage;
     if (pagesFromEnd <= prefetchCount && nextBook) {
       prefetchNextBook(prefetchCount);
     }
-  }, [currentPage, isDoublePage, shouldShowDoublePage, prefetchPages, prefetchNextBook, prefetchCount, pages.length, nextBook]);
+  }, [
+    currentPage,
+    isDoublePage,
+    shouldShowDoublePage,
+    prefetchPages,
+    prefetchNextBook,
+    prefetchCount,
+    pages.length,
+    nextBook,
+  ]);
 
   // Keyboard events
   useEffect(() => {
@@ -109,43 +130,46 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
     };
 
     window.addEventListener("keydown", handleKeyDown);
-    
+
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [handleNextPage, handlePreviousPage, onClose, isRTL, currentPage]);
 
-  const handleContainerClick = useCallback((e: React.MouseEvent) => {
+  const handleContainerClick = useCallback(
-    // Vérifier si c'est un double-clic sur une image
+    (e: React.MouseEvent) => {
-    const target = e.target as HTMLElement;
+      // Vérifier si c'est un double-clic sur une image
-    const now = Date.now();
+      const target = e.target as HTMLElement;
-    const timeSinceLastClick = now - lastClickTimeRef.current;
+      const now = Date.now();
-    
+      const timeSinceLastClick = now - lastClickTimeRef.current;
-    if (target.tagName === 'IMG' && timeSinceLastClick < 300) {
+
-      // Double-clic sur une image
+      if (target.tagName === "IMG" && timeSinceLastClick < 300) {
-      if (clickTimeoutRef.current) {
+        // Double-clic sur une image
-        clearTimeout(clickTimeoutRef.current);
+        if (clickTimeoutRef.current) {
-        clickTimeoutRef.current = null;
+          clearTimeout(clickTimeoutRef.current);
+          clickTimeoutRef.current = null;
+        }
+        e.stopPropagation();
+        handleZoom();
+        lastClickTimeRef.current = 0;
+      } else if (target.tagName === "IMG") {
+        // Premier clic sur une image - attendre pour voir si c'est un double-clic
+        lastClickTimeRef.current = now;
+        if (clickTimeoutRef.current) {
+          clearTimeout(clickTimeoutRef.current);
+        }
+        clickTimeoutRef.current = setTimeout(() => {
+          setShowControls((prev) => !prev);
+          clickTimeoutRef.current = null;
+        }, 300);
+      } else {
+        // Clic ailleurs - toggle les contrôles immédiatement
+        setShowControls(!showControls);
+        lastClickTimeRef.current = 0;
       }
-      e.stopPropagation();
+    },
-      handleZoom();
+    [showControls, handleZoom]
-      lastClickTimeRef.current = 0;
+  );
-    } else if (target.tagName === 'IMG') {
-      // Premier clic sur une image - attendre pour voir si c'est un double-clic
-      lastClickTimeRef.current = now;
-      if (clickTimeoutRef.current) {
-        clearTimeout(clickTimeoutRef.current);
-      }
-      clickTimeoutRef.current = setTimeout(() => {
-        setShowControls(prev => !prev);
-        clickTimeoutRef.current = null;
-      }, 300);
-    } else {
-      // Clic ailleurs - toggle les contrôles immédiatement
-      setShowControls(!showControls);
-      lastClickTimeRef.current = 0;
-    }
-  }, [showControls, handleZoom]);
 
   return (
     <ReaderContainer onContainerClick={handleContainerClick}>
@@ -173,7 +197,11 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
         showThumbnails={showThumbnails}
         onToggleThumbnails={() => setShowThumbnails(!showThumbnails)}
         onZoom={handleZoom}
-        onForceReload={() => handleForceReload(currentPage, isDoublePage, (page) => shouldShowDoublePage(page, pages.length))}
+        onForceReload={() =>
+          handleForceReload(currentPage, isDoublePage, (page) =>
+            shouldShowDoublePage(page, pages.length)
+          )
+        }
       />
 
       <PageDisplay
@@ -196,4 +224,3 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
     </ReaderContainer>
   );
 }
-

src/components/reader/components/PageDisplay.tsx

@@ -44,26 +44,28 @@ export function PageDisplay({
         <div
           className={cn(
             "relative h-full flex items-center",
-            isDoublePage && shouldShowDoublePage(currentPage)
+            isDoublePage && shouldShowDoublePage(currentPage) ? "w-1/2" : "w-full justify-center",
-              ? "w-1/2"
+            isDoublePage &&
-              : "w-full justify-center",
+              shouldShowDoublePage(currentPage) && {
-            isDoublePage && shouldShowDoublePage(currentPage) && {
+                "order-2 justify-start": isRTL,
-              "order-2 justify-start": isRTL,
+                "order-1 justify-end": !isRTL,
-              "order-1 justify-end": !isRTL,
+              }
-            }
           )}
         >
           {isLoading && (
             <div className="absolute inset-0 flex items-center justify-center z-10 opacity-0 animate-fade-in">
               <div className="relative">
                 <div className="animate-spin rounded-full h-16 w-16 border-4 border-primary/20"></div>
-                <div className="absolute inset-0 animate-spin rounded-full h-16 w-16 border-4 border-transparent border-t-primary" style={{ animationDuration: '0.8s' }}></div>
+                <div
+                  className="absolute inset-0 animate-spin rounded-full h-16 w-16 border-4 border-transparent border-t-primary"
+                  style={{ animationDuration: "0.8s" }}
+                ></div>
               </div>
             </div>
           )}
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
-            key={`page-${currentPage}-${imageBlobUrls[currentPage] || ''}`}
+            key={`page-${currentPage}-${imageBlobUrls[currentPage] || ""}`}
             src={imageBlobUrls[currentPage] || getPageUrl(currentPage)}
             alt={`Page ${currentPage}`}
             className={cn(
@@ -85,25 +87,25 @@ export function PageDisplay({
         {/* Page 2 (double page) */}
         {isDoublePage && shouldShowDoublePage(currentPage) && (
           <div
-            className={cn(
+            className={cn("relative h-full w-1/2 flex items-center", {
-              "relative h-full w-1/2 flex items-center",
+              "order-1 justify-end": isRTL,
-              {
+              "order-2 justify-start": !isRTL,
-                "order-1 justify-end": isRTL,
+            })}
-                "order-2 justify-start": !isRTL,
-              }
-            )}
           >
             {secondPageLoading && (
               <div className="absolute inset-0 flex items-center justify-center z-10 opacity-0 animate-fade-in">
                 <div className="relative">
                   <div className="animate-spin rounded-full h-16 w-16 border-4 border-primary/20"></div>
-                  <div className="absolute inset-0 animate-spin rounded-full h-16 w-16 border-4 border-transparent border-t-primary" style={{ animationDuration: '0.8s' }}></div>
+                  <div
+                    className="absolute inset-0 animate-spin rounded-full h-16 w-16 border-4 border-transparent border-t-primary"
+                    style={{ animationDuration: "0.8s" }}
+                  ></div>
                 </div>
               </div>
             )}
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
-              key={`page-${currentPage + 1}-${imageBlobUrls[currentPage + 1] || ''}`}
+              key={`page-${currentPage + 1}-${imageBlobUrls[currentPage + 1] || ""}`}
               src={imageBlobUrls[currentPage + 1] || getPageUrl(currentPage + 1)}
               alt={`Page ${currentPage + 1}`}
               className={cn(

src/components/reader/components/ReaderContainer.tsx

@@ -8,9 +8,12 @@ interface ReaderContainerProps {
 export function ReaderContainer({ children, onContainerClick }: ReaderContainerProps) {
   const readerRef = useRef<HTMLDivElement>(null);
 
-  const handleContainerClick = useCallback((e: React.MouseEvent) => {
+  const handleContainerClick = useCallback(
-    onContainerClick(e);
+    (e: React.MouseEvent) => {
-  }, [onContainerClick]);
+      onContainerClick(e);
+    },
+    [onContainerClick]
+  );
 
   return (
     <div
@@ -18,9 +21,7 @@ export function ReaderContainer({ children, onContainerClick }: ReaderContainerP
       className="reader-zoom-enabled fixed inset-0 bg-background/95 backdrop-blur-sm z-50 overflow-hidden"
       onClick={handleContainerClick}
     >
-      <div className="relative h-full flex flex-col items-center justify-center">
+      <div className="relative h-full flex flex-col items-center justify-center">{children}</div>
-        {children}
-      </div>
     </div>
   );
 }

src/components/reader/components/Thumbnail.tsx

@@ -97,9 +97,9 @@ export const Thumbnail = forwardRef<HTMLButtonElement, ThumbnailProps>(
           setImageUrl((prev) => {
             if (!prev) return null;
             // Utiliser & si l'URL contient déjà des query params
-            const separator = prev.includes('?') ? '&' : '?';
+            const separator = prev.includes("?") ? "&" : "?";
             // Supprimer l'ancien retry param si présent
-            const baseUrl = prev.replace(/[?&]retry=\d+/g, '');
+            const baseUrl = prev.replace(/[?&]retry=\d+/g, "");
             return `${baseUrl}${separator}retry=${loadAttempts.current}`;
           });
         }, delay);

src/components/reader/hooks/useDoublePageMode.ts

@@ -22,7 +22,7 @@ export function useDoublePageMode() {
   );
 
   const toggleDoublePage = useCallback(() => {
-    setIsDoublePage(prev => !prev);
+    setIsDoublePage((prev) => !prev);
   }, []);
 
   return {

src/components/reader/hooks/useFullscreen.ts

@@ -14,7 +14,9 @@ export const useFullscreen = () => {
     return () => {
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
       if (document.fullscreenElement) {
-        document.exitFullscreen().catch(err => logger.error({ err }, "Erreur lors de la sortie du mode plein écran"));
+        document
+          .exitFullscreen()
+          .catch((err) => logger.error({ err }, "Erreur lors de la sortie du mode plein écran"));
       }
     };
   }, []);

src/components/reader/hooks/useImageLoader.ts

@@ -15,7 +15,12 @@ interface UseImageLoaderProps {
   nextBook?: { id: string; pages: number[] } | null; // Livre suivant pour prefetch
 }
 
-export function useImageLoader({ bookId, pages: _pages, prefetchCount = 5, nextBook }: UseImageLoaderProps) {
+export function useImageLoader({
+  bookId,
+  pages: _pages,
+  prefetchCount = 5,
+  nextBook,
+}: UseImageLoaderProps) {
   const [loadedImages, setLoadedImages] = useState<Record<ImageKey, ImageDimensions>>({});
   const [imageBlobUrls, setImageBlobUrls] = useState<Record<ImageKey, string>>({});
   const loadedImagesRef = useRef(loadedImages);
@@ -32,217 +37,238 @@ export function useImageLoader({ bookId, pages: _pages, prefetchCount = 5, nextB
     imageBlobUrlsRef.current = imageBlobUrls;
   }, [imageBlobUrls]);
 
-  const getPageUrl = useCallback((pageNum: number) => `/api/komga/books/${bookId}/pages/${pageNum}`, [bookId]);
+  const getPageUrl = useCallback(
+    (pageNum: number) => `/api/komga/books/${bookId}/pages/${pageNum}`,
+    [bookId]
+  );
 
   // Prefetch image and store dimensions
-  const prefetchImage = useCallback(async (pageNum: number) => {
+  const prefetchImage = useCallback(
-    // Check if we already have both dimensions and blob URL
+    async (pageNum: number) => {
-    const hasDimensions = loadedImagesRef.current[pageNum];
+      // Check if we already have both dimensions and blob URL
-    const hasBlobUrl = imageBlobUrlsRef.current[pageNum];
+      const hasDimensions = loadedImagesRef.current[pageNum];
-    
+      const hasBlobUrl = imageBlobUrlsRef.current[pageNum];
-    if (hasDimensions && hasBlobUrl) {
+
-      return;
+      if (hasDimensions && hasBlobUrl) {
-    }
-    
-    // Check if this page is already being fetched
-    if (pendingFetchesRef.current.has(pageNum)) {
-      return;
-    }
-    
-    // Mark as pending
-    pendingFetchesRef.current.add(pageNum);
-    
-    try {
-      // Use browser cache if available - the server sets Cache-Control headers
-      const response = await fetch(getPageUrl(pageNum), {
-        cache: 'default', // Respect Cache-Control headers from server
-      });
-      if (!response.ok) {
         return;
       }
-      
+
-      const blob = await response.blob();
+      // Check if this page is already being fetched
-      const blobUrl = URL.createObjectURL(blob);
+      if (pendingFetchesRef.current.has(pageNum)) {
-      
+        return;
-      // Create image to get dimensions
+      }
-      const img = new Image();
+
-      img.onload = () => {
+      // Mark as pending
-        setLoadedImages(prev => ({
+      pendingFetchesRef.current.add(pageNum);
-          ...prev,
+
-          [pageNum]: { width: img.naturalWidth, height: img.naturalHeight }
+      try {
-        }));
+        // Use browser cache if available - the server sets Cache-Control headers
-        
+        const response = await fetch(getPageUrl(pageNum), {
-        // Store the blob URL for immediate use
+          cache: "default", // Respect Cache-Control headers from server
-        setImageBlobUrls(prev => ({
+        });
-          ...prev,
+        if (!response.ok) {
-          [pageNum]: blobUrl
+          return;
-        }));
+        }
-      };
+
-      img.src = blobUrl;
+        const blob = await response.blob();
-    } catch {
+        const blobUrl = URL.createObjectURL(blob);
-      // Silently fail prefetch
+
-    } finally {
+        // Create image to get dimensions
-      // Remove from pending set
+        const img = new Image();
-      pendingFetchesRef.current.delete(pageNum);
+        img.onload = () => {
-    }
+          setLoadedImages((prev) => ({
-  }, [getPageUrl]);
+            ...prev,
+            [pageNum]: { width: img.naturalWidth, height: img.naturalHeight },
+          }));
+
+          // Store the blob URL for immediate use
+          setImageBlobUrls((prev) => ({
+            ...prev,
+            [pageNum]: blobUrl,
+          }));
+        };
+        img.src = blobUrl;
+      } catch {
+        // Silently fail prefetch
+      } finally {
+        // Remove from pending set
+        pendingFetchesRef.current.delete(pageNum);
+      }
+    },
+    [getPageUrl]
+  );
 
   // Prefetch multiple pages starting from a given page
   // The server-side queue (RequestQueueService) handles concurrency limits
   // We only deduplicate to avoid redundant HTTP requests
-  const prefetchPages = useCallback(async (startPage: number, count: number = prefetchCount) => {
+  const prefetchPages = useCallback(
-    const pagesToPrefetch = [];
+    async (startPage: number, count: number = prefetchCount) => {
-    
+      const pagesToPrefetch = [];
-    for (let i = 0; i < count; i++) {
+
-      const pageNum = startPage + i;
+      for (let i = 0; i < count; i++) {
-      if (pageNum <= _pages.length) {
+        const pageNum = startPage + i;
-        const hasDimensions = loadedImagesRef.current[pageNum];
+        if (pageNum <= _pages.length) {
-        const hasBlobUrl = imageBlobUrlsRef.current[pageNum];
+          const hasDimensions = loadedImagesRef.current[pageNum];
-        const isPending = pendingFetchesRef.current.has(pageNum);
+          const hasBlobUrl = imageBlobUrlsRef.current[pageNum];
-        
+          const isPending = pendingFetchesRef.current.has(pageNum);
-        // Prefetch if we don't have both dimensions AND blob URL AND it's not already pending
+
-        if ((!hasDimensions || !hasBlobUrl) && !isPending) {
+          // Prefetch if we don't have both dimensions AND blob URL AND it's not already pending
-          pagesToPrefetch.push(pageNum);
+          if ((!hasDimensions || !hasBlobUrl) && !isPending) {
+            pagesToPrefetch.push(pageNum);
+          }
         }
       }
-    }
+
-    
+      // Let all prefetch requests run - the server queue will manage concurrency
-    // Let all prefetch requests run - the server queue will manage concurrency
+      // The browser cache and our deduplication prevent redundant requests
-    // The browser cache and our deduplication prevent redundant requests
+      if (pagesToPrefetch.length > 0) {
-    if (pagesToPrefetch.length > 0) {
+        // Fire all requests in parallel - server queue handles throttling
-      // Fire all requests in parallel - server queue handles throttling
+        Promise.all(pagesToPrefetch.map((pageNum) => prefetchImage(pageNum))).catch(() => {
-      Promise.all(pagesToPrefetch.map(pageNum => prefetchImage(pageNum))).catch(() => {
+          // Silently fail - prefetch is non-critical
-        // Silently fail - prefetch is non-critical
+        });
-      });
+      }
-    }
+    },
-  }, [prefetchImage, prefetchCount, _pages.length]);
+    [prefetchImage, prefetchCount, _pages.length]
+  );
 
   // Prefetch pages from next book
-  const prefetchNextBook = useCallback(async (count: number = prefetchCount) => {
+  const prefetchNextBook = useCallback(
-    if (!nextBook) {
+    async (count: number = prefetchCount) => {
-      return;
+      if (!nextBook) {
-    }
+        return;
-
-    const pagesToPrefetch = [];
-    
-    for (let i = 0; i < count; i++) {
-      const pageNum = i + 1; // Pages du livre suivant commencent à 1
-      // Pour le livre suivant, on utilise une clé différente pour éviter les conflits
-      const nextBookPageKey = `next-${pageNum}`;
-      const hasDimensions = loadedImagesRef.current[nextBookPageKey];
-      const hasBlobUrl = imageBlobUrlsRef.current[nextBookPageKey];
-      const isPending = pendingFetchesRef.current.has(nextBookPageKey);
-      
-      if ((!hasDimensions || !hasBlobUrl) && !isPending) {
-        pagesToPrefetch.push({ pageNum, nextBookPageKey });
       }
-    }
+
-    
+      const pagesToPrefetch = [];
-    // Let all prefetch requests run - server queue handles concurrency
+
-    if (pagesToPrefetch.length > 0) {
+      for (let i = 0; i < count; i++) {
-      Promise.all(pagesToPrefetch.map(async ({ pageNum, nextBookPageKey }) => {
+        const pageNum = i + 1; // Pages du livre suivant commencent à 1
-        // Mark as pending
+        // Pour le livre suivant, on utilise une clé différente pour éviter les conflits
-        pendingFetchesRef.current.add(nextBookPageKey);
+        const nextBookPageKey = `next-${pageNum}`;
-        
+        const hasDimensions = loadedImagesRef.current[nextBookPageKey];
-        try {
+        const hasBlobUrl = imageBlobUrlsRef.current[nextBookPageKey];
-          const response = await fetch(`/api/komga/books/${nextBook.id}/pages/${pageNum}`, {
+        const isPending = pendingFetchesRef.current.has(nextBookPageKey);
-            cache: 'default', // Respect Cache-Control headers from server
+
-          });
+        if ((!hasDimensions || !hasBlobUrl) && !isPending) {
-          if (!response.ok) {
+          pagesToPrefetch.push({ pageNum, nextBookPageKey });
-            return;
-          }
-          
-          const blob = await response.blob();
-          const blobUrl = URL.createObjectURL(blob);
-          
-          // Create image to get dimensions
-          const img = new Image();
-          img.onload = () => {
-            setLoadedImages(prev => ({
-              ...prev,
-              [nextBookPageKey]: { width: img.naturalWidth, height: img.naturalHeight }
-            }));
-            
-            // Store the blob URL for immediate use
-            setImageBlobUrls(prev => ({
-              ...prev,
-              [nextBookPageKey]: blobUrl
-            }));
-          };
-          img.src = blobUrl;
-        } catch {
-          // Silently fail prefetch
-        } finally {
-          pendingFetchesRef.current.delete(nextBookPageKey);
         }
-      })).catch(() => {
+      }
-        // Silently fail - prefetch is non-critical
+
-      });
+      // Let all prefetch requests run - server queue handles concurrency
-    }
+      if (pagesToPrefetch.length > 0) {
-  }, [nextBook, prefetchCount]);
+        Promise.all(
+          pagesToPrefetch.map(async ({ pageNum, nextBookPageKey }) => {
+            // Mark as pending
+            pendingFetchesRef.current.add(nextBookPageKey);
+
+            try {
+              const response = await fetch(`/api/komga/books/${nextBook.id}/pages/${pageNum}`, {
+                cache: "default", // Respect Cache-Control headers from server
+              });
+              if (!response.ok) {
+                return;
+              }
+
+              const blob = await response.blob();
+              const blobUrl = URL.createObjectURL(blob);
+
+              // Create image to get dimensions
+              const img = new Image();
+              img.onload = () => {
+                setLoadedImages((prev) => ({
+                  ...prev,
+                  [nextBookPageKey]: { width: img.naturalWidth, height: img.naturalHeight },
+                }));
+
+                // Store the blob URL for immediate use
+                setImageBlobUrls((prev) => ({
+                  ...prev,
+                  [nextBookPageKey]: blobUrl,
+                }));
+              };
+              img.src = blobUrl;
+            } catch {
+              // Silently fail prefetch
+            } finally {
+              pendingFetchesRef.current.delete(nextBookPageKey);
+            }
+          })
+        ).catch(() => {
+          // Silently fail - prefetch is non-critical
+        });
+      }
+    },
+    [nextBook, prefetchCount]
+  );
 
   // Force reload handler
-  const handleForceReload = useCallback(async (currentPage: number, isDoublePage: boolean, shouldShowDoublePage: (page: number) => boolean) => {
+  const handleForceReload = useCallback(
-    // Révoquer les anciennes URLs blob
+    async (
-    if (imageBlobUrls[currentPage]) {
+      currentPage: number,
-      URL.revokeObjectURL(imageBlobUrls[currentPage]);
+      isDoublePage: boolean,
-    }
+      shouldShowDoublePage: (page: number) => boolean
-    if (imageBlobUrls[currentPage + 1]) {
+    ) => {
-      URL.revokeObjectURL(imageBlobUrls[currentPage + 1]);
+      // Révoquer les anciennes URLs blob
-    }
+      if (imageBlobUrls[currentPage]) {
-    
+        URL.revokeObjectURL(imageBlobUrls[currentPage]);
-    try {
-      // Fetch page 1 avec cache: reload
-      const response1 = await fetch(getPageUrl(currentPage), {
-        cache: 'reload',
-        headers: {
-          'Cache-Control': 'no-cache',
-          'Pragma': 'no-cache'
-        }
-      });
-      
-      if (!response1.ok) {
-        throw new Error(`HTTP ${response1.status}`);
       }
-      
+      if (imageBlobUrls[currentPage + 1]) {
-      const blob1 = await response1.blob();
+        URL.revokeObjectURL(imageBlobUrls[currentPage + 1]);
-      const blobUrl1 = URL.createObjectURL(blob1);
+      }
-      
+
-      const newUrls: Record<number, string> = {
+      try {
-        ...imageBlobUrls,
+        // Fetch page 1 avec cache: reload
-        [currentPage]: blobUrl1
+        const response1 = await fetch(getPageUrl(currentPage), {
-      };
+          cache: "reload",
-      
-      // Fetch page 2 si double page
-      if (isDoublePage && shouldShowDoublePage(currentPage)) {
-        const response2 = await fetch(getPageUrl(currentPage + 1), {
-          cache: 'reload',
           headers: {
-            'Cache-Control': 'no-cache',
+            "Cache-Control": "no-cache",
-            'Pragma': 'no-cache'
+            Pragma: "no-cache",
-          }
+          },
         });
-        
+
-        if (!response2.ok) {
+        if (!response1.ok) {
-          throw new Error(`HTTP ${response2.status}`);
+          throw new Error(`HTTP ${response1.status}`);
         }
-        
+
-        const blob2 = await response2.blob();
+        const blob1 = await response1.blob();
-        const blobUrl2 = URL.createObjectURL(blob2);
+        const blobUrl1 = URL.createObjectURL(blob1);
-        newUrls[currentPage + 1] = blobUrl2;
+
+        const newUrls: Record<number, string> = {
+          ...imageBlobUrls,
+          [currentPage]: blobUrl1,
+        };
+
+        // Fetch page 2 si double page
+        if (isDoublePage && shouldShowDoublePage(currentPage)) {
+          const response2 = await fetch(getPageUrl(currentPage + 1), {
+            cache: "reload",
+            headers: {
+              "Cache-Control": "no-cache",
+              Pragma: "no-cache",
+            },
+          });
+
+          if (!response2.ok) {
+            throw new Error(`HTTP ${response2.status}`);
+          }
+
+          const blob2 = await response2.blob();
+          const blobUrl2 = URL.createObjectURL(blob2);
+          newUrls[currentPage + 1] = blobUrl2;
+        }
+
+        setImageBlobUrls(newUrls);
+      } catch (error) {
+        logger.error({ err: error }, "Error reloading images:");
+        throw error;
       }
-      
+    },
-      setImageBlobUrls(newUrls);
+    [imageBlobUrls, getPageUrl]
-    } catch (error) {
+  );
-      logger.error({ err: error }, 'Error reloading images:');
-      throw error;
-    }
-  }, [imageBlobUrls, getPageUrl]);
 
   // Cleanup blob URLs on unmount only
   useEffect(() => {
     return () => {
-      Object.values(imageBlobUrlsRef.current).forEach(url => {
+      Object.values(imageBlobUrlsRef.current).forEach((url) => {
         if (url) URL.revokeObjectURL(url);
       });
     };

src/components/reader/hooks/usePageNavigation.ts

@@ -100,7 +100,15 @@ export function usePageNavigation({
     }
     const step = isDoublePage && shouldShowDoublePage(currentPage) ? 2 : 1;
     navigateToPage(Math.min(pages.length, currentPage + step));
-  }, [currentPage, pages.length, isDoublePage, shouldShowDoublePage, navigateToPage, nextBook, router]);
+  }, [
+    currentPage,
+    pages.length,
+    isDoublePage,
+    shouldShowDoublePage,
+    navigateToPage,
+    nextBook,
+    router,
+  ]);
 
   // Cleanup - Sync final sans debounce
   useEffect(() => {
@@ -122,4 +130,4 @@ export function usePageNavigation({
     handlePreviousPage,
     handleNextPage,
   };
-}
+}

src/components/reader/hooks/usePhotoSwipeZoom.ts

@@ -19,12 +19,14 @@ export function usePhotoSwipeZoom({
     const dims = loadedImages[currentPage];
     if (!dims) return;
 
-    const dataSource = [{
+    const dataSource = [
-      src: getPageUrl(currentPage),
+      {
-      width: dims.width,
+        src: getPageUrl(currentPage),
-      height: dims.height,
+        width: dims.width,
-      alt: `Page ${currentPage}`
+        height: dims.height,
-    }];
+        alt: `Page ${currentPage}`,
+      },
+    ];
 
     // Close any existing instance
     if (pswpRef.current) {
@@ -36,12 +38,12 @@ export function usePhotoSwipeZoom({
       dataSource,
       index: 0,
       bgOpacity: 0.9,
-      showHideAnimationType: 'fade',
+      showHideAnimationType: "fade",
       initialZoomLevel: 0.25,
       secondaryZoomLevel: 0.5, // Niveau de zoom au double-clic
       maxZoomLevel: 4,
       clickToCloseNonZoomable: true, // Ferme au clic simple
-      tapAction: 'zoom', // Ferme au tap
+      tapAction: "zoom", // Ferme au tap
       wheelToZoom: true,
       pinchToClose: false, // Pinch pour fermer
       closeOnVerticalDrag: true, // Swipe vertical pour fermer
@@ -53,7 +55,7 @@ export function usePhotoSwipeZoom({
     pswp.init();
 
     // Clean up on close
-    pswp.on('close', () => {
+    pswp.on("close", () => {
       pswpRef.current = null;
     });
   }, [loadedImages, currentPage, getPageUrl]);

src/components/reader/hooks/useTouchNavigation.ts

@@ -30,28 +30,31 @@ export function useTouchNavigation({
   }, []);
 
   // Touch handlers for swipe navigation
-  const handleTouchStart = useCallback((e: TouchEvent) => {
+  const handleTouchStart = useCallback(
-    // Ne pas gérer si Photoswipe est ouvert
+    (e: TouchEvent) => {
-    if (pswpRef.current) return;
+      // Ne pas gérer si Photoswipe est ouvert
-    // Ne pas gérer si la page est zoomée (zoom natif)
+      if (pswpRef.current) return;
-    if (isZoomed()) return;
+      // Ne pas gérer si la page est zoomée (zoom natif)
-    
+      if (isZoomed()) return;
-    // Détecter si c'est un pinch (2+ doigts)
+
-    if (e.touches.length > 1) {
+      // Détecter si c'est un pinch (2+ doigts)
-      isPinchingRef.current = true;
+      if (e.touches.length > 1) {
-      touchStartXRef.current = null;
+        isPinchingRef.current = true;
-      touchStartYRef.current = null;
+        touchStartXRef.current = null;
-      return;
+        touchStartYRef.current = null;
-    }
+        return;
-    
+      }
-    // Un seul doigt - seulement si on n'était pas en train de pinch
+
-    // On réinitialise isPinchingRef seulement ici, quand on commence un nouveau geste à 1 doigt
+      // Un seul doigt - seulement si on n'était pas en train de pinch
-    if (e.touches.length === 1) {
+      // On réinitialise isPinchingRef seulement ici, quand on commence un nouveau geste à 1 doigt
-      isPinchingRef.current = false;
+      if (e.touches.length === 1) {
-      touchStartXRef.current = e.touches[0].clientX;
+        isPinchingRef.current = false;
-      touchStartYRef.current = e.touches[0].clientY;
+        touchStartXRef.current = e.touches[0].clientX;
-    }
+        touchStartYRef.current = e.touches[0].clientY;
-  }, [pswpRef, isZoomed]);
+      }
+    },
+    [pswpRef, isZoomed]
+  );
 
   const handleTouchMove = useCallback((e: TouchEvent) => {
     // Détecter le pinch pendant le mouvement
@@ -62,63 +65,66 @@ export function useTouchNavigation({
     }
   }, []);
 
-  const handleTouchEnd = useCallback((e: TouchEvent) => {
+  const handleTouchEnd = useCallback(
-    // Si on était en mode pinch, ne JAMAIS traiter le swipe
+    (e: TouchEvent) => {
-    if (isPinchingRef.current) {
+      // Si on était en mode pinch, ne JAMAIS traiter le swipe
-      touchStartXRef.current = null;
+      if (isPinchingRef.current) {
-      touchStartYRef.current = null;
+        touchStartXRef.current = null;
-      // Ne PAS réinitialiser isPinchingRef ici, on le fera au prochain touchstart
+        touchStartYRef.current = null;
-      return;
+        // Ne PAS réinitialiser isPinchingRef ici, on le fera au prochain touchstart
-    }
+        return;
-    
+      }
-    // Vérifier qu'on a bien des coordonnées de départ
-    if (touchStartXRef.current === null || touchStartYRef.current === null) return;
-    // Ne pas gérer si Photoswipe est ouvert
-    if (pswpRef.current) return;
-    // Ne pas gérer si la page est zoomée (zoom natif)
-    if (isZoomed()) return;
 
-    const touchEndX = e.changedTouches[0].clientX;
+      // Vérifier qu'on a bien des coordonnées de départ
-    const touchEndY = e.changedTouches[0].clientY;
+      if (touchStartXRef.current === null || touchStartYRef.current === null) return;
-    const deltaX = touchEndX - touchStartXRef.current;
+      // Ne pas gérer si Photoswipe est ouvert
-    const deltaY = touchEndY - touchStartYRef.current;
+      if (pswpRef.current) return;
+      // Ne pas gérer si la page est zoomée (zoom natif)
+      if (isZoomed()) return;
 
-    // Si le déplacement vertical est plus important, on ignore (scroll)
+      const touchEndX = e.changedTouches[0].clientX;
-    if (Math.abs(deltaY) > Math.abs(deltaX)) {
+      const touchEndY = e.changedTouches[0].clientY;
-      touchStartXRef.current = null;
+      const deltaX = touchEndX - touchStartXRef.current;
-      touchStartYRef.current = null;
+      const deltaY = touchEndY - touchStartYRef.current;
-      return;
-    }
 
-    // Seuil de 50px pour changer de page
+      // Si le déplacement vertical est plus important, on ignore (scroll)
-    if (Math.abs(deltaX) > 50) {
+      if (Math.abs(deltaY) > Math.abs(deltaX)) {
-      if (deltaX > 0) {
+        touchStartXRef.current = null;
-        // Swipe vers la droite
+        touchStartYRef.current = null;
-        if (isRTL) {
+        return;
-          onNextPage();
+      }
+
+      // Seuil de 50px pour changer de page
+      if (Math.abs(deltaX) > 50) {
+        if (deltaX > 0) {
+          // Swipe vers la droite
+          if (isRTL) {
+            onNextPage();
+          } else {
+            onPreviousPage();
+          }
         } else {
-          onPreviousPage();
+          // Swipe vers la gauche
-        }
+          if (isRTL) {
-      } else {
+            onPreviousPage();
-        // Swipe vers la gauche
+          } else {
-        if (isRTL) {
+            onNextPage();
-          onPreviousPage();
+          }
-        } else {
-          onNextPage();
         }
       }
-    }
 
-    touchStartXRef.current = null;
+      touchStartXRef.current = null;
-    touchStartYRef.current = null;
+      touchStartYRef.current = null;
-  }, [onNextPage, onPreviousPage, isRTL, pswpRef, isZoomed]);
+    },
+    [onNextPage, onPreviousPage, isRTL, pswpRef, isZoomed]
+  );
 
   // Setup touch event listeners
   useEffect(() => {
     window.addEventListener("touchstart", handleTouchStart);
     window.addEventListener("touchmove", handleTouchMove);
     window.addEventListener("touchend", handleTouchEnd);
-    
+
     return () => {
       window.removeEventListener("touchstart", handleTouchStart);
       window.removeEventListener("touchmove", handleTouchMove);

src/components/series/BookGrid.tsx

@@ -48,8 +48,9 @@ function BookCard({ book, onBookClick, onSuccess, isCompact }: BookCardProps) {
         <BookCover
           book={book}
           alt={t("books.coverAlt", {
-            title: book.metadata.title || 
+            title:
-              (book.metadata.number 
+              book.metadata.title ||
+              (book.metadata.number
                 ? t("navigation.volume", { number: book.metadata.number })
                 : ""),
           })}

src/components/series/BookList.tsx

@@ -75,10 +75,9 @@ function BookListItem({ book, onBookClick, onSuccess, isCompact = false }: BookL
   };
 
   const statusInfo = getStatusInfo();
-  const title = book.metadata.title || 
+  const title =
-    (book.metadata.number 
+    book.metadata.title ||
-      ? t("navigation.volume", { number: book.metadata.number })
+    (book.metadata.number ? t("navigation.volume", { number: book.metadata.number }) : book.name);
-      : book.name);
 
   if (isCompact) {
     return (
@@ -118,7 +117,12 @@ function BookListItem({ book, onBookClick, onSuccess, isCompact = false }: BookL
             >
               {title}
             </h3>
-            <span className={cn("px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0", statusInfo.className)}>
+            <span
+              className={cn(
+                "px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0",
+                statusInfo.className
+              )}
+            >
               {statusInfo.label}
             </span>
           </div>
@@ -137,9 +141,7 @@ function BookListItem({ book, onBookClick, onSuccess, isCompact = false }: BookL
             {book.metadata.authors && book.metadata.authors.length > 0 && (
               <div className="flex items-center gap-1 hidden sm:flex">
                 <User className="h-3 w-3" />
-                <span className="line-clamp-1">
+                <span className="line-clamp-1">{book.metadata.authors[0].name}</span>
-                  {book.metadata.authors[0].name}
-                </span>
               </div>
             )}
           </div>
@@ -192,9 +194,14 @@ function BookListItem({ book, onBookClick, onSuccess, isCompact = false }: BookL
               </p>
             )}
           </div>
-          
+
           {/* Badge de statut */}
-          <span className={cn("px-2 py-1 rounded-full text-xs font-medium flex-shrink-0", statusInfo.className)}>
+          <span
+            className={cn(
+              "px-2 py-1 rounded-full text-xs font-medium flex-shrink-0",
+              statusInfo.className
+            )}
+          >
             {statusInfo.label}
           </span>
         </div>
@@ -221,7 +228,7 @@ function BookListItem({ book, onBookClick, onSuccess, isCompact = false }: BookL
             <div className="flex items-center gap-1">
               <User className="h-3 w-3" />
               <span className="line-clamp-1">
-                {book.metadata.authors.map(a => a.name).join(", ")}
+                {book.metadata.authors.map((a) => a.name).join(", ")}
               </span>
             </div>
           )}
@@ -343,4 +350,3 @@ export function BookList({ books, onBookClick, isCompact = false }: BookListProp
     </div>
   );
 }
-

src/components/series/PaginatedBookGrid.tsx

@@ -37,26 +37,26 @@ export function PaginatedBookGrid({
   const { isCompact, itemsPerPage, viewMode } = useDisplayPreferences();
   const { t } = useTranslate();
 
-  const updateUrlParams = useCallback(async (
+  const updateUrlParams = useCallback(
-    updates: Record<string, string | null>,
+    async (updates: Record<string, string | null>, replace: boolean = false) => {
-    replace: boolean = false
+      const params = new URLSearchParams(searchParams.toString());
-  ) => {
-    const params = new URLSearchParams(searchParams.toString());
 
-    Object.entries(updates).forEach(([key, value]) => {
+      Object.entries(updates).forEach(([key, value]) => {
-      if (value === null) {
+        if (value === null) {
-        params.delete(key);
+          params.delete(key);
+        } else {
+          params.set(key, value);
+        }
+      });
+
+      if (replace) {
+        await router.replace(`${pathname}?${params.toString()}`);
       } else {
-        params.set(key, value);
+        await router.push(`${pathname}?${params.toString()}`);
       }
-    });
+    },
-
+    [router, pathname, searchParams]
-    if (replace) {
+  );
-      await router.replace(`${pathname}?${params.toString()}`);
-    } else {
-      await router.push(`${pathname}?${params.toString()}`);
-    }
-  }, [router, pathname, searchParams]);
 
   // Update local state when prop changes
   useEffect(() => {

src/components/series/SeriesHeader.tsx

@@ -157,17 +157,18 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
                 {statusInfo.label}
               </StatusBadge>
               <span className="text-sm text-white/80">
-                {series.booksCount === 1 
+                {series.booksCount === 1
                   ? t("series.header.books", { count: series.booksCount })
-                  : t("series.header.books_plural", { count: series.booksCount })
+                  : t("series.header.books_plural", { count: series.booksCount })}
-                }
               </span>
               <IconButton
                 variant="ghost"
                 size="icon"
                 icon={isFavorite ? Star : StarOff}
                 onClick={handleToggleFavorite}
-                tooltip={t(isFavorite ? "series.header.favorite.remove" : "series.header.favorite.add")}
+                tooltip={t(
+                  isFavorite ? "series.header.favorite.remove" : "series.header.favorite.add"
+                )}
                 className="text-white hover:text-white"
                 iconClassName={isFavorite ? "fill-yellow-400 text-yellow-400" : ""}
               />

src/components/settings/AdvancedSettings.tsx

@@ -116,9 +116,7 @@ export function AdvancedSettings() {
             <Shield className="h-5 w-5 text-primary" />
             <CardTitle className="text-lg">{t("settings.advanced.circuitBreaker.title")}</CardTitle>
           </div>
-          <CardDescription>
+          <CardDescription>{t("settings.advanced.circuitBreaker.description")}</CardDescription>
-            {t("settings.advanced.circuitBreaker.description")}
-          </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
           <SliderControl

src/components/settings/BackgroundSettings.tsx

@@ -147,7 +147,6 @@ export function BackgroundSettings() {
     }
   };
 
-
   const handleLibraryToggle = async (libraryId: string) => {
     const newSelection = selectedLibraries.includes(libraryId)
       ? selectedLibraries.filter((id) => id !== libraryId)
@@ -174,7 +173,6 @@ export function BackgroundSettings() {
         <CardDescription>{t("settings.background.description")}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
-
         <div className="space-y-6">
           {/* Type de background */}
           <div className="space-y-3">
@@ -258,7 +256,9 @@ export function BackgroundSettings() {
                   onChange={(e) => setCustomImageUrl(e.target.value)}
                   className="flex-1"
                 />
-                <Button onClick={handleCustomImageSave}>{t("settings.background.image.save")}</Button>
+                <Button onClick={handleCustomImageSave}>
+                  {t("settings.background.image.save")}
+                </Button>
               </div>
               <p className="text-xs text-muted-foreground">
                 {t("settings.background.image.description")}
@@ -326,4 +326,3 @@ export function BackgroundSettings() {
     </Card>
   );
 }
-

src/components/settings/CacheSettings.tsx

@@ -129,7 +129,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
             if (response) {
               const blob = await response.clone().blob();
               totalSize += blob.size;
-              
+
               // Calculer la taille du cache API séparément
               if (cacheName.includes("api")) {
                 apiSize += blob.size;
@@ -214,19 +214,24 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
     try {
       const urlObj = new URL(url);
       const path = urlObj.pathname;
-      const segments = path.split('/').filter(Boolean);
+      const segments = path.split("/").filter(Boolean);
-      
+
-      if (segments.length === 0) return '/';
+      if (segments.length === 0) return "/";
-      
+
       // Pour /api/komga/images, grouper par type (series/books)
-      if (segments[0] === 'api' && segments[1] === 'komga' && segments[2] === 'images' && segments[3]) {
+      if (
+        segments[0] === "api" &&
+        segments[1] === "komga" &&
+        segments[2] === "images" &&
+        segments[3]
+      ) {
         return `/${segments[0]}/${segments[1]}/${segments[2]}/${segments[3]}`;
       }
-      
+
       // Pour les autres, garder juste le premier segment
       return `/${segments[0]}`;
     } catch {
-      return 'Autres';
+      return "Autres";
     }
   };
 
@@ -255,8 +260,8 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
     // Trier par date (le plus récent en premier) basé sur le paramètre v
     Object.keys(grouped).forEach((key) => {
       grouped[key].sort((a, b) => {
-        const aVersion = new URL(a.url).searchParams.get('v') || '0';
+        const aVersion = new URL(a.url).searchParams.get("v") || "0";
-        const bVersion = new URL(b.url).searchParams.get('v') || '0';
+        const bVersion = new URL(b.url).searchParams.get("v") || "0";
         return Number(bVersion) - Number(aVersion);
       });
     });
@@ -363,13 +368,13 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
       if ("serviceWorker" in navigator && "caches" in window) {
         const cacheNames = await caches.keys();
         await Promise.all(cacheNames.map((cacheName) => caches.delete(cacheName)));
-        
+
         // Forcer la mise à jour du service worker
         const registrations = await navigator.serviceWorker.getRegistrations();
         for (const registration of registrations) {
           await registration.unregister();
         }
-        
+
         toast({
           title: t("settings.cache.title"),
           description: t("settings.cache.messages.serviceWorkerCleared"),
@@ -383,7 +388,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
         if (showSwEntries) {
           await fetchSwCacheEntries();
         }
-        
+
         // Recharger la page après 1 seconde pour réenregistrer le SW
         setTimeout(() => {
           window.location.reload();
@@ -458,7 +463,6 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
         <CardDescription>{t("settings.cache.description")}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
-
         <div className="flex items-center justify-between mb-4">
           <div className="space-y-0.5">
             <Label htmlFor="cache-mode">{t("settings.cache.mode.label")}</Label>
@@ -488,7 +492,9 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
                     </div>
                   </div>
                 ) : (
-                  <div className="text-sm text-muted-foreground">{t("settings.cache.size.error")}</div>
+                  <div className="text-sm text-muted-foreground">
+                    {t("settings.cache.size.error")}
+                  </div>
                 )}
               </div>
 
@@ -497,7 +503,9 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
                 {swCacheSize !== null ? (
                   <div className="text-sm text-muted-foreground">{formatBytes(swCacheSize)}</div>
                 ) : (
-                  <div className="text-sm text-muted-foreground">{t("settings.cache.size.error")}</div>
+                  <div className="text-sm text-muted-foreground">
+                    {t("settings.cache.size.error")}
+                  </div>
                 )}
               </div>
 
@@ -506,7 +514,9 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
                 {apiCacheSize !== null ? (
                   <div className="text-sm text-muted-foreground">{formatBytes(apiCacheSize)}</div>
                 ) : (
-                  <div className="text-sm text-muted-foreground">{t("settings.cache.size.error")}</div>
+                  <div className="text-sm text-muted-foreground">
+                    {t("settings.cache.size.error")}
+                  </div>
                 )}
               </div>
             </div>
@@ -525,11 +535,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
               <List className="h-4 w-4" />
               {t("settings.cache.entries.serverTitle")}
             </span>
-            {showEntries ? (
+            {showEntries ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-              <ChevronUp className="h-4 w-4" />
-            ) : (
-              <ChevronDown className="h-4 w-4" />
-            )}
           </Button>
 
           {showEntries && (
@@ -569,7 +575,10 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
                             >
                               {getTimeRemaining(entry.expiry)}
                             </div>
-                            <div className="text-muted-foreground/70" title={formatDate(entry.expiry)}>
+                            <div
+                              className="text-muted-foreground/70"
+                              title={formatDate(entry.expiry)}
+                            >
                               {new Date(entry.expiry).toLocaleDateString()}
                             </div>
                           </div>
@@ -649,72 +658,90 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
                                 <div className="space-y-1 pl-2">
                                   {(() => {
                                     const versionGroups = groupVersions(entries);
-                                    return Object.entries(versionGroups).map(([baseUrl, versions]) => {
+                                    return Object.entries(versionGroups).map(
-                                      const hasMultipleVersions = versions.length > 1;
+                                      ([baseUrl, versions]) => {
-                                      const isVersionExpanded = expandedVersions[baseUrl];
+                                        const hasMultipleVersions = versions.length > 1;
-                                      const totalSize = versions.reduce((sum, v) => sum + v.size, 0);
+                                        const isVersionExpanded = expandedVersions[baseUrl];
+                                        const totalSize = versions.reduce(
+                                          (sum, v) => sum + v.size,
+                                          0
+                                        );
 
-                                      if (!hasMultipleVersions) {
+                                        if (!hasMultipleVersions) {
-                                        const entry = versions[0];
+                                          const entry = versions[0];
-                                        return (
+                                          return (
-                                          <div key={baseUrl} className="py-1">
+                                            <div key={baseUrl} className="py-1">
-                                            <div className="flex items-start justify-between gap-2">
+                                              <div className="flex items-start justify-between gap-2">
-                                              <div className="flex-1 min-w-0">
+                                                <div className="flex-1 min-w-0">
-                                                <div className="font-mono text-xs truncate text-muted-foreground" title={entry.url}>
+                                                  <div
-                                                  {entry.url.replace(/^https?:\/\/[^/]+/, "")}
+                                                    className="font-mono text-xs truncate text-muted-foreground"
+                                                    title={entry.url}
+                                                  >
+                                                    {entry.url.replace(/^https?:\/\/[^/]+/, "")}
+                                                  </div>
+                                                </div>
+                                                <div className="text-xs text-muted-foreground whitespace-nowrap">
+                                                  {formatBytes(entry.size)}
                                                 </div>
                                               </div>
-                                              <div className="text-xs text-muted-foreground whitespace-nowrap">
-                                                {formatBytes(entry.size)}
-                                              </div>
                                             </div>
+                                          );
+                                        }
+
+                                        return (
+                                          <div key={baseUrl} className="py-1">
+                                            <button
+                                              type="button"
+                                              onClick={() => toggleVersions(baseUrl)}
+                                              className="w-full flex items-start justify-between gap-2 hover:bg-muted/30 rounded p-1 -m-1 transition-colors"
+                                            >
+                                              <div className="flex-1 min-w-0 flex items-center gap-1">
+                                                {isVersionExpanded ? (
+                                                  <ChevronDown className="h-3 w-3 flex-shrink-0" />
+                                                ) : (
+                                                  <ChevronUp className="h-3 w-3 flex-shrink-0" />
+                                                )}
+                                                <div
+                                                  className="font-mono text-xs truncate text-muted-foreground"
+                                                  title={baseUrl}
+                                                >
+                                                  {baseUrl}
+                                                </div>
+                                                <span className="inline-flex items-center rounded-full bg-orange-500/10 px-1.5 py-0.5 text-xs font-medium text-orange-600 dark:text-orange-400 flex-shrink-0">
+                                                  {versions.length} versions
+                                                </span>
+                                              </div>
+                                              <div className="text-xs text-muted-foreground whitespace-nowrap font-medium">
+                                                {formatBytes(totalSize)}
+                                              </div>
+                                            </button>
+                                            {isVersionExpanded && (
+                                              <div className="pl-4 mt-1 space-y-1">
+                                                {versions.map((version, vIdx) => (
+                                                  <div
+                                                    key={vIdx}
+                                                    className="py-0.5 flex items-start justify-between gap-2"
+                                                  >
+                                                    <div className="flex-1 min-w-0">
+                                                      <div
+                                                        className="font-mono text-xs truncate text-muted-foreground/70"
+                                                        title={version.url}
+                                                      >
+                                                        {new URL(version.url).search ||
+                                                          "(no version)"}
+                                                      </div>
+                                                    </div>
+                                                    <div className="text-xs text-muted-foreground/70 whitespace-nowrap">
+                                                      {formatBytes(version.size)}
+                                                    </div>
+                                                  </div>
+                                                ))}
+                                              </div>
+                                            )}
                                           </div>
                                         );
                                       }
-
+                                    );
-                                      return (
-                                        <div key={baseUrl} className="py-1">
-                                          <button
-                                            type="button"
-                                            onClick={() => toggleVersions(baseUrl)}
-                                            className="w-full flex items-start justify-between gap-2 hover:bg-muted/30 rounded p-1 -m-1 transition-colors"
-                                          >
-                                            <div className="flex-1 min-w-0 flex items-center gap-1">
-                                              {isVersionExpanded ? (
-                                                <ChevronDown className="h-3 w-3 flex-shrink-0" />
-                                              ) : (
-                                                <ChevronUp className="h-3 w-3 flex-shrink-0" />
-                                              )}
-                                              <div className="font-mono text-xs truncate text-muted-foreground" title={baseUrl}>
-                                                {baseUrl}
-                                              </div>
-                                              <span className="inline-flex items-center rounded-full bg-orange-500/10 px-1.5 py-0.5 text-xs font-medium text-orange-600 dark:text-orange-400 flex-shrink-0">
-                                                {versions.length} versions
-                                              </span>
-                                            </div>
-                                            <div className="text-xs text-muted-foreground whitespace-nowrap font-medium">
-                                              {formatBytes(totalSize)}
-                                            </div>
-                                          </button>
-                                          {isVersionExpanded && (
-                                            <div className="pl-4 mt-1 space-y-1">
-                                              {versions.map((version, vIdx) => (
-                                                <div key={vIdx} className="py-0.5 flex items-start justify-between gap-2">
-                                                  <div className="flex-1 min-w-0">
-                                                    <div className="font-mono text-xs truncate text-muted-foreground/70" title={version.url}>
-                                                      {new URL(version.url).search || "(no version)"}
-                                                    </div>
-                                                  </div>
-                                                  <div className="text-xs text-muted-foreground/70 whitespace-nowrap">
-                                                    {formatBytes(version.size)}
-                                                  </div>
-                                                </div>
-                                              ))}
-                                            </div>
-                                          )}
-                                        </div>
-                                      );
-                                    });
                                   })()}
                                 </div>
                               )}
@@ -833,12 +860,24 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
                 onChange={handleTTLChange}
                 className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
               >
-                <option value="0">{t("settings.cache.ttl.imageCacheMaxAge.options.noCache")}</option>
+                <option value="0">
-                <option value="3600">{t("settings.cache.ttl.imageCacheMaxAge.options.oneHour")}</option>
+                  {t("settings.cache.ttl.imageCacheMaxAge.options.noCache")}
-                <option value="86400">{t("settings.cache.ttl.imageCacheMaxAge.options.oneDay")}</option>
+                </option>
-                <option value="604800">{t("settings.cache.ttl.imageCacheMaxAge.options.oneWeek")}</option>
+                <option value="3600">
-                <option value="2592000">{t("settings.cache.ttl.imageCacheMaxAge.options.oneMonth")}</option>
+                  {t("settings.cache.ttl.imageCacheMaxAge.options.oneHour")}
-                <option value="31536000">{t("settings.cache.ttl.imageCacheMaxAge.options.oneYear")}</option>
+                </option>
+                <option value="86400">
+                  {t("settings.cache.ttl.imageCacheMaxAge.options.oneDay")}
+                </option>
+                <option value="604800">
+                  {t("settings.cache.ttl.imageCacheMaxAge.options.oneWeek")}
+                </option>
+                <option value="2592000">
+                  {t("settings.cache.ttl.imageCacheMaxAge.options.oneMonth")}
+                </option>
+                <option value="31536000">
+                  {t("settings.cache.ttl.imageCacheMaxAge.options.oneYear")}
+                </option>
               </select>
             </div>
           </div>

src/components/settings/ClientSettings.tsx

@@ -21,7 +21,7 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
   return (
     <div className="container mx-auto px-4 py-8 space-y-6">
       <h1 className="text-3xl font-bold">{t("settings.title")}</h1>
-      
+
       <Tabs defaultValue="display" className="w-full">
         <TabsList className="grid w-full grid-cols-3">
           <TabsTrigger value="display" className="flex items-center gap-2">

src/components/settings/KomgaSettings.tsx

@@ -155,7 +155,6 @@ export function KomgaSettings({ initialConfig }: KomgaSettingsProps) {
         <CardDescription>{t("settings.komga.description")}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
-
         {!shouldShowForm ? (
           <div className="space-y-4">
             <div className="space-y-3">

src/components/skeletons/OptimizedSkeletons.tsx

@@ -8,16 +8,7 @@ interface OptimizedSkeletonProps {
 }
 
 export function OptimizedSkeleton({ className, children }: OptimizedSkeletonProps) {
-  return (
+  return <div className={cn("animate-pulse rounded-md bg-muted/50", className)}>{children}</div>;
-    <div
-      className={cn(
-        "animate-pulse rounded-md bg-muted/50",
-        className
-      )}
-    >
-      {children}
-    </div>
-  );
 }
 
 export function HomePageSkeleton() {

src/components/ui/ErrorMessage.tsx

@@ -13,9 +13,9 @@ interface ErrorMessageProps {
   retryLabel?: string;
 }
 
-export const ErrorMessage = ({ 
+export const ErrorMessage = ({
-  errorCode, 
+  errorCode,
-  error, 
+  error,
   variant = "default",
   onRetry,
   retryLabel,
@@ -37,12 +37,7 @@ export const ErrorMessage = ({
         <AlertCircle className="h-4 w-4" />
         <p>{message}</p>
         {onRetry && (
-          <Button 
+          <Button onClick={onRetry} variant="ghost" size="sm" className="ml-auto">
-            onClick={onRetry}
-            variant="ghost" 
-            size="sm"
-            className="ml-auto"
-          >
             <RefreshCw className="h-3 w-3" />
           </Button>
         )}
@@ -68,11 +63,11 @@ export const ErrorMessage = ({
             {t("errors.GENERIC_ERROR")}
           </h3>
           <p className="text-sm text-destructive/90 dark:text-red-300/90">{message}</p>
-          
+
           {onRetry && (
-            <Button 
+            <Button
               onClick={onRetry}
-              variant="outline" 
+              variant="outline"
               size="sm"
               className="mt-4 border-destructive/30 hover:bg-destructive/10"
             >

src/components/ui/badge.tsx

@@ -24,13 +24,10 @@ const badgeVariants = cva(
 );
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-    VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
 }
 
 export { Badge, badgeVariants };

src/components/ui/book-cover.tsx

@@ -138,8 +138,8 @@ export function BookCover({
           {showOverlay && overlayVariant === "default" && (
             <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4 space-y-2 translate-y-full group-hover:translate-y-0 transition-transform duration-200">
               <p className="text-sm font-medium text-white text-left line-clamp-2">
-                {book.metadata.title || 
+                {book.metadata.title ||
-                  (book.metadata.number 
+                  (book.metadata.number
                     ? t("navigation.volume", { number: book.metadata.number })
                     : "")}
               </p>
@@ -155,8 +155,8 @@ export function BookCover({
       {showOverlay && overlayVariant === "home" && (
         <div className="absolute inset-0 bg-black/60 opacity-0 hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3">
           <h3 className="font-medium text-sm text-white line-clamp-2">
-            {book.metadata.title || 
+            {book.metadata.title ||
-              (book.metadata.number 
+              (book.metadata.number
                 ? t("navigation.volume", { number: book.metadata.number })
                 : "")}
           </h3>

src/components/ui/book-offline-button.tsx

@@ -273,8 +273,8 @@ export function BookOfflineButton({ book, className }: BookOfflineButtonProps) {
   const buttonTitle = isLoading
     ? `Téléchargement en cours (${Math.round(downloadProgress)}%)`
     : isAvailableOffline
-    ? "Supprimer hors ligne"
+      ? "Supprimer hors ligne"
-    : "Disponible hors ligne";
+      : "Disponible hors ligne";
 
   return (
     <Button

src/components/ui/button.tsx

@@ -9,9 +9,12 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-primary/90 backdrop-blur-md text-primary-foreground hover:bg-primary/80",
-        destructive: "bg-destructive/90 backdrop-blur-md text-destructive-foreground hover:bg-destructive/80",
+        destructive:
-        outline: "border border-input bg-background/70 backdrop-blur-md hover:bg-accent/80 hover:text-accent-foreground",
+          "bg-destructive/90 backdrop-blur-md text-destructive-foreground hover:bg-destructive/80",
-        secondary: "bg-secondary/80 backdrop-blur-md text-secondary-foreground hover:bg-secondary/70",
+        outline:
+          "border border-input bg-background/70 backdrop-blur-md hover:bg-accent/80 hover:text-accent-foreground",
+        secondary:
+          "bg-secondary/80 backdrop-blur-md text-secondary-foreground hover:bg-secondary/70",
         ghost: "hover:bg-accent/80 hover:backdrop-blur-md hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
@@ -30,8 +33,7 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
 

src/components/ui/card.tsx

@@ -6,7 +6,10 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm", className)}
+      className={cn(
+        "rounded-lg border bg-card/70 backdrop-blur-md text-card-foreground shadow-sm",
+        className
+      )}
       {...props}
     />
   )

src/components/ui/checkbox.tsx

@@ -26,4 +26,3 @@ const Checkbox = React.forwardRef<
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };
-

src/components/ui/container.tsx

@@ -24,8 +24,7 @@ const containerVariants = cva("mx-auto px-2 sm:px-6 lg:px-8", {
 });
 
 export interface ContainerProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {
-    VariantProps<typeof containerVariants> {
   as?: React.ElementType;
 }
 
@@ -44,4 +43,3 @@ const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
 Container.displayName = "Container";
 
 export { Container, containerVariants };
-

src/components/ui/cover-client.tsx

@@ -56,7 +56,7 @@ export const CoverClient = ({
       const timer = setTimeout(() => {
         setImageError(false);
         setIsLoading(true);
-        setRetryCount(prev => prev + 1);
+        setRetryCount((prev) => prev + 1);
       }, 2000);
 
       return () => clearTimeout(timer);
@@ -80,9 +80,10 @@ export const CoverClient = ({
   };
 
   // Ajouter un timestamp pour forcer le rechargement en cas de retry
-  const imageUrlWithRetry = retryCount > 0 
+  const imageUrlWithRetry =
-    ? `${imageUrl}${imageUrl.includes('?') ? '&' : '?'}retry=${retryCount}`
+    retryCount > 0
-    : imageUrl;
+      ? `${imageUrl}${imageUrl.includes("?") ? "&" : "?"}retry=${retryCount}`
+      : imageUrl;
 
   if (imageError) {
     return (

src/components/ui/icon-button.tsx

@@ -30,4 +30,3 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
 IconButton.displayName = "IconButton";
 
 export { IconButton };
-

src/components/ui/label.tsx

@@ -8,18 +8,12 @@ const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 
-interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>,
+interface LabelProps
-  VariantProps<typeof labelVariants> {}
+  extends React.LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelVariants> {}
 
-const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ className, ...props }, ref) => (
-  ({ className, ...props }, ref) => (
+  <label ref={ref} className={cn(labelVariants(), className)} {...props} />
-    <label
+));
-      ref={ref}
-      className={cn(labelVariants(), className)}
-      {...props}
-    />
-  )
-);
 Label.displayName = "Label";
 
 export { Label };