chore: rattrapage

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

@@ -2,36 +2,26 @@
     <RouterLink
         :to="{ name: 'manga-details', params: { id: manga.id } }"
         class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105 block">
-        <div class="relative pb-[150%]">
+        <div class="relative pb-[130%]">
             <img
                 :src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
                 :alt="manga.title"
                 class="absolute inset-0 w-full h-full object-cover bg-gray-100" />
         </div>
         <div class="p-2">
-            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">{{ manga.title }}</h3>
+            <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-1 truncate">{{ manga.title }}</h3>
             <div class="flex items-center">
-                <span class="text-sm text-gray-500 dark:text-gray-400">{{ manga.publicationYear }}</span>
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ manga.publicationYear }}</span>
             </div>
-            <div class="mt-1 text-sm text-gray-500 dark:text-gray-400"> Added: {{ formatDate(manga.createdAt) }} </div>
         </div>
     </RouterLink>
 </template>
 
 <script setup>
-    const props = defineProps({
+    defineProps({
         manga: {
             type: Object,
             required: true
         }
     });
-
-    const formatDate = dateString => {
-        const date = new Date(dateString);
-        return date.toLocaleDateString('en-US', {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric'
-        });
-    };
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 p-4">
         <MangaCard v-for="manga in mangas" :key="manga.id" :manga="manga" />
     </div>
 </template>

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

@@ -0,0 +1,20 @@
+<template>
+    <span v-if="isLoading" class="text-gray-400 dark:text-gray-600 text-xs">…</span>
+    <span v-else-if="sources.length" class="text-gray-700 dark:text-gray-300 truncate max-w-xs block">{{ sources[0].name }}</span>
+    <span v-else class="text-gray-400 dark:text-gray-600">—</span>
+</template>
+
+<script setup>
+import { computed, toRef } from 'vue';
+import { useMangaPreferredSources } from '../composables/useMangaPreferredSources';
+
+const props = defineProps({
+    mangaId: {
+        type: String,
+        required: true
+    }
+});
+
+const mangaIdRef = toRef(props, 'mangaId');
+const { sources, isLoading } = useMangaPreferredSources(mangaIdRef);
+</script>