style(reader): améliorer la toolbar et l'UI du mode scroll

- Corriger la troncature de la toolbar (max-height 4rem → 5rem)
- Animer la toolbar en translateY pour un effet "bloc uni" avec le header
- Corriger le bug d'auto-hide du header après switch simple → scroll
- Augmenter la taille du titre de chapitre dans la toolbar (text-sm font-medium)
- Harmoniser le bouton scroll-to-top avec le style des ToolbarButtons
- Ajouter support de prop `class` sur les labels de ToolbarSection

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

@@ -1,29 +1,5 @@
 <template>
     <div class="reader-settings">
-        <!-- Bouton pour ouvrir/fermer les paramètres -->
-        <Transition
-            enter-active-class="transition-all duration-300 ease-out"
-            leave-active-class="transition-all duration-300 ease-in"
-            enter-from-class="opacity-0 translate-y-5 scale-75"
-            enter-to-class="opacity-100 translate-y-0 scale-100"
-            leave-from-class="opacity-100 translate-y-0 scale-100"
-            leave-to-class="opacity-0 translate-y-5 scale-75"
-        >
-            <button
-                v-show="visible"
-                @click="toggleSettings"
-                class="settings-toggle"
-                :class="{ 'active': effectiveIsOpen }"
-                :data-external-control="forceOpen !== null"
-                title="Paramètres du lecteur"
-            >
-                <svg class="w-6 h-6" 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>
-        </Transition>
-
-        <!-- Panel des paramètres -->
         <Transition
             enter-active-class="transition-all duration-300 ease-out"
             leave-active-class="transition-all duration-300 ease-in"
@@ -32,63 +8,9 @@
             leave-from-class="opacity-100 translate-y-0 scale-100"
             leave-to-class="opacity-0 translate-y-4 scale-95"
         >
-            <div v-show="effectiveIsOpen" class="settings-panel" :data-external-control="forceOpen !== null" ref="panelRef">
-                <!-- Paramètres de base -->
-                <div class="settings-section">
-                    <h3 class="section-title">Mode de lecture</h3>
-                    <div class="setting-group">
-                        <button
-                            @click="onToggleReadingMode"
-                            class="setting-button"
-                            :class="{ 'active': readingMode === 'infinite' }"
-                        >
-                            <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="M4 6h16M4 12h16m-7 6h7" />
-                            </svg>
-                            {{ readingMode === 'single' ? 'Mode Infini' : 'Mode Simple' }}
-                        </button>
+            <div v-show="open" class="settings-panel" ref="panelRef">
 
-                        <button
-                            @click="onToggleReadingDirection"
-                            class="setting-button"
-                            :class="{ 'active': readingDirection === 'rtl' }"
-                        >
-                            <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="M7 16l-4-4m0 0l4-4m-4 4h18" />
-                            </svg>
-                            {{ readingDirection === 'ltr' ? 'RTL' : 'LTR' }}
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Contrôles du zoom -->
-                <div class="settings-section">
-                    <h3 class="section-title">Zoom</h3>
-                    <div class="zoom-controls">
-                        <button @click="onZoomOut" class="zoom-button" :disabled="zoom <= 0.5">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
-                            </svg>
-                        </button>
-                        <span class="zoom-display">{{ Math.round(zoom * 100) }}%</span>
-                        <button @click="onZoomIn" class="zoom-button" :disabled="zoom >= 2">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-                            </svg>
-                        </button>
-                    </div>
-                    <input
-                        type="range"
-                        :value="zoom"
-                        @input="onZoomChange($event.target.value)"
-                        min="0.5"
-                        max="2"
-                        step="0.1"
-                        class="zoom-slider"
-                    />
-                </div>
-
-                <!-- Paramètres des doubles pages -->
+                <!-- Paramètres des doubles pages (mobile uniquement) -->
                 <div class="settings-section" v-if="isMobile">
                     <h3 class="section-title">
                         <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -97,7 +19,6 @@
                         Doubles pages (Mobile)
                     </h3>
 
-                    <!-- Activation/désactivation -->
                     <div class="setting-item">
                         <label class="setting-label">
                             <input
@@ -113,7 +34,6 @@
                         </p>
                     </div>
 
-                    <!-- Mode d'affichage (si la détection automatique est activée) -->
                     <div v-if="doublePageSettings.autoDetect" class="setting-item">
                         <label class="setting-label">Mode d'affichage</label>
                         <select
@@ -125,22 +45,13 @@
                             <option value="scroll">Défilement horizontal</option>
                             <option value="normal">Affichage normal</option>
                         </select>
-
-                        <!-- Descriptions des modes -->
                         <p class="setting-description">
-                            <span v-if="doublePageMode === 'rotate'">
-                                Suggère de tourner l'appareil pour une meilleure lecture
-                            </span>
-                            <span v-else-if="doublePageMode === 'scroll'">
-                                Permet le défilement horizontal pour naviguer dans la page (commence à droite)
-                            </span>
-                            <span v-else>
-                                Affichage standard sans optimisation spéciale
-                            </span>
+                            <span v-if="doublePageMode === 'rotate'">Suggère de tourner l'appareil pour une meilleure lecture</span>
+                            <span v-else-if="doublePageMode === 'scroll'">Permet le défilement horizontal pour naviguer dans la page (commence à droite)</span>
+                            <span v-else>Affichage standard sans optimisation spéciale</span>
                         </p>
                     </div>
 
