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

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

@@ -1,7 +1,7 @@
 <template>
     <div class="chapter-reader" :class="{ rtl: store.readingDirection === 'rtl' }">
         <div v-if="store.isLoading" class="loading">
-            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
         </div>
 
         <div v-else-if="store.error" class="error">
@@ -15,11 +15,13 @@
                 :total-pages="store.totalPages"
                 :is-first-page="store.isFirstPage"
                 :is-last-page="store.isLastPage"
+                :available-chapters="availableChapters"
                 @previous="store.previousPage"
-                @next="store.nextPage" />
+                @next="store.nextPage"
+                @chapter-selected="handleChapterSelected" />
 
             <template v-if="store.readingMode === 'single'">
-                <ReaderPage
+                <SingleModeReader
                     :page-data="store.currentPageData"
                     :page-number="store.currentPage + 1"
                     :zoom="store.zoom" />
@@ -42,16 +44,20 @@
 
 <script setup>
     import { onMounted, onUnmounted, watch } from 'vue';
-    import { useReaderStore } from '../../application/store/readerStore';
-    import ReaderControls from './ReaderControls.vue';
-    import ReaderPage from './ReaderPage.vue';
-    import ReaderSettings from './ReaderSettings.vue';
-    import InfiniteReader from './InfiniteReader.vue';
+import { useReaderStore } from '../../application/store/readerStore';
+import InfiniteReader from './InfiniteReader.vue';
+import ReaderControls from './ReaderControls.vue';
+import ReaderSettings from './ReaderSettings.vue';
+import SingleModeReader from './SingleModeReader.vue';
 
     const props = defineProps({
         chapterId: {
             type: String,
             required: true
+        },
+        availableChapters: {
+            type: Array,
+            default: () => []
         }
     });
 
@@ -83,6 +89,12 @@
         }
     };
 
+    const handleChapterSelected = (chapterId) => {
+        // La navigation est déjà gérée par le ChapterSelector via le store
+        // Cette fonction est là pour d'éventuelles actions supplémentaires
+        console.log('Chapitre sélectionné:', chapterId);
+    };
+
     watch(
         () => props.chapterId,
         newId => {