feat: amélioration de la navigation du Reader + correction affichage des chapitres non visibles

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

@@ -3,7 +3,17 @@
         <button @click="onPrevious" :disabled="isFirstPage">
             <ChevronLeftIcon class="h-6 w-6" />
         </button>
-        <div class="page-info"> {{ currentPage + 1 }} / {{ totalPages }} </div>
+
+        <div class="controls-center">
+            <div class="page-info"> {{ currentPage + 1 }} / {{ totalPages }} </div>
+            <div class="chapter-selector-wrapper" v-if="availableChapters.length > 0">
+                <ChapterSelector
+                    :available-chapters="availableChapters"
+                    @chapter-selected="onChapterSelected"
+                />
+            </div>
+        </div>
+
         <button @click="onNext" :disabled="isLastPage">
             <ChevronRightIcon class="h-6 w-6" />
         </button>
@@ -12,6 +22,7 @@
 
 <script setup>
     import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
+import ChapterSelector from './ChapterSelector.vue';
 
     defineProps({
         currentPage: {
@@ -29,13 +40,18 @@
         isLastPage: {
             type: Boolean,
             required: true
+        },
+        availableChapters: {
+            type: Array,
+            default: () => []
         }
     });
 
-    const emit = defineEmits(['previous', 'next']);
+    const emit = defineEmits(['previous', 'next', 'chapter-selected']);
 
     const onPrevious = () => emit('previous');
     const onNext = () => emit('next');
+    const onChapterSelected = (chapterId) => emit('chapter-selected', chapterId);
 </script>
 
 <style lang="postcss" scoped>
@@ -43,10 +59,18 @@
         @apply flex items-center justify-between p-4 bg-gray-800;
     }
 
+    .controls-center {
+        @apply flex flex-col items-center space-y-2;
+    }
+
     .page-info {
         @apply text-lg font-medium;
     }
 
+    .chapter-selector-wrapper {
+        @apply min-w-[200px];
+    }
+
     button {
         @apply px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors;
     }