feat(manga): implémenter la page Découvrir avec recommandations MangaDex

- Endpoint GET /api/manga-discover via DiscoverMangaStateProvider + DiscoverMangaHandler - Algorithme : top 5 manga de la collection → appel /manga/{id}/recommendation par source → agrégation avec système de votes (multi-sources = plus pertinent) - Filtrage : tags exclus (Oneshot, Doujinshi, Self-Published), contentRating, et suppression des manga déjà en bibliothèque - Page Vue DiscoverPage.vue : chargement auto au montage, bouton Actualiser, modal détail, ajout à la bibliothèque - Adapteurs InMemory de test mis à jour (discover + getMangaRecommendations)
2026-03-15 21:43:57 +01:00
parent 65453c87e5
commit 814fe46ce5
14 changed files with 482 additions and 3 deletions
--- a/assets/vue/app/domain/manga/application/store/mangaStore.js
+++ b/assets/vue/app/domain/manga/application/store/mangaStore.js
@@ -40,7 +40,12 @@ export const useMangaStore = defineStore('manga', {

        // --- Add Manga State ---
        addingManga: false,
-        addMangaError: null
+        addMangaError: null,
+
+        // --- Discover State ---
+        discoverResults: [],
+        loadingDiscover: false,
+        discoverError: null
    }),

    getters: {
@@ -170,6 +175,25 @@ export const useMangaStore = defineStore('manga', {
            this.loadingSearch = false;
        },

+        // --- Discover Actions ---
+        async loadDiscoverRecommendations() {
+            if (this.loadingDiscover) return;
+
+            this.loadingDiscover = true;
+            this.discoverError = null;
+            this.discoverResults = [];
+
+            try {
+                const data = await mangaRepository.discoverManga();
+                this.discoverResults = data.items || [];
+            } catch (error) {
+                this.discoverError = error.message;
+                throw error;
+            } finally {
+                this.loadingDiscover = false;
+            }
+        },
+
        // --- Add Manga Actions ---
        async createFromMangaDex(externalId) {
            if (this.addingManga) return;
--- a/assets/vue/app/domain/manga/infrastructure/api/apiMangaRepository.js
+++ b/assets/vue/app/domain/manga/infrastructure/api/apiMangaRepository.js
@@ -104,6 +104,17 @@ export class ApiMangaRepository {
        }
    }

+    async discoverManga() {
+        try {
+            const response = await fetch('/api/manga-discover');
+            if (!response.ok) throw new Error('Failed to fetch discover recommendations');
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
    async createFromMangaDex(externalId) {
        try {
            const response = await fetch('/api/mangas/create-from-mangadex', {
--- a/assets/vue/app/domain/manga/presentation/pages/DiscoverPage.vue
+++ b/assets/vue/app/domain/manga/presentation/pages/DiscoverPage.vue
@@ -0,0 +1,192 @@
+<template>
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
+
+        <div class="overflow-y-auto flex-1">
+            <div class="px-6 py-8">
+
+                <!-- État de chargement -->
+                <section v-if="loading" class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <div class="flex items-center gap-3 text-gray-600 dark:text-gray-400">
+                        <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-green-600"></div>
+                        <span class="text-sm">Chargement des recommandations...</span>
+                    </div>
+                </section>
+
+                <!-- Message d'erreur -->
+                <section v-else-if="error" class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <p class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
+                </section>
+
+                <!-- Résultats -->
+                <section v-else-if="discoverResults.length > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Recommandations</h2>
+                        <span class="text-xs text-gray-500 dark:text-gray-400">{{ discoverResults.length }} manga(s)</span>
+                    </div>
+                    <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+                        <div
+                            v-for="manga in discoverResults"
+                            :key="manga.externalId"
+                            class="flex items-start gap-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/40 transition-colors cursor-pointer px-2"
+                            @click="openMangaModal(manga)">
+                            <img
+                                :src="manga.thumbnailUrl || manga.imageUrl || '/placeholder-cover.png'"
+                                alt=""
+                                class="h-36 w-24 object-cover flex-shrink-0"
+                                referrerpolicy="no-referrer" />
+                            <div class="flex-1 min-w-0">
+                                <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ manga.title }}</p>
+                                <p v-if="manga.description" class="text-sm text-gray-600 dark:text-gray-300 mt-2 line-clamp-4">{{ manga.description }}</p>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Collection locale vide -->
+                <section v-else-if="!loading" class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <p class="text-sm text-gray-500 dark:text-gray-400 text-center">Ajoutez des manga pour obtenir des recommandations.</p>
+                </section>
+
+            </div>
+        </div>
+
+        <!-- Modal de détail -->
+        <Dialog :open="isModalOpen" @close="closeModal" class="relative z-50">
+            <div class="fixed inset-0 bg-gray-900/70 dark:bg-gray-900/80 transition-opacity" aria-hidden="true" />
+            <div class="fixed inset-0 flex items-center justify-center p-4">
+                <DialogPanel v-if="selectedManga" class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-xl overflow-hidden flex flex-col max-h-[90vh]">
+
+                    <!-- En-tête avec couverture -->
+                    <div class="flex gap-0 border-b border-gray-200 dark:border-gray-700">
+                        <img
+                            :src="selectedManga.imageUrl || selectedManga.thumbnailUrl || '/placeholder-cover.png'"
+                            :alt="selectedManga.title"
+                            class="h-64 w-44 object-cover flex-shrink-0"
+                            referrerpolicy="no-referrer" />
+                        <div class="flex-1 min-w-0 p-6 flex flex-col justify-between">
+                            <div>
+                                <DialogTitle class="text-base font-semibold text-gray-900 dark:text-gray-100 leading-snug">
+                                    {{ selectedManga.title }}
+                                </DialogTitle>
+                                <div class="mt-3 space-y-1.5">
+                                    <p v-if="selectedManga.author" class="text-xs text-gray-500 dark:text-gray-400">
+                                        <span class="text-gray-400 dark:text-gray-500">Auteur</span>
+                                        <span class="ml-2 text-gray-700 dark:text-gray-200">{{ selectedManga.author }}</span>
+                                    </p>
+                                    <p v-if="selectedManga.publicationYear" class="text-xs text-gray-500 dark:text-gray-400">
+                                        <span class="text-gray-400 dark:text-gray-500">Publication</span>
+                                        <span class="ml-2 text-gray-700 dark:text-gray-200">{{ selectedManga.publicationYear }}</span>
+                                    </p>
+                                    <p v-if="selectedManga.status" class="text-xs text-gray-500 dark:text-gray-400">
+                                        <span class="text-gray-400 dark:text-gray-500">Statut</span>
+                                        <span class="ml-2 text-gray-700 dark:text-gray-200">{{ selectedManga.status }}</span>
+                                    </p>
+                                    <p v-if="selectedManga.rating" class="text-xs text-gray-500 dark:text-gray-400">
+                                        <span class="text-gray-400 dark:text-gray-500">Note</span>
+                                        <span class="ml-2 text-gray-700 dark:text-gray-200">{{ selectedManga.rating.toFixed(2) }} / 10</span>
+                                    </p>
+                                </div>
+                            </div>
+                            <div v-if="selectedManga.genres?.length" class="flex flex-wrap gap-1.5 mt-4">
+                                <span
+                                    v-for="genre in selectedManga.genres"
+                                    :key="genre"
+                                    class="text-xs px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
+                                    {{ genre }}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Description -->
+                    <div class="px-6 py-4 overflow-y-auto flex-1">
+                        <h3 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Description</h3>
+                        <p v-if="selectedManga.description" class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+                            {{ selectedManga.description }}
+                        </p>
+                        <p v-else class="text-sm text-gray-400 dark:text-gray-500 italic">Aucune description disponible.</p>
+                    </div>
+
+                    <!-- Actions -->
+                    <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
+                        <button
+                            type="button"
+                            @click="closeModal"
+                            class="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors px-4 py-2">
+                            Annuler
+                        </button>
+                        <button
+                            type="button"
+                            @click="addManga"
+                            :disabled="adding"
+                            class="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white px-4 py-2 font-medium transition-colors inline-flex items-center gap-2">
+                            <ArrowPathIcon v-if="adding" class="h-4 w-4 animate-spin" />
+                            {{ adding ? 'Ajout en cours...' : 'Ajouter à la bibliothèque' }}
+                        </button>
+                    </div>
+
+                </DialogPanel>
+            </div>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { Dialog, DialogPanel, DialogTitle } from '@headlessui/vue';
+import { ArrowPathIcon, ArrowPathRoundedSquareIcon } from '@heroicons/vue/24/outline';
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+import { useMangaStore } from '../../application/store/mangaStore';
+
+const router = useRouter();
+const mangaStore = useMangaStore();
+
+const isModalOpen = ref(false);
+const selectedManga = ref(null);
+
+const { discoverResults, loadingDiscover: loading, discoverError: error, addingManga: adding } = storeToRefs(mangaStore);
+
+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'label', text: 'Découvrir', class: 'text-sm font-medium' },
+    ],
+    rightSection: [
+        {
+            type: 'button',
+            icon: ArrowPathRoundedSquareIcon,
+            label: 'Actualiser',
+            onClick: () => mangaStore.loadDiscoverRecommendations(),
+            disabled: loading.value,
+        },
+    ],
+}));
+
+onMounted(() => {
+    mangaStore.loadDiscoverRecommendations();
+});
+
+const openMangaModal = manga => {
+    selectedManga.value = manga;
+    isModalOpen.value = true;
+};
+
+const closeModal = () => {
+    isModalOpen.value = false;
+    selectedManga.value = null;
+};
+
+const addManga = async () => {
+    if (!selectedManga.value) return;
+    try {
+        await mangaStore.createFromMangaDex(selectedManga.value.externalId);
+        router.push('/manga');
+    } catch (e) {
+        console.error("Erreur d'ajout:", e);
+    } finally {
+        closeModal();
+    }
+};
+</script>
--- a/assets/vue/app/router/index.js
+++ b/assets/vue/app/router/index.js
@@ -3,6 +3,7 @@ import ActivityPage from '../domain/activity/presentation/pages/ActivityPage.vue
 import ConversionPage from '../domain/conversion/presentation/pages/ConversionPage.vue';
 import NewImportPage from '../domain/import/presentation/pages/NewImportPage.vue';
 import AddManga from '../domain/manga/presentation/pages/AddManga.vue';
+import DiscoverPage from '../domain/manga/presentation/pages/DiscoverPage.vue';
 import HomePage from '../domain/manga/presentation/pages/HomePage.vue';
 import MangaDetails from '../domain/manga/presentation/pages/MangaDetails.vue';
 import ChapterPage from '../domain/reader/presentation/pages/ChapterPage.vue';
@@ -74,8 +75,7 @@ const routes = [
            {
                path: '/manga/discover',
                name: 'discover',
-                component: PlaceholderComponent,
-                props: { title: 'Découvrir' }
+                component: DiscoverPage
            },
            {
                path: '/convert',
--- a/src/Domain/Manga/Application/Query/DiscoverManga.php
+++ b/src/Domain/Manga/Application/Query/DiscoverManga.php
@@ -0,0 +1,7 @@
+<?php
+
+namespace App\Domain\Manga\Application\Query;
+
+readonly class DiscoverManga
+{
+}
--- a/src/Domain/Manga/Application/QueryHandler/DiscoverMangaHandler.php
+++ b/src/Domain/Manga/Application/QueryHandler/DiscoverMangaHandler.php
@@ -0,0 +1,69 @@
+<?php
+
+namespace App\Domain\Manga\Application\QueryHandler;
+
+use App\Domain\Manga\Application\Query\DiscoverManga;
+use App\Domain\Manga\Application\Response\MangaSearchItem;
+use App\Domain\Manga\Application\Response\MangaSearchResponse;
+use App\Domain\Manga\Domain\Contract\Provider\MangaProviderInterface;
+use App\Domain\Manga\Domain\Contract\Repository\MangaRepositoryInterface;
+use App\Domain\Manga\Domain\Model\Manga;
+
+readonly class DiscoverMangaHandler
+{
+    public function __construct(
+        private MangaRepositoryInterface $mangaRepository,
+        private MangaProviderInterface $mangaProvider
+    ) {
+    }
+
+    public function handle(DiscoverManga $query): MangaSearchResponse
+    {
+        $localMangas = $this->mangaRepository->findAll(page: 1, limit: 1000);
+
+        $ownedExternalIds = [];
+        $mangasWithRating = [];
+        foreach ($localMangas as $manga) {
+            if (!$manga->getExternalId()) {
+                continue;
+            }
+            $ownedExternalIds[] = $manga->getExternalId()->getValue();
+            $mangasWithRating[] = $manga;
+        }
+
+        usort($mangasWithRating, fn ($a, $b) => ($b->getRating() ?? 0) <=> ($a->getRating() ?? 0));
+        $sourceIds = array_map(
+            fn (Manga $m) => $m->getExternalId()->getValue(),
+            array_slice($mangasWithRating, 0, 5)
+        );
+
+        $collection = $this->mangaProvider->discover($sourceIds);
+
+        $recommendations = array_values(array_filter(
+            $collection->getItems(),
+            fn (Manga $m) => $m->getExternalId() === null
+                || !in_array($m->getExternalId()->getValue(), $ownedExternalIds, true)
+        ));
+
+        return new MangaSearchResponse(
+            array_map(
+                fn (Manga $manga, int $index) => new MangaSearchItem(
+                    id: $index,
+                    externalId: $manga->getExternalId()->getValue(),
+                    title: $manga->getTitle()->getValue(),
+                    slug: $manga->getSlug()->getValue(),
+                    description: $manga->getDescription(),
+                    author: $manga->getAuthor(),
+                    publicationYear: $manga->getPublicationYear(),
+                    genres: $manga->getGenres(),
+                    status: $manga->getStatus(),
+                    imageUrl: $manga->getImageUrl(),
+                    thumbnailUrl: $manga->getImageUrls()?->getThumbnail(),
+                    rating: $manga->getRating()
+                ),
+                $recommendations,
+                array_keys($recommendations)
+            )
+        );
+    }
+}
--- a/src/Domain/Manga/Domain/Contract/Client/MangadexClientInterface.php
+++ b/src/Domain/Manga/Domain/Contract/Client/MangadexClientInterface.php
@@ -93,4 +93,24 @@ interface MangadexClientInterface
     * }
     */
    public function getManga(string $mangaId): array;
+
+    /**
+     * @return array{
+     *     data: array<array{
+     *         id: string,
+     *         attributes: array{
+     *             title: array<string, string>,
+     *             description: array<string, string>,
+     *             year: ?int,
+     *             status: string,
+     *             tags: array<array{attributes: array{name: array<string, string>}}>
+     *         },
+     *         relationships: array<array{
+     *             type: string,
+     *             attributes: array{name: string|null, fileName: string|null}
+     *         }>
+     *     }>
+     * }
+     */
+    public function getMangaRecommendations(string $mangaId): array;
 }
--- a/src/Domain/Manga/Domain/Contract/Provider/MangaProviderInterface.php
+++ b/src/Domain/Manga/Domain/Contract/Provider/MangaProviderInterface.php
@@ -11,4 +11,9 @@ interface MangaProviderInterface
    public function search(string $title): MangaCollection;

    public function findByExternalId(ExternalId $externalId): ?Manga;
+
+    /**
+     * @param string[] $sourceExternalIds IDs MangaDex des manga sources
+     */
+    public function discover(array $sourceExternalIds): MangaCollection;
 }