-                    <!-- Seuil de détection -->
                     <div v-if="doublePageSettings.autoDetect" class="setting-item">
                         <label class="setting-label">
                             Sensibilité de détection: {{ doublePageSettings.detectionThreshold.toFixed(1) }}
@@ -160,14 +71,14 @@
                     </div>
                 </div>
 
-                <!-- Actions -->
+                <!-- Réinitialiser -->
                 <div class="settings-section">
                     <div class="setting-actions">
                         <button @click="onResetPreferences" class="action-button reset">
                             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                             </svg>
-                            Réinitialiser
+                            Réinitialiser les préférences
                         </button>
                     </div>
                 </div>
@@ -177,21 +88,9 @@
 </template>
 
 <script setup>
-    import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+    import { computed, onMounted, onUnmounted, ref } from 'vue';
 
     const props = defineProps({
-        readingMode: {
-            type: String,
-            required: true
-        },
-        readingDirection: {
-            type: String,
-            required: true
-        },
-        zoom: {
-            type: Number,
-            required: true
-        },
         doublePageMode: {
             type: String,
             default: 'rotate'
@@ -204,138 +103,38 @@
                 detectionThreshold: 1.4
             })
         },
-        // Visibilité contrôlée par le parent
-        visible: {
+        open: {
             type: Boolean,
-            default: true
-        },
-        // Contrôle externe de l'ouverture (pour le bouton intégré)
-        forceOpen: {
-            type: Boolean,
-            default: null // null = pas de contrôle externe, true/false = contrôle externe
+            default: false
         }
     });
 
     const emit = defineEmits([
-        'toggleReadingMode',
-        'toggleReadingDirection',
-        'zoomIn',
-        'zoomOut',
-        'zoomChange',
+        'toggleSettings',
         'doublePageModeChange',
         'doublePageAutoDetectChange',
         'detectionThresholdChange',
         'resetPreferences',
-        'buttonClick' // Signaler l'interaction au parent
     ]);
 
-    const isOpen = ref(false);
     const isMobile = computed(() => window.innerWidth < 768);
     const panelRef = ref(null);
 
-    // Computed pour gérer l'état d'ouverture (interne ou externe)
-    const effectiveIsOpen = computed(() => {
-        // Si forceOpen est défini (true/false), on l'utilise
-        if (props.forceOpen !== null) {
-            return props.forceOpen;
-        }
-        // Sinon, on utilise l'état interne
-        return isOpen.value;
-    });
-
-    const toggleSettings = () => {
-        // Si on est en contrôle externe, ne pas permettre le toggle via le bouton flottant
-        if (props.forceOpen !== null) {
-            return;
-        }
-
-        isOpen.value = !isOpen.value;
-        // Signaler l'interaction au parent
-        emit('buttonClick');
-    };
-
-    // Fonction pour fermer le panel (utilisée par les clics externes et internes)
-    const closePanel = () => {
-        if (props.forceOpen !== null) {
-            // Mode externe : émettre l'événement pour que le parent gère la fermeture
-            emit('buttonClick');
-        } else {
-            // Mode interne : fermer directement
-            isOpen.value = false;
-            emit('buttonClick');
-        }
-    };
-
-    // Gestion des clics en dehors du panel
     const handleClickOutside = (event) => {
-        if (effectiveIsOpen.value && panelRef.value && !panelRef.value.contains(event.target)) {
-            // Vérifier que le clic n'est pas sur le bouton de toggle
-            const settingsButton = document.querySelector('.settings-toggle, .settings-button');
-            if (settingsButton && settingsButton.contains(event.target)) {
-                return; // Laisser le bouton gérer le toggle
-            }
-
-            closePanel();
+        if (props.open && panelRef.value && !panelRef.value.contains(event.target)) {
+            emit('toggleSettings');
         }
     };
 
-    // Watcher pour empêcher la fermeture du bouton quand le panel est ouvert
-    watch(
-        () => effectiveIsOpen.value,
-        (newIsOpen) => {
-            if (newIsOpen || !newIsOpen) {
-                // Signaler l'interaction à chaque changement
-                emit('buttonClick');
-            }
-        }
-    );
+    onMounted(() => document.addEventListener('click', handleClickOutside, true));
+    onUnmounted(() => document.removeEventListener('click', handleClickOutside, true));
 
-    // Cycle de vie des event listeners
-    onMounted(() => {
-        document.addEventListener('click', handleClickOutside, true);
-    });
-
-    onUnmounted(() => {
-        document.removeEventListener('click', handleClickOutside, true);
-    });
-
-    // Méthodes des événements (toutes signalent l'interaction)
-    const onToggleReadingMode = () => {
-        emit('toggleReadingMode');
-        emit('buttonClick');
-    };
-    const onToggleReadingDirection = () => {
-        emit('toggleReadingDirection');
-        emit('buttonClick');
-    };
-    const onZoomIn = () => {
-        emit('zoomIn');
-        emit('buttonClick');
-    };
-    const onZoomOut = () => {
-        emit('zoomOut');
-        emit('buttonClick');
-    };
-    const onZoomChange = (value) => {
-        emit('zoomChange', parseFloat(value));
-        emit('buttonClick');
-    };
-    const onDoublePageModeChange = (mode) => {
-        emit('doublePageModeChange', mode);
-        emit('buttonClick');
-    };
-    const onDoublePageAutoDetectChange = (enabled) => {
-        emit('doublePageAutoDetectChange', enabled);
-        emit('buttonClick');
-    };
-    const onDetectionThresholdChange = (threshold) => {
-        emit('detectionThresholdChange', parseFloat(threshold));
-        emit('buttonClick');
-    };
+    const onDoublePageModeChange = (mode) => emit('doublePageModeChange', mode);
+    const onDoublePageAutoDetectChange = (enabled) => emit('doublePageAutoDetectChange', enabled);
+    const onDetectionThresholdChange = (threshold) => emit('detectionThresholdChange', parseFloat(threshold));
     const onResetPreferences = () => {
         emit('resetPreferences');
-        emit('buttonClick');
-        isOpen.value = false;
+        emit('toggleSettings');
     };
 </script>
 
@@ -344,25 +143,10 @@
         @apply relative;
     }
 
