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>