--- a/src/Domain/Manga/Infrastructure/ApiPlatform/Resource/MangaDiscoverResource.php
+++ b/src/Domain/Manga/Infrastructure/ApiPlatform/Resource/MangaDiscoverResource.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Domain\Manga\Infrastructure\ApiPlatform\Resource;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Get;
+use App\Domain\Manga\Infrastructure\ApiPlatform\Dto\MangaSearchCollection;
+use App\Domain\Manga\Infrastructure\ApiPlatform\State\Provider\DiscoverMangaStateProvider;
+
+#[ApiResource(
+    shortName: 'Mangadex',
+    operations: [
+        new Get(
+            uriTemplate: '/manga-discover',
+            output: MangaSearchCollection::class,
+            provider: DiscoverMangaStateProvider::class
+        )
+    ]
+)]
+class MangaDiscoverResource
+{
+}
--- a/src/Domain/Manga/Infrastructure/ApiPlatform/State/Provider/DiscoverMangaStateProvider.php
+++ b/src/Domain/Manga/Infrastructure/ApiPlatform/State/Provider/DiscoverMangaStateProvider.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Domain\Manga\Infrastructure\ApiPlatform\State\Provider;
+
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProviderInterface;
+use App\Domain\Manga\Application\Query\DiscoverManga;
+use App\Domain\Manga\Application\QueryHandler\DiscoverMangaHandler;
+use App\Domain\Manga\Infrastructure\ApiPlatform\Dto\MangaSearchCollection;
+use App\Domain\Manga\Infrastructure\ApiPlatform\Dto\MangaSearchItem;
+
+readonly class DiscoverMangaStateProvider implements ProviderInterface
+{
+    public function __construct(private DiscoverMangaHandler $handler)
+    {
+    }
+
+    public function provide(Operation $operation, array $uriVariables = [], array $context = []): MangaSearchCollection
+    {
+        $response = $this->handler->handle(new DiscoverManga());
+
+        return new MangaSearchCollection(
+            items: array_map(
+                fn ($item) => new MangaSearchItem(
+                    externalId: $item->externalId,
+                    title: $item->title,
+                    slug: $item->slug,
+                    description: $item->description,
+                    author: $item->author,
+                    publicationYear: $item->publicationYear,
+                    genres: $item->genres,
+                    status: $item->status,
+                    imageUrl: $item->imageUrl,
+                    thumbnailUrl: $item->thumbnailUrl,
+                    rating: $item->rating
+                ),
+                $response->items
+            )
+        );
+    }
+}
--- a/src/Domain/Manga/Infrastructure/Client/MangadexClient.php
+++ b/src/Domain/Manga/Infrastructure/Client/MangadexClient.php
@@ -127,6 +127,35 @@ class MangadexClient implements MangadexClientInterface
        ]);
    }

