feat: ajout de la fonctionnalité de monitoring des mangas, incluant l'activation et la désactivation du suivi, la synchronisation des chapitres, et la mise à jour de l'API pour gérer ces nouvelles actions. Création de nouveaux composants Vue pour le rafraîchissement des chapitres et l'affichage des notifications. Intégration de tests unitaires pour valider le bon fonctionnement de ces fonctionnalités.

assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue

@@ -1,5 +1,8 @@
 <template>
     <div class="min-h-screen bg-gray-50">
+        <!-- Notifications Toast -->
+        <NotificationToast />
+
         <div v-if="errorDetails" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mx-4 mt-4">
             {{ errorDetails.message || 'Une erreur est survenue lors du chargement des détails.' }}
         </div>
@@ -63,6 +66,7 @@
     import {
     ArrowPathIcon,
     BookmarkIcon,
+    BookmarkSlashIcon,
     ChevronDoubleDownIcon,
     Cog6ToothIcon,
     DocumentArrowDownIcon,
@@ -75,7 +79,9 @@ import { useRoute } from 'vue-router';
 
     import { useMangaDetails } from '../composables/useMangaDetails';
 import { useMangaEdit } from '../composables/useMangaEdit';
+import { useMangaMonitoring } from '../composables/useMangaMonitoring';
 import { useMangaPreferredSources } from '../composables/useMangaPreferredSources';
+import { useMangaRefresh } from '../composables/useMangaRefresh';
 import { useMangaVolumes } from '../composables/useMangaVolumes';
 
     import MangaEditModal from '../components/MangaEditModal.vue';
@@ -84,7 +90,8 @@ import MangaPreferredSourcesModal from '../components/MangaPreferredSourcesModal
 import MangaVolumeList from '../components/MangaVolumeList.vue';
 import MercureListener from '../components/MercureListener.vue';
 
-    import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+    import NotificationToast from '../../../../shared/components/ui/NotificationToast.vue';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
 import { useMangaStore } from '../../application/store/mangaStore';
 
     const route = useRoute();
@@ -99,7 +106,8 @@ import { useMangaStore } from '../../application/store/mangaStore';
         data: currentManga,
         isLoading: isLoadingDetails,
         isFetching: isRefreshingDetails,
-        error: errorDetails
+        error: errorDetails,
+        refetch: refetchMangaDetails
     } = useMangaDetails(mangaId);
 
     const {
@@ -127,6 +135,19 @@ import { useMangaStore } from '../../application/store/mangaStore';
         error: editError
     } = useMangaEdit();
 
+    // Composable pour le refresh des métadonnées
+    const {
+        isRefreshing,
+        refreshMetadata
+    } = useMangaRefresh();
+
+    // Composable pour le monitoring
+    const {
+        isToggling: isTogglingMonitoring,
+        toggleMonitoring,
+        toggleError: monitoringError
+    } = useMangaMonitoring();
+
     // Charger les chapitres dans le store quand le manga est chargé
     watch(
         mangaId,
@@ -164,13 +185,42 @@ import { useMangaStore } from '../../application/store/mangaStore';
         }
     };
 
+    // Fonction pour le refresh des métadonnées
+    const handleRefreshMetadata = async () => {
+        if (!mangaId.value) return;
+
+        try {
+            await refreshMetadata(mangaId.value);
+        } catch (error) {
+            // L'erreur est déjà gérée dans le composable avec les notifications
+            console.error('Erreur lors du refresh:', error);
+        }
+    };
+
+    // Fonction pour basculer le monitoring
+    const handleToggleMonitoring = async () => {
+        if (!mangaId.value || !currentManga.value) return;
+
+        try {
+            const newMonitoringState = !currentManga.value.monitored;
+            await toggleMonitoring(mangaId.value, newMonitoringState);
+
+            // Recharger les détails du manga pour mettre à jour l'état du monitoring
+            await refetchMangaDetails();
+        } catch (error) {
+            console.error('Erreur lors du changement de monitoring:', error);
+        }
+    };
+
     const toolbarConfig = computed(() => ({
         leftSection: [
             {
                 icon: ArrowPathIcon,
                 label: 'Refresh metadata',
                 type: 'button',
-                onClick: () => console.log('Refresh metadata')
+                onClick: handleRefreshMetadata,
+                loading: isRefreshing.value,
+                disabled: isRefreshing.value
             },
             {
                 icon: PencilSquareIcon,
@@ -193,10 +243,13 @@ import { useMangaStore } from '../../application/store/mangaStore';
         ],
         rightSection: [
             {
-                icon: BookmarkIcon,
-                label: 'Monitoring',
+                icon: currentManga.value?.monitored ? BookmarkIcon : BookmarkSlashIcon,
+                label: currentManga.value?.monitored ? 'Désactiver monitoring' : 'Activer monitoring',
                 type: 'button',
-                onClick: () => console.log('Monitoring')
+                onClick: handleToggleMonitoring,
+                loading: isTogglingMonitoring.value,
+                disabled: isTogglingMonitoring.value,
+                variant: currentManga.value?.monitored ? 'active' : 'default'
             },
             {
                 icon: WrenchIcon,
@@ -220,7 +273,7 @@ import { useMangaStore } from '../../application/store/mangaStore';
     }));
 
     const loading = computed(() => isLoadingDetails.value || isLoadingVolumes.value);
-    const isRefreshing = computed(() => isRefreshingDetails.value || isRefreshingVolumes.value);
+    const isRefreshingData = computed(() => isRefreshingDetails.value || isRefreshingVolumes.value || isRefreshing.value);
     const error = computed(() => errorDetails.value || errorVolumes.value);
 
     watch(