feat: ajout de la gestion des sources préférées pour les mangas, incluant la récupération et la configuration des sources via l'API, ainsi que l'intégration d'une modale pour l'interface utilisateur.

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

@@ -24,6 +24,17 @@
             </div>
             <MangaVolumeList v-else :volumes="volumes" :manga-slug="currentManga.slug" />
         </div>
+
+        <!-- Modale des sources préférées -->
+        <MangaPreferredSourcesModal
+            :is-open="isPreferredSourcesModalOpen"
+            :sources="preferredSources"
+            :is-loading="isLoadingSources"
+            :error="sourcesError"
+            :is-saving="isSavingSources"
+            @close="closePreferredSourcesModal"
+            @save="savePreferredSources"
+        />
     </div>
 
     <div v-else-if="isLoadingDetails" class="flex justify-center items-center h-64">
@@ -35,33 +46,38 @@
 
 <script setup>
     import {
-        ArrowPathIcon,
-        BookmarkIcon,
-        ChevronDoubleDownIcon,
-        Cog6ToothIcon,
-        DocumentArrowDownIcon,
-        PencilSquareIcon,
-        TrashIcon,
-        WrenchIcon
-    } from '@heroicons/vue/24/outline';
-    import { computed, onUnmounted, watch } from 'vue';
-    import { useRoute } from 'vue-router';
+    ArrowPathIcon,
+    BookmarkIcon,
+    ChevronDoubleDownIcon,
+    Cog6ToothIcon,
+    DocumentArrowDownIcon,
+    PencilSquareIcon,
+    TrashIcon,
+    WrenchIcon
+} from '@heroicons/vue/24/outline';
+import { computed, onUnmounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
     import { useMangaDetails } from '../composables/useMangaDetails';
-    import { useMangaVolumes } from '../composables/useMangaVolumes';
+import { useMangaPreferredSources } from '../composables/useMangaPreferredSources';
+import { useMangaVolumes } from '../composables/useMangaVolumes';
 
     import MangaHeader from '../components/MangaHeader.vue';
-    import MangaVolumeList from '../components/MangaVolumeList.vue';
-    import MercureListener from '../components/MercureListener.vue';
+import MangaPreferredSourcesModal from '../components/MangaPreferredSourcesModal.vue';
+import MangaVolumeList from '../components/MangaVolumeList.vue';
+import MercureListener from '../components/MercureListener.vue';
 
     import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
-    import { useMangaStore } from '../../application/store/mangaStore';
+import { useMangaStore } from '../../application/store/mangaStore';
 
     const route = useRoute();
     const mangaStore = useMangaStore();
 
     const mangaId = computed(() => route.params.id || null);
 
+    // État de la modale
+    const isPreferredSourcesModalOpen = ref(false);
+
     const {
         data: currentManga,
         isLoading: isLoadingDetails,
@@ -76,6 +92,14 @@
         error: errorVolumes
     } = useMangaVolumes(mangaId);
 
+    const {
+        sources: preferredSources,
+        isLoading: isLoadingSources,
+        error: sourcesError,
+        isSaving: isSavingSources,
+        savePreferredSources: saveSourcesOrder
+    } = useMangaPreferredSources(mangaId);
+
     // Charger les chapitres dans le store quand le manga est chargé
     watch(
         mangaId,
@@ -87,6 +111,23 @@
         { immediate: true }
     );
 
+    const openPreferredSourcesModal = () => {
+        isPreferredSourcesModalOpen.value = true;
+    };
+
+    const closePreferredSourcesModal = () => {
+        isPreferredSourcesModalOpen.value = false;
+    };
+
+    const savePreferredSources = async (sourceIds) => {
+        try {
+            await saveSourcesOrder(sourceIds);
+            closePreferredSourcesModal();
+        } catch (error) {
+            console.error('Erreur lors de la sauvegarde des sources préférées:', error);
+        }
+    };
+
     const toolbarConfig = computed(() => ({
         leftSection: [
             {
@@ -111,7 +152,7 @@
                 icon: Cog6ToothIcon,
                 label: 'Preferred Sources',
                 type: 'button',
-                onClick: () => console.log('Preferred Sources')
+                onClick: openPreferredSourcesModal
             }
         ],
         rightSection: [