+    public function getMangaRecommendations(string $mangaId): array
+    {
+        // L'endpoint retourne des objets manga_recommendation avec des relationships
+        // vers les manga (sans détails). Il faut d'abord récupérer les IDs, puis
+        // fetcher les manga en batch avec leurs détails complets.
+        $recommendations = $this->get('/manga/' . $mangaId . '/recommendation');
+
+        $recommendedIds = [];
+        foreach ($recommendations['data'] ?? [] as $item) {
+            foreach ($item['relationships'] ?? [] as $rel) {
+                if ($rel['type'] === 'manga' && $rel['id'] !== $mangaId) {
+                    $recommendedIds[] = $rel['id'];
+                }
+            }
+        }
+
+        if (empty($recommendedIds)) {
+            return ['data' => []];
+        }
+
+        return $this->get('/manga', [
+            'ids'           => $recommendedIds,
+            'includes'      => ['cover_art', 'author'],
+            'contentRating' => ['safe', 'suggestive', 'erotica'],
+            'excludedTags'  => self::EXCLUDED_TAGS,
+            'limit'         => count($recommendedIds),
+        ]);
+    }
+
    private function get(string $endpoint, array $params = []): array
    {
        try {
--- a/src/Domain/Manga/Infrastructure/Provider/MangadexProvider.php
+++ b/src/Domain/Manga/Infrastructure/Provider/MangadexProvider.php
@@ -135,6 +135,55 @@ readonly class MangadexProvider implements MangaProviderInterface
        }
    }

