feat: ajout de la gestion des doubles pages pour le lecteur, incluant des paramètres de détection automatique, des modes d'affichage et des préférences sauvegardées. Amélioration de l'interface utilisateur pour intégrer ces nouvelles fonctionnalités.

assets/vue/app/domain/reader/presentation/components/ReaderControls.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="reader-controls">
-        <button @click="onPrevious" :disabled="isFirstPage">
+        <button @click="onPrevious" :disabled="isFirstPage" class="nav-button">
             <ChevronLeftIcon class="h-6 w-6" />
         </button>
 
@@ -14,9 +14,18 @@
             </div>
         </div>
 
-        <button @click="onNext" :disabled="isLastPage">
-            <ChevronRightIcon class="h-6 w-6" />
-        </button>
+        <div class="controls-right">
+            <!-- Bouton paramètres intégré -->
+            <button @click="onToggleSettings" class="settings-button" :class="{ 'active': settingsOpen }" title="Paramètres">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
+                </svg>
+            </button>
+
+            <button @click="onNext" :disabled="isLastPage" class="nav-button">
+                <ChevronRightIcon class="h-6 w-6" />
+            </button>
+        </div>
     </div>
 </template>
 
@@ -44,14 +53,19 @@ import ChapterSelector from './ChapterSelector.vue';
         availableChapters: {
             type: Array,
             default: () => []
+        },
+        settingsOpen: {
+            type: Boolean,
+            default: false
         }
     });
 
-    const emit = defineEmits(['previous', 'next', 'chapter-selected']);
+    const emit = defineEmits(['previous', 'next', 'chapter-selected', 'toggle-settings']);
 
     const onPrevious = () => emit('previous');
     const onNext = () => emit('next');
     const onChapterSelected = (chapterId) => emit('chapter-selected', chapterId);
+    const onToggleSettings = () => emit('toggle-settings');
 </script>
 
 <style lang="postcss" scoped>
@@ -59,23 +73,79 @@ import ChapterSelector from './ChapterSelector.vue';
         @apply flex items-center justify-between p-4 bg-gray-800;
     }
 
+    /* Responsive pour reader-controls */
+    @media (max-width: 480px) {
+        .reader-controls {
+            padding: 0.5rem;
+            gap: 0.25rem;
+        }
+    }
+
     .controls-center {
         @apply flex flex-col items-center space-y-2;
     }
 
+    /* Responsive pour controls-center */
+    @media (max-width: 480px) {
+        .controls-center {
+            gap: 0.25rem;
+        }
+    }
+
+    .controls-right {
+        @apply flex items-center gap-2;
+    }
+
+    /* Responsive pour controls-right */
+    @media (max-width: 480px) {
+        .controls-right {
+            gap: 0.25rem;
+        }
+    }
+
     .page-info {
         @apply text-lg font-medium;
     }
 
     .chapter-selector-wrapper {
-        @apply min-w-[200px];
+        @apply min-w-[120px] max-w-[200px];
     }
 
-    button {
+    /* Responsive pour chapter-selector-wrapper */
+    @media (max-width: 480px) {
+        .chapter-selector-wrapper {
+            min-width: 100px;
+            max-width: 60vw;
+        }
+    }
+
+    .nav-button {
         @apply px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors;
     }
 
-    button:disabled {
+    /* Responsive pour nav-button */
+    @media (max-width: 480px) {
+        .nav-button {
+            padding: 0.25rem 0.5rem;
+        }
+    }
+
+    .nav-button:disabled {
         @apply opacity-50 cursor-not-allowed;
     }
+
+    .settings-button {
+        @apply px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded transition-colors duration-200 flex items-center justify-center;
+    }
+
+    /* Responsive pour settings-button */
+    @media (max-width: 480px) {
+        .settings-button {
+            padding: 0.25rem 0.5rem;
+        }
+    }
+
+    .settings-button.active {
+        @apply bg-blue-600 hover:bg-blue-700;
+    }
 </style>