feat: ajout du composant MangaList pour afficher les mangas en mode liste et mise à jour de HomePage pour intégrer ce nouveau mode de vue

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

@@ -2,7 +2,8 @@
     <div>
         <Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
         <div class="container mx-auto px-4">
-            <MangaGrid :mangas="collection?.items || []" />
+            <MangaGrid v-if="viewMode === 'grid'" :mangas="collection?.items || []" />
+            <MangaList v-else-if="viewMode === 'list'" :mangas="collection?.items || []" />
             <div
                 v-if="isBackgroundLoading"
                 class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg">
@@ -13,11 +14,12 @@
 </template>
 
 <script setup>
-    import { onMounted } from 'vue';
+    import { onMounted, ref } from 'vue';
     import { useRouter } from 'vue-router';
     import { storeToRefs } from 'pinia';
     import { useMangaStore } from '../../application/store/mangaStore';
     import MangaGrid from '../components/MangaGrid.vue';
+    import MangaList from '../components/MangaList.vue';
     import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
     import {
         ArrowPathIcon,
@@ -38,6 +40,8 @@
         isBackgroundLoadingCollection: isBackgroundLoading
     } = storeToRefs(mangaStore);
 
+    const viewMode = ref('grid');
+
     onMounted(() => {
         mangaStore.loadCollection();
     });
@@ -60,8 +64,8 @@
                 type: 'dropdown',
                 label: 'View',
                 items: [
-                    { label: 'List', onClick: () => {} },
-                    { label: 'Grid', onClick: () => {} }
+                    { label: 'List', onClick: () => (viewMode.value = 'list') },
+                    { label: 'Grid', onClick: () => (viewMode.value = 'grid') }
                 ]
             },
             {