+    public function discover(array $sourceExternalIds): MangaCollection
+    {
+        if (empty($sourceExternalIds)) {
+            return new MangaCollection([]);
+        }
+
+        // Compter les votes : un manga recommandé par plusieurs sources est plus pertinent.
+        // On conserve aussi la position d'apparition pour départager les ex-aequo.
+        $votes = [];
+        $firstPosition = [];
+        $resultsById = [];
+        $position = 0;
+
+        foreach ($sourceExternalIds as $externalId) {
+            try {
+                $response = $this->client->getMangaRecommendations($externalId);
+                foreach ($response['data'] ?? [] as $result) {
+                    $id = $result['id'];
+                    $votes[$id] = ($votes[$id] ?? 0) + 1;
+                    if (!isset($firstPosition[$id])) {
+                        $firstPosition[$id] = $position++;
+                        $resultsById[$id] = $result;
+                    }
+                }
+            } catch (\Exception) {
+                continue;
+            }
+        }
+
+        if (empty($resultsById)) {
+            return new MangaCollection([]);
+        }
+
+        // Trier : votes décroissants (multi-sources = plus pertinent), puis position croissante (score API)
+        uksort($resultsById, function (string $a, string $b) use ($votes, $firstPosition): int {
+            $voteDiff = $votes[$b] - $votes[$a];
+            if ($voteDiff !== 0) {
+                return $voteDiff;
+            }
+
+            return $firstPosition[$a] <=> $firstPosition[$b];
+        });
+
+        $mangas = $this->createMangasFromResults(array_values($resultsById));
+        $this->enrichWithRatings($mangas);
+
+        return new MangaCollection($mangas);
+    }
+
    public function findByExternalId(ExternalId $externalId): ?Manga
    {
        try {
--- a/tests/Domain/Manga/Adapter/InMemoryMangaProvider.php
+++ b/tests/Domain/Manga/Adapter/InMemoryMangaProvider.php
@@ -43,4 +43,9 @@ class InMemoryMangaProvider implements MangaProviderInterface

        return null;
    }
+
+    public function discover(array $sourceExternalIds): MangaCollection
+    {
+        return new MangaCollection([]);
+    }
 } 
--- a/tests/Domain/Manga/Adapter/InMemoryMangadexClient.php
+++ b/tests/Domain/Manga/Adapter/InMemoryMangadexClient.php
@@ -106,6 +106,11 @@ class InMemoryMangadexClient implements MangadexClientInterface
        ];
    }

+    public function getMangaRecommendations(string $mangaId): array
+    {
+        return ['data' => []];
+    }
+
    public function addManga(string $id, array $data): void
    {
        $this->mangas[$id] = $data;