-    .settings-toggle {
-        @apply fixed top-20 right-4 z-50 w-12 h-12 bg-gray-800 hover:bg-gray-700 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200;
-        @apply focus:outline-none focus:ring-2 focus:ring-blue-500;
-    }
-
-    /* Masquer le bouton flottant si on est en contrôle externe */
-    .settings-toggle[data-external-control="true"] {
-        display: none;
-    }
-
-    .settings-toggle.active {
-        @apply bg-blue-600 hover:bg-blue-700;
-    }
-
     .settings-panel {
-        @apply fixed top-36 right-4 z-40 w-80 max-w-[calc(100vw-2rem)] bg-gray-800 rounded-lg shadow-xl border border-gray-700 max-h-[80vh] overflow-y-auto;
+        @apply fixed top-20 right-4 z-40 w-80 max-w-[calc(100vw-2rem)] bg-gray-800 rounded-lg shadow-xl border border-gray-700 max-h-[80vh] overflow-y-auto;
     }
 
-    /* Responsive pour settings-panel */
     @media (max-width: 480px) {
         .settings-panel {
             width: 90vw;
@@ -371,14 +155,6 @@
         }
     }
 
-    /* Position adaptative pour le contrôle externe (bouton intégré) */
-    .settings-panel[data-external-control="true"] {
-        @apply top-32 left-1/2 right-auto;
-        transform: translateX(-50%);
-        /* S'assurer qu'il ne couvre pas les contrôles */
-        margin-top: 1rem;
-    }
-
     .settings-section {
         @apply p-4 border-b border-gray-700 last:border-b-0;
     }
@@ -387,44 +163,6 @@
         @apply text-white font-semibold text-lg mb-3 flex items-center;
     }
 
-    .setting-group {
-        @apply flex flex-col gap-2;
-    }
-
-    .setting-button {
-        @apply flex items-center gap-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors duration-200 text-sm;
-    }
-
-    .setting-button.active {
-        @apply bg-blue-600 hover:bg-blue-700;
-    }
-
-    /* Contrôles du zoom */
-    .zoom-controls {
-        @apply flex items-center gap-3 mb-2;
-    }
-
-    .zoom-button {
-        @apply w-8 h-8 bg-gray-700 hover:bg-gray-600 disabled:bg-gray-800 disabled:cursor-not-allowed text-white rounded flex items-center justify-center transition-colors;
-    }
-
-    .zoom-display {
-        @apply text-white font-mono text-sm min-w-[3rem] text-center;
-    }
-
-    .zoom-slider {
-        @apply w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer;
-    }
-
-    .zoom-slider::-webkit-slider-thumb {
-        @apply appearance-none w-4 h-4 bg-blue-600 rounded-full cursor-pointer;
-    }
-
-    .zoom-slider::-moz-range-thumb {
-        @apply w-4 h-4 bg-blue-600 rounded-full cursor-pointer border-none;
-    }
-
-    /* Paramètres des doubles pages */
     .setting-item {
         @apply mb-4 last:mb-0;
     }
@@ -457,7 +195,6 @@
         @apply text-gray-400 text-xs leading-relaxed;
     }
 
-    /* Actions */
     .setting-actions {
         @apply flex gap-2;
     }
@@ -470,23 +207,9 @@
         @apply bg-red-600 hover:bg-red-700 text-white;
     }
 
-    /* Responsive */
     @media (max-width: 768px) {
         .settings-panel {
             @apply right-2 w-72;
         }
-
-        .settings-toggle {
-            @apply right-2;
-        }
-    }
-
-    /* Pour les très petits écrans */
-    @media (max-width: 480px) {
-        .settings-toggle {
-            right: 0.25rem;
-            width: 2.5rem;
-            height: 2.5rem;
-        }
     }
 </style>