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/components/MangaList.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="space-y-4">
+        <div
+            v-for="manga in mangas"
+            :key="manga.id"
+            class="flex bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg p-4 space-x-4">
+            <!-- Cover Image -->
+            <div class="flex-shrink-0">
+                <img :src="manga.imageUrl || '/placeholder-cover.png'" alt="" class="h-48 w-32 object-cover rounded" />
+                <!-- TODO: Add placeholder image -->
+            </div>
+
+            <!-- Manga Info -->
+            <div class="flex-1 min-w-0">
+                <h3 class="text-lg leading-7 font-medium text-gray-900 dark:text-gray-100 truncate">{{
+                    manga.title
+                }}</h3>
+                <p v-if="manga.publicationYear" class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{
+                    manga.publicationYear
+                }}</p>
+                <p v-if="manga.description" class="text-sm text-gray-700 dark:text-gray-300 mt-2 line-clamp-3">
+                    {{ manga.description }}
+                </p>
+                <p v-if="manga.createdAt" class="text-sm text-gray-500 dark:text-gray-400 mt-2">
+                    Added: {{ formatDate(manga.createdAt) }}
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { defineProps } from 'vue';
+
+    const props = defineProps({
+        mangas: {
+            type: Array,
+            required: true
+        }
+    });
+
+    console.log(props.mangas);
+
+    const formatDate = dateString => {
+        if (!dateString) return '';
+        const options = { year: 'numeric', month: 'long', day: 'numeric' };
+        try {
+            return new Date(dateString).toLocaleDateString(undefined, options);
+        } catch (e) {
+            console.error('Error formatting date:', e);
+            return dateString; // Return original string if formatting fails
+        }
+    };
+</script>
+
+<style scoped>
+    /* Pour s'assurer que line-clamp fonctionne */
+    @supports (-webkit-line-clamp: 3) {
+        .line-clamp-3 {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+        }
+    }
+</style>

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: 'List', onClick: () => (viewMode.value = 'list') },
-                    { label: 'Grid', onClick: () => {} }
+                    { label: 'Grid', onClick: () => (viewMode.value = 'grid') }
                 ]
             },
             {