feat: ajout des composants MangaChapter, MangaChapterList, MangaHeader, MangaVolume, MangaVolumeList et mise à jour de la page MangaDetails pour une meilleure gestion des chapitres et volumes de manga

assets/vue/app/domain/manga/presentation/components/MangaVolume.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="bg-white rounded-sm shadow mb-2">
+        <!-- En-tête du volume -->
+        <div class="relative flex items-center justify-between bg-white p-4 rounded-t-sm">
+            <!-- Partie gauche -->
+            <div class="flex items-center space-x-4">
+                <BookmarkIcon class="h-8 w-8 text-gray-500" />
+                <h2 class="text-xl font-semibold w-28">Volume {{ String(volume.number).padStart(2, '0') }}</h2>
+                <div class="flex items-center w-16">
+                    <span
+                        :class="[
+                            'px-2 py-1 text-sm rounded w-full text-center text-white',
+                            {
+                                'bg-red-500': volume.downloadedChapter === 0,
+                                'bg-yellow-500':
+                                    volume.downloadedChapter < volume.totalChapter && volume.downloadedChapter > 0,
+                                'bg-green-500': volume.downloadedChapter === volume.totalChapter
+                            }
+                        ]">
+                        {{ volume.downloadedChapter }}/{{ volume.totalChapter }}
+                    </span>
+                </div>
+            </div>
+
+            <!-- Bouton toggle -->
+            <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                <component
+                    :is="isOpen ? ChevronUpIcon : ChevronDownIcon"
+                    class="h-6 w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
+                    @click="toggleVolume" />
+            </div>
+
+            <!-- Actions du volume -->
+            <div class="flex space-x-2 text-xl text-bold">
+                <button class="w-8 text-center" @click="handleSearch">
+                    <MagnifyingGlassIcon class="h-6 w-6 text-gray-500 hover:text-green-500" />
+                </button>
+                <button class="w-8 text-center" @click="handleDownload">
+                    <ArrowDownTrayIcon class="h-6 w-6 text-gray-500 hover:text-green-500" />
+                </button>
+            </div>
+        </div>
+
+        <!-- Liste des chapitres -->
+        <MangaChapterList v-show="isOpen" :chapters="volume.chapters" :manga-slug="mangaSlug" />
+
+        <!-- Chevron de fermeture -->
+        <div v-show="isOpen" class="flex justify-center p-2 py bg-white rounded-b-sm">
+            <ChevronUpIcon
+                class="h-6 w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
+                @click="toggleVolume" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { ref } from 'vue';
+    import {
+        BookmarkIcon,
+        ChevronUpIcon,
+        ChevronDownIcon,
+        MagnifyingGlassIcon,
+        ArrowDownTrayIcon
+    } from '@heroicons/vue/24/outline';
+    import MangaChapterList from './MangaChapterList.vue';
+    import { useMangaStore } from '../../application/store/mangaStore';
+
+    const props = defineProps({
+        volume: {
+            type: Object,
+            required: true
+        },
+        mangaSlug: {
+            type: String,
+            required: true
+        },
+        isOpen: {
+            type: Boolean,
+            default: false
+        }
+    });
+
+    const store = useMangaStore();
+    const isOpen = ref(props.isOpen);
+
+    const toggleVolume = () => {
+        isOpen.value = !isOpen.value;
+    };
+
+    const handleSearch = async () => {
+        // TODO: Implémenter la recherche du volume
+        console.log('Recherche du volume:', props.volume.number);
+    };
+
+    const handleDownload = async () => {
+        // TODO: Implémenter le téléchargement du volume
+        console.log('Téléchargement du volume:', props.volume.number);
+    };
+</script>