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/shared/stores/headerStore.js

@@ -4,19 +4,20 @@ export const useHeaderStore = defineStore('header', {
     state: () => ({
         isHeaderVisible: true,
         isAutoHideEnabled: false,
+        isReaderToolbarVisible: true,
+        isReaderToolbarAutoHideEnabled: false,
         lastScrollY: 0,
         scrollDirection: 'up'
     }),
 
     getters: {
         shouldShowHeader: (state) => {
-            // Si l'auto-hide n'est pas activé, toujours afficher le header
-            if (!state.isAutoHideEnabled) {
-                return true;
-            }
-
-            // Si l'auto-hide est activé, suivre la visibilité
+            if (!state.isAutoHideEnabled) return true;
             return state.isHeaderVisible;
+        },
+        shouldShowReaderToolbar: (state) => {
+            if (!state.isReaderToolbarAutoHideEnabled) return true;
+            return state.isReaderToolbarVisible;
         }
     },
 
@@ -27,35 +28,47 @@ export const useHeaderStore = defineStore('header', {
 
         disableAutoHide() {
             this.isAutoHideEnabled = false;
-            this.isHeaderVisible = true; // Toujours visible quand désactivé
+            this.isHeaderVisible = true;
         },
 
-                updateScrollDirection(scrollY) {
-            // Éviter les calculs inutiles si pas d'auto-hide
-            if (!this.isAutoHideEnabled) {
-                this.lastScrollY = scrollY;
-                return;
-            }
+        enableReaderToolbarAutoHide() {
+            this.isReaderToolbarAutoHideEnabled = true;
+            this.isReaderToolbarVisible = true;
+        },
 
-            // Détecter la direction du scroll avec un seuil pour éviter les micro-mouvements
+        disableReaderToolbarAutoHide() {
+            this.isReaderToolbarAutoHideEnabled = false;
+            this.isReaderToolbarVisible = true;
+        },
+
+        toggleReaderToolbarAutoHide() {
+            if (this.isReaderToolbarAutoHideEnabled) {
+                this.disableReaderToolbarAutoHide();
+                this.disableAutoHide();
+            } else {
+                this.enableReaderToolbarAutoHide();
+                this.enableAutoHide();
+            }
+        },
+
+        updateScrollDirection(scrollY) {
             const scrollDifference = Math.abs(scrollY - this.lastScrollY);
 
             if (scrollDifference < 5) {
-                // Mouvement trop petit, on ignore
                 return;
             }
 
             if (scrollY > this.lastScrollY && scrollY > 100) {
-                // Scroll vers le bas et suffisamment de scroll
                 if (this.scrollDirection !== 'down') {
                     this.scrollDirection = 'down';
-                    this.isHeaderVisible = false;
+                    if (this.isAutoHideEnabled) this.isHeaderVisible = false;
+                    if (this.isReaderToolbarAutoHideEnabled) this.isReaderToolbarVisible = false;
                 }
             } else if (scrollY < this.lastScrollY) {
-                // Scroll vers le haut
                 if (this.scrollDirection !== 'up') {
                     this.scrollDirection = 'up';
-                    this.isHeaderVisible = true;
+                    if (this.isAutoHideEnabled) this.isHeaderVisible = true;
+                    if (this.isReaderToolbarAutoHideEnabled) this.isReaderToolbarVisible = true;
                 }
             }