feat: mise à jour des règles de configuration pour l'API Platform et ajout de nouveaux composants pour le lecteur, incluant la gestion des pages infinies et des contrôles de lecture

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

@@ -0,0 +1,53 @@
+<template>
+    <div class="reader-settings">
+        <button @click="onToggleReadingMode">
+            {{ readingMode === 'single' ? 'Mode Infini' : 'Mode Simple' }}
+        </button>
+        <button @click="onToggleReadingDirection">
+            {{ readingDirection === 'ltr' ? 'RTL' : 'LTR' }}
+        </button>
+        <div class="zoom-controls">
+            <button @click="onZoomOut">-</button>
+            <span>{{ Math.round(zoom * 100) }}%</span>
+            <button @click="onZoomIn">+</button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    defineProps({
+        readingMode: {
+            type: String,
+            required: true
+        },
+        readingDirection: {
+            type: String,
+            required: true
+        },
+        zoom: {
+            type: Number,
+            required: true
+        }
+    });
+
+    const emit = defineEmits(['toggleReadingMode', 'toggleReadingDirection', 'zoomIn', 'zoomOut']);
+
+    const onToggleReadingMode = () => emit('toggleReadingMode');
+    const onToggleReadingDirection = () => emit('toggleReadingDirection');
+    const onZoomIn = () => emit('zoomIn');
+    const onZoomOut = () => emit('zoomOut');
+</script>
+
+<style lang="postcss" scoped>
+    .reader-settings {
+        @apply flex items-center justify-center gap-4 p-4 bg-gray-800;
+    }
+
+    .zoom-controls {
+        @apply flex items-center gap-2;
+    }
+
+    button {
+        @apply px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors;
+    }
+</style>