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

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

@@ -0,0 +1,89 @@
+<template>
+    <div class="chapter-navigation">
+        <button
+            v-if="hasPreviousChapter"
+            @click="goToPreviousChapter"
+            class="nav-button nav-button-previous"
+            :disabled="isLoading"
+            title="Chapitre précédent"
+        >
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+            </svg>
+            <span class="hidden sm:inline">Chapitre précédent</span>
+            <span class="sm:hidden">Précédent</span>
+        </button>
+
+        <div class="flex-1"></div>
+
+        <button
+            v-if="hasNextChapter"
+            @click="goToNextChapter"
+            class="nav-button nav-button-next"
+            :disabled="isLoading"
+            title="Chapitre suivant"
+        >
+            <span class="hidden sm:inline">Chapitre suivant</span>
+            <span class="sm:hidden">Suivant</span>
+            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+        </button>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useReaderStore } from '../../application/store/readerStore';
+
+const store = useReaderStore();
+
+const props = defineProps({
+    position: {
+        type: String,
+        default: 'top', // 'top' ou 'bottom'
+        validator: (value) => ['top', 'bottom'].includes(value)
+    }
+});
+
+const hasPreviousChapter = computed(() => store.hasPreviousChapter);
+const hasNextChapter = computed(() => store.hasNextChapter);
+const isLoading = computed(() => store.isLoading);
+
+const goToPreviousChapter = async () => {
+    await store.goToPreviousChapter();
+};
+
+const goToNextChapter = async () => {
+    await store.goToNextChapter();
+};
+</script>
+
+<style lang="postcss" scoped>
+.chapter-navigation {
+    @apply flex items-center justify-between w-full px-4 py-3;
+    @apply bg-gray-800/80 backdrop-blur-sm border border-gray-700/50;
+    @apply rounded-lg shadow-lg;
+}
+
+.nav-button {
+    @apply flex items-center px-4 py-2;
+    @apply bg-blue-600 hover:bg-blue-700 text-white;
+    @apply rounded-md transition-all duration-200;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
+    @apply font-medium text-sm;
+}
+
+.nav-button:disabled {
+    @apply hover:bg-blue-600;
+}
+
+.nav-button-previous {
+    @apply mr-auto;
+}
+
+.nav-button-next {
+    @apply ml-auto;
+}
+</style>