feat: ajout d'une barre d'outils dans le composant MangaDetails, intégration de nouveaux boutons avec des actions configurables, et amélioration de la structure des composants de la barre d'outils pour une meilleure expérience utilisateur.

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

@@ -4,6 +4,8 @@
     </div>
 
     <div v-else-if="currentManga" class="relative">
+        <Toolbar :config="toolbarConfig" />
+
         <div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500">
             <ArrowPathIcon class="h-5 w-5 animate-spin" />
         </div>
@@ -31,7 +33,16 @@
 <script setup>
     import { computed, onUnmounted, watch } from 'vue';
     import { useRoute } from 'vue-router';
-    import { ArrowPathIcon } from '@heroicons/vue/24/outline';
+    import {
+        ArrowPathIcon,
+        PencilSquareIcon,
+        DocumentArrowDownIcon,
+        Cog6ToothIcon,
+        BookmarkIcon,
+        WrenchIcon,
+        TrashIcon,
+        ChevronDoubleDownIcon
+    } from '@heroicons/vue/24/outline';
 
     import { useMangaDetails } from '../composables/useMangaDetails';
     import { useMangaVolumes } from '../composables/useMangaVolumes';
@@ -40,6 +51,7 @@
     import MangaVolumeList from '../components/MangaVolumeList.vue';
 
     import { useMangaStore } from '../../application/store/mangaStore';
+    import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
 
     const route = useRoute();
     const mangaStore = useMangaStore();
@@ -60,6 +72,61 @@
         error: errorVolumes
     } = useMangaVolumes(mangaId);
 
+    const toolbarConfig = computed(() => ({
+        leftSection: [
+            {
+                icon: ArrowPathIcon,
+                label: 'Refresh metadata',
+                type: 'button',
+                onClick: () => console.log('Refresh metadata')
+            },
+            {
+                icon: PencilSquareIcon,
+                label: 'Rename chapters',
+                type: 'button',
+                onClick: () => console.log('Rename chapters')
+            },
+            {
+                icon: DocumentArrowDownIcon,
+                label: 'Manage cbz',
+                type: 'button',
+                onClick: () => console.log('Manage cbz')
+            },
+            {
+                icon: Cog6ToothIcon,
+                label: 'Preferred Sources',
+                type: 'button',
+                onClick: () => console.log('Preferred Sources')
+            }
+        ],
+        rightSection: [
+            {
+                icon: BookmarkIcon,
+                label: 'Monitoring',
+                type: 'button',
+                onClick: () => console.log('Monitoring')
+            },
+            {
+                icon: WrenchIcon,
+                label: 'Edit',
+                type: 'button',
+                onClick: () => console.log('Edit')
+            },
+            {
+                icon: TrashIcon,
+                label: 'Delete',
+                type: 'button',
+                onClick: () => console.log('Delete')
+            },
+            {
+                icon: ChevronDoubleDownIcon,
+                label: 'Expand all',
+                type: 'button',
+                onClick: () => console.log('Expand all')
+            }
+        ]
+    }));
+
     const loading = computed(() => isLoadingDetails.value || isLoadingVolumes.value);
     const isRefreshing = computed(() => isRefreshingDetails.value || isRefreshingVolumes.value);
     const error = computed(() => errorDetails.value || errorVolumes.value);