chore: rattrapage

assets/vue/app/domain/manga/domain/entities/manga.js

@@ -11,7 +11,10 @@ export class Manga {
     status = null,
     rating = null,
     genres = [],
-    createdAt = new Date().toISOString()
+    createdAt = new Date().toISOString(),
+    monitored = false,
+    chaptersTotal = 0,
+    chaptersScraped = 0,
   }) {
     this.id = id;
     this.slug = slug;
@@ -25,6 +28,9 @@ export class Manga {
     this.rating = rating;
     this.genres = genres;
     this.createdAt = createdAt;
+    this.monitored = monitored;
+    this.chaptersTotal = chaptersTotal;
+    this.chaptersScraped = chaptersScraped;
   }
 
   static create(data) {

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>

assets/vue/app/domain/setting/presentation/pages/UserPreferencesPage.vue

@@ -64,6 +64,11 @@
                             @click="store.setDefaultView('list')">
                             {{ t('preferences.defaultView.list') }}
                         </button>
+                        <button
+                            :class="viewButtonClass('table')"
+                            @click="store.setDefaultView('table')">
+                            {{ t('preferences.defaultView.table') }}
+                        </button>
                     </div>
                 </div>
                 <!-- Mangas par page -->

assets/vue/app/shared/i18n/locales/en.json

@@ -27,7 +27,8 @@
     "defaultView": {
       "label": "Default view",
       "grid": "Grid",
-      "list": "List"
+      "list": "List",
+      "table": "Table"
     },
     "itemsPerPage": {
       "label": "Mangas per page"

assets/vue/app/shared/i18n/locales/fr.json

@@ -27,7 +27,8 @@
     "defaultView": {
       "label": "Vue par défaut",
       "grid": "Grille",
-      "list": "Liste"
+      "list": "Liste",
+      "table": "Tableau"
     },
     "itemsPerPage": {
       "label": "Mangas par page"