fix(layout): corriger le scroll coupé sur mobile

RouterView n'avait pas de contrainte de hauteur dans le flex-col de main,
empêchant overflow-y-auto de se déclencher. Le contenu dépassait la hauteur
de main.overflow-hidden et était silencieusement tronqué sur mobile.

.claude/skills/api-platform/SKILL.md

@@ -0,0 +1,208 @@
+---
+name: api-platform
+description: Conventions API Platform du projet Mangarr — brancher un State Processor sur une Command, un State Provider sur une Query, nommage des Resources, gestion des DTOs. Utiliser quand on crée ou modifie une Resource, un State Processor/Provider, ou un DTO API Platform.
+allowed-tools: Read, Grep, Glob
+---
+
+# API Platform — Mangarr
+
+Tout le code API Platform vit dans `Infrastructure/ApiPlatform/` du domaine concerné.
+
+```
+Infrastructure/ApiPlatform/
+  Resource/
+    {FeatureName}Resource.php     ← classe vide avec attribut #[ApiResource]
+  State/
+    Processor/
+      {DoSomething}Processor.php  ← implémente ProcessorInterface → Command
+    Provider/
+      {GetSomething}StateProvider.php ← implémente ProviderInterface → Query
+  Dto/
+    {Name}.php                    ← données entrantes ou sortantes
+  Controller/
+    {Action}Controller.php        ← uniquement pour cas non-standards
+```
+
+---
+
+## Resource
+
+Classe **vide** — elle ne contient que l'attribut `#[ApiResource]`. Aucune logique.
+
+```php
+// Infrastructure/ApiPlatform/Resource/MangaResource.php
+namespace App\Domain\Manga\Infrastructure\ApiPlatform\Resource;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Get;
+use ApiPlatform\Metadata\Post;
+use ApiPlatform\Metadata\Delete;
+use App\Domain\Manga\Infrastructure\ApiPlatform\Dto\MangaDetail;
+use App\Domain\Manga\Infrastructure\ApiPlatform\State\Provider\GetMangaStateProvider;
+use App\Domain\Manga\Infrastructure\ApiPlatform\State\Processor\CreateMangaProcessor;
+
+#[ApiResource(
+    shortName: 'Manga',
+    operations: [
+        new Get(
+            uriTemplate: '/mangas/by-id/{id}',
+            provider: GetMangaStateProvider::class,
+            output: MangaDetail::class,
+        ),
+        new Post(
+            uriTemplate: '/mangas',
+            input: CreateMangaDto::class,
+            processor: CreateMangaProcessor::class,
+        ),
+        new Delete(
+            uriTemplate: '/mangas/{id}',
+            provider: DeleteMangaProvider::class,   // ← provider requis pour Delete
+            processor: DeleteMangaProcessor::class,
+        ),
+    ]
+)]
+class MangaResource {}
+```
+
+**Règles Resource :**
+- `shortName` = nom du concept métier (ex: `'Manga'`, `'Chapter'`).
+- `uriTemplate` explicite (pas de génération automatique depuis le nom de classe).
+- `output` = DTO de sortie, `input` = DTO d'entrée.
+- `provider` et `processor` référencés par `::class`.
+
+---
+
+## State Processor → Command (écriture)
+
+```php
+// Infrastructure/ApiPlatform/State/Processor/{DoSomething}Processor.php
+namespace App\Domain\{Domain}\Infrastructure\ApiPlatform\State\Processor;
+
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProcessorInterface;
+use App\Domain\{Domain}\Application\Command\{DoSomething};
+use App\Domain\{Domain}\Application\CommandHandler\{DoSomething}Handler;
+use App\Domain\{Domain}\Domain\Exception\{Something}NotFoundException;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
+
+readonly class {DoSomething}Processor implements ProcessorInterface
+{
+    public function __construct(
+        private {DoSomething}Handler $handler,
+    ) {}
+
+    public function process(mixed $data, Operation $operation, array $uriVariables = [], array $context = []): void
+    {
+        try {
+            $this->handler->handle(new {DoSomething}(
+                $uriVariables['id'] ?? $data->someField,
+            ));
+        } catch ({Something}NotFoundException $e) {
+            throw new NotFoundHttpException($e->getMessage());
+        }
+    }
+}
+```
+
+**Règles Processor :**
+- Injecte le **Handler concret** (pas une interface, car l'Infrastructure peut dépendre de l'Application).
+- Traduit les Domain Exceptions en HTTP Exceptions Symfony (`NotFoundHttpException`, `UnprocessableEntityHttpException`…).
+- Retourne `void` pour les opérations sans corps de réponse, ou le DTO de sortie si nécessaire.
+
+---
+
+## State Provider → Query (lecture)
+
+```php
+// Infrastructure/ApiPlatform/State/Provider/{GetSomething}StateProvider.php
+namespace App\Domain\{Domain}\Infrastructure\ApiPlatform\State\Provider;
+
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProviderInterface;
+use App\Domain\{Domain}\Application\Query\{GetSomething};
+use App\Domain\{Domain}\Application\QueryHandler\{GetSomething}Handler;
+use App\Domain\{Domain}\Infrastructure\ApiPlatform\Dto\{Something}Detail;
+
+readonly class {GetSomething}StateProvider implements ProviderInterface
+{
+    public function __construct(
+        private {GetSomething}Handler $handler,
+    ) {}
+
+    public function provide(Operation $operation, array $uriVariables = [], array $context = []): {Something}Detail
+    {
+        $query = new {GetSomething}($uriVariables['id']);
+        $response = $this->handler->handle($query);
+
+        return new {Something}Detail(
+            id: $response->id,
+            title: $response->title,
+            // mapper Response → DTO ici
+        );
+    }
+}
+```
+
+**Règles Provider :**
+- Construit la Query depuis `$uriVariables` et/ou `$context['filters']`.
+- Mappe le `Response` (Application) vers un **DTO** (Infrastructure) — ne jamais retourner un Response directement.
+- Pour les collections, retourner un tableau ou un objet `Paginator`.
+
+---
+
+## DTOs
+
+Les DTOs sont des classes de données spécifiques à la couche HTTP. Ils ne doivent pas contenir de logique.
+
+```php
+// Infrastructure/ApiPlatform/Dto/MangaDetail.php
+namespace App\Domain\Manga\Infrastructure\ApiPlatform\Dto;
+
+readonly class MangaDetail
+{
+    public function __construct(
+        public string $id,
+        public string $title,
+        public string $slug,
+        public ?string $imageUrl,
+        // ...
+    ) {}
+}
+```
+
+**Règles DTO :**
+- `readonly class`.
+- Uniquement des types PHP natifs.
+- **DTO d'entrée** : contient les champs que le client envoie (`input:`).
+- **DTO de sortie** : contient les champs que l'API retourne (`output:`).
+- Ne jamais réutiliser un `Response` Application comme DTO API Platform (couches séparées).
+
+---
+
+## Conventions de nommage
+
+| Fichier                            | Pattern de nom                         | Exemple                            |
+|------------------------------------|----------------------------------------|------------------------------------|
+| Resource (opération GET)           | `{Concept}Resource.php`                | `MangaResource.php`                |
+| Resource (opération spécifique)    | `{Action}{Concept}Resource.php`        | `CreateMangaResource.php`          |
+| Processor                          | `{DoSomething}Processor.php`           | `CreateMangaProcessor.php`         |
+| Provider (GET item)                | `Get{Concept}StateProvider.php`        | `GetMangaStateProvider.php`        |
+| Provider (GET collection)          | `Get{Concept}ListStateProvider.php`    | `GetMangaListStateProvider.php`    |
+| Provider (Delete, nécessite item)  | `Delete{Concept}Provider.php`          | `DeleteMangaProvider.php`          |
+| DTO de sortie (item)               | `{Concept}Detail.php`                  | `MangaDetail.php`                  |
+| DTO de sortie (liste)              | `{Concept}ListItem.php`                | `MangaListItem.php`                |
+| DTO de sortie (collection)         | `{Concept}Collection.php`              | `MangaCollection.php`              |
+
+---
+
+## Flux complet : une opération POST
+
+```
+HTTP POST /mangas
+  → CreateMangaResource (#[ApiResource] avec processor:)
+    → CreateMangaProcessor::process($data, ...)
+      → CreateMangaFromMangadexHandler::handle(new CreateMangaFromMangadex(...))
+        → Domain : Manga::__construct(...) + invariants
+        → MangaRepositoryInterface::save($manga)
+        → MessageBus::dispatch(new MangaCreated(...))
+```

.claude/skills/cqrs/SKILL.md

@@ -0,0 +1,208 @@
+---
+name: cqrs
+description: Patterns CQRS du projet Mangarr — templates Command/CommandHandler et Query/QueryHandler, enregistrement dans Symfony Messenger, séparation read/write model. Utiliser quand on crée ou modifie un use case (Command ou Query) et son handler.
+allowed-tools: Read, Grep, Glob
+---
+
+# CQRS — Mangarr
+
+## Principe
+
+- **Command** : intention de modifier l'état. Retourne `void`.
+- **Query** : lecture seule. Retourne un `Response` objet (jamais une entité Doctrine).
+- Les handlers vivent dans `Application/`, jamais dans `Infrastructure/` directement.
+- Les handlers sont `readonly class` et reçoivent leurs dépendances via le constructeur (autowiring).
+
+---
+
+## Template Command
+
+```php
+// src/Domain/{Domain}/Application/Command/{DoSomething}.php
+namespace App\Domain\{Domain}\Application\Command;
+
+readonly class {DoSomething}
+{
+    public function __construct(
+        public string $someId,
+        public string $someValue,
+        // scalaires ou tableaux uniquement — pas d'objets du Domain
+    ) {}
+}
+```
+
+## Template CommandHandler
+
+```php
+// src/Domain/{Domain}/Application/CommandHandler/{DoSomething}Handler.php
+namespace App\Domain\{Domain}\Application\CommandHandler;
+
+use App\Domain\{Domain}\Application\Command\{DoSomething};
+use App\Domain\{Domain}\Domain\Contract\Repository\{Name}RepositoryInterface;
+use App\Domain\{Domain}\Domain\Event\{SomethingHappened};
+use App\Domain\{Domain}\Domain\Model\{Aggregate};
+use Ramsey\Uuid\Uuid;
+use Symfony\Component\Messenger\MessageBusInterface;
+
+readonly class {DoSomething}Handler
+{
+    public function __construct(
+        private {Name}RepositoryInterface $repository,
+        // autres interfaces Domain uniquement
+        private MessageBusInterface $messageBus,   // si event à dispatcher
+    ) {}
+
+    public function handle({DoSomething} $command): void
+    {
+        // 1. Reconstruire/créer l'Aggregate via Value Objects
+        $aggregate = new {Aggregate}(
+            new {AggregateId}(Uuid::uuid4()->toString()),
+            // ...
+        );
+
+        // 2. Appeler la méthode métier (invariants dans le Domain)
+        $aggregate->doSomething();
+
+        // 3. Persister via l'interface repository
+        $this->repository->save($aggregate);
+
+        // 4. Dispatcher un Domain Event si nécessaire
+        $this->messageBus->dispatch(new {SomethingHappened}($aggregate->getId()->getValue()));
+    }
+}
+```
+
+**Règles CommandHandler :**
+- N'injecte que des interfaces définies dans `Domain/Contract/` (jamais une classe concrète Infrastructure).
+- Exception autorisée : `MessageBusInterface` de Symfony Messenger.
+- Ne retourne jamais de données (`void`).
+
+---
+
+## Template Query
+
+```php
+// src/Domain/{Domain}/Application/Query/{GetSomething}.php
+namespace App\Domain\{Domain}\Application\Query;
+
+readonly class {GetSomething}
+{
+    public function __construct(
+        public string $id,
+        // critères de filtrage en scalaires
+    ) {}
+}
+```
+
+## Template QueryHandler
+
+```php
+// src/Domain/{Domain}/Application/QueryHandler/{GetSomething}Handler.php
+namespace App\Domain\{Domain}\Application\QueryHandler;
+
+use App\Domain\{Domain}\Application\Query\{GetSomething};
+use App\Domain\{Domain}\Application\Response\{Something}Response;
+use App\Domain\{Domain}\Domain\Contract\Repository\{Name}RepositoryInterface;
+use App\Domain\{Domain}\Domain\Exception\{Something}NotFoundException;
+
+readonly class {GetSomething}Handler
+{
+    public function __construct(
+        private {Name}RepositoryInterface $repository,
+    ) {}
+
+    public function handle({GetSomething} $query): {Something}Response
+    {
+        $aggregate = $this->repository->findById($query->id);
+
+        if (!$aggregate) {
+            throw new {Something}NotFoundException();
+        }
+
+        return new {Something}Response(
+            id: $aggregate->getId()->getValue(),
+            // mapper les Value Objects vers scalaires ici
+        );
+    }
+}
+```
+
+## Template Response
+
+```php
+// src/Domain/{Domain}/Application/Response/{Something}Response.php
+namespace App\Domain\{Domain}\Application\Response;
+
+readonly class {Something}Response
+{
+    public function __construct(
+        public string $id,
+        public string $title,
+        // scalaires et tableaux uniquement — jamais d'objets Domain
+    ) {}
+}
+```
+
+**Règles Response :**
+- `readonly class`.
+- Uniquement des types PHP natifs (`string`, `int`, `float`, `bool`, `array`, `?string`…).
+- C'est le **read model** — il ne sert qu'à transporter des données vers l'Infrastructure.
+
+---
+
+## Enregistrement dans Symfony Messenger
+
+### Command via bus synchrone
+
+Les handlers sont auto-découverts par autowiring. Aucune configuration supplémentaire pour les CommandHandlers Application purs.
+
+Pour les handlers Symfony Messenger (traitement asynchrone ou via `command.bus`), créer un wrapper dans `Infrastructure/CommandHandler/` :
+
+```php
+// src/Domain/{Domain}/Infrastructure/CommandHandler/Symfony{DoSomething}Handler.php
+namespace App\Domain\{Domain}\Infrastructure\CommandHandler;
+
+use App\Domain\{Domain}\Application\Command\{DoSomething};
+use App\Domain\{Domain}\Application\CommandHandler\{DoSomething}Handler;
+
+readonly class Symfony{DoSomething}Handler
+{
+    public function __construct(
+        private {DoSomething}Handler $handler,
+    ) {}
+
+    public function __invoke({DoSomething} $command): void
+    {
+        $this->handler->handle($command);
+    }
+}
+```
+
+Déclarer dans `config/services.yaml` :
+```yaml
+App\Domain\{Domain}\Infrastructure\CommandHandler\Symfony{DoSomething}Handler:
+    tags:
+        - { name: messenger.message_handler, bus: command.bus }
+```
+
+### Buses disponibles
+
+| Bus / Transport  | Usage                              |
+|------------------|------------------------------------|
+| `command.bus`    | Commands synchrones ou async       |
+| `events`         | Domain Events (async)              |
+| `commands`       | Messages async (ex: scraping)      |
+| `async`          | Scheduler (tâches planifiées)      |
+
+---
+
+## Séparation Read Model / Write Model
+
+| Write Model                          | Read Model                                |
+|--------------------------------------|-------------------------------------------|
+| `Domain/Model/{Aggregate}.php`       | `Application/Response/{Name}Response.php` |
+| Contient les invariants métier       | Contient uniquement des données aplaties  |
+| Manipulé par les CommandHandlers     | Retourné par les QueryHandlers            |
+| Persisté via `RepositoryInterface`   | Jamais persisté directement               |
+
+Ne jamais retourner un Aggregate depuis un QueryHandler — toujours mapper vers une Response.

.claude/skills/ddd-core/SKILL.md

@@ -0,0 +1,144 @@
+---
+name: ddd-core
+description: Règles DDD du projet Mangarr — Aggregates, Value Objects immutables, Domain Events, invariants. Utiliser quand on crée ou modifie un Model, Value Object, Event ou Exception dans src/Domain/*/Domain/.
+allowed-tools: Read, Grep, Glob
+---
+
+# Règles DDD — Couche Domain
+
+## Emplacement
+
+```
+src/Domain/{DomainName}/Domain/
+  Model/
+    {AggregateName}.php
+    ValueObject/
+      {VoName}.php
+  Event/
+    {SomethingHappened}.php
+  Exception/
+    {Something}Exception.php
+  Contract/
+    Repository/
+      {Name}RepositoryInterface.php
+    Service/
+      {Name}Interface.php
+    Client/
+      {Name}ClientInterface.php
+```
+
+## Aggregates
+
+- Classe normale (pas `readonly`), propriétés `private`.
+- Le constructeur prend des **Value Objects**, jamais des scalaires bruts pour les identifiants et concepts métier.
+- **Aucune annotation Doctrine** dans le Model — c'est la responsabilité du Repository (Infrastructure).
+- Les méthodes métier protègent les invariants et lèvent des **Domain Exceptions** (jamais des exceptions génériques).
+- Les setters publics sont interdits. Exposer des méthodes métier explicites (`updateImageUrls()`, `enableMonitoring()`, etc.).
+
+```php
+// ✅ Correct
+class Manga
+{
+    public function __construct(
+        private MangaId $id,
+        private MangaTitle $title,
+        private MangaSlug $slug,
+        // ...
+    ) {}
+
+    public function updateImageUrls(ImageUrls $imageUrls): void
+    {
+        $this->imageUrls = $imageUrls;
+    }
+}
+
+// ❌ Interdit
+class Manga
+{
+    public string $title; // propriété publique
+    #[ORM\Column] // annotation Doctrine dans le Domain
+    private string $title;
+    public function setTitle(string $title): void {} // setter générique
+}
+```
+
+## Value Objects
+
+- Toujours `readonly class`.
+- Valider dans le constructeur, lever une **Domain Exception** si invalide.
+- Exposer `getValue()` pour récupérer la valeur primitive.
+- Jamais de dépendance externe (pas de Symfony, pas de Doctrine).
+
+```php
+readonly class MangaTitle
+{
+    public function __construct(public readonly string $value)
+    {
+        if (empty(trim($value))) {
+            throw new InvalidMangaTitleException('Title cannot be empty');
+        }
+    }
+
+    public function getValue(): string
+    {
+        return $this->value;
+    }
+}
+```
+
+Valeurs composées (ex: chemins d'images) → Value Object avec plusieurs propriétés :
+
+```php
+readonly class ImageUrls
+{
+    public function __construct(
+        private string $full,
+        private string $thumbnail,
+    ) {}
+
+    public function getFull(): string { return $this->full; }
+    public function getThumbnail(): string { return $this->thumbnail; }
+}
+```
+
+## Domain Events
+
+- Nommés au **passé** : `MangaCreated`, `ChapterImported`, `MonitoringEnabled`.
+- `readonly class`, transportent uniquement des scalaires (pas d'objets du Domain).
+- Placés dans `Domain/Event/`.
+- Dispatchés depuis le **CommandHandler** (Application), jamais depuis le Domain lui-même.
+- Le bus utilisé est `MessageBusInterface` de Symfony Messenger (autorisé dans Application, pas dans Domain).
+
+```php
+readonly class MangaCreated
+{
+    public function __construct(
+        public string $mangaId,
+        public string $externalId,
+    ) {}
+}
+```
+
+## Domain Exceptions
+
+- Étendent `DomainException` ou `\RuntimeException` selon le cas.
+- Nommées avec le suffixe `Exception` ou `NotFoundException`.
+- Localisées dans `Domain/Exception/`.
+
+```php
+class MangaNotFoundException extends \DomainException
+{
+    public function __construct()
+    {
+        parent::__construct('Manga not found');
+    }
+}
+```
+
+## Règles d'invariants PHPArkitect (enforced automatiquement)
+
+- `App\Domain\{X}\Domain` → **aucune dépendance** en dehors de son propre namespace.
+- Exceptions autorisées : `DateTimeImmutable`, `RuntimeException`, `Exception`, `DomainException`, `InvalidArgumentException`, `Throwable`, `Symfony\Component\HttpKernel\Exception`.
+- `Ramsey\Uuid` et `Symfony\Component\Messenger` : autorisés uniquement en **Application**, pas en Domain.
+
+Vérification : `make phparkitect`

.claude/skills/hexagonal-arch/SKILL.md

@@ -0,0 +1,139 @@
+---
+name: hexagonal-arch
+description: Architecture hexagonale du projet Mangarr — structure exacte des dossiers, règles d'import strictes par couche, nommage ports (interfaces) vs adapters (implémentations). Utiliser quand on crée un nouveau domaine, un nouveau fichier, ou qu'on vérifie les dépendances entre couches.
+allowed-tools: Read, Grep, Glob, Bash
+---
+
+# Architecture Hexagonale — Mangarr
+
+## Structure canonique d'un domaine
+
+```
+src/Domain/{DomainName}/
+  Domain/                          ← NOYAU pur, 0 dépendance framework
+    Model/
+      {Aggregate}.php
+      ValueObject/
+        {VoName}.php
+    Event/
+      {SomethingHappened}.php
+    Exception/
+      {Something}Exception.php
+    Contract/                      ← PORTS (interfaces only)
+      Repository/
+        {Name}RepositoryInterface.php
+      Service/
+        {Name}Interface.php
+      Client/
+        {Name}ClientInterface.php
+
+  Application/                     ← Use cases, orchestre le Domain
+    Command/
+      {DoSomething}.php
+    CommandHandler/
+      {DoSomething}Handler.php
+    Query/
+      {GetSomething}.php
+    QueryHandler/
+      {GetSomething}Handler.php
+    Response/
+      {Something}Response.php
+    EventListener/
+      {SomethingHappened}EventListener.php
+
+  Infrastructure/                  ← ADAPTERS (implémentations concrètes)
+    Persistence/
+      Repository/
+        {Name}Repository.php       ← implémente Domain/Contract/Repository/
+    ApiPlatform/
+      Resource/
+        {FeatureName}Resource.php
+      State/
+        Processor/
+          {DoSomething}Processor.php
+        Provider/
+          {GetSomething}StateProvider.php
+      Dto/
+        {Name}.php
+    Service/
+      {ServiceName}.php            ← implémente Domain/Contract/Service/
+    Client/
+      {ClientName}.php             ← implémente Domain/Contract/Client/
+    CommandHandler/                ← handlers Symfony Messenger (wrappent l'Application)
+      Symfony{DoSomething}Handler.php
+```
+
+## Domaines du projet
+
+| Domaine     | Responsabilité                                      |
+|-------------|-----------------------------------------------------|
+| `Manga`     | Catalogue mangas, chapitres, métadonnées            |
+| `Scraping`  | Téléchargement de chapitres depuis les sources      |
+| `Conversion`| Conversion de formats (CBR→CBZ, génération CBZ)     |
+| `Reader`    | Lecture de chapitres                                |
+| `Setting`   | Configuration applicative                           |
+| `Shared`    | Contrats transverses (`EventDispatcherInterface`, `MangaPathManagerInterface`, etc.) |
+
+## Règles d'import strictes
+
+### Domain (noyau)
+```
+✅ Peut importer :  son propre namespace uniquement
+                   + exceptions PHP standard
+❌ Interdit :       Symfony\*, Doctrine\*, Ramsey\Uuid, tout autre domaine
+```
+
+### Application
+```
+✅ Peut importer :  son propre Domain (App\Domain\{X}\Domain\*)
+                   App\Domain\Shared\Domain\Contract\*
+                   Symfony\Component\Messenger\*
+                   Ramsey\Uuid\*
+❌ Interdit :       son propre Infrastructure (App\Domain\{X}\Infrastructure\*)
+                   Doctrine\*, tout autre domaine
+```
+
+### Infrastructure
+```
+✅ Peut importer :  tout (Symfony, Doctrine, API Platform, etc.)
+                   son Application et son Domain
+❌ Convention :     ne pas contenir de logique métier (déléguer à Application)
+```
+
+## Ports vs Adapters — nommage
+
+| Concept   | Localisation                         | Suffixe         | Exemple                         |
+|-----------|--------------------------------------|-----------------|---------------------------------|
+| Port      | `Domain/Contract/Repository/`        | `Interface`     | `MangaRepositoryInterface`      |
+| Port      | `Domain/Contract/Service/`           | `Interface`     | `ImageProcessorInterface`       |
+| Port      | `Domain/Contract/Client/`            | `Interface`     | `MangadexClientInterface`       |
+| Adapter   | `Infrastructure/Persistence/`        | `Repository`    | `LegacyChapterRepository`       |
+| Adapter   | `Infrastructure/Service/`            | *(nom libre)*   | `ImageProcessor`                |
+| Adapter   | `Infrastructure/Client/`             | `Client`        | `MangadexClient`                |
+
+Le binding port → adapter se déclare dans `config/services.yaml` :
+```yaml
+App\Domain\Manga\Domain\Contract\Repository\MangaRepositoryInterface:
+    alias: App\Domain\Manga\Infrastructure\Persistence\Repository\LegacyMangaRepository
+```
+
+## Shared Domain
+
+Les contrats transverses vivent dans `src/Domain/Shared/Domain/Contract/` :
+- `CommandInterface`, `QueryInterface`, `ResponseInterface` — marqueurs
+- `CommandHandlerInterface`, `QueryHandlerInterface` — handlers génériques
+- `EventDispatcherInterface` — dispatch d'événements domain
+- `MangaPathManagerInterface` — gestion des chemins de fichiers
+- `FileUploadInterface`, `NotificationInterface` — services transverses
+
+`App\Domain\Shared` **ne dépend de personne** (règle PHPArkitect).
+
+## Checklist avant de créer un fichier
+
+1. Dans quelle couche va ce fichier ? (Domain / Application / Infrastructure)
+2. Ce fichier va-t-il importer quelque chose d'interdit pour cette couche ?
+3. Si c'est une implémentation concrète → existe-t-il déjà une interface (port) dans `Domain/Contract/` ?
+4. Si c'est une nouvelle interface → est-elle dans `Domain/Contract/` et non dans Infrastructure ?
+5. Le binding alias est-il déclaré dans `config/services.yaml` ?
+
+Vérification automatique : `make phparkitect`

.claude/skills/task-workflow/SKILL.md

@@ -0,0 +1,142 @@
+---
+name: task-workflow
+description: Workflow complet pour traiter une tâche du TASK.md — branche git, développement, tests, commit conventionnel, push, puis archivage dans DONE.md. Utiliser quand l'utilisateur veut implémenter une tâche listée dans TASK.md.
+allowed-tools: Read, Bash, Edit, Write, Glob, Grep
+---
+
+# Workflow de traitement d'une tâche (TASK.md → DONE.md)
+
+Quand l'utilisateur demande de traiter une tâche du `TASK.md`, suivre **dans l'ordre** les étapes ci-dessous.
+
+---
+
+## ⚠️ Étape 0 — Repartir d'une branche saine depuis `origin/main`
+
+**IMPORTANT : toujours commencer par cette étape, sans exception.**
+
+```bash
+git fetch origin
+git checkout main
+git pull origin main
+```
+
+Ensuite seulement créer la branche de travail (voir étape 2).
+
+> Règle : ne jamais partir d'une branche de feature existante. Toujours tirer depuis `main` à jour.
+
+---
+
+## Étape 1 — Lire et choisir la tâche
+
+1. Lire `TASK.md` pour identifier la tâche à traiter (si non précisée, demander laquelle).
+2. Extraire : le titre, les fichiers impactés, et la liste des sous-tâches.
+
+---
+
+## Étape 2 — Créer une branche git
+
+Nommer la branche d'après le type et le titre de la tâche :
+
+```
+<type>/<slug-de-la-tache>
+```
+
+Exemples de types : `feat`, `fix`, `style`, `refactor`, `test`, `chore`
+
+```bash
+git checkout -b style/simplifier-table-homepage
+```
+
+Règle : **ne jamais committer directement sur `main`**.
+
+---
+
+## Étape 3 — Implémenter la tâche
+
+- Lire tous les fichiers mentionnés dans la tâche avant de les modifier.
+- Cocher mentalement chaque sous-tâche `[ ]` au fur et à mesure.
+- Respecter les skills existants selon les fichiers touchés :
+  - Composant Vue → skill `vue-frontend`
+  - Domaine PHP → skills `ddd-core`, `hexagonal-arch`, `cqrs`, `api-platform`
+  - Tests → skill `testing-strategy`
+
+---
+
+## Étape 4 — Vérifier que tous les tests passent
+
+```bash
+make test
+```
+
+- Si des tests échouent, **corriger avant de continuer**.
+- Ne pas passer à l'étape suivante tant que la suite n'est pas verte.
+- Pour un test spécifique : `make test f="NomDeLaClasse"`
+
+---
+
+## Étape 5 — Commit conventionnel
+
+Format Conventional Commits :
+
+```
+<type>(<scope>): <description courte en français>
+
+[corps optionnel : explication du pourquoi]
+```
+
+**Types autorisés :** `feat`, `fix`, `style`, `refactor`, `test`, `chore`, `docs`
+
+**Scope :** nom du domaine ou du composant impacté (ex: `manga-table`, `sidebar`, `homepage`)
+
+Exemples :
+```
+style(manga-table): simplifier le wrapper card + hover vert sur le titre
+fix(sidebar): séparer toggle et navigation sur MenuGroup
+```
+
+```bash
+git add <fichiers modifiés>
+git commit -m "style(manga-table): simplifier le wrapper card + hover vert sur le titre"
+```
+
+---
+
+## Étape 6 — Push de la branche
+
+**Demander confirmation à l'utilisateur avant de pusher.**
+
+```bash
+git push -u origin <nom-de-la-branche>
+```
+
+---
+
+## Étape 7 — Archiver la tâche dans DONE.md
+
+1. Retirer le bloc de la tâche de `TASK.md` (section complète, du titre `##` jusqu'au `---` suivant).
+2. Ajouter la tâche dans `DONE.md` (créer le fichier s'il n'existe pas) avec la date et le sha du commit :
+
+Format dans `DONE.md` :
+```markdown
+## [TYPE] Titre de la tâche — YYYY-MM-DD
+
+> Branche : `<nom-de-la-branche>` | Commit : `<sha court>`
+
+- [x] Sous-tâche 1
+- [x] Sous-tâche 2
+```
+
+---
+
+## Résumé du flux
+
+```
+fetch + checkout main + pull (branche saine)
+  → branche git depuis main
+  → TASK.md (choisir la tâche)
+  → implémentation
+  → make test (vert obligatoire)
+  → conventional commit
+  → push (après confirmation)
+  → DONE.md
+```

.claude/skills/testing-strategy/SKILL.md

@@ -0,0 +1,258 @@
+---
+name: testing-strategy
+description: Stratégie de tests du projet Mangarr — pyramide adaptée à l'archi DDD/Hexa. Tests unitaires purs sur le Domain/Application (sans framework), adapters InMemory, tests fonctionnels API. Utiliser quand on crée ou modifie des tests, ou qu'on discute de la couverture à implémenter.
+allowed-tools: Read, Grep, Glob
+---
+
+# Stratégie de tests — Mangarr
+
+## Pyramide
+
+```
+                    ┌─────────────────────────────┐
+                    │   Tests Fonctionnels (API)   │  ← peu nombreux, coûteux
+                    │   tests/Functional/          │     zenstruck/browser + BrowserKit
+                    ├─────────────────────────────┤
+                    │  Tests d'Intégration         │  ← adapters Doctrine, clients HTTP
+                    │  tests/Domain/*/Adapter/     │     zenstruck/foundry + DAMA
+                    ├─────────────────────────────┤
+                    │  Tests Unitaires (Domain)    │  ← majorité, rapides, sans framework
+                    │  tests/Domain/*/Application/ │     PHPUnit pur, InMemory adapters
+                    └─────────────────────────────┘
+```
+
+---
+
+## 1. Tests Unitaires — Application Layer (CommandHandlers, QueryHandlers)
+
+**Localisation :** `tests/Domain/{Domain}/Application/CommandHandler/` et `QueryHandler/`
+
+**Principe :** Aucune dépendance au framework. On injecte des **adapters InMemory** à la place des vraies implémentations Infrastructure.
+
+### Structure d'un test CommandHandler
+
+```php
+// tests/Domain/Manga/Application/CommandHandler/CreateMangaHandlerTest.php
+namespace App\Tests\Domain\Manga\Application\CommandHandler;
+
+use App\Domain\Manga\Application\Command\CreateManga;
+use App\Domain\Manga\Application\CommandHandler\CreateMangaHandler;
+use App\Tests\Domain\Manga\Adapter\InMemoryMangaRepository;
+use App\Tests\Domain\Manga\Adapter\InMemoryImageProcessor;
+use App\Tests\Shared\Adapter\InMemoryMessageBus;
+use PHPUnit\Framework\TestCase;
+
+class CreateMangaHandlerTest extends TestCase
+{
+    private InMemoryMangaRepository $repository;
+    private CreateMangaHandler $handler;
+
+    protected function setUp(): void
+    {
+        $this->repository = new InMemoryMangaRepository();
+        $this->handler = new CreateMangaHandler(
+            $this->repository,
+            new InMemoryImageProcessor(),
+            new InMemoryMessageBus(),
+        );
+    }
+
+    public function testHandleSuccess(): void
+    {
+        // Arrange
+        $command = new CreateManga(
+            title: 'One Piece',
+            slug: 'one-piece',
+            // ...
+        );
+
+        // Act
+        $this->handler->handle($command);
+
+        // Assert
+        $saved = $this->repository->findAll()[0];
+        $this->assertEquals('One Piece', $saved->getTitle()->getValue());
+    }
+
+    public function testThrowsWhenInvalid(): void
+    {
+        $this->expectException(\RuntimeException::class);
+        $this->handler->handle(new CreateManga(title: '', /* ... */));
+    }
+}
+```
+
+### Structure d'un test QueryHandler
+
+```php
+// tests/Domain/Manga/Application/QueryHandler/GetMangaByIdHandlerTest.php
+class GetMangaByIdHandlerTest extends TestCase
+{
+    private InMemoryMangaRepository $repository;
+    private GetMangaByIdHandler $handler;
+
+    protected function setUp(): void
+    {
+        $this->repository = new InMemoryMangaRepository();
+        $this->handler = new GetMangaByIdHandler($this->repository);
+    }
+
+    public function testThrowsWhenNotFound(): void
+    {
+        $this->expectException(MangaNotFoundException::class);
+        $this->handler->handle(new GetMangaById('non-existent'));
+    }
+
+    public function testReturnsMappedResponse(): void
+    {
+        // Arrange — construire l'Aggregate directement avec Value Objects
+        $manga = new Manga(
+            id: new MangaId('123'),
+            title: new MangaTitle('One Piece'),
+            // ...
+        );
+        $this->repository->save($manga);
+
+        // Act
+        $response = $this->handler->handle(new GetMangaById('123'));
+
+        // Assert — vérifier les scalaires du Response
+        $this->assertEquals('123', $response->id);
+        $this->assertEquals('One Piece', $response->title);
+    }
+
+    protected function tearDown(): void
+    {
+        $this->repository->clear();
+    }
+}
+```
+
+---
+
+## 2. Adapters InMemory
+
+**Localisation :** `tests/Domain/{Domain}/Adapter/`
+
+Chaque interface de `Domain/Contract/` a son adapter InMemory dans les tests. Ces adapters stockent les données en mémoire (`array`).
+
+### Structure d'un InMemory Repository
+
+```php
+// tests/Domain/Manga/Adapter/InMemoryMangaRepository.php
+namespace App\Tests\Domain\Manga\Adapter;
+
+use App\Domain\Manga\Domain\Contract\Repository\MangaRepositoryInterface;
+use App\Domain\Manga\Domain\Model\Manga;
+
+class InMemoryMangaRepository implements MangaRepositoryInterface
+{
+    /** @var array<string, Manga> */
+    private array $mangas = [];
+
+    public function save(Manga $manga): void
+    {
+        $this->mangas[$manga->getId()->getValue()] = $manga;
+    }
+
+    public function findById(string $id): ?Manga
+    {
+        return $this->mangas[$id] ?? null;
+    }
+
+    public function findAll(): array
+    {
+        return array_values($this->mangas);
+    }
+
+    public function clear(): void
+    {
+        $this->mangas = [];
+    }
+    // ... implémenter toutes les méthodes de l'interface
+}
+```
+
+### Adapters InMemory disponibles (existants)
+
+| Adapter                          | Interface implémentée                    |
+|----------------------------------|------------------------------------------|
+| `InMemoryMangaRepository`        | `MangaRepositoryInterface`               |
+| `InMemoryImageProcessor`         | `ImageProcessorInterface`                |
+| `InMemoryMangadexClient`         | `MangadexClientInterface`                |
+| `InMemoryMangaProvider`          | `MangaProviderInterface`                 |
+| `InMemoryPathManager`            | `MangaPathManagerInterface`              |
+| `InMemoryMessageBus`             | `MessageBusInterface`                    |
+
+Quand on crée une nouvelle interface dans `Domain/Contract/`, **créer l'adapter InMemory correspondant** avant d'écrire les tests.
+
+---
+
+## 3. Tests Fonctionnels API
+
+**Localisation :** `tests/Functional/`
+
+Utilisent `zenstruck/browser` + `BrowserKitBrowser` avec le conteneur Symfony complet. Les données sont gérées par `zenstruck/foundry` (Factories) et `DAMA\DoctrineTestBundle` (rollback automatique après chaque test).
+
+```php
+// tests/Functional/SomeEndpointTest.php
+namespace App\Tests\Functional;
+
+use Zenstruck\Browser\Test\HasBrowser;
+use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
+
+class SomeEndpointTest extends WebTestCase
+{
+    use HasBrowser;
+
+    public function testGetManga(): void
+    {
+        $this->browser()
+            ->get('/api/mangas/by-id/some-uuid')
+            ->assertStatus(200)
+            ->assertJson()
+            ->assertJsonMatches('title', 'One Piece');
+    }
+
+    public function testCreateManga(): void
+    {
+        $this->browser()
+            ->post('/api/mangas', [
+                'json' => ['externalId' => 'abc-123'],
+            ])
+            ->assertStatus(204);
+    }
+}
+```
+
+---
+
+## Commandes
+
+```bash
+make test                                   # tous les tests
+make test f="CreateMangaHandlerTest"        # un test par nom de classe
+make test c="--group unit"                  # par groupe
+make test c="--stop-on-failure"             # s'arrêter au premier échec
+```
+
+---
+
+## Checklist par feature
+
+Quand on implémente une nouvelle feature, les tests à écrire dans l'ordre :
+
+1. **Test du CommandHandler/QueryHandler** (unitaire, `TestCase` pur)
+   - Cas nominal (happy path)
+   - Cas d'erreur (not found, invalide…)
+   - Vérification que le repository est bien appelé
+
+2. **Test de la Value Object** si une nouvelle VO est créée
+   - Validation des invariants (cas invalides)
+   - `getValue()` retourne la bonne valeur
+
+3. **Test fonctionnel de l'endpoint** (si API Platform)
+   - Codes HTTP corrects (200, 201, 204, 404…)
+   - Structure JSON de la réponse
+
+Ne pas tester les Processors/Providers API Platform en unitaire (trop de couplage framework) — les couvrir via les tests fonctionnels.

.claude/skills/ui-style/SKILL.md

@@ -0,0 +1,223 @@
+---
+name: ui-style
+description: Design system et harmonisation UI de Mangarr — layout de page canonique (Toolbar + flex + sections border-t), palette Tailwind, patterns composants (boutons, badges, upload, progression). Utiliser quand on crée ou modifie une page Vue ou un composant UI.
+allowed-tools: Read, Grep, Glob
+---
+
+# Design system Mangarr — Guide UI
+
+Les pages de référence canoniques sont :
+- `assets/vue/app/domain/manga/infrastructure/presentation/pages/NewImportPage.vue`
+- `assets/vue/app/domain/conversion/infrastructure/presentation/pages/ConversionPage.vue`
+
+En cas de doute, les lire pour vérifier le pattern en vigueur.
+
+---
+
+## 1. Layout de page canonique
+
+```vue
+<template>
+  <div class="flex flex-col h-full">
+    <Toolbar :config="toolbarConfig" />
+    <div class="overflow-y-auto flex-1">
+      <div class="px-6 py-8">
+        <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
+          <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
+            Titre section
+          </h2>
+          <!-- contenu -->
+        </section>
+        <section class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+          <!-- section suivante -->
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+**Règles absolues :**
+- `flex flex-col h-full` toujours à la racine du template
+- `<Toolbar>` toujours en premier enfant direct de la racine
+- `overflow-y-auto flex-1` pour le contenu scrollable
+- `px-6 py-8` comme wrapper interne — **jamais** `container mx-auto`
+- Chaque bloc logique = une `<section>` avec `border-t border-gray-200 dark:border-gray-700`
+- **Jamais** de `<h1>` volant dans le contenu — le titre de page va dans `toolbarConfig.leftSection`
+
+---
+
+## 2. Configuration Toolbar
+
+```javascript
+import { computed } from 'vue';
+import { SomeIcon } from '@heroicons/vue/24/outline';
+
+const toolbarConfig = computed(() => ({
+  leftSection: [
+    { type: 'label', text: 'Titre de la page', class: 'text-sm font-medium' },
+  ],
+  rightSection: [
+    {
+      type: 'button',
+      icon: SomeIcon,
+      label: 'Action principale',
+      onClick: handler,
+      disabled: condition,
+    },
+    // Bouton conditionnel :
+    ...(showAction ? [{
+      type: 'button',
+      icon: OtherIcon,
+      label: 'Action contextuelle',
+      onClick: otherHandler,
+    }] : []),
+  ],
+}));
+```
+
+- Icônes : Heroicons v24/outline (`@heroicons/vue/24/outline`)
+- Boutons toolbar visibles uniquement si pertinents — utiliser le spread conditionnel
+- `rightSection` peut être vide `[]`
+
+---
+
+## 3. Headers de section
+
+```vue
+<!-- Header simple -->
+<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
+  Titre
+</h2>
+
+<!-- Header avec info contextuelle à droite -->
+<div class="flex items-center justify-between mb-3">
+  <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">
+    Titre
+  </h2>
+  <span class="text-xs text-gray-500 dark:text-gray-400">info contextuelle</span>
+</div>
+```
+
+---
+
+## 4. Palette de couleurs
+
+| Usage | Classes Tailwind |
+|-------|-----------------|
+| Primaire (action principale) | `bg-green-600 hover:bg-green-700` |
+| Secondaire | `bg-blue-600 hover:bg-blue-700` |
+| Danger | `bg-red-600 hover:bg-red-700` |
+| Désactivé | `disabled:bg-gray-400 disabled:cursor-not-allowed` |
+| Texte principal | `text-gray-900 dark:text-gray-100` |
+| Texte secondaire | `text-gray-600 dark:text-gray-300` |
+| Texte subtil | `text-gray-500 dark:text-gray-400` |
+| Étiquette section | `text-gray-400 dark:text-gray-500` |
+| Fond carte / panel | `bg-white dark:bg-gray-800` |
+| Bordure | `border-gray-200 dark:border-gray-700` |
+| Séparateur de liste | `divide-y divide-gray-100 dark:divide-gray-700/50` |
+
+---
+
+## 5. Boutons
+
+```vue
+<!-- Bouton action principale (submit, lancer, confirmer) -->
+<button
+  class="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white px-4 py-2 rounded-md font-medium transition-colors"
+  :disabled="condition"
+>
+  Label
+</button>
+
+<!-- Bouton ghost / discret -->
+<button class="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
+  Label
+</button>
+```
+
+---
+
+## 6. Barre de progression
+
+```vue
+<div class="bg-gray-200 dark:bg-gray-700 h-1.5 mb-4">
+  <div
+    class="bg-green-600 h-1.5 transition-all duration-300"
+    :style="{ width: progress + '%' }"
+  />
+</div>
+```
+
+> **Important :** toujours `bg-green-600`, jamais `bg-blue-600` pour les barres de progression.
+
+---
+
+## 7. Liste avec séparateurs
+
+```vue
+<div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+  <div
+    v-for="item in items"
+    :key="item.id"
+    class="flex items-center justify-between py-3"
+  >
+    <!-- contenu de l'item -->
+  </div>
+</div>
+```
+
+---
+
+## 8. Zone de drop / upload de fichier
+
+```vue
+<div
+  class="border-2 border-dashed rounded-lg p-8 text-center transition-colors"
+  :class="isDragging
+    ? 'border-green-500 bg-green-50 dark:bg-green-900/10'
+    : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'"
+  @dragover.prevent="isDragging = true"
+  @dragleave="isDragging = false"
+  @drop.prevent="handleDrop"
+>
+  <SomeIcon class="mx-auto h-8 w-8 text-gray-400 mb-3" />
+  <p class="text-sm text-gray-600 dark:text-gray-300">
+    Message principal
+  </p>
+  <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
+    Précision format/taille
+  </p>
+</div>
+```
+
+---
+
+## 9. Pages non conformes à corriger
+
+Les pages suivantes dévient encore du pattern canonique :
+
+| Page | Chemin relatif | Déviations principales |
+|------|---------------|----------------------|
+| `HomePage.vue` | `domain/manga/.../pages/` | Pas de `px-6 py-8`, pas de sections `border-t` |
+| `AddManga.vue` | `domain/manga/.../pages/` | Pas de Toolbar, pas de `flex flex-col h-full` |
+| `ActivityPage.vue` | `domain/activity/.../pages/` | Pas de `flex flex-col`, pas de Toolbar intégré |
+| `UserPreferencesPage.vue` | `domain/setting/.../pages/` | `h1` volant, pas de Toolbar |
+| `ScrapperConfigurations.vue` | `domain/setting/.../pages/` | `h1` volant, `container mx-auto` |
+| `ScrapperEdit.vue` | `domain/setting/.../pages/` | `container mx-auto` au lieu de `px-6 py-8` |
+| `MangaDetails.vue` | `domain/manga/.../pages/` | Layout spécial (cover + chapitres), à traiter séparément |
+| `ChapterPage.vue` | `domain/reader/.../pages/` | Layout lecteur spécialisé — **exception justifiée**, ne pas modifier |
+
+---
+
+## 10. Checklist avant de livrer une page
+
+- [ ] Racine : `flex flex-col h-full`
+- [ ] Premier enfant : `<Toolbar :config="toolbarConfig" />`
+- [ ] Contenu scrollable : `overflow-y-auto flex-1`
+- [ ] Wrapper interne : `px-6 py-8` (jamais `container mx-auto`)
+- [ ] Blocs logiques : `<section class="border-t border-gray-200 dark:border-gray-700 pt-6">`
+- [ ] Titre de page dans `toolbarConfig.leftSection`, pas de `<h1>` dans le contenu
+- [ ] Headers de section : classes `text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider`
+- [ ] Barres de progression : `bg-green-600` (pas `bg-blue-600`)
+- [ ] Dark mode : chaque couleur a sa variante `dark:`

.claude/skills/vue-frontend/SKILL.md

@@ -0,0 +1,251 @@
+---
+name: vue-frontend
+description: Architecture Vue.js du projet Mangarr — structure DDD front (domain/application/infrastructure/presentation), patterns Pinia store, TanStack Query composables, API repositories, conventions de nommage. Utiliser quand on crée ou modifie un composant Vue, une page, un store Pinia, un composable, ou un repository API dans assets/vue/app/.
+allowed-tools: Read, Grep, Glob
+---
+
+# Architecture Vue.js — Mangarr Frontend
+
+## Structure des dossiers
+
+```
+assets/vue/app/
+  index.js                    # Point d'entrée : Vue + Pinia + Router + VueQuery
+  App.vue                     # Root : <router-view> + <NotificationToast>
+  router/index.js             # Routes imbriquées sous Layout, base /vue/
+  domain/
+    {DomainName}/
+      domain/
+        entities/             # Classes entités JS
+        constants/            # Constantes du domaine
+      application/
+        store/                # Stores Pinia
+      infrastructure/
+        api/                  # Clients HTTP (ApiXxxRepository)
+      presentation/
+        pages/                # Composants pleine page
+        components/           # Composants réutilisables
+        composables/          # Logique Vue (useXxx)
+  shared/
+    components/
+      layout/                 # Layout, Header, Sidebar
+      ui/                     # Composants UI génériques
+    composables/              # useNotifications, etc.
+    stores/                   # headerStore, menuStore
+    plugin/                   # vueQuery.js config
+```
+
+**Domaines existants :** `manga`, `reader`, `import`, `conversion`, `activity`, `setting`
+
+## Conventions de nommage
+
+| Couche | Pattern | Exemple |
+|--------|---------|---------|
+| Entité | `PascalCase` | `Manga`, `ImportFile`, `Job` |
+| Store Pinia | `use{Domain}Store()` | `useMangaStore()` |
+| Composable | `use{Feature}()` | `useMangaDetails()`, `useNotifications()` |
+| Repository API | `Api{Domain}Repository` | `ApiMangaRepository` |
+| Page | `{Domain}{Action}.vue` | `MangaDetails.vue`, `NewImportPage.vue` |
+| Composant | `{Domain}{Feature}.vue` | `MangaCard.vue`, `StatusBadge.vue` |
+| Modal | `{Feature}Modal.vue` | `MangaDeleteModal.vue` |
+
+## Pattern Store Pinia
+
+```javascript
+// application/store/xyzStore.js
+export const useXyzStore = defineStore('xyz', {
+    state: () => ({
+        data: null,
+        isLoading: false,
+        error: null,
+    }),
+
+    getters: {
+        isReady: (state) => state.data && !state.isLoading,
+    },
+
+    actions: {
+        async load() {
+            this.isLoading = true
+            try {
+                const repo = new ApiXyzRepository()
+                this.data = await repo.getAll()
+            } catch (err) {
+                this.error = err.message
+                throw err
+            } finally {
+                this.isLoading = false
+            }
+        },
+    },
+})
+```
+
+## Pattern Composable avec TanStack Query
+
+Préférer TanStack Query pour les lectures (queries), le store Pinia pour les mutations et l'état global.
+
+```javascript
+// presentation/composables/useXyzDetails.js
+export function useXyzDetails(xyzId) {
+    const repo = new ApiXyzRepository()
+
+    return useQuery({
+        queryKey: ['xyz', xyzId],
+        queryFn: () => repo.getById(xyzId.value),
+        enabled: computed(() => !!xyzId.value),
+        staleTime: 5 * 60 * 1000,
+        refetchOnWindowFocus: true,
+    })
+}
+
+// Mutation
+export function useXyzEdit() {
+    const queryClient = useQueryClient()
+
+    return useMutation({
+        mutationFn: (data) => new ApiXyzRepository().edit(data),
+        onSuccess: () => queryClient.invalidateQueries({ queryKey: ['xyz'] }),
+    })
+}
+```
+
+## Pattern Repository API
+
+```javascript
+// infrastructure/api/apiXyzRepository.js
+export class ApiXyzRepository {
+    async getAll() {
+        const response = await fetch('/api/xyz')
+        if (!response.ok) throw new Error(await this.#extractError(response))
+        const data = await response.json()
+        return data.items.map(Xyz.fromApiData)
+    }
+
+    async getById(id) {
+        const response = await fetch(`/api/xyz/${id}`)
+        if (!response.ok) throw new Error(await this.#extractError(response))
+        return Xyz.fromApiData(await response.json())
+    }
+
+    async create(payload) {
+        const response = await fetch('/api/xyz', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload),
+        })
+        if (!response.ok) throw new Error(await this.#extractError(response))
+        return Xyz.fromApiData(await response.json())
+    }
+
+    async #extractError(response) {
+        try {
+            const data = await response.json()
+            return data.error || data.detail || `HTTP ${response.status}`
+        } catch {
+            return `HTTP ${response.status}`
+        }
+    }
+}
+```
+
+## Pattern Entité
+
+```javascript
+// domain/entities/xyz.js
+export class Xyz {
+    constructor({ id, name, status }) {
+        this.id = id
+        this.name = name
+        this.status = status
+    }
+
+    static fromApiData(data) {
+        return new Xyz(data)
+    }
+
+    isActive() { return this.status === 'active' }
+    isCompleted() { return this.status === 'completed' }
+}
+```
+
+## Pattern Page
+
+```vue
+<template>
+  <div>
+    <Toolbar :config="toolbarConfig" />
+    <LoadingSpinner v-if="isLoading" />
+    <div v-else-if="error">{{ error }}</div>
+    <ChildComponent v-else :data="data" @action="handleAction" />
+    <FeatureModal :is-open="isModalOpen" @close="closeModal" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useFeatureComposable } from '../composables/useFeature'
+
+const route = useRoute()
+const { data, isLoading, error } = useFeatureComposable(
+    computed(() => route.params.id)
+)
+
+const isModalOpen = ref(false)
+const closeModal = () => (isModalOpen.value = false)
+</script>
+```
+
+## Système de notifications (global)
+
+```javascript
+import { useNotifications } from '@/shared/composables/useNotifications'
+
+const { showSuccess, showError, showWarning, showInfo } = useNotifications()
+
+showSuccess('Manga ajouté avec succès')
+showError('Erreur lors du chargement')
+```
+
+## Configuration VueQuery (shared/plugin/vueQuery.js)
+
+- `staleTime`: 5 minutes
+- `gcTime`: 10 minutes
+- `retry`: 1
+- `refetchOnWindowFocus`: true
+
+## Upload de fichiers (FormData)
+
+Ne pas définir `Content-Type` manuellement — le navigateur le gère automatiquement avec le boundary correct.
+
+```javascript
+const formData = new FormData()
+formData.append('file', file)
+formData.append('mangaId', mangaId)
+
+const response = await fetch('/api/xyz/import', {
+    method: 'POST',
+    body: formData,  // pas de Content-Type header
+})
+```
+
+## Commandes utiles
+
+```bash
+make npm-run    # Build dev one-shot — vérifie qu'il n'y a pas d'erreur de compilation
+make npm-watch  # Watch + rebuild automatique pendant le développement
+make npm-add p=pkg  # Ajouter une dépendance npm
+```
+
+Après toute modification de composants Vue, stores ou repositories, lancer `make npm-run` pour valider le build.
+
+## Règles à respecter
+
+- **Domain** : entités JS pures, aucune dépendance Vue/fetch
+- **Application** : stores Pinia uniquement, pas d'appels fetch directs (passer par Infrastructure)
+- **Infrastructure** : repositories API, aucune logique Vue
+- **Presentation** : composants + composables, import uniquement depuis Application et Infrastructure
+- **Shared** : composants/composables transversaux, pas de dépendances vers les domaines
+- Préférer `useQuery`/`useMutation` (TanStack) pour les données serveur, Pinia pour l'état UI global
+- Un composable = une responsabilité, nommé `use{FeatureVerb}` (ex: `useMangaDelete`, `useMangaEdit`)

.cursor/rules/api_platform.mdc

@@ -0,0 +1,224 @@
+---
+description: 
+globs: *.php
+alwaysApply: false
+---
+```
+Domain/Manga/Infrastructure/ApiPlatform/
+├── Resource/           # Resources API par opération
+│   └── GetMangaResource.php # Resources pour l'opération Get
+│   └── CreateMangaResource.php # Resources pour l'opération Create
+├── State/             # Providers et Processors par opération
+    ├── Provider/      # State Providers
+    │   └── GetMangaStateProvider.php
+    └── Processor/     # State Processors
+        └── CreateMangaStateProcessor.php
+```
+
+## Règles d'Organisation
+
+### 1. Resources
+- Localisation : `Infrastructure/ApiPlatform/Resource/`
+- Principes :
+  - Une Resource par Operation
+  - Validation des données avec les attributs Symfony dans la Resource
+  - Documentation exhaustive avec les attributs PHP 8
+  - Nommage : `{Operation}Resource`
+  - Contient tous les attributs nécessaires en public
+  - Doit implémenter les interfaces de validation appropriées
+
+### 2. State Providers
+- Localisation : `Infrastructure/ApiPlatform/State/Provider/`
+- Principes :
+  - Un Provider par Operation de type Query
+  - Utilise les QueryHandler du domaine
+  - Convertit la Response du QueryHandler en Resource
+  - Renvoie toujours une Resource
+  - Nommage : `{Operation}StateProvider`
+
+### 3. State Processors
+- Localisation : `Infrastructure/ApiPlatform/State/Processor/`
+- Principes :
+  - Un Processor par Operation de type Command
+  - Utilise les CommandHandler du domaine
+  - Convertit la Resource en Command
+  - Renvoie uniquement un code HTTP
+  - Nommage : `{Operation}StateProcessor`
+
+## Exemples de Code
+
+### 1. Resource API
+```php
+namespace App\Domain\Manga\Infrastructure\ApiPlatform\Resource;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Get;
+use App\Domain\Manga\Infrastructure\ApiPlatform\State\Provider\GetMangaStateProvider;
+use Symfony\Component\Validator\Constraints as Assert;
+
+#[ApiResource(
+    shortName: 'Manga',
+    operations: [
+        new Get(
+            uriTemplate: '/mangas/{id}',
+            provider: GetMangaStateProvider::class,
+            output: GetMangaResource::class,
+            description: 'Récupère un manga par son identifiant'
+        )
+    ]
+)]
+class GetMangaResource
+{
+    public function __construct(
+        #[Assert\NotBlank]
+        #[Assert\Uuid]
+        public readonly string $id,
+
+        #[Assert\NotBlank]
+        public readonly string $title,
+
+        public readonly ?string $description = null,
+
+        #[Assert\NotBlank]
+        #[Assert\All([
+            new Assert\Type('string')
+        ])]
+        public readonly array $authors = [],
+
+        #[Assert\Url]
+        public readonly ?string $coverUrl = null
+    ) {}
+}
+```
+
+### 2. State Provider
+```php
+namespace App\Domain\Manga\Infrastructure\ApiPlatform\Resource\CreateManga;
+namespace App\Domain\Manga\Infrastructure\ApiPlatform\State\Provider;
+
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProviderInterface;
+use App\Domain\Manga\Application\Query\GetMangaByIdQuery;
+use App\Domain\Manga\Infrastructure\ApiPlatform\Resource\GetMangaResource;
+use Symfony\Component\Messenger\MessageBusInterface;
+
+class GetMangaStateProvider implements ProviderInterface
+{
+    public function __construct(
+        private readonly MessageBusInterface $queryBus
+    ) {}
+
+    public function provide(Operation $operation, array $uriVariables = [], array $context = []): ?GetMangaResource
+    {
+        $query = new GetMangaByIdQuery($uriVariables['id']);
+        $response = $this->queryBus->dispatch($query);
+
+        if (null === $response) {
+            return null;
+        }
+
+        return new GetMangaResource(
+            id: $response->id,
+            title: $response->title,
+            description: $response->description,
+            authors: $response->authors,
+            coverUrl: $response->coverUrl
+        );
+    }
+}
+```
+
+### 3. Resource CreateManga
+```php
+namespace App\Domain\Manga\Infrastructure\ApiPlatform\Resource;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Post;
+use App\Domain\Manga\Infrastructure\ApiPlatform\State\Processor\CreateMangaStateProcessor;
+use Symfony\Component\Validator\Constraints as Assert;
+
+#[ApiResource(
+    shortName: 'Manga',
+    operations: [
+        new Post(
+            uriTemplate: '/mangas',
+            processor: CreateMangaStateProcessor::class,
+            input: CreateMangaResource::class,
+            status: 201,
+            description: 'Crée un nouveau manga'
+        )
+    ]
+)]
+class CreateMangaResource
+{
+    public function __construct(
+        #[Assert\NotBlank(message: 'Le titre est obligatoire')]
+        #[Assert\Length(min: 1, max: 255)]
+        public readonly string $title,
+
+        #[Assert\Length(max: 1000)]
+        public readonly ?string $description = null,
+
+        #[Assert\NotNull]
+        #[Assert\Count(min: 1, max: 10)]
+        #[Assert\All([
+            new Assert\Type('string'),
+            new Assert\Length(min: 1, max: 100)
+        ])]
+        public readonly array $authors = [],
+
+        #[Assert\Url]
+        #[Assert\Length(max: 255)]
+        public readonly ?string $coverUrl = null
+    ) {}
+}
+```
+
+### 4. State Processor
+```php
+namespace App\Domain\Manga\Infrastructure\ApiPlatform\State\Processor;
+
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProcessorInterface;
+use App\Domain\Manga\Application\Command\CreateMangaCommand;
+use App\Domain\Manga\Infrastructure\ApiPlatform\Resource\CreateMangaResource;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Messenger\MessageBusInterface;
+
+class CreateMangaStateProcessor implements ProcessorInterface
+{
+    public function __construct(
+        private readonly MessageBusInterface $commandBus
+    ) {}
+
+    public function process(mixed $data, Operation $operation, array $uriVariables = [], array $context = []): int
+    {
+        assert($data instanceof CreateMangaResource);
+
+        $command = new CreateMangaCommand(
+            title: $data->title,
+            description: $data->description,
+            authors: $data->authors,
+            coverUrl: $data->coverUrl
+        );
+
+        $this->commandBus->dispatch($command);
+
+        return Response::HTTP_CREATED;
+    }
+}
+```
+
+## Bonnes Pratiques
+
+### 1. Documentation
+- Documentation exhaustive des endpoints
+- Description claire des paramètres
+- Exemples de requêtes/réponses
+- Documentation des codes d'erreur
+
+### 2. Validation
+- Validation dans les Resources uniquement
+- Groupes de validation par contexte
+- Messages d'erreur explicites
+- Validation des types et formats

.cursor/rules/architecture.mdc

@@ -0,0 +1,210 @@
+---
+description: 
+globs: *.php,src/*
+alwaysApply: false
+---
+# Architecture Hexagonale de Mangarr
+
+## Structure Générale
+L'application suit une architecture hexagonale (ports & adapters) avec une séparation claire des responsabilités. Le code métier est organisé en domaines distincts dans le dossier `src/Domain/`.
+
+```
+src/
+└── Domain/
+    ├── Shared/          # Code partagé entre les domaines
+    ├── Manga/           # Domaine de gestion des mangas
+    ├── Reader/          # Domaine de lecture
+    └── Scraping/        # Domaine de scraping
+```
+
+## Organisation des Domaines
+Chaque domaine suit la même structure hexagonale :
+
+```
+Domain/Manga/
+├── Domain/             # Cœur métier
+│   ├── Entity/        # Entités du domaine
+│   ├── ValueObject/   # Objets de valeur
+│   ├── Event/        # Événements du domaine
+│   └── Exception/     # Exceptions métier
+├── Application/       # Cas d'utilisation
+│   ├── Command/      # Commandes (DTO)
+│   ├── CommandHandler/# Gestionnaires de commandes
+│   ├── Query/        # Requêtes (DTO)
+│   ├── QueryHandler/ # Gestionnaires de requêtes
+│   └── Response/     # Objets de réponse (DTO)
+└── Infrastructure/    # Adaptateurs
+    ├── Repository/   # Implémentation des repositories
+    ├── Service/      # Services techniques
+    └── Persistence/  # Persistence des données
+```
+
+## Règles d'Architecture
+
+### 1. Règles Générales
+- Tout le code métier doit résider dans le namespace `App\Domain`
+- Les dépendances externes doivent être limitées et explicitement autorisées
+- Les exceptions standards et utilitaires autorisés :
+  - `DateTimeImmutable`
+  - `RuntimeException`
+  - `Exception`
+  - `DomainException`
+  - `Symfony\Component\HttpKernel\Exception`
+  - `InvalidArgumentException`
+
+### 2. Domaine Shared
+- Le domaine `Shared` ne doit dépendre d'aucun autre domaine
+- Il contient les contrats et les types partagés entre les domaines
+- Exemple : `App\Domain\Shared\Contract\UuidInterface`
+
+### 3. Couche Domain
+- Ne doit dépendre que d'elle-même et du domaine Shared
+- Contient la logique métier pure
+- Ne doit pas avoir de dépendances externes
+- Structure des composants :
+  - Les `Entity` sont les objets métier principaux
+  - Les `ValueObject` sont immuables et s'auto-valident
+  - Les `Event` représentent les changements d'état du domaine
+  - Les `Exception` définissent les erreurs métier spécifiques
+
+### 4. Couche Application
+- Peut dépendre de son propre domaine et du domaine Shared
+- Peut utiliser les dépendances externes autorisées :
+  - `Symfony\Component\Messenger`
+  - `Ramsey\Uuid`
+- Ne doit JAMAIS dépendre de la couche Infrastructure
+- Structure des composants :
+  - Les `Query` sont des DTO (Data Transfer Objects) en lecture seule
+  - Les `Command` sont des DTO pour les modifications
+  - Les `QueryHandler` doivent :
+    - Implémenter `QueryHandlerInterface`
+    - Prendre une seule `Query` en paramètre
+    - Retourner une `Response`
+  - Les `CommandHandler` doivent :
+    - Implémenter `CommandHandlerInterface`
+    - Prendre une seule `Command` en paramètre
+    - Ne pas retourner de valeur (void)
+  - Les `Response` sont des DTO immuables pour les résultats de requêtes
+
+### 5. Couche Infrastructure
+- Implémente les interfaces définies dans le domaine
+- Peut dépendre de toutes les couches de son domaine
+- Contient les adaptateurs pour les services externes
+- Structure des composants :
+  - Les `Repository` implémentent les interfaces du domaine
+  - Les `Service` fournissent des fonctionnalités techniques
+  - La `Persistence` gère le stockage des données
+
+## Flux de Dépendances
+```
+Infrastructure → Application → Domain
+        ↓             ↓          ↓
+      External     Shared      Shared
+```
+
+## Validation
+Les règles d'architecture sont validées par phparkitect. Les violations de ces règles entraîneront une erreur lors de la validation.
+
+## Exemples de Code
+
+### Domain Layer
+```php
+namespace App\Domain\Manga\Domain\Entity;
+
+class Manga
+{
+    private MangaId $id;
+    private Title $title;
+    private Description $description;
+
+    public function __construct(MangaId $id, Title $title)
+    {
+        $this->id = $id;
+        $this->title = $title;
+    }
+}
+```
+
+### Application Layer
+```php
+namespace App\Domain\Manga\Application\Query;
+
+readonly class GetMangaByIdQuery
+{
+    public function __construct(
+        public string $id
+    ) {}
+}
+
+namespace App\Domain\Manga\Application\QueryHandler;
+
+class GetMangaByIdQueryHandler implements QueryHandlerInterface
+{
+    public function __construct(
+        private MangaRepositoryInterface $mangaRepository
+    ) {}
+
+    public function __invoke(GetMangaByIdQuery $query): MangaResponse
+    {
+        $manga = $this->mangaRepository->get($query->id);
+        return new MangaResponse($manga);
+    }
+}
+
+namespace App\Domain\Manga\Application\Command;
+
+readonly class CreateMangaCommand
+{
+    public function __construct(
+        public string $title,
+        public ?string $description = null,
+    ) {}
+}
+
+namespace App\Domain\Manga\Application\CommandHandler;
+
+class CreateMangaCommandHandler implements CommandHandlerInterface
+{
+    public function __construct(
+        private MangaRepositoryInterface $mangaRepository
+    ) {}
+
+    public function __invoke(CreateMangaCommand $command): void
+    {
+        $manga = Manga::create($command->title, $command->description);
+        $this->mangaRepository->save($manga);
+    }
+}
+
+namespace App\Domain\Manga\Application\Response;
+
+readonly class MangaResponse
+{
+    public function __construct(
+        public string $id,
+        public string $title,
+        public ?string $description
+    ) {}
+
+    public static function fromEntity(Manga $manga): self
+    {
+        return new self(
+            $manga->getId()->toString(),
+            $manga->getTitle()->value(),
+            $manga->getDescription()?->value()
+        );
+    }
+}
+```
+
+### Infrastructure Layer
+```php
+namespace App\Domain\Manga\Infrastructure\Repository;
+
+use App\Domain\Manga\Domain\Repository\MangaRepositoryInterface;
+
+class DoctrineMangaRepository implements MangaRepositoryInterface
+{
+    // Implementation
+}
+```

.cursor/rules/business.mdc

@@ -0,0 +1,54 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+
+# Contexte Métier de Mangarr
+
+## Objectif Principal
+Mangarr est une application de gestion et d'automatisation pour la collection de mangas, inspirée par Sonarr. Elle permet aux utilisateurs de suivre, télécharger et organiser automatiquement leurs mangas depuis différentes sources en ligne.
+
+## Fonctionnalités Principales
+
+### 1. Gestion de la Bibliothèque
+- Suivi des séries de mangas
+- Organisation automatique des chapitres
+- Gestion des métadonnées (titres, auteurs, descriptions, couvertures)
+
+### 2. Automatisation
+- Scraping automatique des nouvelles sorties
+- Téléchargement automatique des nouveaux chapitres
+- Notifications lors de nouvelles sorties
+
+### 3. Sources et Scraping
+- Support de multiples sources de mangas en ligne
+- Système de scraping modulaire et extensible
+- Gestion des priorités des sources
+
+### 4. Interface Utilisateur
+- Téléchargement des chapitres en .cbz pour l'utilisateur
+- Calendrier des sorties
+- État des téléchargements
+- Configuration des préférences
+- Recherche et découverte de nouveaux mangas
+
+### 5. Intégration
+- API RESTful pour l'intégration avec d'autres services
+- Support des lecteurs de manga externes
+- Export/Import de la bibliothèque
+
+## Règles Métier Importantes
+1. Un manga peut avoir plusieurs sources disponibles
+2. Les chapitres doivent être uniques (pas de doublons)
+3. Les métadonnées doivent être cohérentes entre les sources
+4. Le système doit respecter les limitations des sites sources
+5. La qualité des scans doit être vérifiée avant l'archivage
+
+## Architecture
+L'application suit une architecture modulaire avec :
+- Backend en PHP, Symfony pour le scraping et la gestion
+- Frontend moderne pour l'interface utilisateur
+- Base de données pour le stockage des métadonnées
+- Système de files d'attente pour les téléchargements
+- Cache pour optimiser les performances

.cursor/rules/commands.mdc

@@ -0,0 +1,147 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# Commandes Makefile de Mangarr
+
+Toujours chercher si une commande est disponible dans [Makefile](mdc:Makefile).
+
+## Structure Générale
+Le Makefile est organisé en plusieurs sections distinctes :
+- Docker 🐳
+- Composer 🧙
+- Symfony 🎵
+- Webpack Encore 📦
+
+## Variables Principales
+```makefile
+# Exécutables Docker
+DOCKER_COMP = docker compose
+DOCKER_COMP_EXEC = $(DOCKER_COMP) exec
+
+# Conteneurs
+PHP_CONT = $(DOCKER_COMP_EXEC) php
+NODE_CONT = $(DOCKER_COMP_EXEC) node
+
+# Exécutables dans les conteneurs
+PHP = $(PHP_CONT) php
+COMPOSER = $(PHP_CONT) composer
+SYMFONY = $(PHP) bin/console
+SF_MEMORY = $(PHP) -d memory_limit=256M bin/console
+```
+
+## Bonnes Pratiques
+
+### 1. Organisation des Commandes
+- Regrouper les commandes par catégorie avec des commentaires clairs
+- Utiliser des variables pour les commandes répétitives
+- Documenter chaque commande avec `##` pour l'aide automatique
+- Préfixer les commandes internes avec `_` (exemple: `_check-deps`)
+
+### 2. Paramètres et Options
+- Utiliser la syntaxe `make command p=value` pour les paramètres
+- Documenter les paramètres possibles dans les commentaires
+- Utiliser `?=` pour les valeurs par défaut modifiables
+
+### 3. Dépendances
+- Définir clairement les dépendances entre les commandes
+- Utiliser des commandes composées pour les tâches complexes
+- Éviter les dépendances circulaires
+
+### 4. Documentation
+- Chaque commande doit avoir une description avec `##`
+- Inclure des exemples d'utilisation pour les commandes complexes
+- Utiliser la commande `help` pour afficher la documentation
+
+## Commandes Disponibles
+
+### Docker 🐳
+```makefile
+build:      ## Construit les images Docker
+up:         ## Démarre les conteneurs
+start:      ## Démarre les conteneurs en mode détaché
+down:       ## Arrête et supprime les conteneurs
+logs:       ## Affiche les logs en temps réel
+sh:         ## Se connecte au conteneur PHP
+```
+
+### Composer 🧙
+```makefile
+composer:   ## Exécute une commande composer (c=command)
+vendor:     ## Installe les dépendances
+```
+
+### Symfony 🎵
+```makefile
+sf:         ## Liste/exécute les commandes Symfony (c=command)
+cc:         ## Vide le cache
+migration:  ## Crée une nouvelle migration
+fixtures:   ## Charge les fixtures
+consume:    ## Consomme les messages de la queue
+```
+
+### Webpack Encore 📦
+```makefile
+npm-install:  ## Installe les dépendances npm
+npm-run:      ## Lance le serveur de développement
+npm-watch:    ## Surveille les changements
+```
+
+## Exemples d'Utilisation
+
+### 1. Installation du Projet
+```bash
+make install  # Construit et démarre les conteneurs, installe les dépendances
+```
+
+### 2. Développement Quotidien
+```bash
+make start    # Démarre les conteneurs
+make npm-watch # Lance la compilation des assets
+make consume  # Démarre les workers
+```
+
+### 3. Commandes avec Paramètres
+```bash
+make composer c="require symfony/orm-pack"  # Ajoute une dépendance
+make sf c="make:entity"                    # Crée une entité
+make test f="ScrapeChapterHandlerTest"     # Lance un test spécifique
+```
+
+## Ajout de Nouvelles Commandes
+
+### 1. Structure de Base
+```makefile
+command-name: ## Description de la commande
+	@$(DOCKER_COMP) ... # Commande à exécuter
+```
+
+### 2. Avec Paramètres
+```makefile
+command-with-param: ## Description (p=value)
+	@$(eval p ?=)
+	@$(DOCKER_COMP) ... $(p)
+```
+
+### 3. Commande Composée
+```makefile
+full-install: build start vendor npm-install ## Description complète
+```
+
+## Maintenance
+
+### 1. Nettoyage
+- Supprimer les commandes obsolètes
+- Mettre à jour les descriptions
+- Vérifier les dépendances
+
+### 2. Documentation
+- Maintenir la section d'aide à jour
+- Ajouter des exemples pour les nouvelles commandes
+- Documenter les changements importants
+
+### 3. Tests
+- Tester les nouvelles commandes
+- Vérifier les dépendances
+- Valider les paramètres 

.cursor/rules/front_vue.mdc

@@ -0,0 +1,183 @@
+---
+description: 
+globs: *.vue,*.js,assets/vue/app/*,assets/vue/app/**/*
+alwaysApply: false
+---
+# Architecture Frontend Vue.js
+
+## Introduction
+En tant que développeur front-end expérimenté spécialisé en Vue.js, vous devez suivre les meilleures pratiques et standards de développement établis pour ce projet. Votre expertise en Vue.js, TypeScript, et votre maîtrise des patterns de conception modernes sont essentiels pour maintenir une base de code cohérente et maintenable.
+
+## Stack Technique
+- **Framework Principal**: Vue.js 3.x avec Composition API
+- **Store Management**: Pinia 3.x
+- **Routage**: Vue Router 4.x
+- **Styling**: 
+  - TailwindCSS 4.x pour les utilitaires CSS
+  - HeadlessUI pour les composants accessibles
+  - Heroicons pour l'iconographie
+- **Build Tool**: Vite
+- **Testing**: Vitest avec Vue Test Utils
+- **Linting & Formatting**: 
+  - ESLint avec la configuration Vue.js
+  - Prettier pour le formatage
+
+## Conventions de Nommage
+- **Composants**: PascalCase (ex: `MangaCard.vue`, `SearchBar.vue`)
+- **Fichiers**: 
+  - Composants: PascalCase avec extension .vue
+  - Utilitaires: camelCase avec extension .js/.ts
+  - Tests: PascalCase.spec.ts
+- **Props**: camelCase dans le template, PascalCase dans le script
+- **Events**: kebab-case dans le template, camelCase dans le script
+- **Stores**: camelCase avec suffixe "Store" (ex: `mangaStore.js`)
+- **Composables**: camelCase avec préfixe "use" (ex: `useSearch.js`)
+
+## Structure Générale
+L'application Vue.js suit une architecture hexagonale (ports & adapters) avec une séparation claire des responsabilités. Le code est organisé en domaines distincts dans le dossier `assets/vue/`.
+Pour ce qui est du style, on utilise TailwindCss, Headlessui et Heroicons.
+
+```
+assets/vue/
+├── app/
+│   ├── shared/                    # Code partagé entre les domaines
+│   │   ├── components/            # Composants réutilisables
+│   │   │   ├── ui/               # Composants UI génériques (boutons, inputs, etc.)
+│   │   │   └── layout/           # Layouts réutilisables
+│   │   ├── composables/          # Composables Vue partagés
+│   │   ├── plugins/              # Plugins Vue (router, pinia, etc.)
+│   │   └── utils/                # Utilitaires partagés
+│   │
+│   ├── domain/                   # Domaines métier
+│   │   ├── manga/                # Domaine Manga
+│   │   │   ├── application/      # Cas d'utilisation
+│   │   │   │   ├── commands/     # Commands & CommandHandlers
+│   │   │   │   ├── queries/      # Queries & QueryHandlers
+│   │   │   │   └── store/        # Store Pinia du domaine
+│   │   │   ├── domain/          # Cœur métier
+│   │   │   │   ├── entities/    # Entités
+│   │   │   │   ├── value-objects/# Objets valeur
+│   │   │   │   └── services/    # Services métier
+│   │   │   ├── infrastructure/  # Adaptateurs
+│   │   │   │   ├── api/        # Client API
+│   │   │   │   └── repository/  # Implémentation repository
+│   │   │   └── presentation/    # Interface utilisateur
+│   │   │       ├── components/  # Composants spécifiques au domaine
+│   │   │       ├── composables/ # Composables spécifiques
+│   │   │       └── pages/       # Pages du domaine
+│   │   │
+│   │   ├── reader/              # Domaine Reader (même structure)
+│   │   └── scraping/            # Domaine Scraping (même structure)
+│   │
+│   └── router/                  # Configuration du routeur
+│       └── index.js            # Point d'entrée du routeur
+```
+
+## Contrat d'API
+Le contrat d'API complet est disponible dans le fichier [api-docs.json](mdc:public/api-docs.json). Ce fichier contient la documentation OpenAPI de toutes les routes disponibles et leurs schémas.
+
+## Règles d'Architecture
+
+### 1. Règles Générales
+- Chaque domaine est isolé et ne dépend que de lui-même et du domaine `shared`
+- Les dépendances externes sont gérées via les adaptateurs dans l'infrastructure
+- L'application est une SPA (Single Page Application) sans rechargement de page
+- Utilisation de Vue Router pour la navigation côté client
+- Gestion d'état avec Pinia organisée par domaine
+
+### 2. Couche Domain
+- Contient les entités et la logique métier pure
+- Ne dépend d'aucune bibliothèque externe sauf Vue.js
+- Les entités sont des classes JavaScript standard
+- Exemple :
+```javascript
+export class Manga {
+    constructor({ id, title, description = null }) {
+        this.id = id;
+        this.title = title;
+        this.description = description;
+    }
+
+    static create(data) {
+        return new Manga(data);
+    }
+}
+```
+
+### 3. Couche Application
+- Gère les cas d'utilisation via les stores Pinia
+- Coordonne les interactions entre l'UI et le domaine
+- Transforme les données du domaine pour l'UI
+- Exemple de store :
+```javascript
+export const useMangaStore = defineStore('manga', {
+    state: () => ({
+        mangas: [],
+        loading: false,
+        error: null
+    }),
+    actions: {
+        async fetchMangas() {
+            // Logique de chargement
+        }
+    }
+});
+```
+
+### 4. Couche Infrastructure
+- Gère la communication avec l'API
+- Isole les dépendances externes
+- Exemple d'API client :
+```javascript
+export class MangaApi {
+    static async fetchAll() {
+        const response = await fetch('/api/mangas');
+        return response.json();
+    }
+}
+```
+
+### 5. Couche Présentation
+- Composants Vue.js spécifiques au domaine
+- Utilise les composants UI partagés
+- Communique avec la couche application via les stores
+- Exemple de composant :
+```vue
+<template>
+  <div class="manga-list">
+    <MangaCard v-for="manga in mangas" :key="manga.id" :manga="manga" />
+  </div>
+</template>
+```
+
+## Bonnes Pratiques
+
+### 1. Composants
+- Utiliser la Composition API pour la logique
+- Séparer les composants UI génériques des composants métier
+- Favoriser les props et events pour la communication parent-enfant
+- Utiliser les stores pour la communication entre composants distants
+
+### 2. État
+- Un store Pinia par domaine
+- Actions asynchrones dans les stores
+- Getters pour les données dérivées
+- État local dans les composants quand possible
+
+### 3. Router
+- Routes organisées par domaine
+- Lazy loading des composants de page
+- Navigation programmatique via le router
+- Guards pour la protection des routes
+
+### 4. Style
+- Utilisation de Tailwind CSS
+- Classes utilitaires pour le style
+- Composants Headless UI pour l'accessibilité
+- Design system cohérent via les composants partagés
+
+## Validation
+Les règles d'architecture peuvent être validées par des outils comme :
+- ESLint pour les règles de code
+- Tests unitaires pour les composants
+- Tests d'intégration pour les stores 

.cursor/rules/jobs.mdc

@@ -0,0 +1,163 @@
+---
+description: 
+globs: *.php
+alwaysApply: false
+---
+# Architecture des Jobs dans Mangarr
+
+## Vue d'ensemble
+
+Le système de jobs de Mangarr est conçu pour gérer les tâches asynchrones et de longue durée de manière uniforme à travers tous les domaines. Il est basé sur une architecture centralisée dans le domaine `Shared` et peut être étendu par chaque domaine spécifique.
+
+## Structure
+
+```
+src/Domain/Shared/
+├── Domain/
+│   ├── Model/
+│   │   ├── Job.php              # Classe abstraite de base
+│   │   ├── JobStatus.php        # États possibles d'un job
+│   │   └── FailedJob.php        # Représentation d'un job échoué
+│   ├── Contract/
+│   │   ├── JobRepositoryInterface.php
+│   │   └── FailedJobRepositoryInterface.php
+│   └── Exception/
+│       ├── JobNotFoundException.php
+│       └── JobNotRetryableException.php
+└── Infrastructure/
+    ├── Persistence/
+    │   ├── Entity/
+    │   │   ├── JobEntity.php
+    │   │   └── FailedJobEntity.php
+    │   └── Repository/
+    │       ├── DoctrineJobRepository.php
+    │       └── DoctrineFailedJobRepository.php
+    └── Service/
+        └── JobRetryService.php
+```
+
+## Cycle de Vie d'un Job
+
+### États Possibles
+```php
+enum JobStatus: string
+{
+    case PENDING = 'pending';        // Job créé, en attente d'exécution
+    case IN_PROGRESS = 'in_progress';// Job en cours d'exécution
+    case COMPLETED = 'completed';    // Job terminé avec succès
+    case FAILED = 'failed';         // Job échoué définitivement
+    case CANCELLED = 'cancelled';    // Job annulé manuellement
+}
+```
+
+### Transitions d'États
+1. `PENDING` → `IN_PROGRESS` : Lors du démarrage du job
+2. `IN_PROGRESS` → `COMPLETED` : Lorsque le job se termine avec succès
+3. `IN_PROGRESS` → `FAILED` : Lorsque le job échoue et atteint le nombre maximum de tentatives
+4. `IN_PROGRESS` → `PENDING` : Lorsque le job échoue mais peut être réessayé
+5. Tout état → `CANCELLED` : Lorsque le job est annulé manuellement
+
+## Création d'un Nouveau Type de Job
+
+1. **Créer une classe de job spécifique**
+```php
+class MyCustomJob extends Job
+{
+    public function __construct(
+        string $id,
+        public readonly string $someData,
+        public readonly array $additionalData = []
+    ) {
+        parent::__construct($id, 'my_custom_job');
+    }
+}
+```
+
+2. **Définir le Handler**
+```php
+class MyCustomJobHandler
+{
+    public function __invoke(MyCustomJob $job): void
+    {
+        try {
+            $job->start();
+            // Logique métier
+            $job->complete();
+        } catch (\Exception $e) {
+            $job->fail($e->getMessage());
+        }
+    }
+}
+```
+
+## Gestion des Échecs
+
+### Retry Automatique
+- Un job peut être réessayé tant que `$attempts < $maxAttempts`
+- Lors d'un échec, si des tentatives sont encore possibles, le statut redevient `PENDING`
+- Les informations d'échec sont conservées dans `FailedJob`
+
+### Informations de Debug
+Chaque job contient :
+- `failureReason` : La raison de l'échec
+- `attempts` : Nombre de tentatives effectuées
+- `context` : Données contextuelles pour le debug
+- `createdAt`, `startedAt`, `completedAt` : Timestamps pour le suivi
+
+## Bonnes Pratiques
+
+### 1. Création de Jobs
+```php
+$job = new MyCustomJob(
+    id: Uuid::v4(),
+    someData: 'data',
+    additionalData: ['key' => 'value']
+);
+```
+
+### 2. Gestion du Contexte
+```php
+$job->context['important_info'] = 'value';
+$job->context['debug_data'] = $debugInfo;
+```
+
+### 3. Retry Manuel
+```php
+if ($failedJob->canBeRetried()) {
+    $job->attempts = 0;
+    $job->status = JobStatus::PENDING;
+    $jobRepository->save($job);
+}
+```
+
+### 4. Monitoring
+- Utiliser `findByStatus()` pour surveiller les jobs par état
+- Utiliser `findFailedJobs()` pour vérifier les échecs
+- Consulter `FailedJob` pour les détails des échecs
+
+## Règles Importantes
+
+1. **Idempotence**
+   - Les jobs doivent être idempotents
+   - Gérer les cas de réexécution
+   - Vérifier l'état avant les opérations
+
+2. **Contexte**
+   - Toujours fournir un contexte utile
+   - Inclure les IDs des entités concernées
+   - Ajouter des informations de debug pertinentes
+
+3. **Durée**
+   - Les jobs doivent être de longue durée
+   - Pour les opérations courtes, utiliser des appels directs
+   - Prévoir des timeouts appropriés
+
+4. **Statut**
+   - Ne jamais modifier le statut directement
+   - Utiliser les méthodes `start()`, `complete()`, `fail()`, `cancel()`
+   - Toujours sauvegarder après un changement de statut
+
+5. **Échecs**
+   - Capturer et logger toutes les exceptions
+   - Fournir des messages d'erreur explicites
+   - Conserver le contexte d'échec pour le debug 

.cursor/rules/persistence.mdc

@@ -0,0 +1,302 @@
+---
+description: 
+globs: *.php
+alwaysApply: false
+---
+# Persistence dans l'Architecture Hexagonale
+
+## Structure de la Persistence
+
+```
+Domain/Manga/
+└── Infrastructure/
+    └── Persistence/
+        ├── Repository/           # Implémentations des repositories
+        │   └── DoctrineMangaRepository.php
+        ├── Entity/              # Entités Doctrine
+        │   └── MangaEntity.php
+        └── Mapper/              # Mappers Domain <-> Entity
+            └── MangaMapper.php
+```
+
+## Règles d'Organisation
+
+### 1. Repositories
+- Localisation : `Infrastructure/Persistence/Repository/`
+- Principes :
+  - Un repository par agrégat du domaine
+  - Implémente l'interface du domaine
+  - Utilise un mapper dédié
+  - Gère uniquement la persistence
+  - Pas de logique métier
+  - Nommage : `Doctrine{Aggregate}Repository`
+
+### 2. Entités
+- Localisation : `Infrastructure/Persistence/Entity/`
+- Principes :
+  - Une entité par agrégat du domaine
+  - Uniquement des getters/setters
+  - Pas de logique métier
+  - Nommage : `{Aggregate}Entity`
+  - Suffixe `Entity` obligatoire pour éviter la confusion avec les modèles du domaine
+
+### 3. Mappers
+- Localisation : `Infrastructure/Persistence/Mapper/`
+- Principes :
+  - Un mapper par agrégat
+  - Conversion bidirectionnelle Domain <-> Entity
+  - Gestion des Value Objects
+  - Nommage : `{Aggregate}Mapper`
+
+## Exemples de Code
+
+### 1. Query et Repository
+```php
+namespace App\Domain\Manga\Application\Query;
+
+readonly class GetMangaListQuery
+{
+    public function __construct(
+        public int $page = 1,
+        public int $limit = 20,
+        public string $sortBy = 'title',
+        public string $sortOrder = 'asc',
+        public ?string $search = null,
+        public array $genres = []
+    ) {
+        if ($this->page < 1) {
+            throw new \InvalidArgumentException('Page must be greater than 0');
+        }
+        if ($this->limit < 1) {
+            throw new \InvalidArgumentException('Limit must be greater than 0');
+        }
+    }
+
+    public function getOffset(): int
+    {
+        return ($this->page - 1) * $this->limit;
+    }
+}
+
+namespace App\Domain\Manga\Domain\Repository;
+
+interface MangaRepositoryInterface
+{
+    public function findByQuery(GetMangaListQuery $query): array;
+    public function count(GetMangaListQuery $query): int;
+}
+
+namespace App\Domain\Manga\Infrastructure\Persistence\Repository;
+
+use App\Domain\Manga\Domain\Model\Manga;
+use App\Domain\Manga\Domain\Repository\MangaRepositoryInterface;
+use App\Domain\Manga\Infrastructure\Persistence\Entity\MangaEntity;
+use App\Domain\Manga\Infrastructure\Persistence\Mapper\MangaMapper;
+use Doctrine\ORM\EntityManagerInterface;
+
+readonly class DoctrineMangaRepository implements MangaRepositoryInterface
+{
+    public function __construct(
+        private EntityManagerInterface $entityManager,
+        private MangaMapper $mapper
+    ) {}
+
+    public function findByQuery(GetMangaListQuery $query): array
+    {
+        $qb = $this->entityManager->createQueryBuilder()
+            ->select('m')
+            ->from(MangaEntity::class, 'm');
+
+        if ($query->search) {
+            $qb->andWhere('m.title LIKE :search')
+               ->setParameter('search', '%' . $query->search . '%');
+        }
+
+        if (!empty($query->genres)) {
+            $qb->andWhere('m.genres && :genres')
+               ->setParameter('genres', $query->genres);
+        }
+
+        $qb->orderBy('m.' . $query->sortBy, $query->sortOrder)
+           ->setFirstResult($query->getOffset())
+           ->setMaxResults($query->limit);
+
+        return array_map(
+            fn (MangaEntity $entity) => $this->mapper->toDomain($entity),
+            $qb->getQuery()->getResult()
+        );
+    }
+
+    public function count(GetMangaListQuery $query): int
+    {
+        $qb = $this->entityManager->createQueryBuilder()
+            ->select('COUNT(m.id)')
+            ->from(MangaEntity::class, 'm');
+
+        if ($query->search) {
+            $qb->andWhere('m.title LIKE :search')
+               ->setParameter('search', '%' . $query->search . '%');
+        }
+
+        if (!empty($query->genres)) {
+            $qb->andWhere('m.genres && :genres')
+               ->setParameter('genres', $query->genres);
+        }
+
+        return $qb->getQuery()->getSingleScalarResult();
+    }
+
+    public function findById(string $id): ?Manga
+    {
+        $entity = $this->entityManager->find(MangaEntity::class, $id);
+        
+        return $entity ? $this->mapper->toDomain($entity) : null;
+    }
+
+    public function save(Manga $manga): void
+    {
+        $entity = $this->mapper->toEntity($manga);
+        
+        $this->entityManager->persist($entity);
+        $this->entityManager->flush();
+
+        // Met à jour l'ID du modèle du domaine si nécessaire
+        if ($entity->getId() && $manga->getId() === null) {
+            $manga->updateId($entity->getId());
+        }
+    }
+}
+```
+
+### 2. Entity
+```php
+namespace App\Domain\Manga\Infrastructure\Persistence\Entity;
+
+use Doctrine\ORM\Mapping as ORM;
+
+#[ORM\Entity]
+#[ORM\Table(name: 'manga')]
+class MangaEntity
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column]
+    private ?int $id = null;
+
+    #[ORM\Column(length: 255)]
+    private string $title;
+
+    #[ORM\Column(type: 'text', nullable: true)]
+    private ?string $description = null;
+
+    #[ORM\Column(type: 'json')]
+    private array $authors = [];
+
+    #[ORM\Column(length: 255, nullable: true)]
+    private ?string $coverUrl = null;
+
+    #[ORM\Column]
+    private \DateTimeImmutable $createdAt;
+
+    public function __construct()
+    {
+        $this->createdAt = new \DateTimeImmutable();
+    }
+
+    // Getters
+    public function getId(): ?int { return $this->id; }
+    public function getTitle(): string { return $this->title; }
+    public function getDescription(): ?string { return $this->description; }
+    public function getAuthors(): array { return $this->authors; }
+    public function getCoverUrl(): ?string { return $this->coverUrl; }
+    public function getCreatedAt(): \DateTimeImmutable { return $this->createdAt; }
+
+    // Setters (fluent interface)
+    public function setTitle(string $title): self
+    {
+        $this->title = $title;
+        return $this;
+    }
+
+    public function setDescription(?string $description): self
+    {
+        $this->description = $description;
+        return $this;
+    }
+
+    // ... autres setters
+}
+```
+
+### 3. Mapper
+```php
+namespace App\Domain\Manga\Infrastructure\Persistence\Mapper;
+
+use App\Domain\Manga\Domain\Model\Manga;
+use App\Domain\Manga\Domain\Model\ValueObject\MangaId;
+use App\Domain\Manga\Domain\Model\ValueObject\Title;
+use App\Domain\Manga\Infrastructure\Persistence\Entity\MangaEntity;
+
+readonly class MangaMapper
+{
+    public function toDomain(MangaEntity $entity): Manga
+    {
+        return new Manga(
+            id: new MangaId((string) $entity->getId()),
+            title: new Title($entity->getTitle()),
+            description: $entity->getDescription(),
+            authors: $entity->getAuthors(),
+            coverUrl: $entity->getCoverUrl(),
+            createdAt: $entity->getCreatedAt()
+        );
+    }
+
+    public function toEntity(Manga $manga): MangaEntity
+    {
+        $entity = new MangaEntity();
+        
+        $entity->setTitle($manga->getTitle()->value())
+               ->setDescription($manga->getDescription())
+               ->setAuthors($manga->getAuthors())
+               ->setCoverUrl($manga->getCoverUrl());
+
+        return $entity;
+    }
+}
+```
+
+## Bonnes Pratiques
+
+### 1. Gestion des Erreurs
+- Convertir les exceptions Doctrine en exceptions du domaine
+- Ne pas exposer les détails de l'infrastructure
+- Gérer les cas d'erreur spécifiques (contraintes uniques, etc.)
+
+```php
+namespace App\Domain\Manga\Infrastructure\Persistence\Exception;
+
+class PersistenceException extends \RuntimeException
+{
+    public static function entityNotFound(string $id): self
+    {
+        return new self(sprintf('Entity with id %s not found', $id));
+    }
+
+    public static function uniqueConstraintViolation(string $field): self
+    {
+        return new self(sprintf('Entity with %s already exists', $field));
+    }
+}
+```
+
+### 2. Performance
+- Utiliser les bonnes stratégies de chargement (EAGER vs LAZY)
+- Optimiser les requêtes avec des QueryBuilder
+- Paginer les résultats
+- Utiliser le cache quand nécessaire
+
+### 3. Tests
+- Créer des repositories In-Memory pour les tests
+- Utiliser SQLite en mémoire pour les tests d'intégration
+- Tester les cas d'erreur
+- Vérifier les contraintes de base de données

.cursor/rules/tests.mdc

@@ -0,0 +1,202 @@
+---
+description: 
+globs: *.php
+alwaysApply: false
+---
+# Tests de Mangarr
+
+## Structure des Tests
+L'application suit une organisation stricte des tests reflétant l'architecture hexagonale :
+
+```
+tests/
+├── Domain/                 # Tests unitaires par domaine
+│   ├── Manga/
+│   │   ├── Application/   # Tests des cas d'utilisation
+│   │   ├── Domain/       # Tests du cœur métier
+│   │   └── Adapter/      # Implémentations InMemory des ports
+│   ├── Reader/
+│   │   └── ...
+│   └── Scraping/
+│       └── ...
+├── Feature/               # Tests fonctionnels par domaine
+│   ├── Manga/
+│   ├── Reader/
+│   └── Scraping/
+├── Shared/               # Tests et adapters partagés
+│   └── Adapter/         # Adapters partagés entre domaines
+└── Fixtures/            # Fixtures de test partagées
+```
+
+## Règles de Test
+
+### 1. Tests Unitaires (Domain)
+- Localisation : `tests/Domain/NomDuDomain/`
+- Principes :
+  - Tester chaque composant de manière isolée
+  - Éviter l'utilisation de mocks
+  - Utiliser des adapters InMemory
+  - Nommer les classes de test avec le suffixe `Test`
+
+### 2. Adapters de Test
+- Localisation : `tests/Domain/NomDuDomain/Adapter/`
+- Principes :
+  - Implémenter les interfaces du domaine
+  - Stocker les données dans des tableaux
+  - Préfixer les classes avec `InMemory`
+  - Si utilisé par plusieurs domaines → déplacer dans `tests/Shared/Adapter/`
+
+### 3. Tests Fonctionnels (Feature)
+- Localisation : `tests/Feature/NomDuDomain/`
+- Principes :
+  - Tester les endpoints HTTP
+  - Utiliser le trait `ResetDatabase`
+  - Tester le flux complet
+  - Nommer les classes avec le suffixe `Test`
+
+## Exemples de Code
+
+### 1. Adapter InMemory
+```php
+namespace Tests\Domain\Manga\Adapter;
+
+use App\Domain\Manga\Domain\Entity\Manga;
+use App\Domain\Manga\Domain\Repository\MangaRepositoryInterface;
+
+class InMemoryMangaRepository implements MangaRepositoryInterface
+{
+    /** @var array<string, Manga> */
+    private array $mangas = [];
+
+    public function save(Manga $manga): void
+    {
+        $this->mangas[$manga->getId()->toString()] = $manga;
+    }
+
+    public function get(string $id): ?Manga
+    {
+        return $this->mangas[$id] ?? null;
+    }
+
+    public function clear(): void
+    {
+        $this->mangas = [];
+    }
+}
+```
+
+### 2. Test Unitaire
+```php
+namespace Tests\Domain\Manga\Application;
+
+use App\Domain\Manga\Application\Command\CreateMangaCommand;
+use App\Domain\Manga\Application\CommandHandler\CreateMangaCommandHandler;
+use Tests\Domain\Manga\Adapter\InMemoryMangaRepository;
+use PHPUnit\Framework\TestCase;
+
+class CreateMangaCommandHandlerTest extends TestCase
+{
+    private InMemoryMangaRepository $repository;
+    private CreateMangaCommandHandler $handler;
+
+    protected function setUp(): void
+    {
+        $this->repository = new InMemoryMangaRepository();
+        $this->handler = new CreateMangaCommandHandler($this->repository);
+    }
+
+    public function test_it_creates_manga(): void
+    {
+        // Given
+        $command = new CreateMangaCommand('One Piece');
+
+        // When
+        $this->handler->__invoke($command);
+
+        // Then
+        $mangas = $this->repository->findAll();
+        $this->assertCount(1, $mangas);
+        $this->assertEquals('One Piece', $mangas[0]->getTitle()->value());
+    }
+}
+```
+
+### 3. Test Fonctionnel
+```php
+namespace Tests\Feature\Manga;
+
+use Tests\Shared\ResetDatabase;
+use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
+
+class CreateMangaTest extends WebTestCase
+{
+    use ResetDatabase;
+
+    public function test_it_creates_manga_through_api(): void
+    {
+        // Given
+        $client = static::createClient();
+        $data = ['title' => 'One Piece'];
+
+        // When
+        $client->request('POST', '/api/mangas', [], [], [], json_encode($data));
+
+        // Then
+        $this->assertResponseIsSuccessful();
+        $this->assertJsonContains(['title' => 'One Piece']);
+    }
+}
+```
+
+### 4. Adapter Partagé
+```php
+namespace Tests\Shared\Adapter;
+
+use App\Domain\Shared\Contract\MessageBusInterface;
+
+class InMemoryMessageBus implements MessageBusInterface
+{
+    /** @var array<object> */
+    private array $messages = [];
+
+    public function dispatch(object $message): void
+    {
+        $this->messages[] = $message;
+    }
+
+    public function getDispatchedMessages(): array
+    {
+        return $this->messages;
+    }
+
+    public function clear(): void
+    {
+        $this->messages = [];
+    }
+}
+```
+
+## Bonnes Pratiques
+
+### 1. Organisation des Tests
+- Un test par classe
+- Regrouper les tests par fonctionnalité
+- Suivre la même structure que le code source
+- Utiliser des données de test explicites
+
+### 2. Nommage
+- Classes de test : `{ClassTestée}Test`
+- Méthodes de test : `test_it_{comportement_testé}`
+- Adapters : `InMemory{Interface}`
+
+### 3. Assertions
+- Utiliser des assertions spécifiques
+- Vérifier les états plutôt que les interactions
+- Tester les cas d'erreur
+- Tester les cas limites
+
+### 4. Données de Test
+- Utiliser des fixtures pour les données complexes
+- Créer des données spécifiques au test quand possible
+- Éviter les dépendances entre tests
+- Nettoyer l'état après chaque test 

.dockerignore

@@ -30,3 +30,4 @@ vendor/
 .env.local
 .env.local.php
 .env.test
+.env

.env.example

@@ -22,3 +22,21 @@ POSTGRES_VERSION=16
 DATABASE_URL="postgresql://%env(resolve:POSTGRES_USER)%:%env(resolve:POSTGRES_PASSWORD)%@%env(resolve:POSTGRES_HOST)%/%env(resolve:POSTGRES_DB)%?serverVersion=%env(resolve:POSTGRES_VERSION)%&charset=utf8"
 
 ###< doctrine/doctrine-bundle ###
+
+###> symfony/mercure-bundle ###
+# See https://symfony.com/doc/current/mercure.html#configuration
+# The URL of the Mercure hub, used by the app to publish updates (can be a local URL)
+MERCURE_URL=http://mercure/.well-known/mercure
+# The public URL of the Mercure hub, used by the browser to connect
+MERCURE_PUBLIC_URL=https://example.com/.well-known/mercure
+# The secret used to sign the JWTs
+MERCURE_JWT_SECRET="!ChangeThisMercureHubJWTSecretKey!"
+###< symfony/mercure-bundle ###
+CORS_ALLOW_ORIGIN='^https?://(localhost|127\.0\.0\.1)(:[0-9]+)?$'
+
+###> symfony/messenger ###
+# Choose one of the transports below
+# MESSENGER_TRANSPORT_DSN=amqp://guest:guest@localhost:5672/%2f/messages
+# MESSENGER_TRANSPORT_DSN=redis://localhost:6379/messages
+MESSENGER_TRANSPORT_DSN=doctrine://default?auto_setup=0
+###< symfony/messenger ###

.env.test

@@ -5,5 +5,6 @@ SYMFONY_DEPRECATIONS_HELPER=999999
 PANTHER_APP_ENV=panther
 PANTHER_ERROR_SCREENSHOT_DIR=./var/error-screenshots
 
-POSTGRES_DB=app
+# Configuration PostgreSQL pour les tests
-POSTGRE_VERSION=16
+POSTGRES_DB=app_test
+POSTGRES_VERSION=16

.gitea/workflows/deploy.yml

@@ -0,0 +1,42 @@
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup SSH
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.DEPLOY_SSH_KEY }}" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan -H "${{ secrets.DEPLOY_HOST }}" >> ~/.ssh/known_hosts
+
+      - name: Deploy via Deployer
+        env:
+          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
+          GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
+        run: |
+          # Créer le container sans le démarrer (évite le problème DinD avec les volumes)
+          CONTAINER=$(docker create \
+            -e DEPLOY_HOST \
+            -e GITEA_TOKEN \
+            -w /app \
+            deployphp/deployer:v7 \
+            -f /app/deploy.php deploy production -vvv)
+
+          # Copier les sources et les clés SSH dans le container
+          docker cp "$PWD/." "$CONTAINER:/app/"
+          docker cp "$HOME/.ssh/." "$CONTAINER:/root/.ssh/"
+
+          # Démarrer et attendre la fin
+          docker start -a "$CONTAINER"
+          EXIT_CODE=$?
+          docker rm "$CONTAINER" || true
+          exit $EXIT_CODE

.gitignore

@@ -23,6 +23,7 @@
 ###> phpunit/phpunit ###
 /phpunit.xml
 .phpunit.result.cache
+.phpunit.cache/*
 ###< phpunit/phpunit ###
 
 ###> symfony/webpack-encore-bundle ###
@@ -35,3 +36,13 @@ yarn-error.log
 /public/manga-images/
 /public/cbz/
 /public/images/
+src/Controller/TestController.php
+.phpunit.cache/test-results
+/tests/Fixtures/pages/
+
+# Claude Code — versionner les skills partagés, ignorer les fichiers perso
+!.claude/
+!.claude/skills/
+!.claude/skills/**
+.claude/settings.local.json
+.claude/projects/

.prettierrc

@@ -0,0 +1,16 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 4,
+  "printWidth": 120,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "strict",
+  "singleAttributePerLine": false,
+  "jsxSingleQuote": false,
+  "jsxBracketSameLine": true,
+  "vueIndentScriptAndStyle": true,
+  "bracketSameLine": true
+}

.vscode/settings.json

@@ -0,0 +1,25 @@
+{
+    "symfony-vscode.shellExecutable": "/bin/bash",
+    "symfony-vscode.shellCommand": "docker exec mangarr-php-1 /bin/sh -c 'cd / && php \"$@\"' -- ",
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#2f7c47",
+        "activityBar.background": "#2f7c47",
+        "activityBar.foreground": "#e7e7e7",
+        "activityBar.inactiveForeground": "#e7e7e799",
+        "activityBarBadge.background": "#422c74",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "commandCenter.border": "#e7e7e799",
+        "sash.hoverBorder": "#2f7c47",
+        "statusBar.background": "#215732",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#2f7c47",
+        "statusBarItem.remoteBackground": "#215732",
+        "statusBarItem.remoteForeground": "#e7e7e7",
+        "titleBar.activeBackground": "#215732",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveBackground": "#21573299",
+        "titleBar.inactiveForeground": "#e7e7e799",
+        "activityBar.activeBorder": "#422c74"
+    },
+    "peacock.color": "#215732"
+}

CLAUDE.md

@@ -0,0 +1,110 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Overview
+
+Mangarr is a Symfony 7.0 manga management/reader application. It scrapes manga chapters from various sources, stores them as CBZ files, and provides a reader interface. It runs on FrankenPHP inside Docker.
+
+## Common Commands
+
+All commands run via Docker through the Makefile. Use `make help` to see all available targets.
+
+```bash
+make start          # Start Docker containers
+make stop           # Stop containers
+make install        # Build images, start containers, install deps (first-time setup)
+make logs           # Follow container logs
+make sh             # Shell into the PHP container
+```
+
+**PHP / Symfony:**
+```bash
+make sf c="about"                   # Run any Symfony console command
+make cc                             # Clear cache
+make vendor                         # Install Composer dependencies
+make migration-migrate              # Run pending migrations
+make fixtures-load                  # Load fixtures (drops and recreates data)
+```
+
+**Testing:**
+```bash
+make test                           # Run all tests
+make test f="ScrapeChapterHandlerTest"  # Run a specific test by class name
+make test c="--group e2e"           # Pass phpunit options
+```
+
+**Code Quality:**
+```bash
+make phpcs          # Fix code style (PSR-12 via php-cs-fixer)
+make phpmd          # Run PHP Mess Detector
+make quality        # Run both phpmd and phpcs
+make phparkitect    # Check architectural rules
+```
+
+**Frontend:**
+```bash
+make npm-run        # Build assets once (dev)
+make npm-watch      # Watch and rebuild assets
+make npm-add p=pkg  # Add an npm dependency
+```
+
+**Messenger workers** (run in separate terminals):
+```bash
+make consume-commands   # Process command.bus messages
+make consume-events     # Process domain events
+make consume-schedule   # Process scheduled tasks
+```
+
+## Architecture
+
+The project uses **Domain-Driven Design** with strict layer separation enforced by PHPArkitect (`phparkitect.php`).
+
+### Domain Structure
+
+```
+src/Domain/
+  {DomainName}/
+    Domain/       # Pure domain: Models, Contracts (interfaces), Events, Exceptions
+    Application/  # Use cases: Commands, Queries, CommandHandlers, QueryHandlers, Responses
+    Infrastructure/ # Framework: Persistence, API Platform State, Clients, Services
+  Shared/         # Cross-domain contracts and infrastructure (MangaPathManagerInterface, EventDispatcherInterface, etc.)
+```
+
+**Business domains:** `Manga`, `Reader`, `Scraping`, `Conversion`, `Setting` (+ `Shared`)
+
+**Architectural rules enforced:**
+- `Domain` layer has no outside dependencies (only std exceptions)
+- `Application` layer may depend on its own Domain + `App\Domain\Shared\Domain\Contract` + `Symfony\Messenger` + `Ramsey\Uuid`; never on Infrastructure
+- `Shared` depends on nothing outside itself
+
+### Outside Domain (`src/`)
+
+- `src/Entity/` — Doctrine ORM entities (legacy, used by repositories)
+- `src/Controller/` — Symfony HTTP controllers
+- `src/ApiResource/` — API Platform resource definitions + `OpenApiFactoryDecorator`
+- `src/Service/` — Legacy services (being migrated into Domain)
+- `src/Message/` + `src/MessageHandler/` — Legacy Messenger messages (outside DDD)
+
+### Frontend
+
+- `assets/controllers/` — Stimulus controllers (one per UI interaction)
+- `assets/vue/app/` — Vue.js SPA mounted at `/vue/*`
+- Tailwind CSS via PostCSS, bundled with Webpack Encore
+- Mercure for real-time updates (queue status, download progress)
+
+### Key Infrastructure
+
+- **Database:** PostgreSQL 16 via Doctrine ORM; Adminer on port 8080
+- **Scraping:** `scrapers.json` defines per-site CSS selectors; `HtmlScraper` and `JavascriptScraper` (Panther) strategies
+- **File storage:** CBZ files stored at `MANGA_DATA_PATH` (default `~/Mangas`); images at `IMAGE_DATA_PATH`
+- **External API:** MangaDex client for metadata (`MANGADEX_CLIENT_ID/SECRET/USERNAME/PASSWORD` env vars)
+- **Messenger buses:** `command.bus` (sync commands), `events` transport, `commands` transport, `async` transport (scheduler)
+
+### Adding a New Domain Feature
+
+1. Define contracts (interfaces) in `Domain/{Name}/Domain/Contract/`
+2. Write Command/Query + Handler in `Domain/{Name}/Application/`
+3. Implement interfaces in `Domain/{Name}/Infrastructure/`
+4. Register infrastructure aliases in `config/services.yaml`
+5. Run `make phparkitect` to validate layer boundaries

DONE.md

@@ -0,0 +1,40 @@
+# DONE.md — Tâches terminées
+
+## [UI] Passe sur le menu latéral (Sidebar) — 2026-03-14
+
+> Branche : `style/sidebar-cleanup-and-ui-polish` | Commit : `d219ed1`
+
+- [x] **`isActive` incorrect** : inclut désormais les sous-items dans le calcul (groupe Mangas actif sur `/import`)
+- [x] **Double déclenchement toggle/navigation** : chevron déplacé dans un `<button>` séparé du `RouterLink`
+- [x] **Parent items** (`MenuGroup.vue`) : ajout `hover:text-white` aligné avec le style SubMenuItem
+- [x] **SubMenuItems** (`SubMenuItem.vue`) : ajout `hover:bg-gray-700` pour harmoniser avec le parent
+- [x] **État actif vs hover** : logique couleur unifiée sur les deux niveaux
+
+## [UI] Supprimer "Calendrier" du menu — 2026-03-14
+
+> Branche : `style/sidebar-cleanup-and-ui-polish` | Commit : `d219ed1`
+
+- [x] Retirer l'entrée "Calendrier" de la Sidebar
+- [x] Supprimer la route Vue Router `/calendar`
+
+---
+
+## [UI] Simplifier l'affichage table de la HomePage — 2026-03-14
+
+> Branche : `style/simplifier-table-homepage` | Commit : `cc27fc4`
+
+- [x] Supprimer le wrapper card (`bg-white shadow rounded-lg overflow-hidden`) — remplacer par un simple `border-t`
+- [x] Lien du titre : passer le hover de bleu (`hover:text-blue-600`) à vert (`hover:text-green-500`)
+- [x] Icône monitoring : remplacer `BellIcon` / `BellSlashIcon` par `BookmarkIcon` / `BookmarkSlashIcon`
+- [x] Supprimer le padding du wrapper + `container mx-auto` pour tableau pleine largeur
+
+---
+
+## [UI] Restyling vue grille des mangas — 2026-03-14
+
+> Branche : `style/restyling-manga-grid` | Commit : `9a4fb26`
+
+- [x] **Réduire la taille des cards** : grille plus dense (cols-3/4/5/7/8 selon breakpoint, gap-2)
+- [x] **Supprimer les arrondis** : retrait de `rounded-lg` et `hover:scale-105`
+- [x] **Overlay icônes au survol** : gradient + 3 boutons (éditer, sources, rafraîchir) en bas à gauche de la cover, visibles au `group-hover`
+- [x] MangaCard émet les événements, MangaGrid gère les modales (edit, sources, refresh)

Dockerfile

@@ -68,6 +68,19 @@ ENTRYPOINT ["docker-entrypoint"]
 HEALTHCHECK --start-period=60s CMD curl -f http://localhost:2019/metrics || exit 1
 CMD [ "frankenphp", "run", "--config", "/etc/caddy/Caddyfile" ]
 
+# Runtime FrankenPHP image (sans code baked-in)
+# Le code vient du bind mount /srv/mangarr/current:/app (géré par Deployer)
+# Builder une seule fois : docker build --target frankenphp_runtime -t mangarr:runtime .
+FROM frankenphp_base AS frankenphp_runtime
+
+ENV APP_ENV=prod
+ENV FRANKENPHP_CONFIG="import worker.Caddyfile"
+
+RUN mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"
+
+COPY --link frankenphp/conf.d/app.prod.ini $PHP_INI_DIR/conf.d/
+COPY --link frankenphp/worker.Caddyfile /etc/caddy/worker.Caddyfile
+
 # Dev FrankenPHP image
 FROM frankenphp_base AS frankenphp_dev
 
@@ -85,6 +98,26 @@ COPY --link frankenphp/conf.d/app.dev.ini $PHP_INI_DIR/conf.d/
 
 CMD [ "frankenphp", "run", "--config", "/etc/caddy/Caddyfile", "--watch" ]
 
+# Composer dependencies (needed for Symfony UX assets referenced in package.json)
+FROM composer:2 AS composer_deps
+WORKDIR /app
+COPY --link composer.* symfony.* ./
+RUN composer install --no-cache --prefer-dist --no-dev --no-autoloader --no-scripts --no-progress --ignore-platform-reqs
+
+# Stage Node.js pour compiler les assets (Webpack Encore)
+FROM node:22-alpine AS node_build
+WORKDIR /app
+COPY --link package.json package-lock.json ./
+COPY --from=composer_deps /app/vendor/symfony/ux-live-component/assets ./vendor/symfony/ux-live-component/assets
+COPY --from=composer_deps /app/vendor/symfony/ux-react/assets ./vendor/symfony/ux-react/assets
+COPY --from=composer_deps /app/vendor/symfony/ux-turbo/assets ./vendor/symfony/ux-turbo/assets
+RUN npm install
+COPY --link assets ./assets
+COPY --link webpack.config.js ./
+COPY --link tailwind.config.js postcss.config.js ./
+COPY --link templates ./templates
+RUN npm run build
+
 # Prod FrankenPHP image
 FROM frankenphp_base AS frankenphp_prod
 
@@ -103,11 +136,15 @@ RUN set -eux; \
 
 # copy sources
 COPY --link . ./
-RUN rm -Rf frankenphp/
+RUN rm -Rf frankenphp/ && \
+	test -f .env || cp .env.example .env
+
+# Copier les assets compilés depuis le stage Node.js
+COPY --from=node_build /app/public/build ./public/build
 
 RUN set -eux; \
 	mkdir -p var/cache var/log; \
 	composer dump-autoload --classmap-authoritative --no-dev; \
 	composer dump-env prod; \
-	composer run-script --no-dev post-install-cmd; \
+	DATABASE_URL="postgresql://dummy:dummy@dummy:5432/dummy?serverVersion=15&charset=utf8" composer run-script --no-dev post-install-cmd; \
 	chmod +x bin/console; sync;

Makefile

@@ -17,7 +17,7 @@ SF_MEMORY = $(PHP) -d memory_limit=256M bin/console
 
 # Misc
 .DEFAULT_GOAL = help
-.PHONY        : help build start install down stop logs sh composer vendor sf cc test phpmd phpcs quality fix-permissions controller entity migration migration-diff migration-migrate form crud fixtures command auth subscriber state-processor state-provider npm-install npm-run npm-watch
+.PHONY        : help build start install down stop logs sh composer vendor sf cc test phpmd phpcs quality fix-permissions controller entity migration migration-diff migration-migrate form crud fixtures command auth subscriber state-processor state-provider npm-install npm-run npm-watch openapi
 
 ## —— 🎵 🐳 The Symfony Docker Makefile 🐳 🎵 ——————————————————————————————————
 help: ## Outputs this help screen
@@ -27,6 +27,12 @@ help: ## Outputs this help screen
 build: ## Builds the Docker images
 	@$(DOCKER_COMP) build --pull --no-cache
 
+phparkitect: ## Vérifie l'architecture avec PHPArkitect
+	@$(PHP_CONT) vendor/bin/phparkitect check
+
+up: ## Start the docker hub
+	@$(DOCKER_COMP) up -d
+
 start: ## Start the docker hub in detached mode (no logs)
 	@$(DOCKER_COMP) up --pull always -d --wait
 
@@ -44,9 +50,10 @@ logs: ## Show live logs
 sh: ## Connect to the FrankenPHP container
 	@$(PHP_CONT) sh
 
-test: ## Start tests with phpunit, pass the parameter "c=" to add options to phpunit, example: make test c="--group e2e --stop-on-failure"
+test: ## Start tests with phpunit, pass the parameter "c=" to add options to phpunit, example: make test c="--group e2e --stop-on-failure", or "f=" to specify a test file, example: make test f="ScrapeChapterHandlerTest"
 	@$(eval c ?=)
-	@$(DOCKER_COMP) exec -e APP_ENV=test php bin/phpunit $(c)
+	@$(eval f ?=)
+	@$(DOCKER_COMP) exec -e APP_ENV=test php bin/phpunit $(c) $(if $(f),--filter=$(f),)
 
 phpmd: ## Start PHP Mess Detector
 	@if ! $(DOCKER_COMP) exec php vendor/bin/phpmd src/ text phpmd.xml -v; then \
@@ -138,8 +145,18 @@ twig-extension: ## Create a new twig extension
 stimulus: ## Create a new stimulus controller
 	@$(SYMFONY) make:stimulus-controller
 
-consume: ## Consume messages
+notify-test: ## Envoie les 4 types de notifications de test avec 2s d'intervalle
-	@$(SYMFONY) messenger:consume async -vv
+	@for type in info success error warning; do \
+		$(SYMFONY) app:notify:test --type=$$type --message="Test $$type depuis Mangarr"; \
+		echo "[$$type] envoyé"; \
+		sleep 2; \
+	done
+
+consume-commands: ## Consume commands messages
+	@$(SYMFONY) messenger:consume commands -vv
+
+consume-events: ## Consume events messages
+	@$(SYMFONY) messenger:consume events -vv
 
 consume-schedule: ## Consume schedule messages
 	@$(SYMFONY) messenger:consume async -vv scheduler_default
@@ -147,6 +164,9 @@ consume-schedule: ## Consume schedule messages
 message: ## Create a new message and handler
 	@$(SYMFONY) make:message
 
+openapi: ## Exporter la documentation OpenAPI en JSON
+	@$(SYMFONY) api:openapi:export --output=public/api-docs.json
+
 ## —— Webpack Encore —————————————————————————————————————————————————————————————
 npm-install: ## Install npm dependencies
 	@$(DOCKER_COMP) exec node npm install --force

README.md

@@ -13,7 +13,7 @@ Avant de commencer, assurez-vous que les outils suivants sont installés sur vot
 Pour mettre en place le projet, suivez ces étapes :
 
 1. Clonez le dépôt du projet :
-```git clone git@bitbucket.org:tkm_rd/tkm-symfony.git```
+```git clone git@git.homelab.nestor-server.fr:2222/colgora/Mangarr.git```
 
 2. Copiez le fichier `.env.example` en `.env` :
 ```cp .env.example .env```

TASK.md

@@ -0,0 +1,129 @@
+# TASK.md — Tâches à venir
+
+## [Feature] Découvrir — Suggestions de mangas via MangaDex
+
+**Objectif :** Page "Découvrir" qui propose des mangas populaires/récents depuis l'API MangaDex, en excluant ceux déjà présents en base (comparaison via `externalId` = ID MangaDex).
+
+### Backend
+
+- [ ] **Consulter la doc API MangaDex** pour identifier le(s) endpoint(s) pertinents (mangas populaires, récemment mis à jour, tendances…) et les paramètres disponibles (filtres langue, statut, contentRating, etc.)
+- [ ] **Étendre le client MangaDex existant** pour exposer le(s) nouvel(aux) endpoint(s) identifiés (nouveau(x) méthode(s) dans le client + adapter le contrat d'interface si besoin)
+- [ ] Query `GetDiscoverMangaListQuery` + handler qui appelle le client MangaDex et filtre les résultats dont l'`externalId` est déjà en base
+- [ ] Response DTO `DiscoverMangaListResponse` avec les champs nécessaires à l'affichage (id MangaDex, titre, couverture, genres, statut…)
+- [ ] State Provider API Platform sur la route `GET /api/manga/discover`
+
+### Frontend
+
+- [ ] Page `DiscoverPage.vue` avec grille de cards (réutiliser `MangaCard.vue` ou créer `DiscoverMangaCard.vue`)
+- [ ] Composable TanStack Query `useDiscoverMangaList`
+- [ ] Route Vue Router `/discover`
+- [ ] Entrée dans la Sidebar
+
+---
+
+## [Domain] Créer le domaine "System"
+
+**Objectif :** Poser la structure DDD hexagonale du nouveau domaine `System` qui servira de socle aux fonctionnalités Status et Logs.
+
+- [ ] Créer l'arborescence `src/Domain/System/Domain/`, `Application/`, `Infrastructure/`
+- [ ] Créer l'arborescence frontend `assets/vue/app/domain/system/`
+- [ ] Vérifier la conformité avec `phparkitect.php` (ajouter le domaine si nécessaire)
+
+---
+
+## [Feature] System — Page "Status"
+
+**Objectif :** Page de monitoring affichant l'état général de l'application.
+
+### Backend
+
+- [ ] Query `GetSystemStatusQuery` + handler qui agrège :
+  - Version de l'application (depuis `composer.json` ou variable d'env)
+  - Statut des services critiques (base de données, Messenger workers, stockage)
+  - Poids total des images (scan du dossier `IMAGE_DATA_PATH`)
+  - Poids total des CBZ (scan du dossier `MANGA_DATA_PATH`)
+  - Liens / chemins vers les dossiers de stockage configurés
+- [ ] Response DTO `SystemStatusResponse`
+- [ ] State Provider API Platform sur la route `GET /api/system/status`
+
+### Frontend
+
+- [ ] Page `StatusPage.vue` avec sections (Général, Stockage, Services)
+- [ ] Composable TanStack Query `useSystemStatus`
+- [ ] Route Vue Router `/system/status`
+
+---
+
+## [Feature] System — Page "Logs"
+
+**Objectif :** Page de consultation des logs d'erreur des workers Messenger, avec filtres.
+
+### Backend
+
+- [ ] Définir le contrat `WorkerLogRepositoryInterface` dans `System/Domain/Contract/Repository/`
+- [ ] Implémenter `DoctrineWorkerLogRepository` (ou lecture des logs Monolog selon la stratégie retenue) dans `Infrastructure/`
+- [ ] Query `GetWorkerLogsQuery` avec paramètres de filtrage (date début/fin, source, niveau, worker/transport) + handler
+- [ ] Response DTO `WorkerLogListResponse` (liste paginée)
+- [ ] State Provider API Platform sur la route `GET /api/system/logs`
+
+### Frontend
+
+- [ ] Page `LogsPage.vue` avec tableau paginé + panneau de filtres
+- [ ] Filtres disponibles : plage de dates, source (transport Messenger), niveau d'erreur, manga associé (source préférée)
+- [ ] Composable TanStack Query `useWorkerLogs` (avec paramètres de filtre réactifs)
+- [ ] Route Vue Router `/system/logs`
+
+---
+
+## [Perf] Reader — Lazy-loading des pages (InfiniteReader)
+
+**Problème :** `readerStore.js` charge toutes les pages avec `itemsPerPage=9999`. `InfiniteReader.vue` monte tous les composants `ReaderPage` simultanément dans le DOM. Sur un chapitre de 200 pages, cela représente 200 composants actifs et autant d'images pré-chargées.
+
+- [ ] Implémenter un `IntersectionObserver` sur les wrappers de page pour ne charger les images qu'au moment où elles entrent dans le viewport (`loading="lazy"` ou src conditionnel)
+- [ ] Limiter le nombre de composants montés simultanément (virtualisation ou windowing) : ne rendre que les pages proches de la page courante (ex. fenêtre de ±3 pages)
+- [ ] Adapter `readerStore.js` : remplacer `itemsPerPage=9999` par la vraie pagination côté API si la virtualisation le justifie, sinon conserver le fetch unique mais différer le rendu
+- [ ] Vérifier que le mode `single` n'est pas impacté (il affiche déjà une seule page)
+
+---
+
+## [Bug] Reader — N+1 requêtes SQL dans `getChapterContext()`
+
+**Problème :** `LegacyChapterRepository::getChapterContext()` émet 5 requêtes SQL pour un seul chargement : la requête principale + 2 doublons dans `getPreviousChapterId()` / `getNextChapterId()` (chacune re-fetche le chapitre courant) + les 2 requêtes de navigation.
+
+- [ ] Refactorer `getPreviousChapterId()` et `getNextChapterId()` pour accepter l'entité `ChapterEntity` déjà chargée en paramètre (au lieu de re-fetcher par ID)
+- [ ] Appeler ces méthodes depuis `getChapterContext()` en passant l'entité déjà disponible
+- [ ] Résultat attendu : 3 requêtes maximum (1 pour le chapitre courant + 1 prev + 1 next), idéalement 1 seule avec une requête SQL combinée
+
+---
+
+## [Bug] Reader — Division par zéro dans `ChapterPagesResponse::getTotalPages()`
+
+**Problème :** `ceil($totalItems / $itemsPerPage)` crashe si `itemsPerPage = 0`. Le test existant documente le bug avec un TODO et assert un HTTP 500 au lieu de corriger.
+
+- [ ] Ajouter une validation dans `ChapterPagesProvider` : rejeter la requête avec HTTP 400 si `itemsPerPage <= 0`
+- [ ] Corriger le test `GetChapterPagesTest` pour vérifier HTTP 400 (et non 500)
+- [ ] Supprimer le commentaire TODO du test une fois corrigé
+
+---
+
+## [Bug] Reader — `totalPages` toujours égal à 0 dans `ChapterContext`
+
+**Problème :** `LegacyChapterRepository::getChapterContext()` hardcode `totalPages: 0`. La méthode `getTotalPagesForChapter()` existe mais n'est jamais appelée depuis `GetChapterContextHandler`.
+
+- [ ] Appeler `getTotalPagesForChapter()` dans `getChapterContext()` (ou dans le handler) pour calculer le vrai nombre de pages
+- [ ] Vérifier que la valeur est correctement sérialisée dans la réponse API Platform (`ChapterContextResponse`)
+- [ ] Adapter les tests existants qui pourraient asserter `totalPages: 0`
+
+---
+
+## [Style] Page conversion CBR → CBZ — Simplification UI + notifications toast
+
+**Objectif :** Revoir le style de la page de conversion CBR → CBZ pour le simplifier, et remplacer le message statique "Conversion réussie" par les notifications toast de l'application.
+
+- [ ] Auditer le composant/template actuel de la page de conversion
+- [ ] Simplifier la mise en page (réduire la complexité visuelle, harmoniser avec le reste de l'UI)
+- [ ] Supprimer l'affichage inline "Conversion réussie"
+- [ ] Brancher les notifications toast existantes pour signaler le succès (et l'échec) de la conversion
+
+---
+

assets/app.js

@@ -13,3 +13,5 @@ import './styles/app.scss';
 
 // start the Stimulus application
 import './bootstrap';
+
+// La ligne registerReactControllerComponents a déjà été commentée

assets/controllers.json

@@ -9,6 +9,12 @@
                 }
             }
         },
+        "@symfony/ux-react": {
+            "react": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
         "@symfony/ux-turbo": {
             "turbo-core": {
                 "enabled": true,

assets/styles/app.scss

@@ -3,6 +3,11 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+html, body {
+    overflow: hidden;
+    height: 100%;
+}
+
 body {
     background-color: white;
 }
@@ -82,6 +87,33 @@ body {
     @apply bg-gray-700;
 }
 
+/* Firefox uniquement — évite le conflit avec les pseudo-éléments webkit sur Chrome 121+ */
+@supports (-moz-appearance: none) {
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: #16a34a transparent;
+    }
+
+    .dark * {
+        scrollbar-color: #16a34a #1f2937;
+    }
+}
+
+/* Dark mode — webkit track */
+.dark ::-webkit-scrollbar-track {
+    @apply bg-gray-800;
+}
+
+/* Supprime les flèches de la scrollbar */
+::-webkit-scrollbar-button:start:decrement,
+::-webkit-scrollbar-button:end:increment,
+::-webkit-scrollbar-button:start:increment,
+::-webkit-scrollbar-button:end:decrement {
+    display: none;
+    width: 0;
+    height: 0;
+}
+
 ///* Custom styles for the scrollbar buttons */
 //::-webkit-scrollbar-button {
 //    @apply bg-gray-700;

assets/vue/app/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <router-view></router-view>
+  <NotificationToast />
+</template>
+
+<script setup>
+import NotificationToast from './shared/components/ui/NotificationToast.vue';
+import { useMercureNotifications } from './shared/composables/useMercureNotifications';
+
+useMercureNotifications();
+</script>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

assets/vue/app/domain/activity/application/store/activityStore.js

@@ -0,0 +1,184 @@
+import { defineStore } from 'pinia';
+import { Job } from '../../domain/entities/job';
+import { ApiJobRepository } from '../../infrastructure/api/ApiJobRepository';
+
+const jobRepository = new ApiJobRepository();
+
+const ACTIVE_STATUSES = ['pending', 'in_progress'];
+
+export const useActivityStore = defineStore('activity', {
+    state: () => ({
+        jobs: [],
+        loading: false,
+        error: null,
+        mercureEventSource: null,
+        // Pagination
+        currentPage: 1,
+        totalPages: 0,
+        total: 0,
+        limit: 20,
+        hasNextPage: false,
+        hasPreviousPage: false,
+        // Tri
+        sortBy: 'createdAt',
+        sortOrder: 'DESC',
+    }),
+
+    getters: {
+        activeJobs: state => state.jobs.filter(job => job.isActive()),
+        isLoading: state => state.loading,
+        hasError: state => !!state.error,
+        paginationInfo: state => ({
+            currentPage: state.currentPage,
+            totalPages: state.totalPages,
+            total: state.total,
+            limit: state.limit,
+            hasNextPage: state.hasNextPage,
+            hasPreviousPage: state.hasPreviousPage
+        })
+    },
+
+    actions: {
+        async loadJobs(page = null) {
+            this.loading = true;
+            this.error = null;
+
+            try {
+                const jobCollection = await jobRepository.getJobs({
+                    page: page || this.currentPage,
+                    limit: this.limit,
+                    sortBy: this.sortBy,
+                    sortOrder: this.sortOrder,
+                    status: ACTIVE_STATUSES,
+                });
+
+                this.jobs = jobCollection.items;
+                this.currentPage = jobCollection.page;
+                this.total = jobCollection.total;
+                this.hasNextPage = jobCollection.hasNextPage;
+                this.hasPreviousPage = jobCollection.hasPreviousPage;
+                this.totalPages = Math.ceil(this.total / this.limit);
+            } catch (error) {
+                this.error = error.message;
+                console.error('Error loading jobs:', error);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        async goToPage(page) {
+            if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
+                this.currentPage = page;
+                await this.loadJobs(page);
+            }
+        },
+
+        async updateSort(sortBy, sortOrder) {
+            this.sortBy = sortBy;
+            this.sortOrder = sortOrder;
+            this.currentPage = 1;
+            await this.loadJobs(1);
+        },
+
+        async updateLimit(limit) {
+            this.limit = limit;
+            this.currentPage = 1;
+            await this.loadJobs(1);
+        },
+
+        async deleteJob(id) {
+            this.loading = true;
+            this.error = null;
+
+            try {
+                await jobRepository.deleteJob(id);
+                this.jobs = this.jobs.filter(job => job.id !== id);
+                await this.loadJobs(this.currentPage);
+            } catch (error) {
+                this.error = error.message;
+                console.error('Error deleting job:', error);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        updateJobProgress(jobId, progress) {
+            const job = this.jobs.find(j => j.id === jobId);
+            if (job) job.progress = progress;
+        },
+
+        handleJobCreated(data) {
+            const alreadyExists = this.jobs.some(j => j.id === data.id);
+            if (alreadyExists) return;
+
+            const job = Job.create({
+                id: data.id,
+                type: data.type_job,
+                status: data.status,
+                createdAt: data.createdAt,
+                context: data.context,
+                attempts: data.attempts,
+                maxAttempts: data.maxAttempts,
+            });
+
+            this.jobs.unshift(job);
+            this.total += 1;
+            this.totalPages = Math.ceil(this.total / this.limit);
+        },
+
+        handleJobStatusChange(jobId, newStatus) {
+            const job = this.jobs.find(j => j.id === jobId);
+            if (!job) return;
+
+            if (newStatus === 'in_progress') {
+                job.status = 'in_progress';
+            } else {
+                setTimeout(() => {
+                    this.jobs = this.jobs.filter(j => j.id !== jobId);
+                    this.total = Math.max(0, this.total - 1);
+                    this.totalPages = Math.ceil(this.total / this.limit);
+                }, 1500);
+            }
+        },
+
+        subscribeMercure() {
+            if (this.mercureEventSource) return;
+            const url = new URL('/.well-known/mercure', window.location.origin);
+            url.searchParams.append('topic', 'jobs/activity');
+            this.mercureEventSource = new EventSource(url.toString());
+            this.mercureEventSource.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+                if (data.type === 'job.created') {
+                    this.handleJobCreated(data);
+                } else if (data.type === 'job.progress_updated') {
+                    this.updateJobProgress(data.jobId, data.progress);
+                } else if (data.type === 'job.status_changed') {
+                    this.handleJobStatusChange(data.jobId, data.status);
+                }
+            };
+        },
+
+        unsubscribeMercure() {
+            if (this.mercureEventSource) {
+                this.mercureEventSource.close();
+                this.mercureEventSource = null;
+            }
+        },
+
+        async deleteJobs(criteria = {}) {
+            this.loading = true;
+            this.error = null;
+
+            try {
+                const deleted = await jobRepository.deleteJobs(criteria);
+                await this.loadJobs(this.currentPage);
+                return deleted;
+            } catch (error) {
+                this.error = error.message;
+                console.error('Error deleting jobs:', error);
+            } finally {
+                this.loading = false;
+            }
+        },
+    }
+});

assets/vue/app/domain/activity/domain/entities/job.js

@@ -0,0 +1,61 @@
+export class Job {
+    constructor({
+        id,
+        type,
+        status,
+        progress = 0,
+        payload = {},
+        result = null,
+        error = null,
+        failureReason = null,
+        createdAt = new Date().toISOString(),
+        updatedAt = new Date().toISOString(),
+        startedAt = null,
+        completedAt = null,
+        attempts = 0,
+        maxAttempts = 1,
+        context = {}
+    }) {
+        this.id = id;
+        this.type = type;
+        this.status = status;
+        this.progress = progress;
+        this.payload = payload;
+        this.result = result;
+        this.error = failureReason ?? error;
+        this.createdAt = createdAt;
+        this.updatedAt = updatedAt;
+        this.startedAt = startedAt;
+        this.completedAt = completedAt;
+        this.attempts = attempts;
+        this.maxAttempts = maxAttempts;
+        this.context = context;
+    }
+
+    static create(data) {
+        return new Job(data);
+    }
+
+    isActive() {
+        return ['pending', 'in_progress'].includes(this.status);
+    }
+
+    hasError() {
+        return this.status === 'failed';
+    }
+
+    isCompleted() {
+        return this.status === 'completed';
+    }
+}
+
+export class JobCollection {
+    constructor(items, total, page, limit, hasNextPage, hasPreviousPage) {
+        this.items = items.map(item => Job.create(item));
+        this.total = total;
+        this.page = page;
+        this.limit = limit;
+        this.hasNextPage = hasNextPage;
+        this.hasPreviousPage = hasPreviousPage;
+    }
+}

assets/vue/app/domain/activity/domain/repository/JobRepositoryInterface.js

@@ -0,0 +1,42 @@
+export class JobRepositoryInterface {
+    /**
+     * Récupère la liste des jobs
+     * @param {Object} options Les options de filtrage et pagination
+     * @param {number} options.page Numéro de la page
+     * @param {number} options.limit Nombre d'éléments par page
+     * @param {string} options.sortBy Champ pour le tri
+     * @param {string} options.sortOrder Direction du tri ('ASC' ou 'DESC')
+     * @param {Array<string>} options.status Liste des statuts à filtrer
+     * @returns {Promise<JobCollection>} Collection de jobs
+     */
+    async getJobs(options) {
+        throw new Error('Not implemented');
+    }
+
+    /**
+     * Récupère un job par son ID
+     * @param {string} id Identifiant du job
+     * @returns {Promise<Job>} Job
+     */
+    async getJobById(id) {
+        throw new Error('Not implemented');
+    }
+
+    /**
+     * Supprime un job
+     * @param {string} id Identifiant du job
+     * @returns {Promise<boolean>} Succès de l'opération
+     */
+    async deleteJob(id) {
+        throw new Error('Not implemented');
+    }
+
+    /**
+     * Supprime tous les jobs correspondant aux critères
+     * @param {Object} criteria Critères de suppression
+     * @returns {Promise<number>} Nombre de jobs supprimés
+     */
+    async deleteJobs(criteria) {
+        throw new Error('Not implemented');
+    }
+}

assets/vue/app/domain/activity/infrastructure/api/ApiJobRepository.js

@@ -0,0 +1,154 @@
+import { Job, JobCollection } from '../../domain/entities/job';
+import { JobRepositoryInterface } from '../../domain/repository/JobRepositoryInterface';
+
+export class ApiJobRepository extends JobRepositoryInterface {
+    /**
+     * Récupère la liste des jobs
+     * @param {Object} options Les options de filtrage et pagination
+     * @param {number} options.page Numéro de la page
+     * @param {number} options.limit Nombre d'éléments par page
+     * @param {string} options.sortBy Champ pour le tri
+     * @param {string} options.sortOrder Direction du tri ('ASC' ou 'DESC')
+     * @param {Array<string>} options.status Liste des statuts à filtrer
+     * @returns {Promise<JobCollection>} Collection de jobs
+     */
+    async getJobs(options = {}) {
+        const { page = 1, limit = 100, sortBy = 'createdAt', sortOrder = 'DESC', status = [], type = null } = options;
+
+        try {
+            let url = `/api/jobs?page=${page}&limit=${limit}&sortBy=${sortBy}&sortOrder=${sortOrder}`;
+
+            // Ajouter les filtres de statut s'ils sont fournis
+            if (status && status.length > 0) {
+                url += `&status=${status.join(',')}`;
+            }
+
+            // Ajouter le filtre de type si fourni
+            if (type) {
+                url += `&type=${type}`;
+            }
+
+            const response = await fetch(url);
+
+            if (!response.ok) {
+                throw new Error('Failed to fetch jobs');
+            }
+
+            const data = await response.json();
+
+            // Gérer différents formats de réponse API
+            let jobs, total, currentPage, limit_returned, hasNext, hasPrev;
+
+            if (Array.isArray(data)) {
+                // Si l'API retourne directement un tableau
+                jobs = data;
+                total = data.length;
+                currentPage = page;
+                limit_returned = limit;
+                hasNext = false;
+                hasPrev = false;
+            } else if (data.items || data.data) {
+                // Si l'API retourne un objet avec les données dans items ou data
+                jobs = data.items || data.data || [];
+                total = data.total || data.totalCount || jobs.length;
+                currentPage = data.page || data.currentPage || page;
+                limit_returned = data.limit || data.perPage || limit;
+                hasNext = data.hasNextPage || data.hasNext || (currentPage * limit_returned < total);
+                hasPrev = data.hasPreviousPage || data.hasPrev || currentPage > 1;
+            } else {
+                // Format par défaut
+                jobs = data || [];
+                total = data.total || 0;
+                currentPage = data.page || 1;
+                limit_returned = data.limit || limit;
+                hasNext = !!data.hasNextPage;
+                hasPrev = !!data.hasPreviousPage;
+            }
+
+            return new JobCollection(
+                jobs,
+                total,
+                currentPage,
+                limit_returned,
+                hasNext,
+                hasPrev
+            );
+        } catch (error) {
+            throw error;
+        }
+    }
+
+    /**
+     * Récupère un job par son ID
+     * @param {string} id Identifiant du job
+     * @returns {Promise<Job>} Job
+     */
+    async getJobById(id) {
+        try {
+            const response = await fetch(`/api/jobs/${id}`);
+
+            if (!response.ok) {
+                throw new Error('Failed to fetch job');
+            }
+
+            const data = await response.json();
+            return Job.create(data);
+        } catch (error) {
+            throw error;
+        }
+    }
+
+    /**
+     * Supprime un job
+     * @param {string} id Identifiant du job
+     * @returns {Promise<boolean>} Succès de l'opération
+     */
+    async deleteJob(id) {
+        try {
+            const response = await fetch(`/api/jobs/${id}`, {
+                method: 'DELETE'
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to delete job');
+            }
+
+            return true;
+        } catch (error) {
+            throw error;
+        }
+    }
+
+    /**
+     * Supprime tous les jobs correspondant aux critères
+     * @param {Object} criteria Critères de suppression
+     * @returns {Promise<number>} Nombre de jobs supprimés
+     */
+    async deleteJobs(criteria = {}) {
+        try {
+            const queryParams = new URLSearchParams();
+
+            // Ajouter les critères à l'URL
+            Object.entries(criteria).forEach(([key, value]) => {
+                if (Array.isArray(value)) {
+                    queryParams.append(key, value.join(','));
+                } else {
+                    queryParams.append(key, value);
+                }
+            });
+
+            const response = await fetch(`/api/jobs?${queryParams.toString()}`, {
+                method: 'DELETE'
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to delete jobs');
+            }
+
+            const data = await response.json();
+            return data.deleted || 0;
+        } catch (error) {
+            throw error;
+        }
+    }
+}

assets/vue/app/domain/activity/presentation/components/JobItem.vue

@@ -0,0 +1,133 @@
+<template>
+    <tr
+        class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition duration-150 ease-in-out"
+        :class="{
+            'bg-yellow-50 dark:bg-yellow-900/20': job.status === 'pending',
+            'bg-blue-50 dark:bg-blue-900/20': job.status === 'in_progress',
+            'bg-green-50 dark:bg-green-900/20': job.status === 'completed',
+            'bg-red-50 dark:bg-red-900/20': job.status === 'failed'
+        }">
+        <td class="py-4 px-4 text-center">
+            <input type="checkbox" class="form-checkbox h-5 w-5 text-green-600" />
+        </td>
+        <td class="py-4 px-4 font-medium">
+            <div>{{ jobTypeLabel }}</div>
+            <div v-if="job.context?.mangaTitle" class="text-xs text-gray-500 mt-0.5">
+                {{ job.context.mangaTitle }}
+            </div>
+        </td>
+        <td class="py-4 px-4">
+            <span
+                class="px-2 py-1 text-xs rounded-full"
+                :class="{
+                    'bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-300': job.status === 'pending',
+                    'bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300': job.status === 'in_progress',
+                    'bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300': job.status === 'completed',
+                    'bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-300': job.status === 'failed'
+                }">
+                {{ job.status }}
+            </span>
+        </td>
+        <td class="py-4 px-4">
+            <div v-if="job.error" class="text-sm text-red-600 dark:text-red-400">
+                {{ job.error }}
+            </div>
+            <div v-else-if="job.context?.mangaTitle || job.context?.chapterNumber !== undefined || job.context?.sourceId"
+                 class="text-sm text-gray-700 dark:text-gray-300 space-y-0.5">
+                <div v-if="job.context.mangaTitle" class="font-medium">
+                    {{ job.context.mangaTitle }}
+                </div>
+                <div v-if="job.context.chapterNumber !== undefined" class="text-gray-500 dark:text-gray-400">
+                    Chapitre {{ job.context.chapterNumber }}
+                </div>
+                <div v-if="job.context.sourceId" class="text-xs text-gray-400 dark:text-gray-500">
+                    Source : {{ job.context.sourceId }}
+                </div>
+            </div>
+            <div v-else class="text-sm text-gray-600 dark:text-gray-400">
+                {{ formatDate(job.createdAt) }}
+            </div>
+        </td>
+        <td class="py-4 px-4">
+            <div v-if="job.status === 'in_progress'" class="mt-2">
+                <div class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
+                    <div
+                        class="absolute top-0 left-0 h-full bg-green-400 transition-all duration-300 ease-out"
+                        :style="{ width: `${job.progress}%` }"></div>
+                    <div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white">
+                        {{ job.progress }}%
+                    </div>
+                </div>
+            </div>
+            <div v-else-if="job.status === 'completed'" class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
+                <div
+                    class="absolute top-0 left-0 h-full bg-green-400 transition-all duration-300 ease-out"
+                    style="width: 100%"></div>
+                <div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white">
+                    100%
+                </div>
+            </div>
+            <div v-else-if="job.status === 'failed'" class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
+                <div
+                    class="absolute top-0 left-0 h-full bg-red-400 transition-all duration-300 ease-out"
+                    style="width: 100%"></div>
+                <div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white">
+                    Erreur
+                </div>
+            </div>
+            <div v-else class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
+                <div
+                    class="absolute top-0 left-0 h-full bg-yellow-400 transition-all duration-300 ease-out"
+                    style="width: 0%"></div>
+                <div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-gray-600 dark:text-gray-300">
+                    En attente
+                </div>
+            </div>
+
+            <div v-if="job.maxAttempts > 1 || job.attempts > 0"
+                 class="text-xs text-gray-400 dark:text-gray-500 mt-1 text-center">
+                {{ job.attempts }} / {{ job.maxAttempts }} tentative{{ job.maxAttempts > 1 ? 's' : '' }}
+            </div>
+        </td>
+        <td class="py-4 px-4">
+            <button
+                @click="onDelete"
+                class="text-red-500 hover:text-red-700 transition duration-150 ease-in-out"
+                title="Supprimer">
+                <TrashIcon class="h-5 w-5" />
+            </button>
+        </td>
+    </tr>
+</template>
+
+<script setup>
+import { TrashIcon } from '@heroicons/vue/24/outline';
+import { computed, defineEmits, defineProps } from 'vue';
+
+const props = defineProps({
+    job: {
+        type: Object,
+        required: true
+    }
+});
+
+const emit = defineEmits(['delete']);
+
+const JOB_TYPE_LABELS = {
+    scraping_job: 'Scraping',
+    conversion_job: 'Conversion',
+};
+
+const jobTypeLabel = computed(() =>
+    JOB_TYPE_LABELS[props.job.type] ?? props.job.type
+);
+
+function formatDate(dateString) {
+    const date = new Date(dateString);
+    return date.toLocaleString();
+}
+
+function onDelete() {
+    emit('delete', props.job.id);
+}
+</script>

assets/vue/app/domain/activity/presentation/pages/ActivityPage.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
+
+        <div class="overflow-y-auto flex-1">
+            <!-- Loading -->
+            <div v-if="loading" class="flex justify-center py-12">
+                <div class="animate-spin h-10 w-10 border-b-2 border-indigo-500 rounded-full"></div>
+            </div>
+
+            <!-- Error -->
+            <div v-else-if="activityStore.error" class="px-6 py-8">
+                <div class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 p-4">
+                    <p class="text-red-800 dark:text-red-200">{{ activityStore.error }}</p>
+                </div>
+            </div>
+
+            <!-- Content -->
+            <section v-else class="border-t border-gray-200 dark:border-gray-700">
+                <!-- Empty -->
+                <div v-if="activityStore.jobs.length === 0" class="flex flex-col items-center justify-center py-20 text-gray-400 dark:text-gray-500">
+                    <ClockIcon class="w-12 h-12 mb-3" />
+                    <p class="text-base">Aucun job en cours ou en attente.</p>
+                </div>
+
+                <!-- Table -->
+                <div v-else class="overflow-x-auto">
+                    <table class="min-w-full">
+                        <thead>
+                            <tr class="border-b border-gray-200 dark:border-gray-700 text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">
+                                <th class="w-2/11 py-3 px-6 text-left">Type</th>
+                                <th class="w-2/11 py-3 px-4 text-left">Statut</th>
+                                <th class="w-3/11 py-3 px-4 text-left">Informations</th>
+                                <th class="w-3/11 py-3 px-4 text-left">Progression</th>
+                                <th class="w-1/11 py-3 px-4 text-left">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-100 dark:divide-gray-700/50 text-gray-700 dark:text-gray-300">
+                            <JobItem
+                                v-for="job in activityStore.jobs"
+                                :key="job.id"
+                                :job="job"
+                                @delete="deleteJob" />
+                        </tbody>
+                    </table>
+                </div>
+
+                <!-- Pagination -->
+                <Pagination
+                    v-if="total > activityStore.limit"
+                    :current-page="activityStore.currentPage"
+                    :total-pages="activityStore.totalPages"
+                    :total="total"
+                    :limit="activityStore.limit"
+                    :has-next-page="activityStore.hasNextPage"
+                    :has-previous-page="activityStore.hasPreviousPage"
+                    @page-change="changePage" />
+            </section>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ArrowPathIcon, BarsArrowDownIcon, ClockIcon, TrashIcon } from '@heroicons/vue/24/outline';
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, onUnmounted } from 'vue';
+import Pagination from '../../../../shared/components/ui/Pagination.vue';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+import { useActivityStore } from '../../application/store/activityStore';
+import JobItem from '../components/JobItem.vue';
+
+const activityStore = useActivityStore();
+
+const { sortBy, sortOrder, total, loading } = storeToRefs(activityStore);
+
+const isSortSelected = (by, order) => sortBy.value === by && sortOrder.value === order;
+
+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'label', text: 'Activité', class: 'text-sm font-medium' },
+        { type: 'label', text: `(${total.value})`, class: 'text-sm text-gray-400' },
+    ],
+    rightSection: [
+        {
+            type: 'dropdown',
+            icon: BarsArrowDownIcon,
+            label: 'Trier',
+            items: [
+                {
+                    label: 'Plus récent',
+                    isSelected: isSortSelected('createdAt', 'DESC'),
+                    onClick: () => activityStore.updateSort('createdAt', 'DESC'),
+                },
+                {
+                    label: 'Plus ancien',
+                    isSelected: isSortSelected('createdAt', 'ASC'),
+                    onClick: () => activityStore.updateSort('createdAt', 'ASC'),
+                },
+                {
+                    label: 'Par type',
+                    isSelected: isSortSelected('type', 'ASC'),
+                    onClick: () => activityStore.updateSort('type', 'ASC'),
+                },
+                {
+                    label: 'Par statut',
+                    isSelected: isSortSelected('status', 'ASC'),
+                    onClick: () => activityStore.updateSort('status', 'ASC'),
+                },
+            ],
+        },
+        {
+            type: 'button',
+            icon: ArrowPathIcon,
+            label: 'Rafraîchir',
+            disabled: loading.value,
+            onClick: () => activityStore.loadJobs(),
+        },
+        {
+            type: 'button',
+            icon: TrashIcon,
+            label: 'Supprimer visibles',
+            disabled: loading.value || total.value === 0,
+            onClick: deleteVisibleJobs,
+        },
+    ],
+}));
+
+onMounted(() => {
+    activityStore.loadJobs();
+    activityStore.subscribeMercure();
+});
+
+onUnmounted(() => {
+    activityStore.unsubscribeMercure();
+});
+
+function changePage(page) {
+    activityStore.goToPage(page);
+}
+
+function deleteJob(id) {
+    if (confirm('Voulez-vous vraiment supprimer ce job ?')) {
+        activityStore.deleteJob(id);
+    }
+}
+
+function deleteVisibleJobs() {
+    if (activityStore.jobs.length === 0) return;
+    if (confirm('Voulez-vous vraiment supprimer tous les jobs visibles ?')) {
+        activityStore.deleteJobs({ status: ['pending', 'in_progress'] });
+    }
+}
+</script>

assets/vue/app/domain/conversion/application/store/conversionStore.js

@@ -0,0 +1,228 @@
+import { defineStore } from 'pinia';
+import { ApiConversionRepository } from '../../infrastructure/api/apiConversionRepository';
+
+const conversionRepository = new ApiConversionRepository();
+
+export const useConversionStore = defineStore('conversion', {
+    state: () => ({
+        // État de conversion
+        isConverting: false,
+        conversionProgress: 0,
+        conversionError: null,
+        conversionSuccess: false,
+
+        // Fichier en cours de traitement
+        currentFile: null,
+        convertedFile: null,
+
+        // Historique des conversions (optionnel)
+        conversionHistory: [],
+
+        // État de l'interface
+        isDragOver: false,
+    }),
+
+    getters: {
+        /**
+         * Indique si une conversion est en cours
+         */
+        isProcessing: (state) => state.isConverting,
+
+        /**
+         * Indique si un fichier est sélectionné
+         */
+        hasSelectedFile: (state) => state.currentFile !== null,
+
+        /**
+         * Indique si une conversion a réussi
+         */
+        hasSucceeded: (state) => state.conversionSuccess && state.convertedFile !== null,
+
+        /**
+         * Indique si une erreur est présente
+         */
+        hasError: (state) => state.conversionError !== null,
+
+        /**
+         * Obtient le nom du fichier actuel
+         */
+        currentFileName: (state) => state.currentFile?.name || '',
+
+        /**
+         * Obtient la taille formatée du fichier actuel
+         */
+        currentFileSize: (state) => {
+            if (!state.currentFile) return '';
+
+            const bytes = state.currentFile.size;
+            const sizes = ['octets', 'Ko', 'Mo', 'Go'];
+            const i = Math.floor(Math.log(bytes) / Math.log(1024));
+
+            return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
+        },
+
+        /**
+         * Obtient le nombre de conversions réussies
+         */
+        conversionCount: (state) => state.conversionHistory.length,
+    },
+
+    actions: {
+        /**
+         * Sélectionne un fichier pour la conversion
+         * @param {File} file - Le fichier sélectionné
+         */
+        selectFile(file) {
+            // Validation du fichier
+            const validation = conversionRepository.validateFile(file);
+
+            if (!validation.isValid) {
+                this.setError(validation.error);
+                return false;
+            }
+
+            // Réinitialisation de l'état
+            this.clearError();
+            this.conversionSuccess = false;
+            this.convertedFile = null;
+
+            // Stockage du fichier
+            this.currentFile = file;
+
+            return true;
+        },
+
+        /**
+         * Lance la conversion du fichier sélectionné
+         */
+        async convertCurrentFile() {
+            if (!this.currentFile) {
+                this.setError('Aucun fichier sélectionné');
+                return false;
+            }
+
+            try {
+                this.isConverting = true;
+                this.conversionProgress = 0;
+                this.clearError();
+
+                // Simulation du progrès (l'API ne fournit pas de progrès en temps réel)
+                const progressInterval = setInterval(() => {
+                    if (this.conversionProgress < 90) {
+                        this.conversionProgress += Math.random() * 10;
+                    }
+                }, 100);
+
+                // Appel à l'API de conversion
+                const convertedFileBlob = await conversionRepository.convertFile(this.currentFile);
+
+                // Nettoyage de l'interval de progrès
+                clearInterval(progressInterval);
+                this.conversionProgress = 100;
+
+                // Stockage du fichier converti
+                this.convertedFile = convertedFileBlob;
+                this.conversionSuccess = true;
+
+                // Ajout à l'historique
+                this.addToHistory({
+                    originalName: this.currentFile.name,
+                    originalSize: this.currentFile.size,
+                    convertedSize: convertedFileBlob.size,
+                    timestamp: new Date().toISOString(),
+                });
+
+                return true;
+            } catch (error) {
+                this.setError(error.message || 'Erreur lors de la conversion');
+                return false;
+            } finally {
+                this.isConverting = false;
+                this.conversionProgress = 0;
+            }
+        },
+
+        /**
+         * Télécharge le fichier converti
+         */
+        downloadConvertedFile() {
+            if (!this.convertedFile || !this.currentFile) {
+                this.setError('Aucun fichier converti disponible');
+                return;
+            }
+
+            try {
+                conversionRepository.downloadConvertedFile(
+                    this.convertedFile,
+                    this.currentFile.name
+                );
+            } catch (error) {
+                this.setError(error.message || 'Erreur lors du téléchargement');
+            }
+        },
+
+        /**
+         * Réinitialise l'état de conversion
+         */
+        resetConversion() {
+            this.currentFile = null;
+            this.convertedFile = null;
+            this.conversionSuccess = false;
+            this.conversionProgress = 0;
+            this.clearError();
+        },
+
+        /**
+         * Définit une erreur
+         * @param {string} message - Message d'erreur
+         */
+        setError(message) {
+            this.conversionError = message;
+            this.conversionSuccess = false;
+        },
+
+        /**
+         * Efface l'erreur actuelle
+         */
+        clearError() {
+            this.conversionError = null;
+        },
+
+        /**
+         * Gère l'état du drag and drop
+         * @param {boolean} isDragOver - Indique si un fichier est survolé
+         */
+        setDragOver(isDragOver) {
+            this.isDragOver = isDragOver;
+        },
+
+        /**
+         * Ajoute une conversion à l'historique
+         * @param {Object} conversionData - Données de la conversion
+         */
+        addToHistory(conversionData) {
+            this.conversionHistory.unshift(conversionData);
+
+            // Limiter l'historique à 10 éléments
+            if (this.conversionHistory.length > 10) {
+                this.conversionHistory = this.conversionHistory.slice(0, 10);
+            }
+        },
+
+        /**
+         * Efface l'historique des conversions
+         */
+        clearHistory() {
+            this.conversionHistory = [];
+        },
+
+        /**
+         * Valide un fichier sans le sélectionner
+         * @param {File} file - Le fichier à valider
+         * @returns {Object} - Résultat de la validation
+         */
+        validateFile(file) {
+            return conversionRepository.validateFile(file);
+        }
+    }
+});

assets/vue/app/domain/conversion/infrastructure/api/apiConversionRepository.js

@@ -0,0 +1,133 @@
+export class ApiConversionRepository {
+    /**
+     * Convertit un fichier CBR/CBZ en CBZ
+     * @param {File} file - Le fichier à convertir
+     * @returns {Promise<Blob>} - Le fichier converti
+     */
+    async convertFile(file) {
+        try {
+            // Validation du fichier
+            if (!file) {
+                throw new Error('Aucun fichier fourni');
+            }
+
+            // Validation de la taille (150MB max selon l'API)
+            const maxSize = 150 * 1024 * 1024; // 150MB en bytes
+            if (file.size > maxSize) {
+                throw new Error('Le fichier est trop volumineux (max 150MB)');
+            }
+
+            // Validation du type de fichier
+            const allowedTypes = ['.cbr', '.cbz'];
+            const fileName = file.name.toLowerCase();
+            const isValidType = allowedTypes.some(type => fileName.endsWith(type));
+
+            if (!isValidType) {
+                throw new Error('Type de fichier non supporté. Seuls les fichiers .cbr et .cbz sont acceptés');
+            }
+
+            // Création du FormData pour l'envoi multipart
+            const formData = new FormData();
+            formData.append('file', file);
+
+            // Appel à l'API
+            const response = await fetch('/api/conversions/convert', {
+                method: 'POST',
+                body: formData,
+                // On ne définit pas Content-Type pour laisser le navigateur gérer multipart/form-data
+            });
+
+            if (!response.ok) {
+                // Gestion des erreurs HTTP
+                let errorMessage = 'Erreur lors de la conversion';
+
+                try {
+                    const errorData = await response.json();
+                    errorMessage = errorData.message || errorData.detail || errorMessage;
+                } catch {
+                    // Si la réponse n'est pas du JSON, on utilise le status text
+                    errorMessage = response.statusText || errorMessage;
+                }
+
+                throw new Error(errorMessage);
+            }
+
+            // Récupération du fichier converti
+            const convertedFile = await response.blob();
+
+            // Vérification que le fichier n'est pas vide
+            if (convertedFile.size === 0) {
+                throw new Error('Le fichier converti est vide');
+            }
+
+            return convertedFile;
+        } catch (error) {
+            console.error('Erreur lors de la conversion:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Télécharge le fichier converti
+     * @param {Blob} fileBlob - Le fichier à télécharger
+     * @param {string} originalFileName - Nom original du fichier
+     */
+    downloadConvertedFile(fileBlob, originalFileName) {
+        try {
+            // Génération du nom de fichier de sortie
+            const baseName = originalFileName.replace(/\.(cbr|cbz)$/i, '');
+            const outputFileName = `${baseName}.cbz`;
+
+            // Création d'un lien de téléchargement
+            const url = URL.createObjectURL(fileBlob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = outputFileName;
+
+            // Déclenchement du téléchargement
+            document.body.appendChild(link);
+            link.click();
+
+            // Nettoyage
+            document.body.removeChild(link);
+            URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error('Erreur lors du téléchargement:', error);
+            throw new Error('Impossible de télécharger le fichier converti');
+        }
+    }
+
+    /**
+     * Valide si un fichier peut être converti
+     * @param {File} file - Le fichier à valider
+     * @returns {Object} - Résultat de la validation {isValid: boolean, error?: string}
+     */
+    validateFile(file) {
+        if (!file) {
+            return { isValid: false, error: 'Aucun fichier sélectionné' };
+        }
+
+        // Vérification de la taille
+        const maxSize = 150 * 1024 * 1024; // 150MB
+        if (file.size > maxSize) {
+            return {
+                isValid: false,
+                error: 'Le fichier est trop volumineux (maximum 150MB)'
+            };
+        }
+
+        // Vérification du type
+        const allowedTypes = ['.cbr', '.cbz'];
+        const fileName = file.name.toLowerCase();
+        const isValidType = allowedTypes.some(type => fileName.endsWith(type));
+
+        if (!isValidType) {
+            return {
+                isValid: false,
+                error: 'Type de fichier non supporté. Seuls les fichiers .cbr et .cbz sont acceptés'
+            };
+        }
+
+        return { isValid: true };
+    }
+}

assets/vue/app/domain/conversion/presentation/components/ConversionProgress.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="space-y-4">
+    <!-- Statut de la conversion -->
+    <div class="flex items-center space-x-3">
+      <!-- Icône de statut -->
+      <div class="flex-shrink-0">
+        <ArrowPathIcon
+          v-if="isConverting"
+          class="w-6 h-6 text-blue-500 animate-spin"
+        />
+        <CheckCircleIcon
+          v-else-if="isSuccess"
+          class="w-6 h-6 text-green-500"
+        />
+        <ExclamationTriangleIcon
+          v-else-if="hasError"
+          class="w-6 h-6 text-red-500"
+        />
+        <ClockIcon
+          v-else
+          class="w-6 h-6 text-gray-400"
+        />
+      </div>
+
+      <!-- Message de statut -->
+      <div class="flex-1">
+        <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
+          {{ statusMessage }}
+        </p>
+        <p v-if="fileName" class="text-xs text-gray-500 dark:text-gray-400">
+          {{ fileName }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Barre de progression -->
+    <div v-if="showProgress" class="space-y-2">
+      <div class="flex justify-between text-xs text-gray-600 dark:text-gray-400">
+        <span>Progression</span>
+        <span>{{ Math.round(progress) }}%</span>
+      </div>
+      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+        <div
+          class="bg-blue-500 h-2 rounded-full transition-all duration-300 ease-out"
+          :style="{ width: `${progress}%` }"
+        />
+      </div>
+    </div>
+
+    <!-- Détails de la conversion -->
+    <div v-if="showDetails && (originalSize || convertedSize)" class="text-xs text-gray-500 dark:text-gray-400 space-y-1">
+      <div v-if="originalSize" class="flex justify-between">
+        <span>Taille originale:</span>
+        <span>{{ formatFileSize(originalSize) }}</span>
+      </div>
+      <div v-if="convertedSize" class="flex justify-between">
+        <span>Taille convertie:</span>
+        <span>{{ formatFileSize(convertedSize) }}</span>
+      </div>
+      <div v-if="originalSize && convertedSize" class="flex justify-between font-medium">
+        <span>Gain d'espace:</span>
+        <span :class="spaceSavingClass">{{ spaceSavingText }}</span>
+      </div>
+    </div>
+
+    <!-- Actions -->
+    <div v-if="showActions" class="flex space-x-3">
+      <button
+        v-if="canDownload"
+        @click="$emit('download')"
+        class="flex items-center space-x-2 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
+      >
+        <ArrowDownTrayIcon class="w-4 h-4" />
+        <span>Télécharger CBZ</span>
+      </button>
+
+      <button
+        v-if="canReset"
+        @click="$emit('reset')"
+        class="flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+      >
+        <ArrowPathIcon class="w-4 h-4" />
+        <span>Convertir un autre fichier</span>
+      </button>
+    </div>
+
+    <!-- Message d'erreur détaillé -->
+    <div v-if="hasError && errorMessage" class="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
+      <div class="flex">
+        <ExclamationTriangleIcon class="w-5 h-5 text-red-400 flex-shrink-0" />
+        <div class="ml-3">
+          <h3 class="text-sm font-medium text-red-800 dark:text-red-300">
+            Erreur de conversion
+          </h3>
+          <p class="mt-1 text-sm text-red-700 dark:text-red-400">
+            {{ errorMessage }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+    ArrowDownTrayIcon,
+    ArrowPathIcon,
+    CheckCircleIcon,
+    ClockIcon,
+    ExclamationTriangleIcon,
+} from '@heroicons/vue/24/outline';
+import { computed } from 'vue';
+
+export default {
+  name: 'ConversionProgress',
+
+  components: {
+    ArrowPathIcon,
+    CheckCircleIcon,
+    ExclamationTriangleIcon,
+    ClockIcon,
+    ArrowDownTrayIcon,
+  },
+
+  props: {
+    isConverting: {
+      type: Boolean,
+      default: false,
+    },
+    progress: {
+      type: Number,
+      default: 0,
+    },
+    isSuccess: {
+      type: Boolean,
+      default: false,
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+    fileName: {
+      type: String,
+      default: '',
+    },
+    originalSize: {
+      type: Number,
+      default: 0,
+    },
+    convertedSize: {
+      type: Number,
+      default: 0,
+    },
+    showActions: {
+      type: Boolean,
+      default: true,
+    },
+    showDetails: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  emits: ['download', 'reset'],
+
+  setup(props) {
+    // Message de statut calculé
+    const statusMessage = computed(() => {
+      if (props.isConverting) {
+        return 'Conversion en cours...';
+      }
+      if (props.isSuccess) {
+        return 'Conversion terminée avec succès !';
+      }
+      if (props.hasError) {
+        return 'Erreur lors de la conversion';
+      }
+      return 'En attente de fichier';
+    });
+
+    // Affichage de la barre de progression
+    const showProgress = computed(() => {
+      return props.isConverting && props.progress > 0;
+    });
+
+    // Actions disponibles
+    const canDownload = computed(() => {
+      return props.isSuccess && !props.isConverting;
+    });
+
+    const canReset = computed(() => {
+      return (props.isSuccess || props.hasError) && !props.isConverting;
+    });
+
+    // Calcul du gain d'espace
+    const spaceSaving = computed(() => {
+      if (!props.originalSize || !props.convertedSize) return 0;
+      return ((props.originalSize - props.convertedSize) / props.originalSize) * 100;
+    });
+
+    const spaceSavingText = computed(() => {
+      const saving = spaceSaving.value;
+      if (saving > 0) {
+        return `-${saving.toFixed(1)}%`;
+      } else if (saving < 0) {
+        return `+${Math.abs(saving).toFixed(1)}%`;
+      }
+      return '0%';
+    });
+
+    const spaceSavingClass = computed(() => {
+      const saving = spaceSaving.value;
+      if (saving > 0) {
+        return 'text-green-600';
+      } else if (saving < 0) {
+        return 'text-red-600';
+      }
+      return 'text-gray-600';
+    });
+
+    // Formatage de la taille de fichier
+    const formatFileSize = (bytes) => {
+      if (bytes === 0) return '0 octets';
+
+      const k = 1024;
+      const sizes = ['octets', 'Ko', 'Mo', 'Go'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+      return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+    };
+
+    return {
+      statusMessage,
+      showProgress,
+      canDownload,
+      canReset,
+      spaceSavingText,
+      spaceSavingClass,
+      formatFileSize,
+    };
+  },
+};
+</script>

assets/vue/app/domain/conversion/presentation/components/FileUploadArea.vue

@@ -0,0 +1,214 @@
+<template>
+  <div
+    class="relative"
+    @dragover.prevent="handleDragOver"
+    @dragenter.prevent="handleDragEnter"
+    @dragleave.prevent="handleDragLeave"
+    @drop.prevent="handleDrop"
+  >
+    <div
+      :class="[
+        'border-2 border-dashed rounded-lg p-8 text-center transition-all duration-200',
+        isDragOver
+          ? 'border-green-400 bg-green-50 dark:bg-green-900/20'
+          : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'
+      ]"
+    >
+      <!-- Zone d'upload -->
+      <div class="space-y-4">
+        <!-- Icône -->
+        <div class="flex justify-center">
+          <ArchiveBoxIcon
+            :class="[
+              'w-16 h-16 transition-colors duration-200',
+              isDragOver ? 'text-green-500' : 'text-gray-400'
+            ]"
+          />
+        </div>
+
+        <!-- Message principal -->
+        <div class="space-y-2">
+          <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+            {{ isDragOver ? 'Déposez votre fichier ici' : 'Sélectionnez un fichier CBR ou CBZ' }}
+          </h3>
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            Glissez-déposez votre fichier ou cliquez pour le sélectionner
+          </p>
+          <p class="text-xs text-gray-400 dark:text-gray-500">
+            Fichiers supportés: .cbr, .cbz (max. 150MB)
+          </p>
+        </div>
+
+        <!-- Bouton de sélection -->
+        <div class="flex justify-center">
+          <label
+            for="file-upload"
+            :class="[
+              'relative cursor-pointer rounded-md px-4 py-2 font-medium text-white transition-colors duration-200',
+              isDragOver
+                ? 'bg-green-500 hover:bg-green-600'
+                : 'bg-green-600 hover:bg-green-700'
+            ]"
+          >
+            <span>Sélectionner un fichier</span>
+            <input
+              id="file-upload"
+              name="file-upload"
+              type="file"
+              class="sr-only"
+              accept=".cbr,.cbz"
+              @change="handleFileSelect"
+            />
+          </label>
+        </div>
+
+        <!-- Informations du fichier sélectionné -->
+        <div v-if="selectedFile" class="mt-6 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+          <div class="flex items-center space-x-3">
+            <DocumentIcon class="w-8 h-8 text-gray-600 dark:text-gray-400" />
+            <div class="flex-1 min-w-0">
+              <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                {{ selectedFile.name }}
+              </p>
+              <p class="text-sm text-gray-500 dark:text-gray-400">
+                {{ formatFileSize(selectedFile.size) }}
+              </p>
+            </div>
+            <button
+              @click="clearFile"
+              class="p-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+              title="Supprimer le fichier"
+            >
+              <XMarkIcon class="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Overlay pendant le drag -->
+    <div
+      v-if="isDragOver"
+      class="absolute inset-0 bg-green-100 bg-opacity-50 rounded-lg flex items-center justify-center"
+      style="pointer-events: none;"
+    >
+      <div class="text-green-600 font-medium text-lg">
+        Déposez le fichier ici
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ArchiveBoxIcon, DocumentIcon, XMarkIcon } from '@heroicons/vue/24/outline';
+import { ref } from 'vue';
+
+export default {
+  name: 'FileUploadArea',
+
+  components: {
+    ArchiveBoxIcon,
+    DocumentIcon,
+    XMarkIcon,
+  },
+
+  props: {
+    selectedFile: {
+      type: File,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['file-selected', 'file-cleared'],
+
+  setup(props, { emit }) {
+    const isDragOver = ref(false);
+    const dragCounter = ref(0);
+
+    // Handlers pour le drag & drop
+    const handleDragEnter = (event) => {
+      if (props.disabled) return;
+
+      event.preventDefault();
+      dragCounter.value++;
+      isDragOver.value = true;
+    };
+
+    const handleDragOver = (event) => {
+      if (props.disabled) return;
+
+      event.preventDefault();
+    };
+
+    const handleDragLeave = (event) => {
+      if (props.disabled) return;
+
+      event.preventDefault();
+      dragCounter.value--;
+
+      if (dragCounter.value === 0) {
+        isDragOver.value = false;
+      }
+    };
+
+    const handleDrop = (event) => {
+      if (props.disabled) return;
+
+      event.preventDefault();
+      isDragOver.value = false;
+      dragCounter.value = 0;
+
+      const files = event.dataTransfer.files;
+      if (files.length > 0) {
+        const file = files[0];
+        emit('file-selected', file);
+      }
+    };
+
+    // Handler pour la sélection de fichier via input
+    const handleFileSelect = (event) => {
+      if (props.disabled) return;
+
+      const files = event.target.files;
+      if (files.length > 0) {
+        const file = files[0];
+        emit('file-selected', file);
+      }
+
+      // Réinitialiser l'input pour permettre la sélection du même fichier
+      event.target.value = '';
+    };
+
+    // Supprimer le fichier sélectionné
+    const clearFile = () => {
+      emit('file-cleared');
+    };
+
+    // Formater la taille du fichier
+    const formatFileSize = (bytes) => {
+      if (bytes === 0) return '0 octets';
+
+      const k = 1024;
+      const sizes = ['octets', 'Ko', 'Mo', 'Go'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+      return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+    };
+
+    return {
+      isDragOver,
+      handleDragEnter,
+      handleDragOver,
+      handleDragLeave,
+      handleDrop,
+      handleFileSelect,
+      clearFile,
+      formatFileSize,
+    };
+  },
+};
+</script>

assets/vue/app/domain/conversion/presentation/pages/ConversionPage.vue

@@ -0,0 +1,149 @@
+<template>
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
+
+        <div class="overflow-y-auto flex-1">
+            <div class="px-6 py-8">
+
+                <!-- Zone d'upload -->
+                <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">Fichier</h2>
+                    <FileUploadArea
+                        :selected-file="conversionStore.currentFile"
+                        :disabled="conversionStore.isProcessing"
+                        @file-selected="handleFileSelected"
+                        @file-cleared="handleFileClear"
+                    />
+                </section>
+
+                <!-- Progression -->
+                <section v-if="showProgress" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+                    <ConversionProgress
+                        :is-converting="conversionStore.isProcessing"
+                        :progress="conversionStore.conversionProgress"
+                        :is-success="conversionStore.hasSucceeded"
+                        :has-error="conversionStore.hasError"
+                        :error-message="conversionStore.conversionError"
+                        :file-name="conversionStore.currentFileName"
+                        :original-size="conversionStore.currentFile?.size || 0"
+                        :converted-size="conversionStore.convertedFile?.size || 0"
+                        @download="handleDownload"
+                        @reset="handleReset"
+                    />
+                </section>
+
+                <!-- Historique -->
+                <section v-if="conversionStore.conversionCount > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+                    <div class="flex items-center justify-between mb-3">
+                        <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Historique</h2>
+                        <button
+                            @click="conversionStore.clearHistory()"
+                            class="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
+                        >
+                            Effacer
+                        </button>
+                    </div>
+                    <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+                        <div
+                            v-for="(conversion, index) in conversionStore.conversionHistory"
+                            :key="index"
+                            class="flex items-center justify-between py-3"
+                        >
+                            <div>
+                                <p class="text-sm text-gray-900 dark:text-gray-100">{{ conversion.originalName }}</p>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ formatDate(conversion.timestamp) }}</p>
+                            </div>
+                            <div class="text-right text-sm">
+                                <p class="text-gray-600 dark:text-gray-300">
+                                    {{ formatFileSize(conversion.originalSize) }} → {{ formatFileSize(conversion.convertedSize) }}
+                                </p>
+                                <p class="text-xs text-green-600">{{ calculateSaving(conversion.originalSize, conversion.convertedSize) }}</p>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ArrowPathIcon } from '@heroicons/vue/24/outline';
+import { computed, onMounted } from 'vue';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+import { useConversionStore } from '../../application/store/conversionStore';
+import { useNotifications } from '../../../../shared/composables/useNotifications';
+import ConversionProgress from '../components/ConversionProgress.vue';
+import FileUploadArea from '../components/FileUploadArea.vue';
+
+const conversionStore = useConversionStore();
+const { showSuccess, showError } = useNotifications();
+
+const showProgress = computed(() =>
+    conversionStore.hasSelectedFile &&
+    (conversionStore.isProcessing || conversionStore.hasSucceeded || conversionStore.hasError)
+);
+
+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'label', text: 'Conversion CBR → CBZ', class: 'text-sm font-medium' },
+    ],
+    rightSection: [
+        ...(conversionStore.hasSelectedFile && !conversionStore.hasSucceeded ? [{
+            type: 'button',
+            icon: ArrowPathIcon,
+            label: conversionStore.isProcessing ? 'Conversion en cours...' : 'Convertir en CBZ',
+            onClick: handleConvert,
+            disabled: conversionStore.isProcessing,
+        }] : []),
+    ],
+}));
+
+const handleFileSelected = (file) => {
+    conversionStore.selectFile(file);
+};
+
+const handleFileClear = () => {
+    conversionStore.resetConversion();
+};
+
+const handleConvert = async () => {
+    if (!conversionStore.currentFile) return;
+    const success = await conversionStore.convertCurrentFile();
+    if (success) {
+        showSuccess('Conversion réussie !');
+    } else {
+        showError(conversionStore.conversionError ?? 'Échec de la conversion');
+    }
+};
+
+const handleDownload = () => conversionStore.downloadConvertedFile();
+const handleReset = () => conversionStore.resetConversion();
+
+const formatFileSize = (bytes) => {
+    if (bytes === 0) return '0 octets';
+    const k = 1024;
+    const sizes = ['octets', 'Ko', 'Mo', 'Go'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+};
+
+const formatDate = (isoString) =>
+    new Intl.DateTimeFormat('fr-FR', {
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+    }).format(new Date(isoString));
+
+const calculateSaving = (originalSize, convertedSize) => {
+    if (!originalSize || !convertedSize) return '';
+    const saving = ((originalSize - convertedSize) / originalSize) * 100;
+    if (saving > 0) return `-${saving.toFixed(1)}%`;
+    if (saving < 0) return `+${Math.abs(saving).toFixed(1)}%`;
+    return '0%';
+};
+
+onMounted(() => conversionStore.resetConversion());
+</script>

assets/vue/app/domain/import/README.md

@@ -0,0 +1,217 @@
+# Domaine Import - Analyse et Import de Fichiers CBZ/CBR
+
+## Vue d'ensemble
+
+Ce domaine permet l'import de fichiers CBZ/CBR dans Mangarr en utilisant l'analyse intelligente de noms de fichiers pour trouver automatiquement les correspondances avec les mangas de la bibliothèque.
+
+## Architecture
+
+### Structure des Dossiers
+
+```
+domain/import/
+├── domain/
+│   └── entities/
+│       └── FileImport.js          # Entité représentant un fichier à importer
+├── infrastructure/
+│   └── api/
+│       └── apiImportRepository.js # Client API
+├── application/
+│   └── store/
+│       └── newImportStore.js      # Store Pinia principal
+└── presentation/
+    ├── pages/
+    │   └── NewImportPage.vue      # Page principale d'import
+    └── components/
+        ├── FileImportCard.vue     # Carte de fichier à importer
+        ├── ImportResults.vue      # Résumé des résultats
+        └── StatusBadge.vue        # Badge de statut
+```
+
+## Fonctionnalités
+
+### 1. Upload de Fichiers
+
+- **Drag & Drop** : Support du glisser-déposer pour les fichiers CBZ/CBR
+- **Sélection multiple** : Import de plusieurs fichiers simultanément
+- **Validation** : Vérification automatique des formats acceptés
+
+### 2. Analyse Intelligente
+
+- **Extraction automatique** : Le système analyse le nom de fichier pour extraire :
+  - Le titre du manga
+  - Le numéro de chapitre (si présent)
+  - Le numéro de volume (si présent)
+
+- **Correspondance automatique** : 
+  - Recherche des mangas correspondants dans la bibliothèque
+  - Score de correspondance pour chaque résultat
+  - Sélection automatique du meilleur match
+
+### 3. Sélection et Validation
+
+- **Sélection de manga** : Dropdown avec tous les mangas correspondants et leur score
+- **Prévisualisation** : Affichage de la couverture et des informations du manga sélectionné
+- **Édition des numéros** : Possibilité de modifier les numéros de chapitre/volume extraits
+- **Exclusivité** : Un fichier ne peut être importé que comme chapitre OU volume (pas les deux)
+
+### 4. Import
+
+- **Import unitaire** : Import fichier par fichier
+- **Import groupé** : Import de tous les fichiers prêts en une seule fois
+- **Retry** : Possibilité de réessayer en cas d'erreur
+- **Suivi en temps réel** : Indicateurs de progression et statuts
+
+### 5. Résultats
+
+- **Statistiques** : Nombre de fichiers importés, erreurs, total
+- **Détails** : Liste des fichiers importés avec leurs associations
+- **Erreurs** : Affichage détaillé des erreurs pour débogage
+
+## API Endpoints Utilisés
+
+### Analyse de fichiers
+```
+GET /api/manga-matches?filename={filename}
+```
+Retourne :
+```json
+{
+  "matches": [
+    {
+      "id": "string",
+      "title": "string",
+      "slug": "string",
+      "alternativeSlugs": ["string"],
+      "thumbnailUrl": "string",
+      "matchScore": 100
+    }
+  ],
+  "chapterNumber": 1.5,
+  "volumeNumber": 2.0,
+  "possibleTitles": ["string"]
+}
+```
+
+### Import de fichier
+```
+POST /api/chapters/import
+```
+FormData :
+- `file`: Le fichier CBZ à importer
+- `mangaId`: ID du manga
+- `chapterNumber`: Numéro de chapitre (float, optionnel)
+
+Réponse (200) :
+```json
+{
+  "message": "Chapter imported successfully",
+  "mangaId": "uuid",
+  "chapterNumber": 1.5
+}
+```
+
+Erreurs :
+- `404`: Manga ou Chapitre non trouvé
+- `422`: Paramètres invalides ou fichier absent
+- `400`: Fichier CBZ invalide
+
+### Import de volume (À venir)
+```
+POST /api/volumes/import
+```
+FormData :
+- `file`: Le fichier CBZ à importer
+- `mangaId`: ID du manga
+- `volumeNumber`: Numéro de volume (int)
+
+## Store Pinia
+
+Le store `newImportStore` gère tout l'état de l'application :
+
+### État
+- `files`: Liste des fichiers en cours de traitement
+- `analyzingFiles`: Set des IDs de fichiers en analyse
+- `importingFiles`: Set des IDs de fichiers en import
+- `isLoading`: État de chargement global
+- `globalError`: Erreur globale éventuelle
+
+### Getters
+- `pendingFiles`: Fichiers en attente d'analyse
+- `analyzedFiles`: Fichiers analysés
+- `readyFiles`: Fichiers prêts pour l'import
+- `importedFiles`: Fichiers importés avec succès
+- `errorFiles`: Fichiers en erreur
+- `hasReadyFiles`: Au moins un fichier prêt
+- `allFilesProcessed`: Tous les fichiers traités
+- `progressPercentage`: Pourcentage de progression
+
+### Actions Principales
+- `addFiles(fileList)`: Ajoute des fichiers et lance l'analyse automatique
+- `analyzeFile(fileId)`: Analyse un fichier spécifique
+- `setFileManga(fileId, manga)`: Définit le manga sélectionné
+- `setFileChapterNumber(fileId, number)`: Définit le numéro de chapitre
+- `setFileVolumeNumber(fileId, number)`: Définit le numéro de volume
+- `importFile(fileId)`: Importe un fichier
+- `importAllReadyFiles()`: Importe tous les fichiers prêts
+- `autoSelectBestMatches()`: Sélection automatique des meilleurs matchs
+- `retryFile(fileId)`: Réessaye l'analyse ou l'import d'un fichier
+
+## Entité FileImport
+
+Représente un fichier dans le processus d'import :
+
+### Propriétés
+- `file`: Objet File du navigateur
+- `filename`: Nom du fichier original
+- `analysis`: Résultat de l'analyse (matches, chapterNumber, volumeNumber)
+- `selectedManga`: Manga sélectionné par l'utilisateur
+- `selectedChapterNumber`: Numéro de chapitre (auto ou manuel)
+- `selectedVolumeNumber`: Numéro de volume (auto ou manuel)
+- `status`: pending | analyzed | importing | imported | error
+- `errorMessage`: Message d'erreur le cas échéant
+
+### Méthodes Utiles
+- `hasMatches()`: Vérifie si des correspondances ont été trouvées
+- `getMatches()`: Retourne la liste des correspondances
+- `getBestMatch()`: Retourne la meilleure correspondance
+- `isReadyForImport()`: Vérifie si le fichier est prêt à être importé
+- `getImportData()`: Prépare les données pour l'API d'import
+
+## Workflow Utilisateur
+
+1. **Upload**: L'utilisateur glisse-dépose ou sélectionne des fichiers CBZ/CBR
+2. **Analyse automatique**: Chaque fichier est analysé pour extraire les informations
+3. **Sélection auto**: Le meilleur match est automatiquement sélectionné
+4. **Validation**: L'utilisateur peut modifier le manga ou les numéros si nécessaire
+5. **Import**: Import unitaire ou groupé des fichiers prêts
+6. **Résultats**: Affichage du résumé avec succès et erreurs
+
+## Gestion des Erreurs
+
+### Erreurs d'analyse
+- Aucun manga trouvé → Message informatif, possibilité de réessayer
+- Erreur réseau → Message d'erreur, bouton retry disponible
+
+### Erreurs d'import
+- Échec d'upload → Fichier marqué en erreur avec message détaillé
+- Erreur serveur → Fichier en erreur, possibilité de retry
+
+## Améliorations Futures
+
+1. **Recherche manuelle** : Permettre la recherche manuelle si aucun match
+2. **Multi-sélection** : Sélectionner plusieurs fichiers pour actions groupées
+3. **Historique** : Garder un historique des imports récents
+4. **Validation avancée** : Vérifier si le chapitre/volume existe déjà
+5. **Métadonnées** : Extraire et afficher plus de métadonnées des fichiers CBZ
+
+## Composants Réutilisables
+
+### Depuis Shared
+- `FileUpload.vue`: Zone d'upload avec drag & drop
+- `LoadingSpinner.vue`: Indicateur de chargement
+
+### Spécifiques au Domaine
+- `FileImportCard.vue`: Carte complète de gestion d'un fichier
+- `StatusBadge.vue`: Badge de statut avec couleurs
+- `ImportResults.vue`: Résumé des résultats d'import

assets/vue/app/domain/import/application/store/newImportStore.js

@@ -0,0 +1,316 @@
+import { defineStore } from 'pinia';
+import { useNotifications } from '../../../../shared/composables/useNotifications';
+import { FileImport } from '../../domain/entities/FileImport';
+import { ApiImportRepository } from '../../infrastructure/api/apiImportRepository';
+
+const importRepository = new ApiImportRepository();
+const { showSuccess, showError, showInfo } = useNotifications();
+
+export const useNewImportStore = defineStore('newImport', {
+    state: () => ({
+        // Files being processed
+        files: [], // Array of FileImport entities
+
+        // Loading states
+        analyzingFiles: new Set(), // File IDs being analyzed
+        importingFiles: new Set(), // File IDs being imported
+
+        // Global states
+        isLoading: false,
+        globalError: null,
+    }),
+
+    getters: {
+        // File status getters
+        pendingFiles: (state) => state.files.filter(f => f.isPending()),
+        analyzedFiles: (state) => state.files.filter(f => f.isAnalyzed()),
+        readyFiles: (state) => state.files.filter(f => f.isReadyForImport()),
+        importedFiles: (state) => state.files.filter(f => f.isImported()),
+        errorFiles: (state) => state.files.filter(f => f.hasError()),
+
+        // Counts
+        totalFiles: (state) => state.files.length,
+        readyCount: (state) => state.files.filter(f => f.isReadyForImport()).length,
+        importedCount: (state) => state.files.filter(f => f.isImported()).length,
+        errorCount: (state) => state.files.filter(f => f.hasError()).length,
+
+        // Status helpers
+        hasFiles: (state) => state.files.length > 0,
+        hasReadyFiles: (state) => state.files.some(f => f.isReadyForImport()),
+        allFilesProcessed: (state) => {
+            return state.files.length > 0 &&
+                   state.files.every(f => f.isImported() || f.hasError());
+        },
+
+        // Progress
+        progressPercentage: (state) => {
+            if (state.files.length === 0) return 0;
+            const processed = state.files.filter(f => f.isImported() || f.hasError()).length;
+            return Math.round((processed / state.files.length) * 100);
+        },
+
+        // Specific file finders
+        getFileById: (state) => (id) => {
+            return state.files.find(f => f.id === id);
+        }
+    },
+
+    actions: {
+        // === FILE MANAGEMENT ===
+
+        /**
+         * Add files to the import queue
+         */
+        addFiles(fileList) {
+            const validFiles = Array.from(fileList).filter(file => {
+                const extension = file.name.split('.').pop().toLowerCase();
+                return ['cbz', 'cbr'].includes(extension);
+            });
+
+            if (validFiles.length === 0) {
+                showError('Aucun fichier CBZ/CBR valide sélectionné');
+                return;
+            }
+
+            const newFiles = validFiles.map(file => FileImport.create(file));
+            this.files.push(...newFiles);
+
+            showInfo(`${newFiles.length} fichier(s) ajouté(s) à la queue d'import`);
+
+            // Auto-analyze all new files
+            this.analyzeAllPendingFiles();
+        },
+
+        /**
+         * Remove a file from the queue
+         */
+        removeFile(fileId) {
+            const index = this.files.findIndex(f => f.id === fileId);
+            if (index !== -1) {
+                this.files.splice(index, 1);
+            }
+        },
+
+        /**
+         * Clear all files
+         */
+        clearFiles() {
+            this.files = [];
+            this.analyzingFiles.clear();
+            this.importingFiles.clear();
+            this.globalError = null;
+        },
+
+        // === ANALYSIS ACTIONS ===
+
+        /**
+         * Analyze all pending files
+         */
+        async analyzeAllPendingFiles() {
+            const pendingFiles = this.pendingFiles;
+            if (pendingFiles.length === 0) return;
+
+            this.isLoading = true;
+            try {
+                await Promise.all(
+                    pendingFiles.map(file => this.analyzeFile(file.id))
+                );
+                showSuccess(`${pendingFiles.length} fichier(s) analysé(s) avec succès`);
+            } catch (error) {
+                console.error('Error analyzing files:', error);
+                this.globalError = 'Erreur lors de l\'analyse des fichiers';
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        /**
+         * Analyze a specific file
+         */
+        async analyzeFile(fileId) {
+            const fileIndex = this.files.findIndex(f => f.id === fileId);
+            if (fileIndex === -1) return;
+
+            const file = this.files[fileIndex];
+            if (!file.isPending()) return;
+
+            this.analyzingFiles.add(fileId);
+
+            try {
+                const analysis = await importRepository.analyzeFilename(file.filename);
+                file.setAnalysis(analysis);
+
+                // Force reactivity by replacing the object in the array
+                this.files[fileIndex] = file;
+
+                if (!file.hasMatches()) {
+                    showError(`Aucun manga trouvé pour le fichier: ${file.filename}`);
+                }
+            } catch (error) {
+                console.error(`Error analyzing file ${file.filename}:`, error);
+                file.setError(`Erreur d'analyse: ${error.message}`);
+                this.files[fileIndex] = file;
+                showError(`Erreur lors de l'analyse de ${file.filename}`);
+            } finally {
+                this.analyzingFiles.delete(fileId);
+            }
+        },
+
+        // === SELECTION ACTIONS ===
+
+        /**
+         * Update manga selection for a file
+         */
+        setFileManga(fileId, manga) {
+            const fileIndex = this.files.findIndex(f => f.id === fileId);
+            if (fileIndex !== -1) {
+                this.files[fileIndex].setSelectedManga(manga);
+                // Force reactivity
+                this.files[fileIndex] = this.files[fileIndex];
+            }
+        },
+
+        /**
+         * Update chapter number for a file
+         */
+        setFileChapterNumber(fileId, chapterNumber) {
+            const fileIndex = this.files.findIndex(f => f.id === fileId);
+            if (fileIndex !== -1) {
+                this.files[fileIndex].setSelectedChapterNumber(chapterNumber);
+                // Force reactivity
+                this.files[fileIndex] = this.files[fileIndex];
+            }
+        },
+
+        /**
+         * Update volume number for a file
+         */
+        setFileVolumeNumber(fileId, volumeNumber) {
+            const fileIndex = this.files.findIndex(f => f.id === fileId);
+            if (fileIndex !== -1) {
+                this.files[fileIndex].setSelectedVolumeNumber(volumeNumber);
+                // Force reactivity
+                this.files[fileIndex] = this.files[fileIndex];
+            }
+        },
+
+        // === IMPORT ACTIONS ===
+
+        /**
+         * Import all ready files
+         */
+        async importAllReadyFiles() {
+            const readyFiles = this.readyFiles;
+            if (readyFiles.length === 0) {
+                showError('Aucun fichier prêt pour l\'import');
+                return;
+            }
+
+            this.isLoading = true;
+            let successCount = 0;
+            let errorCount = 0;
+
+            try {
+                for (const file of readyFiles) {
+                    try {
+                        await this.importFile(file.id);
+                        successCount++;
+                    } catch (error) {
+                        errorCount++;
+                        console.error(`Failed to import file ${file.filename}:`, error);
+                    }
+                }
+
+                if (successCount > 0) {
+                    showSuccess(`${successCount} fichier(s) importé(s) avec succès`);
+                }
+                if (errorCount > 0) {
+                    showError(`${errorCount} fichier(s) ont échoué lors de l'import`);
+                }
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        /**
+         * Import a specific file
+         */
+        async importFile(fileId) {
+            const file = this.getFileById(fileId);
+            if (!file || !file.isReadyForImport()) {
+                throw new Error('File is not ready for import');
+            }
+
+            this.importingFiles.add(fileId);
+            file.setImporting();
+
+            try {
+                const importData = file.getImportData();
+                await importRepository.importFile(
+                    file.file,
+                    importData.mangaId,
+                    importData.chapterNumber,
+                    importData.volumeNumber
+                );
+
+                file.setImported();
+                showSuccess(`Fichier ${file.filename} importé avec succès`);
+            } catch (error) {
+                console.error(`Error importing file ${file.filename}:`, error);
+                file.setError(`Erreur d'import: ${error.message}`);
+                throw error;
+            } finally {
+                this.importingFiles.delete(fileId);
+            }
+        },
+
+        /**
+         * Retry import for a failed file
+         */
+        async retryFile(fileId) {
+            const file = this.getFileById(fileId);
+            if (!file) return;
+
+            if (file.hasError() && file.selectedManga) {
+                // If the file had an import error but has selections, retry import
+                await this.importFile(fileId);
+            } else {
+                // If the file had an analysis error, retry analysis
+                file.status = 'pending';
+                file.errorMessage = null;
+                await this.analyzeFile(fileId);
+            }
+        },
+
+        // === UTILITY ACTIONS ===
+
+        /**
+         * Auto-select best matches for all files
+         */
+        autoSelectBestMatches() {
+            let selectedCount = 0;
+
+            this.analyzedFiles.forEach(file => {
+                const bestMatch = file.getBestMatch();
+                if (bestMatch) {
+                    file.setSelectedManga(bestMatch);
+                    selectedCount++;
+                }
+            });
+
+            if (selectedCount > 0) {
+                showInfo(`${selectedCount} correspondance(s) automatique(s) effectuée(s)`);
+            }
+        },
+
+        /**
+         * Reset global state
+         */
+        resetGlobalState() {
+            this.globalError = null;
+            this.isLoading = false;
+            this.analyzingFiles.clear();
+            this.importingFiles.clear();
+        }
+    }
+});

assets/vue/app/domain/import/domain/entities/FileImport.js

@@ -0,0 +1,200 @@
+/**
+ * Entité représentant un fichier en cours d'import avec ses correspondances possibles
+ */
+export class FileImport {
+    constructor({
+        file,                    // File object from browser
+        filename,                // Original filename
+        analysis = null,         // Result from /api/manga-matches endpoint
+        selectedManga = null,    // Selected manga match
+        selectedChapterNumber = null, // Selected chapter number (extracted from filename)
+        selectedVolumeNumber = null,  // Selected volume number (extracted from filename)
+        status = 'pending',      // 'pending', 'analyzed', 'importing', 'imported', 'error'
+        errorMessage = null,
+        importedAt = null
+    }) {
+        this.file = file;
+        this.filename = filename;
+        this.analysis = analysis;
+        this.selectedManga = selectedManga;
+        this.selectedChapterNumber = selectedChapterNumber;
+        this.selectedVolumeNumber = selectedVolumeNumber;
+        this.status = status;
+        this.errorMessage = errorMessage;
+        this.importedAt = importedAt;
+        this.id = this._generateId();
+    }
+
+    static create(file) {
+        return new FileImport({
+            file,
+            filename: file.name
+        });
+    }
+
+    _generateId() {
+        return `file_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+
+    // Status helpers
+    isPending() {
+        return this.status === 'pending';
+    }
+
+    isAnalyzed() {
+        return this.status === 'analyzed';
+    }
+
+    isImporting() {
+        return this.status === 'importing';
+    }
+
+    isImported() {
+        return this.status === 'imported';
+    }
+
+    hasError() {
+        return this.status === 'error';
+    }
+
+    // Analysis helpers
+    hasMatches() {
+        return this.analysis && this.analysis.matches && this.analysis.matches.length > 0;
+    }
+
+    getMatches() {
+        return this.analysis?.matches || [];
+    }
+
+    getBestMatch() {
+        const matches = this.getMatches();
+        // Sort by matchScore (highest first) and return the best one
+        return matches.length > 0 ? matches.sort((a, b) => b.matchScore - a.matchScore)[0] : null;
+    }
+
+    // Analysis extracted data
+    getExtractedChapterNumber() {
+        return this.analysis?.chapterNumber || null;
+    }
+
+    getExtractedVolumeNumber() {
+        return this.analysis?.volumeNumber || null;
+    }
+
+    // Selection helpers
+    isReadyForImport() {
+        // Ready if a manga is selected and at least chapter or volume number is set
+        return this.selectedManga && (this.selectedChapterNumber !== null || this.selectedVolumeNumber !== null);
+    }
+
+    getImportType() {
+        if (this.selectedChapterNumber !== null) return 'chapter';
+        if (this.selectedVolumeNumber !== null) return 'volume';
+        return null;
+    }
+
+    // File helpers
+    getFormattedSize() {
+        if (!this.file || !this.file.size) return 'Unknown';
+
+        const bytes = this.file.size;
+        const units = ['B', 'KB', 'MB', 'GB'];
+        let size = bytes;
+        let unitIndex = 0;
+
+        while (size >= 1024 && unitIndex < units.length - 1) {
+            size /= 1024;
+            unitIndex++;
+        }
+
+        return `${size.toFixed(2)} ${units[unitIndex]}`;
+    }
+
+    getFileExtension() {
+        const extension = this.filename.split('.').pop().toLowerCase();
+        return extension;
+    }
+
+    isValidFormat() {
+        const validExtensions = ['cbz', 'cbr'];
+        return validExtensions.includes(this.getFileExtension());
+    }
+
+    // Update methods
+    setAnalysis(analysis) {
+        this.analysis = analysis;
+        this.status = 'analyzed';
+
+        // Auto-set extracted chapter/volume numbers from analysis
+        if (analysis.chapterNumber !== null && analysis.chapterNumber !== undefined) {
+            this.selectedChapterNumber = analysis.chapterNumber;
+        }
+        if (analysis.volumeNumber !== null && analysis.volumeNumber !== undefined) {
+            this.selectedVolumeNumber = analysis.volumeNumber;
+        }
+
+        // Auto-select best match if available
+        const bestMatch = this.getBestMatch();
+        if (bestMatch) {
+            this.selectedManga = bestMatch;
+        }
+    }
+
+    setSelectedManga(manga) {
+        this.selectedManga = manga;
+        // Keep the chapter/volume numbers from analysis
+    }
+
+    setSelectedChapterNumber(chapterNumber) {
+        this.selectedChapterNumber = chapterNumber;
+        // If setting chapter, clear volume
+        if (chapterNumber !== null) {
+            this.selectedVolumeNumber = null;
+        }
+    }
+
+    setSelectedVolumeNumber(volumeNumber) {
+        this.selectedVolumeNumber = volumeNumber;
+        // If setting volume, clear chapter
+        if (volumeNumber !== null) {
+            this.selectedChapterNumber = null;
+        }
+    }
+
+    setImporting() {
+        this.status = 'importing';
+        this.errorMessage = null;
+    }
+
+    setImported() {
+        this.status = 'imported';
+        this.importedAt = new Date().toISOString();
+        this.errorMessage = null;
+    }
+
+    setError(message) {
+        this.status = 'error';
+        this.errorMessage = message;
+    }
+
+    // Export selection for API
+    getImportData() {
+        if (!this.isReadyForImport()) {
+            throw new Error('File is not ready for import');
+        }
+
+        const data = {
+            mangaId: this.selectedManga.id
+        };
+
+        if (this.selectedChapterNumber !== null) {
+            data.chapterNumber = this.selectedChapterNumber;
+        }
+
+        if (this.selectedVolumeNumber !== null) {
+            data.volumeNumber = this.selectedVolumeNumber;
+        }
+
+        return data;
+    }
+}

assets/vue/app/domain/import/domain/entities/ImportFile.js

@@ -0,0 +1,239 @@
+export class ImportFile {
+    constructor({
+        id,
+        originalName,
+        fileSize,
+        extension,
+        status = 'pending',
+        createdAt,
+        metadata = null,
+        mangaMatches = [],
+        selectedMangaSlug = null,
+        selectedVolume = null,
+        selectedChapter = null,
+        errorMessage = null,
+        processedAt = null,
+        // New properties for simplified workflow
+        file = null, // Browser File object
+        analysis = null, // Analysis result from API
+        selectedManga = null, // Selected manga object
+        selectedChapterId = null // Selected chapter ID
+    }) {
+        this.id = id;
+        this.originalName = originalName;
+        this.fileSize = fileSize;
+        this.extension = extension;
+        this.status = status;
+        this.createdAt = createdAt;
+        this.metadata = metadata;
+        this.mangaMatches = mangaMatches;
+        this.selectedMangaSlug = selectedMangaSlug;
+        this.selectedVolume = selectedVolume;
+        this.selectedChapter = selectedChapter;
+        this.errorMessage = errorMessage;
+        this.processedAt = processedAt;
+
+        // New properties
+        this.file = file;
+        this.analysis = analysis;
+        this.selectedManga = selectedManga;
+        this.selectedChapterId = selectedChapterId;
+        this.mangaMatches = mangaMatches; // Store found manga matches
+    }
+
+    static create(data) {
+        return new ImportFile({
+            ...data,
+            createdAt: data.createdAt || new Date().toISOString()
+        });
+    }
+
+    // Create from browser File object
+    static createFromFile(file) {
+        return new ImportFile({
+            id: `file_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+            originalName: file.name,
+            fileSize: file.size,
+            extension: file.name.split('.').pop().toLowerCase(),
+            file: file,
+            createdAt: new Date().toISOString()
+        });
+    }
+
+    isProcessed() {
+        return this.status === 'processed';
+    }
+
+    hasError() {
+        return this.status === 'error';
+    }
+
+    isPending() {
+        return this.status === 'pending';
+    }
+
+    needsConversion() {
+        return this.extension === 'cbr';
+    }
+
+    isReadyForImport() {
+        return this.isProcessed() && this.selectedMangaSlug && (this.selectedVolume || this.selectedChapter);
+    }
+
+    getFormattedSize() {
+        const bytes = parseInt(this.fileSize);
+        const units = ['B', 'KB', 'MB', 'GB'];
+        let size = bytes;
+        let unitIndex = 0;
+
+        while (size >= 1024 && unitIndex < units.length - 1) {
+            size /= 1024;
+            unitIndex++;
+        }
+
+        return `${size.toFixed(2)} ${units[unitIndex]}`;
+    }
+
+    getContentType() {
+        if (this.metadata?.chapter) {
+            return `Chapter ${this.metadata.chapter}`;
+        }
+        if (this.metadata?.volume) {
+            return `Volume ${this.metadata.volume}`;
+        }
+        return 'Unknown';
+    }
+
+    // === NEW METHODS FOR SIMPLIFIED WORKFLOW ===
+
+    // Status helpers for new workflow
+    isAnalyzed() {
+        return this.status === 'analyzed';
+    }
+
+    isImporting() {
+        return this.status === 'importing';
+    }
+
+    isImported() {
+        return this.status === 'imported';
+    }
+
+    // Analysis helpers
+    hasAnalysis() {
+        return this.analysis && this.analysis.possibleTitles && this.analysis.possibleTitles.length > 0;
+    }
+
+    getPossibleTitles() {
+        return this.analysis?.possibleTitles || [];
+    }
+
+    getAnalyzedChapter() {
+        return this.analysis?.chapterNumber || null;
+    }
+
+    getAnalyzedVolume() {
+        return this.analysis?.volumeNumber || null;
+    }
+
+    // For backward compatibility with existing code
+    hasMatches() {
+        return this.mangaMatches && this.mangaMatches.length > 0;
+    }
+
+    getMatches() {
+        return this.mangaMatches || [];
+    }
+
+    getBestMatch() {
+        const matches = this.getMatches();
+        return matches.length > 0 ? matches[0] : null;
+    }
+
+    // Selection helpers
+    isReadyForNewImport() {
+        return this.selectedManga && (this.selectedChapterId || this.selectedVolume !== null);
+    }
+
+    getImportType() {
+        if (this.selectedChapterId) return 'chapter';
+        if (this.selectedVolume !== null) return 'volume';
+        return null;
+    }
+
+    // File validation
+    isValidFormat() {
+        const validExtensions = ['cbz', 'cbr'];
+        return validExtensions.includes(this.extension);
+    }
+
+    // Update methods for new workflow
+    setAnalysis(analysis) {
+        this.analysis = analysis;
+        this.status = 'analyzed';
+    }
+
+    setMangaMatches(matches) {
+        this.mangaMatches = matches;
+
+        // Auto-select best match if available
+        const bestMatch = this.getBestMatch();
+        if (bestMatch) {
+            this.selectedManga = bestMatch;
+        }
+    }
+
+    setSelectedManga(manga) {
+        this.selectedManga = manga;
+        // Reset chapter/volume selection when manga changes
+        this.selectedChapterId = null;
+        this.selectedVolume = null;
+    }
+
+    setSelectedChapterById(chapterId) {
+        this.selectedChapterId = chapterId;
+        this.selectedVolume = null; // Can't have both
+    }
+
+    setSelectedVolumeNumber(volumeNumber) {
+        this.selectedVolume = volumeNumber;
+        this.selectedChapterId = null; // Can't have both
+    }
+
+    setImporting() {
+        this.status = 'importing';
+        this.errorMessage = null;
+    }
+
+    setImported() {
+        this.status = 'imported';
+        this.processedAt = new Date().toISOString();
+        this.errorMessage = null;
+    }
+
+    setError(message) {
+        this.status = 'error';
+        this.errorMessage = message;
+    }
+
+    // Export selection for API
+    getImportData() {
+        if (!this.isReadyForNewImport()) {
+            throw new Error('File is not ready for import');
+        }
+
+        const data = {
+            mangaId: this.selectedManga.id
+        };
+
+        if (this.selectedChapterId) {
+            data.chapterId = this.selectedChapterId;
+        }
+
+        if (this.selectedVolume !== null) {
+            data.volumeNumber = this.selectedVolume;
+        }
+
+        return data;
+    }
+}

assets/vue/app/domain/import/infrastructure/api/apiImportRepository.js

@@ -0,0 +1,174 @@
+export class ApiImportRepository {
+    /**
+     * Analyse le nom d'un fichier et trouve les mangas correspondants
+     * @param {string} filename - Nom du fichier à analyser
+     * @returns {Promise<Object>} - Résultat de l'analyse avec les correspondances
+     */
+    async analyzeFilename(filename) {
+        try {
+            console.log('Analyzing filename:', filename);
+            const response = await fetch(`/api/manga-matches?filename=${encodeURIComponent(filename)}`);
+
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.error('Analyze filename failed:', response.status, errorText);
+                throw new Error(`Failed to analyze filename: ${response.status}`);
+            }
+
+            const result = await response.json();
+            console.log('Analyze result:', result);
+
+            // Extract chapter and volume numbers from the first match if available
+            const firstMatch = result.matches && result.matches.length > 0 ? result.matches[0] : null;
+            const chapterNumber = firstMatch?.chapterNumber ?? null;
+            const volumeNumber = firstMatch?.volumeNumber ?? null;
+
+            return {
+                matches: result.matches || [],
+                chapterNumber,
+                volumeNumber,
+                possibleTitles: result.possibleTitles || []
+            };
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Récupère les détails d'un manga par son slug
+     * @param {string} slug - Slug du manga
+     * @returns {Promise<Object>} - Détails du manga avec chapitres et volumes
+     */
+    async getMangaDetails(slug) {
+        try {
+            console.log('Fetching manga details for:', slug);
+            const response = await fetch(`/api/mangas/${slug}`);
+
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.error('Get manga details failed:', response.status, errorText);
+                throw new Error(`Failed to get manga details: ${response.status}`);
+            }
+
+            const result = await response.json();
+            return result;
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Upload et import d'un fichier avec les informations du manga
+     * @param {File} file - Fichier à uploader
+     * @param {string} mangaId - ID du manga
+     * @param {number|null} chapterNumber - Numéro du chapitre (optionnel)
+     * @param {number|null} volumeNumber - Numéro du volume (optionnel)
+     * @returns {Promise<Object>} - Résultat de l'import
+     */
+    async importFile(file, mangaId, chapterNumber = null, volumeNumber = null) {
+        try {
+            // Déterminer s'il s'agit d'un import de chapitre ou volume
+            if (chapterNumber !== null && chapterNumber !== undefined) {
+                return await this.importChapter(file, mangaId, chapterNumber);
+            } else if (volumeNumber !== null && volumeNumber !== undefined) {
+                return await this.importVolume(file, mangaId, volumeNumber);
+            } else {
+                throw new Error('Either chapterNumber or volumeNumber must be provided');
+            }
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Import d'un chapitre
+     * @param {File} file - Fichier CBZ à uploader
+     * @param {string} mangaId - ID du manga
+     * @param {number} chapterNumber - Numéro du chapitre
+     * @returns {Promise<Object>} - Résultat de l'import
+     */
+    async importChapter(file, mangaId, chapterNumber) {
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('mangaId', mangaId);
+            formData.append('chapterNumber', chapterNumber.toString());
+
+            console.log('Importing chapter:', chapterNumber, 'for manga:', mangaId);
+            const response = await fetch('/api/chapters/import', {
+                method: 'POST',
+                body: formData
+            });
+
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.error('Import failed:', response.status, errorText);
+
+                // Parse the error response if it's JSON
+                let errorMessage = `Failed to import chapter: ${response.status}`;
+                try {
+                    const errorJson = JSON.parse(errorText);
+                    errorMessage = errorJson.error || errorJson.details || errorMessage;
+                } catch (e) {
+                    // Not JSON, use the status message
+                }
+                throw new Error(errorMessage);
+            }
+
+            const result = await response.json();
+            console.log('Import result:', result);
+            return result;
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Import d'un volume (TODO: À implémenter)
+     * @param {File} file - Fichier CBZ à uploader
+     * @param {string} mangaId - ID du manga
+     * @param {number} volumeNumber - Numéro du volume
+     * @returns {Promise<Object>} - Résultat de l'import
+     */
+    async importVolume(file, mangaId, volumeNumber) {
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('mangaId', mangaId);
+            formData.append('volumeNumber', volumeNumber.toString());
+
+            console.log('Importing volume:', volumeNumber, 'for manga:', mangaId);
+            const response = await fetch('/api/volumes/import', {
+                method: 'POST',
+                body: formData
+            });
+
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.error('Import failed:', response.status, errorText);
+
+                // Parse the error response if it's JSON
+                let errorMessage = `Failed to import volume: ${response.status}`;
+                try {
+                    const errorJson = JSON.parse(errorText);
+                    errorMessage = errorJson.error || errorJson.details || errorMessage;
+                } catch (e) {
+                    // Not JSON, use the status message
+                }
+                throw new Error(errorMessage);
+            }
+
+            const result = await response.json();
+            console.log('Import result:', result);
+            return result;
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+}

assets/vue/app/domain/import/presentation/components/FileImportCard.vue

@@ -0,0 +1,150 @@
+<template>
+    <div class="py-3">
+
+        <!-- Row principal : icône, nom, statut, actions -->
+        <div class="flex items-center gap-3">
+            <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 flex items-center justify-center shrink-0">
+                <DocumentIcon class="w-4 h-4 text-gray-500 dark:text-gray-400" />
+            </div>
+
+            <div class="flex-1 min-w-0">
+                <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{{ file.filename }}</p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                    {{ file.getFormattedSize() }} · {{ file.getFileExtension().toUpperCase() }}
+                    <span v-if="file.isAnalyzed() && file.getExtractedChapterNumber()" class="ml-2 text-green-600 dark:text-green-400">
+                        Ch. {{ file.getExtractedChapterNumber() }}
+                    </span>
+                    <span v-if="file.isAnalyzed() && file.getExtractedVolumeNumber()" class="ml-2 text-green-600 dark:text-green-400">
+                        Vol. {{ file.getExtractedVolumeNumber() }}
+                    </span>
+                </p>
+            </div>
+
+            <div class="flex items-center gap-2 shrink-0">
+                <StatusBadge :status="file.status" :is-analyzing="isAnalyzing" :is-importing="isImporting" />
+
+                <button
+                    v-if="file.isReadyForImport()"
+                    @click="$emit('import-file')"
+                    :disabled="isImporting"
+                    class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white text-xs font-medium transition-colors"
+                >
+                    <ArrowUpTrayIcon class="w-3.5 h-3.5" />
+                    Importer
+                </button>
+
+                <button
+                    v-if="file.hasError()"
+                    @click="$emit('retry-file')"
+                    class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs font-medium transition-colors"
+                >
+                    Réessayer
+                </button>
+
+                <button
+                    @click="$emit('remove-file')"
+                    class="p-1.5 text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
+                    title="Supprimer"
+                >
+                    <XMarkIcon class="w-4 h-4" />
+                </button>
+            </div>
+        </div>
+
+        <!-- Message d'erreur -->
+        <div v-if="file.hasError()" class="mt-2 flex items-start gap-2 text-xs text-red-700 dark:text-red-400 bg-red-50 dark:bg-red-900/20 px-3 py-2">
+            <ExclamationCircleIcon class="w-4 h-4 shrink-0 mt-0.5" />
+            {{ file.errorMessage }}
+        </div>
+
+        <!-- Aucun manga trouvé -->
+        <div v-if="file.isAnalyzed() && !file.hasMatches()" class="mt-2 flex items-start gap-2 text-xs text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 px-3 py-2">
+            <ExclamationTriangleIcon class="w-4 h-4 shrink-0 mt-0.5" />
+            Aucun manga correspondant trouvé. Vérifiez le nom du fichier.
+        </div>
+
+        <!-- Sélection du manga -->
+        <div v-if="file.isAnalyzed() && file.hasMatches()" class="mt-3 space-y-3">
+            <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+                {{ file.getMatches().length }} correspondance(s)
+            </p>
+
+            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2">
+                <MangaMatchCard
+                    v-for="match in sortedMatches"
+                    :key="match.id"
+                    :match="match"
+                    :is-selected="file.selectedManga?.id === match.id"
+                    @select-match="handleMangaSelection"
+                />
+            </div>
+        </div>
+
+        <!-- Numéros de chapitre / volume -->
+        <div v-if="file.selectedManga" class="mt-3 grid grid-cols-2 gap-3">
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Chapitre</label>
+                <input
+                    type="number"
+                    step="0.5"
+                    :value="file.selectedChapterNumber ?? ''"
+                    @input="handleChapterNumberInput"
+                    :disabled="file.selectedVolumeNumber !== null"
+                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 disabled:bg-gray-100 dark:disabled:bg-gray-600 disabled:text-gray-400"
+                    placeholder="Ex: 1, 1.5..."
+                />
+            </div>
+            <div>
+                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Volume</label>
+                <input
+                    type="number"
+                    step="0.5"
+                    :value="file.selectedVolumeNumber ?? ''"
+                    @input="handleVolumeNumberInput"
+                    :disabled="file.selectedChapterNumber !== null"
+                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 disabled:bg-gray-100 dark:disabled:bg-gray-600 disabled:text-gray-400"
+                    placeholder="Ex: 1, 1.5..."
+                />
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup>
+import { ArrowUpTrayIcon, DocumentIcon, ExclamationCircleIcon, ExclamationTriangleIcon, XMarkIcon } from '@heroicons/vue/24/outline';
+import { computed } from 'vue';
+import MangaMatchCard from './MangaMatchCard.vue';
+import StatusBadge from './StatusBadge.vue';
+
+const props = defineProps({
+    file: { type: Object, required: true },
+    isAnalyzing: { type: Boolean, default: false },
+    isImporting: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+    'manga-selected',
+    'chapter-number-selected',
+    'volume-number-selected',
+    'import-file',
+    'retry-file',
+    'remove-file',
+]);
+
+const sortedMatches = computed(() =>
+    [...props.file.getMatches()].sort((a, b) => b.matchScore - a.matchScore)
+);
+
+const handleMangaSelection = (manga) => emit('manga-selected', manga);
+
+const handleChapterNumberInput = (event) => {
+    const value = event.target.value;
+    emit('chapter-number-selected', value ? parseFloat(value) : null);
+};
+
+const handleVolumeNumberInput = (event) => {
+    const value = event.target.value;
+    emit('volume-number-selected', value ? parseFloat(value) : null);
+};
+</script>

assets/vue/app/domain/import/presentation/components/ImportResults.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <!-- En-tête -->
+    <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <div class="flex items-center justify-center h-9 w-9 bg-green-100 dark:bg-green-900/40">
+            <CheckCircleIcon class="h-5 w-5 text-green-600" />
+          </div>
+          <div>
+            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">Import terminé</h3>
+            <p class="text-xs text-gray-500 dark:text-gray-400">Voici le résumé de votre session d'import</p>
+          </div>
+        </div>
+        <div class="flex items-center gap-6 text-center">
+          <div>
+            <div class="text-xl font-bold text-green-600">{{ importedCount }}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">Importés</div>
+          </div>
+          <div>
+            <div class="text-xl font-bold text-red-600">{{ errorCount }}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">Erreurs</div>
+          </div>
+          <div>
+            <div class="text-xl font-bold text-gray-600 dark:text-gray-300">{{ totalCount }}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">Total</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Fichiers importés -->
+    <section v-if="importedFiles.length > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+      <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
+        Importés ({{ importedFiles.length }})
+      </h2>
+      <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+        <div
+          v-for="file in importedFiles"
+          :key="file.id"
+          class="flex items-center gap-2 py-2.5 text-sm"
+        >
+          <CheckCircleIcon class="flex-shrink-0 h-4 w-4 text-green-400" />
+          <span class="text-gray-900 dark:text-gray-100 truncate">{{ file.filename }}</span>
+          <span v-if="file.selectedManga" class="text-gray-400 dark:text-gray-500 shrink-0">→ {{ file.selectedManga.title }}</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- Fichiers en erreur -->
+    <section v-if="errorFiles.length > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+      <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
+        Erreurs ({{ errorFiles.length }})
+      </h2>
+      <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+        <div
+          v-for="file in errorFiles"
+          :key="file.id"
+          class="flex items-start gap-2 py-2.5 text-sm"
+        >
+          <XCircleIcon class="flex-shrink-0 h-4 w-4 text-red-400 mt-0.5" />
+          <div>
+            <div class="text-gray-900 dark:text-gray-100">{{ file.filename }}</div>
+            <div class="text-red-600 dark:text-red-400 text-xs mt-0.5">{{ file.errorMessage }}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Actions -->
+    <section class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+      <div class="flex gap-3">
+        <button
+          @click="startNewImport"
+          class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 text-sm font-medium"
+        >
+          Nouvel import
+        </button>
+        <button
+          @click="goToLibrary"
+          class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 text-sm font-medium"
+        >
+          Aller à la bibliothèque
+        </button>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/24/solid';
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useNewImportStore } from '../../application/store/newImportStore';
+
+const router = useRouter();
+const store = useNewImportStore();
+
+const importedFiles = computed(() => store.importedFiles);
+const errorFiles = computed(() => store.errorFiles);
+const importedCount = computed(() => store.importedCount);
+const errorCount = computed(() => store.errorCount);
+const totalCount = computed(() => store.totalFiles);
+
+const startNewImport = () => {
+  store.clearFiles();
+};
+
+const goToLibrary = () => {
+  router.push({ name: 'manga-collection' });
+};
+</script>

assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue

@@ -0,0 +1,47 @@
+<template>
+    <div
+        class="border p-2.5 cursor-pointer transition-all duration-150"
+        :class="isSelected
+            ? 'border-green-500 bg-green-50 dark:bg-green-900/20'
+            : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800'"
+        @click="$emit('select-match', match)"
+    >
+        <div class="flex gap-2.5">
+            <!-- Couverture -->
+            <img
+                v-if="match.thumbnailUrl"
+                :src="match.thumbnailUrl"
+                :alt="match.title"
+                class="w-12 h-16 object-cover shrink-0"
+            />
+            <div
+                v-else
+                class="w-12 h-16 bg-gray-100 dark:bg-gray-700 shrink-0 flex items-center justify-center"
+            >
+                <PhotoIcon class="w-6 h-6 text-gray-400" />
+            </div>
+
+            <!-- Infos -->
+            <div class="flex-1 min-w-0 flex flex-col justify-between py-0.5">
+                <p class="text-xs font-medium text-gray-900 dark:text-gray-100 line-clamp-3 leading-snug" :title="match.title">
+                    {{ match.title }}
+                </p>
+                <div class="flex items-center justify-between mt-1">
+                    <span class="text-xs text-gray-400 dark:text-gray-500">{{ match.matchScore }}%</span>
+                    <CheckCircleIcon v-if="isSelected" class="w-4 h-4 text-green-500 shrink-0" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { CheckCircleIcon, PhotoIcon } from '@heroicons/vue/24/outline';
+
+const props = defineProps({
+    match: { type: Object, required: true },
+    isSelected: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['select-match']);
+</script>

assets/vue/app/domain/import/presentation/components/MangaOption.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="manga-option">
+    <div class="flex items-center space-x-3">
+      <div v-if="manga.coverUrl" class="flex-shrink-0">
+        <img
+          :src="manga.coverUrl"
+          :alt="manga.title"
+          class="w-12 h-16 object-cover rounded"
+        />
+      </div>
+      <div v-else class="flex-shrink-0 w-12 h-16 bg-gray-200 rounded flex items-center justify-center">
+        <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+      </div>
+
+      <div class="flex-1 min-w-0">
+        <h4 class="text-sm font-medium text-gray-900 truncate">
+          {{ manga.title }}
+        </h4>
+        <div class="text-xs text-gray-500 space-y-1">
+          <p v-if="manga.author" class="truncate">
+            {{ manga.author }}
+          </p>
+          <p v-if="manga.publicationYear" class="truncate">
+            {{ manga.publicationYear }}
+          </p>
+          <div v-if="manga.genres && manga.genres.length > 0" class="flex flex-wrap gap-1">
+            <span
+              v-for="genre in manga.genres.slice(0, 3)"
+              :key="genre"
+              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800"
+            >
+              {{ genre }}
+            </span>
+            <span v-if="manga.genres.length > 3" class="text-xs text-gray-400">
+              +{{ manga.genres.length - 3 }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  manga: {
+    type: Object,
+    required: true
+  }
+});
+</script>

assets/vue/app/domain/import/presentation/components/StatusBadge.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="inline-flex items-center">
+    <!-- Loading Spinner for analyzing/importing -->
+    <svg v-if="isAnalyzing || isImporting" class="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+
+    <!-- Status Badge -->
+    <span :class="badgeClasses">
+      {{ badgeText }}
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  status: {
+    type: String,
+    required: true
+  },
+  isAnalyzing: {
+    type: Boolean,
+    default: false
+  },
+  isImporting: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const badgeText = computed(() => {
+  if (props.isImporting) return 'Import en cours...';
+  if (props.isAnalyzing) return 'Analyse en cours...';
+
+  switch (props.status) {
+    case 'pending': return 'En attente';
+    case 'analyzed': return 'Analysé';
+    case 'importing': return 'Import en cours';
+    case 'imported': return 'Importé';
+    case 'error': return 'Erreur';
+    default: return 'Inconnu';
+  }
+});
+
+const badgeClasses = computed(() => {
+  const baseClasses = 'inline-flex items-center px-2.5 py-0.5 text-xs font-medium';
+
+  if (props.isImporting || props.isAnalyzing) {
+    return `${baseClasses} bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300`;
+  }
+
+  switch (props.status) {
+    case 'pending':
+      return `${baseClasses} bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300`;
+    case 'analyzed':
+      return `${baseClasses} bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-300`;
+    case 'importing':
+      return `${baseClasses} bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300`;
+    case 'imported':
+      return `${baseClasses} bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300`;
+    case 'error':
+      return `${baseClasses} bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-300`;
+    default:
+      return `${baseClasses} bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300`;
+  }
+});
+</script>

assets/vue/app/domain/import/presentation/pages/NewImportPage.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
+
+        <div class="overflow-y-auto flex-1">
+            <div class="px-6 py-8">
+
+                <!-- Zone de dépôt -->
+                <section v-if="!store.hasFiles" class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">Fichiers</h2>
+                    <FileUpload
+                        label="Importer des fichiers CBZ/CBR"
+                        accept=".cbz,.cbr"
+                        :multiple="true"
+                        description="Formats CBZ ou CBR uniquement"
+                        @files-selected="store.addFiles($event)"
+                    />
+                </section>
+
+                <!-- Fichiers en cours -->
+                <template v-if="store.hasFiles && !store.allFilesProcessed">
+                    <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                        <div class="flex items-center justify-between mb-3">
+                            <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">
+                                {{ store.totalFiles }} fichier(s)
+                            </h2>
+                            <span class="text-xs text-gray-500 dark:text-gray-400">
+                                {{ store.importedCount }}/{{ store.totalFiles }}
+                                <span v-if="store.errorCount > 0" class="text-red-500 ml-1">· {{ store.errorCount }} erreur(s)</span>
+                            </span>
+                        </div>
+                        <div class="bg-gray-200 dark:bg-gray-700 h-1.5 mb-4">
+                            <div
+                                class="bg-green-600 h-1.5 transition-all duration-300"
+                                :style="{ width: store.progressPercentage + '%' }"
+                            />
+                        </div>
+                        <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+                            <FileImportCard
+                                v-for="file in store.files"
+                                :key="file.id"
+                                :file="file"
+                                :is-analyzing="store.analyzingFiles.has(file.id)"
+                                :is-importing="store.importingFiles.has(file.id)"
+                                @manga-selected="(manga) => store.setFileManga(file.id, manga)"
+                                @chapter-number-selected="(n) => store.setFileChapterNumber(file.id, n)"
+                                @volume-number-selected="(n) => store.setFileVolumeNumber(file.id, n)"
+                                @import-file="() => importSingleFile(file.id)"
+                                @retry-file="() => retryFile(file.id)"
+                                @remove-file="() => store.removeFile(file.id)"
+                            />
+                        </div>
+                    </section>
+                </template>
+
+                <!-- Résultats -->
+                <ImportResults v-if="store.allFilesProcessed" />
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ArrowUpTrayIcon, SparklesIcon, TrashIcon } from '@heroicons/vue/24/outline';
+import { computed, onUnmounted } from 'vue';
+import FileUpload from '../../../../shared/components/ui/FileUpload.vue';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+import { useNewImportStore } from '../../application/store/newImportStore';
+import FileImportCard from '../components/FileImportCard.vue';
+import ImportResults from '../components/ImportResults.vue';
+
+const store = useNewImportStore();
+
+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'label', text: 'Import de bibliothèque', class: 'text-sm font-medium' },
+    ],
+    rightSection: [
+        ...(store.analyzedFiles.length > 0 ? [{
+            type: 'button',
+            icon: SparklesIcon,
+            label: 'Sélection auto',
+            onClick: () => store.autoSelectBestMatches(),
+        }] : []),
+        ...(store.hasReadyFiles ? [{
+            type: 'button',
+            icon: ArrowUpTrayIcon,
+            label: `Importer (${store.readyCount})`,
+            onClick: importAllFiles,
+            disabled: store.isLoading,
+        }] : []),
+        {
+            type: 'button',
+            icon: TrashIcon,
+            label: 'Effacer',
+            onClick: () => store.clearFiles(),
+        },
+    ],
+}));
+
+const importAllFiles = async () => {
+    try {
+        await store.importAllReadyFiles();
+    } catch (error) {
+        console.error('Error importing files:', error);
+    }
+};
+
+const importSingleFile = async (fileId) => {
+    try {
+        await store.importFile(fileId);
+    } catch (error) {
+        console.error('Error importing file:', error);
+    }
+};
+
+const retryFile = async (fileId) => {
+    try {
+        await store.retryFile(fileId);
+    } catch (error) {
+        console.error('Error retrying file:', error);
+    }
+};
+
+onUnmounted(() => {
+    store.resetGlobalState();
+});
+</script>

assets/vue/app/domain/manga/application/queries/searchMangas.js

@@ -0,0 +1,18 @@
+export class SearchMangas {
+  constructor(mangaRepository) {
+    this.mangaRepository = mangaRepository;
+  }
+
+  async execute(query) {
+    if (!query || query.trim().length === 0) {
+      return [];
+    }
+
+    try {
+      return await this.mangaRepository.searchMangas(query);
+    } catch (error) {
+      console.error('Search error:', error);
+      throw error;
+    }
+  }
+}

assets/vue/app/domain/manga/application/store/mangaStore.js

@@ -0,0 +1,312 @@
+import { defineStore } from 'pinia';
+import { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';
+
+const mangaRepository = new ApiMangaRepository();
+
+// Helper pour comparer la collection (peut être supprimé si non utilisé ailleurs)
+const deepCompare = (obj1, obj2) => {
+    try {
+        if (obj1 == null && obj2 == null) return true;
+        if (obj1 == null || obj2 == null) return false;
+        return JSON.stringify(obj1) === JSON.stringify(obj2);
+    } catch (e) {
+        console.error("Erreur lors de la comparaison d'objets:", e);
+        return false;
+    }
+};
+
+export const useMangaStore = defineStore('manga', {
+    state: () => ({
+        // --- Collection State ---
+        collection: null,
+        loadingCollection: false,
+        errorCollection: null,
+        isBackgroundLoadingCollection: false,
+
+        // --- Selected Manga State ---
+        // Gardé pour savoir quel manga est sélectionné dans l'UI,
+        // mais les données détaillées ne sont plus stockées ici.
+        currentMangaId: null,
+
+        // --- Manga Chapters State ---
+        mangaChapters: {},
+        loadingChapters: false,
+        chaptersError: null,
+
+        // --- Search State ---
+        searchResults: [],
+        loadingSearch: false,
+        searchError: null,
+
+        // --- Add Manga State ---
+        addingManga: false,
+        addMangaError: null,
+
+        // --- Discover State ---
+        discoverResults: [],
+        loadingDiscover: false,
+        discoverError: null
+    }),
+
+    getters: {
+        // Plus de getters spécifiques aux détails/chapitres ici
+    },
+
+    actions: {
+        // --- Collection Actions ---
+        async loadCollection() {
+            if (this.loadingCollection) return;
+            this.loadingCollection = true;
+            this.errorCollection = null;
+            try {
+                const newCollection = await mangaRepository.getCollection();
+                // On garde la comparaison pour éviter màj inutile de la collection
+                if (!deepCompare(this.collection, newCollection)) {
+                    this.collection = newCollection;
+                }
+            } catch (err) {
+                this.errorCollection = err.message;
+            } finally {
+                this.loadingCollection = false;
+            }
+        },
+
+        async refreshCollectionInBackground() {
+            if (this.isBackgroundLoadingCollection) return;
+            this.isBackgroundLoadingCollection = true;
+            try {
+                const newCollection = await mangaRepository.getCollection();
+                if (!deepCompare(this.collection, newCollection)) {
+                    this.collection = newCollection;
+                }
+            } catch (err) {
+                console.error('Failed to refresh collection:', err);
+            } finally {
+                this.isBackgroundLoadingCollection = false;
+            }
+        },
+
+        // --- Selected Manga Actions ---
+        setCurrentMangaId(mangaId) {
+            // Met simplement à jour l'ID sélectionné
+            this.currentMangaId = mangaId;
+        },
+
+        clearCurrentMangaFocus() {
+            this.currentMangaId = null;
+        },
+
+        // --- Chapters Actions ---
+        async loadChapters(mangaId) {
+            if (this.loadingChapters) return;
+            this.loadingChapters = true;
+            this.chaptersError = null;
+
+            try {
+                const chaptersData = await mangaRepository.getChapters(mangaId);
+                this.mangaChapters[mangaId] = chaptersData;
+            } catch (err) {
+                this.chaptersError = err.message;
+            } finally {
+                this.loadingChapters = false;
+            }
+        },
+
+        updateChapterAvailability(chapterId, isAvailable = true) {
+            console.log(`Mise à jour du chapitre ${chapterId}, disponible: ${isAvailable}`);
+
+            // Pour chaque manga dans notre store
+            Object.keys(this.mangaChapters).forEach(mangaId => {
+                const chaptersObj = this.mangaChapters[mangaId];
+                if (!chaptersObj || !chaptersObj.items) return;
+
+                const chapters = chaptersObj.items;
+
+                // Chercher le chapitre correspondant
+                const chapterIndex = chapters.findIndex(chapter => chapter.id === chapterId);
+
+                // Si on trouve le chapitre, mettre à jour son état
+                if (chapterIndex !== -1) {
+                    console.log(`Chapitre trouvé dans le manga ${mangaId}, index: ${chapterIndex}`);
+
+                    // Important: créer une nouvelle référence pour que Vue détecte le changement
+                    const updatedChapter = {
+                        ...chapters[chapterIndex],
+                        isAvailable: isAvailable
+                    };
+
+                    // Créer un nouveau tableau pour garantir la réactivité
+                    const updatedChapters = [...chapters];
+                    updatedChapters[chapterIndex] = updatedChapter;
+
+                    // Mise à jour reactive du store
+                    this.mangaChapters[mangaId] = {
+                        ...chaptersObj,
+                        items: updatedChapters
+                    };
+
+                    console.log('Chapitre mis à jour avec succès');
+                }
+            });
+        },
+
+        // --- Search Actions ---
+        async searchMangaDex(query) {
+            if (this.loadingSearch) return;
+
+            this.loadingSearch = true;
+            this.searchError = null;
+            this.searchResults = [];
+
+            try {
+                const data = await mangaRepository.searchMangaDex(query);
+                this.searchResults = data.items || [];
+            } catch (error) {
+                this.searchError = error.message;
+                throw error;
+            } finally {
+                this.loadingSearch = false;
+            }
+        },
+
+        clearSearchResults() {
+            this.searchResults = [];
+            this.searchError = null;
+            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;
+
+            this.addingManga = true;
+            this.addMangaError = null;
+
+            try {
+                await mangaRepository.createFromMangaDex(externalId);
+                // Rafraîchir la collection après l'ajout
+                await this.loadCollection();
+            } catch (error) {
+                this.addMangaError = error.message;
+                throw error;
+            } finally {
+                this.addingManga = false;
+            }
+        },
+
+        async fetchMangaChapters(mangaId) {
+            if (this.loadingChapters) return;
+            this.loadingChapters = true;
+            this.chaptersError = null;
+
+            try {
+                // Déclenche la récupération initiale des chapitres depuis la source externe
+                await mangaRepository.fetchMangaChapters(mangaId);
+                console.log('Récupération initiale des chapitres déclenchée avec succès');
+
+                // Note: Les nouveaux chapitres seront disponibles après traitement asynchrone
+                // Le MercureListener se chargera de mettre à jour l'interface
+            } catch (err) {
+                this.chaptersError = err.message;
+                console.error('Erreur lors de la récupération des chapitres:', err);
+                throw err;
+            } finally {
+                this.loadingChapters = false;
+            }
+        },
+
+        async refreshMangaChapters(mangaId) {
+            if (this.loadingChapters) return;
+            this.loadingChapters = true;
+            this.chaptersError = null;
+
+            try {
+                // Déclenche la synchronisation incrémentale avec scraping automatique
+                await mangaRepository.refreshMangaChapters(mangaId);
+                console.log('Synchronisation incrémentale déclenchée avec succès');
+
+                // Note: Les chapitres mis à jour seront disponibles après traitement asynchrone
+                // Le MercureListener se chargera de mettre à jour l'interface
+            } catch (err) {
+                this.chaptersError = err.message;
+                console.error('Erreur lors de la synchronisation des chapitres:', err);
+                throw err;
+            } finally {
+                this.loadingChapters = false;
+            }
+        },
+
+        // --- Scrape Chapter Action ---
+        async searchChapter(chapterId) {
+            try {
+                await mangaRepository.searchChapter(chapterId);
+            } catch (error) {
+                console.error('Erreur lors de la recherche du chapitre:', error);
+                throw error;
+            }
+        },
+
+        // --- Delete Chapter Action ---
+        async deleteChapter(chapterId) {
+            try {
+                await mangaRepository.deleteChapter(chapterId);
+                // Mettre à jour l'état du chapitre pour refléter qu'il n'est plus disponible
+                this.updateChapterAvailability(chapterId, false);
+            } catch (error) {
+                console.error('Erreur lors de la suppression du chapitre:', error);
+                throw error;
+            }
+        },
+
+        // --- Download Chapter Action ---
+        async downloadChapter(chapterId) {
+            try {
+                await mangaRepository.downloadChapter(chapterId);
+            } catch (error) {
+                console.error('Erreur lors du téléchargement du chapitre:', error);
+                throw error;
+            }
+        },
+
+                // --- Hide Chapter Action ---
+        async hideChapter(chapterId, mangaId) {
+            try {
+                await mangaRepository.hideChapter(chapterId);
+                // Recharger la liste des chapitres depuis l'API
+                await this.loadChapters(mangaId);
+            } catch (error) {
+                console.error('Erreur lors du masquage du chapitre:', error);
+                throw error;
+            }
+        },
+
+        // --- Download Volume Action ---
+        async downloadVolume(mangaId, volumeNumber) {
+            try {
+                await mangaRepository.downloadVolume(mangaId, volumeNumber);
+            } catch (error) {
+                console.error('Erreur lors du téléchargement du volume:', error);
+                throw error;
+            }
+        }
+    }
+});

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

@@ -0,0 +1,50 @@
+export class Manga {
+  constructor({
+    id,
+    slug,
+    title,
+    description = null,
+    authors = [],
+    imageUrl = null,
+    thumbnailUrl = null,
+    publicationYear = null,
+    status = null,
+    rating = null,
+    genres = [],
+    createdAt = new Date().toISOString(),
+    monitored = false,
+    chaptersTotal = 0,
+    chaptersScraped = 0,
+  }) {
+    this.id = id;
+    this.slug = slug;
+    this.title = title;
+    this.description = description;
+    this.authors = authors;
+    this.imageUrl = imageUrl;
+    this.thumbnailUrl = thumbnailUrl;
+    this.publicationYear = publicationYear;
+    this.status = status;
+    this.rating = rating;
+    this.genres = genres;
+    this.createdAt = createdAt;
+    this.monitored = monitored;
+    this.chaptersTotal = chaptersTotal;
+    this.chaptersScraped = chaptersScraped;
+  }
+
+  static create(data) {
+    return new Manga(data);
+  }
+}
+
+export class MangaCollection {
+  constructor(items, total, page, limit, hasNextPage, hasPreviousPage) {
+    this.items = items.map(item => Manga.create(item));
+    this.total = total;
+    this.page = page;
+    this.limit = limit;
+    this.hasNextPage = hasNextPage;
+    this.hasPreviousPage = hasPreviousPage;
+  }
+} 

assets/vue/app/domain/manga/infrastructure/api/apiMangaRepository.js

@@ -0,0 +1,411 @@
+import { MangaCollection } from '../../domain/entities/manga';
+
+export class ApiMangaRepository {
+    async getCollection() {
+        try {
+            const response = await fetch('/api/mangas');
+            if (!response.ok) {
+                throw new Error('Failed to fetch manga collection');
+            }
+            const data = await response.json();
+            return new MangaCollection(
+                data.items,
+                data.total,
+                data.page,
+                data.limit,
+                data.hasNextPage,
+                data.hasPreviousPage
+            );
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async getMangaById(id) {
+        try {
+            const response = await fetch(`/api/mangas/by-id/${id}`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch manga details');
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async getChapters(mangaId) {
+        try {
+            let allChapters = [];
+            let page = 1;
+            let hasMore = true;
+
+            while (hasMore) {
+                const response = await fetch(`/api/mangas/${mangaId}/chapters?limit=500&page=${page}`);
+                if (!response.ok) {
+                    throw new Error('Failed to fetch manga chapters');
+                }
+                const data = await response.json();
+                allChapters = allChapters.concat(data.items);
+                hasMore = data.hasNextPage;
+                page++;
+            }
+
+            // Filtrer pour ne garder que les chapitres visibles
+            const visibleChapters = allChapters.filter(chapter => chapter.isVisible === true);
+
+            return {
+                items: visibleChapters,
+                total: visibleChapters.length
+            };
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async getMangaBySlug(slug) {
+        try {
+            const response = await fetch(`/api/mangas/by-slug/${slug}`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch manga details');
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async searchMangas(query) {
+        try {
+            const response = await fetch(`/api/manga-search?q=${encodeURIComponent(query)}`);
+            if (!response.ok) {
+                throw new Error('Failed to search mangas');
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async searchMangaDex(query) {
+        try {
+            const response = await fetch(`/api/mangadex-search?title=${encodeURIComponent(query)}`);
+            if (!response.ok) {
+                throw new Error('Failed to search MangaDex');
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    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', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ externalId })
+            });
+            if (!response.ok) {
+                throw new Error('Failed to create manga from MangaDex');
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async fetchMangaChapters(mangaId) {
+        try {
+            const response = await fetch(`/api/manga/chapters/fetch`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ mangaId })
+            });
+            if (!response.ok) {
+                throw new Error('Failed to fetch manga chapters');
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async refreshMangaChapters(mangaId) {
+        try {
+            const response = await fetch(`/api/manga/${mangaId}/chapters/refresh`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({})
+            });
+            if (!response.ok) {
+                throw new Error('Failed to refresh manga chapters');
+            }
+            // L'endpoint retourne 202 (Accepted), pas de contenu JSON à parser
+            return true;
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async searchChapter(chapterId) {
+        try {
+            const response = await fetch('/api/scraping/chapters', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ chapterId })
+            });
+            if (!response.ok) {
+                throw new Error('Échec de la recherche du chapitre');
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async getPreferredSources(mangaId) {
+        try {
+            const response = await fetch(`/api/mangas/${mangaId}/preferred-sources`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch preferred sources');
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async setPreferredSources(mangaId, sourceIds) {
+        try {
+            const response = await fetch(`/api/mangas/${mangaId}/preferred-sources`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ sourceIds })
+            });
+            if (!response.ok) {
+                throw new Error('Failed to set preferred sources');
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async editManga(mangaId, updateData) {
+        try {
+            const response = await fetch(`/api/mangas/${mangaId}/edit`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(updateData)
+            });
+            if (!response.ok) {
+                throw new Error('Failed to edit manga');
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async deleteChapter(chapterId) {
+        try {
+            const response = await fetch(`/api/manga/chapters/${chapterId}/cbz`, {
+                method: 'DELETE'
+            });
+            if (!response.ok) {
+                throw new Error('Failed to delete chapter');
+            }
+            return true;
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+                async downloadChapter(chapterId) {
+        try {
+            const response = await fetch(`/api/manga/chapters/${chapterId}/download`);
+            if (!response.ok) {
+                throw new Error('Failed to download chapter');
+            }
+
+            // Récupérer le nom du fichier depuis les headers
+            const contentDisposition = response.headers.get('Content-Disposition');
+            let filename = `chapter-${chapterId}.cbz`;
+
+            if (contentDisposition) {
+                const filenameMatch = contentDisposition.match(/filename="?(.+)"?/);
+                if (filenameMatch) {
+                    filename = filenameMatch[1];
+                }
+            }
+
+            // Créer un blob à partir de la réponse
+            const blob = await response.blob();
+
+            // Créer un lien de téléchargement temporaire
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = filename;
+            document.body.appendChild(link);
+            link.click();
+
+            // Nettoyer
+            document.body.removeChild(link);
+            window.URL.revokeObjectURL(url);
+
+            return true;
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async hideChapter(chapterId) {
+        try {
+            const response = await fetch(`/api/manga/chapters/${chapterId}`, {
+                method: 'DELETE'
+            });
+            if (!response.ok) {
+                throw new Error('Failed to hide chapter');
+            }
+            return true;
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async downloadVolume(mangaId, volumeNumber) {
+        try {
+            const response = await fetch(`/api/mangas/${mangaId}/volumes/${volumeNumber}/download`);
+            if (!response.ok) {
+                throw new Error('Failed to download volume');
+            }
+
+            // Récupérer le nom du fichier depuis les headers
+            const contentDisposition = response.headers.get('Content-Disposition');
+            let filename = `volume-${volumeNumber}.zip`;
+
+            if (contentDisposition) {
+                const filenameMatch = contentDisposition.match(/filename="?(.+)"?/);
+                if (filenameMatch) {
+                    filename = filenameMatch[1];
+                }
+            }
+
+            // Créer un blob à partir de la réponse
+            const blob = await response.blob();
+
+            // Créer un lien de téléchargement temporaire
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = filename;
+            document.body.appendChild(link);
+            link.click();
+
+            // Nettoyer
+            document.body.removeChild(link);
+            window.URL.revokeObjectURL(url);
+
+            return true;
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async toggleMonitoring(mangaId, enabled) {
+        try {
+            const response = await fetch(`/api/manga/${mangaId}/monitoring/toggle`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ enabled })
+            });
+
+            if (!response.ok) {
+                // Tenter de récupérer le message d'erreur détaillé de l'API
+                let errorMessage = 'Failed to toggle monitoring';
+                try {
+                    const errorData = await response.json();
+                    if (errorData.detail) {
+                        errorMessage = errorData.detail;
+                    } else if (errorData.message) {
+                        errorMessage = errorData.message;
+                    } else if (errorData.violations && errorData.violations.length > 0) {
+                        errorMessage = errorData.violations.map(v => v.message).join(', ');
+                    }
+                } catch (parseError) {
+                    console.warn('Could not parse error response:', parseError);
+                }
+                throw new Error(errorMessage);
+            }
+
+            // L'endpoint retourne un statut 204 (No Content), donc pas de données à retourner
+            return true;
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
+    async deleteManga(mangaId) {
+        try {
+            const response = await fetch(`/api/mangas/${mangaId}`, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to delete manga');
+            }
+
+            return true;
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+}

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

@@ -0,0 +1,906 @@
+<template>
+    <div v-if="isOpen" class="fixed inset-0 z-50 overflow-y-auto">
+        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <!-- Overlay avec effet de flou Material Design -->
+            <div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="handleClose"></div>
+
+            <!-- Modal avec style Material Design -->
+            <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-5xl sm:w-full border border-gray-100 dark:border-gray-700">
+                <!-- Header Material Design -->
+                <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100 dark:border-gray-700">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
+                                <FolderIcon class="h-5 w-5 text-green-600" />
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-medium text-gray-900 dark:text-gray-100 leading-6">
+                                    Gérer les chapitres
+                                </h3>
+                                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ manga?.title }}</p>
+                            </div>
+                        </div>
+                        <button
+                            @click="handleClose"
+                            class="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center transition-colors duration-200"
+                        >
+                            <XMarkIcon class="h-5 w-5 text-gray-600 dark:text-gray-300" />
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Content avec style Material Design -->
+                <div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-8">
+                    <div v-if="isLoading" class="flex justify-center items-center h-32">
+                        <div class="relative">
+                            <div class="w-8 h-8 border-4 border-green-200 rounded-full"></div>
+                            <div class="absolute top-0 left-0 w-8 h-8 border-4 border-green-600 rounded-full border-t-transparent animate-spin"></div>
+                        </div>
+                    </div>
+
+                    <div v-else-if="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded-xl mb-6 flex items-center space-x-2">
+                        <div class="w-5 h-5 bg-red-100 rounded-full flex items-center justify-center">
+                            <XMarkIcon class="h-3 w-3 text-red-600" />
+                        </div>
+                        <span>{{ error }}</span>
+                    </div>
+
+                    <div v-else class="space-y-6">
+                        <!-- Actions avec style Material Design -->
+                        <div class="flex items-center justify-between bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4">
+                            <div class="flex items-center space-x-3">
+                                <button
+                                    @click="showCreateVolumeModal = true"
+                                    class="bg-green-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-green-700 shadow-md hover:shadow-lg transition-all duration-200 flex items-center space-x-2"
+                                >
+                                    <PlusIcon class="h-4 w-4" />
+                                    <span>Créer un volume</span>
+                                </button>
+                                <button
+                                    @click="showUnassignedChapters = !showUnassignedChapters"
+                                    class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700 px-3 py-2 rounded-lg transition-colors duration-200"
+                                >
+                                    {{ showUnassignedChapters ? 'Masquer' : 'Afficher' }} les chapitres non assignés
+                                </button>
+                                <!-- Bouton de séparation automatique du volume fourre-tout -->
+                                <button
+                                    v-if="hasVolumeZero && canSplitVolumeZero"
+                                    @click="showSplitVolumeZeroModal = true"
+                                    class="bg-green-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-green-700 shadow-md hover:shadow-lg transition-all duration-200 flex items-center space-x-2"
+                                >
+                                    <ArrowPathIcon class="h-4 w-4" />
+                                    <span>Séparer le volume 00</span>
+                                </button>
+                                <!-- Actions de sélection multiple -->
+                                <div v-if="selectedChapters.length > 0" class="flex items-center space-x-3 bg-green-50 px-4 py-2 rounded-xl border border-green-200">
+                                    <span class="text-sm font-medium text-green-700">{{ selectedChapters.length }} chapitre(s) sélectionné(s)</span>
+                                    <button
+                                        @click="showMoveToVolumeModal = true"
+                                        class="bg-green-600 text-white px-3 py-1.5 rounded-lg text-xs font-medium hover:bg-green-700 shadow-sm transition-colors duration-200"
+                                    >
+                                        Déplacer vers un volume
+                                    </button>
+                                    <button
+                                        @click="clearSelection"
+                                        class="text-green-600 hover:text-green-800 text-xs font-medium hover:bg-green-100 px-2 py-1 rounded transition-colors duration-200"
+                                    >
+                                        Annuler
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-600">
+                                {{ totalChapters }} chapitres, {{ volumes.length }} volumes
+                            </div>
+                        </div>
+
+                        <!-- Arborescence avec style Material Design -->
+                        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden shadow-sm">
+                            <!-- Chapitres non assignés -->
+                            <div v-if="showUnassignedChapters && unassignedChapters.length > 0" class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700/50 dark:to-gray-700/30 border-b border-gray-200 dark:border-gray-600">
+                                <div class="px-6 py-4">
+                                    <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center space-x-2">
+                                        <DocumentIcon class="h-4 w-4 text-gray-500" />
+                                        <span>Chapitres non assignés ({{ unassignedChapters.length }})</span>
+                                    </h4>
+                                    <div class="space-y-2">
+                                        <div
+                                            v-for="chapter in unassignedChapters"
+                                            :key="chapter.id"
+                                            class="flex items-center space-x-3 p-3 hover:bg-white rounded-lg transition-colors duration-200 border border-transparent hover:border-gray-200"
+                                            :class="{ 'bg-green-50 border-green-200 shadow-sm': isChapterSelected(chapter) }"
+                                        >
+                                            <!-- Checkbox de sélection Material Design -->
+                                            <div class="relative">
+                                                <input
+                                                    type="checkbox"
+                                                    :checked="isChapterSelected(chapter)"
+                                                    @change="toggleChapterSelection(chapter)"
+                                                    class="h-5 w-5 text-green-600 border-gray-300 rounded focus:ring-green-500 focus:ring-2 transition-colors duration-200"
+                                                />
+                                            </div>
+                                            <DocumentIcon class="h-5 w-5 text-gray-400" />
+                                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300 w-12 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-center">{{ chapter.number }}</span>
+                                            <div class="flex-1">
+                                                <div v-if="!chapter.isEditing" class="flex items-center">
+                                                    <span
+                                                        class="text-sm text-gray-900 dark:text-gray-100 cursor-pointer hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200"
+                                                        @click="startEditingTitle(chapter)"
+                                                    >
+                                                        {{ chapter.title || 'Sans titre' }}
+                                                    </span>
+                                                    <button
+                                                        @click="startEditingTitle(chapter)"
+                                                        class="ml-2 text-gray-400 hover:text-gray-600 p-1 rounded-full hover:bg-gray-100 transition-colors duration-200"
+                                                    >
+                                                        <PencilIcon class="h-3 w-3" />
+                                                    </button>
+                                                </div>
+                                                <div v-else class="flex items-center space-x-2">
+                                                    <input
+                                                        v-model="chapter.editingTitle"
+                                                        type="text"
+                                                        class="flex-1 border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors duration-200"
+                                                        @keyup.enter="saveTitle(chapter)"
+                                                        @keyup.esc="cancelEditingTitle(chapter)"
+                                                        ref="titleInput"
+                                                    />
+                                                    <button
+                                                        @click="saveTitle(chapter)"
+                                                        class="text-green-600 hover:text-green-800 p-1 rounded-full hover:bg-green-100 transition-colors duration-200"
+                                                    >
+                                                        <CheckIcon class="h-4 w-4" />
+                                                    </button>
+                                                    <button
+                                                        @click="cancelEditingTitle(chapter)"
+                                                        class="text-red-600 hover:text-red-800 p-1 rounded-full hover:bg-red-100 transition-colors duration-200"
+                                                    >
+                                                        <XMarkIcon class="h-4 w-4" />
+                                                    </button>
+                                                </div>
+                                            </div>
+                                            <div class="flex items-center space-x-2">
+                                                <button
+                                                    @click="assignToVolume(chapter)"
+                                                    class="bg-green-600 text-white px-3 py-1.5 rounded-lg text-xs font-medium hover:bg-green-700 shadow-sm transition-colors duration-200"
+                                                >
+                                                    Assigner
+                                                </button>
+                                            </div>
+                                            <div v-if="chapter.isModified" class="w-3 h-3 bg-yellow-400 rounded-full shadow-sm"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Volumes avec style Material Design -->
+                            <div class="divide-y divide-gray-100 dark:divide-gray-700">
+                                <div
+                                    v-for="volume in volumes"
+                                    :key="volume.number"
+                                    class="bg-white dark:bg-gray-800"
+                                >
+                                    <!-- En-tête du volume Material Design -->
+                                    <div class="px-6 py-4 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border-b border-green-100 dark:border-green-900/30">
+                                        <div class="flex items-center justify-between">
+                                            <div class="flex items-center space-x-3">
+                                                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
+                                                    <FolderIcon class="h-4 w-4 text-green-600" />
+                                                </div>
+                                                <div>
+                                                    <span class="text-sm font-semibold text-green-900 dark:text-green-300">Volume {{ volume.number }}</span>
+                                                    <span class="text-xs text-green-600 dark:text-green-400 ml-2">({{ volume.chapters.length }} chapitres)</span>
+                                                </div>
+                                            </div>
+                                            <div class="flex items-center space-x-2">
+                                                <button
+                                                    @click="toggleVolumeExpanded(volume)"
+                                                    class="w-8 h-8 rounded-full bg-green-100 hover:bg-green-200 flex items-center justify-center transition-colors duration-200"
+                                                >
+                                                    <ChevronDownIcon v-if="volume.isExpanded" class="h-4 w-4 text-green-600" />
+                                                    <ChevronRightIcon v-else class="h-4 w-4 text-green-600" />
+                                                </button>
+                                                <button
+                                                    @click="deleteVolume(volume.number)"
+                                                    class="text-red-600 hover:text-red-800 text-sm font-medium hover:bg-red-100 px-3 py-1.5 rounded-lg transition-colors duration-200"
+                                                >
+                                                    Supprimer
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Chapitres du volume -->
+                                    <div v-if="volume.isExpanded" class="px-6 py-4">
+                                        <div v-if="volume.chapters.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
+                                            <DocumentIcon class="h-12 w-12 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
+                                            <p class="text-sm">Aucun chapitre assigné à ce volume.</p>
+                                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Utilisez le bouton "Assigner" sur les chapitres non assignés pour les ajouter.</p>
+                                        </div>
+                                        <div v-else class="space-y-2">
+                                            <div
+                                                v-for="chapter in volume.chapters"
+                                                :key="chapter.id"
+                                                class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg transition-colors duration-200 border border-transparent hover:border-gray-200"
+                                                :class="{ 'bg-green-50 border-green-200 shadow-sm': isChapterSelected(chapter) }"
+                                            >
+                                                <!-- Checkbox de sélection -->
+                                                <div class="relative">
+                                                    <input
+                                                        type="checkbox"
+                                                        :checked="isChapterSelected(chapter)"
+                                                        @change="toggleChapterSelection(chapter)"
+                                                        class="h-5 w-5 text-green-600 border-gray-300 rounded focus:ring-green-500 focus:ring-2 transition-colors duration-200"
+                                                    />
+                                                </div>
+                                                <DocumentIcon class="h-5 w-5 text-gray-400" />
+                                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300 w-12 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-center">{{ chapter.number }}</span>
+                                                <div class="flex-1">
+                                                    <div v-if="!chapter.isEditing" class="flex items-center">
+                                                        <span
+                                                            class="text-sm text-gray-900 dark:text-gray-100 cursor-pointer hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200"
+                                                            @click="startEditingTitle(chapter)"
+                                                        >
+                                                            {{ chapter.title || 'Sans titre' }}
+                                                        </span>
+                                                        <button
+                                                            @click="startEditingTitle(chapter)"
+                                                            class="ml-2 text-gray-400 hover:text-gray-600 p-1 rounded-full hover:bg-gray-100 transition-colors duration-200"
+                                                        >
+                                                            <PencilIcon class="h-3 w-3" />
+                                                        </button>
+                                                    </div>
+                                                    <div v-else class="flex items-center space-x-2">
+                                                        <input
+                                                            v-model="chapter.editingTitle"
+                                                            type="text"
+                                                            class="flex-1 border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors duration-200"
+                                                            @keyup.enter="saveTitle(chapter)"
+                                                            @keyup.esc="cancelEditingTitle(chapter)"
+                                                            ref="titleInput"
+                                                        />
+                                                        <button
+                                                            @click="saveTitle(chapter)"
+                                                            class="text-green-600 hover:text-green-800 p-1 rounded-full hover:bg-green-100 transition-colors duration-200"
+                                                        >
+                                                            <CheckIcon class="h-4 w-4" />
+                                                        </button>
+                                                        <button
+                                                            @click="cancelEditingTitle(chapter)"
+                                                            class="text-red-600 hover:text-red-800 p-1 rounded-full hover:bg-red-100 transition-colors duration-200"
+                                                        >
+                                                            <XMarkIcon class="h-4 w-4" />
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                                <div class="flex items-center space-x-2">
+                                                    <button
+                                                        @click="removeFromVolume(chapter)"
+                                                        class="text-red-600 hover:text-red-800 text-xs font-medium hover:bg-red-100 px-3 py-1.5 rounded-lg transition-colors duration-200"
+                                                    >
+                                                        Retirer
+                                                    </button>
+                                                </div>
+                                                <div v-if="chapter.isModified" class="w-3 h-3 bg-yellow-400 rounded-full shadow-sm"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Footer Material Design -->
+                <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
+                    <div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
+                        <button
+                            @click="handleClose"
+                            :disabled="isSaving"
+                            class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-6 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 transition-all duration-200 shadow-sm hover:shadow-md"
+                        >
+                            Annuler
+                        </button>
+                        <button
+                            @click="handleSave"
+                            :disabled="isSaving || !hasChanges"
+                            class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-transparent bg-green-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 transition-all duration-200 shadow-md hover:shadow-lg"
+                        >
+                            <span v-if="isSaving" class="flex items-center space-x-2">
+                                <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                                <span>Sauvegarde...</span>
+                            </span>
+                            <span v-else>Sauvegarder</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Modal de création de volume Material Design -->
+        <div v-if="showCreateVolumeModal" class="fixed inset-0 z-60 overflow-y-auto">
+            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+                <div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="showCreateVolumeModal = false"></div>
+                <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full border border-gray-100 dark:border-gray-700">
+                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100 dark:border-gray-700">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
+                                <PlusIcon class="h-5 w-5 text-green-600" />
+                            </div>
+                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Créer un nouveau volume</h3>
+                        </div>
+                    </div>
+                    <div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-6">
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Numéro du volume</label>
+                                <input
+                                    v-model="newVolumeNumber"
+                                    type="number"
+                                    min="1"
+                                    class="block w-full border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors duration-200"
+                                    placeholder="Ex: 1"
+                                />
+                            </div>
+                            <div v-if="volumeExists" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center space-x-2">
+                                <XMarkIcon class="h-4 w-4 text-red-600" />
+                                <span class="text-sm">Ce volume existe déjà.</span>
+                            </div>
+                            <div v-if="newVolumeNumber && !isValidVolumeNumber" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center space-x-2">
+                                <XMarkIcon class="h-4 w-4 text-red-600" />
+                                <span class="text-sm">Le numéro de volume doit être entre 1 et 999.</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
+                        <div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
+                            <button
+                                @click="showCreateVolumeModal = false"
+                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 shadow-sm hover:shadow-md"
+                            >
+                                Annuler
+                            </button>
+                            <button
+                                @click="createVolume"
+                                :disabled="!isValidVolumeNumber || volumeExists"
+                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-transparent bg-green-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 transition-all duration-200 shadow-md hover:shadow-lg"
+                            >
+                                Créer
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Modal d'assignation Material Design -->
+        <div v-if="showAssignModal" class="fixed inset-0 z-60 overflow-y-auto">
+            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+                <div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="showAssignModal = false"></div>
+                <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full border border-gray-100 dark:border-gray-700">
+                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100 dark:border-gray-700">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
+                                <DocumentIcon class="h-5 w-5 text-green-600" />
+                            </div>
+                            <h3 class="text-lg font-medium text-gray-900">Assigner le chapitre {{ selectedChapter?.number }}</h3>
+                        </div>
+                    </div>
+                    <div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-6">
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-2">Volume</label>
+                                <select
+                                    v-model="selectedVolumeForAssignment"
+                                    class="block w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors duration-200"
+                                >
+                                    <option value="">Sélectionner un volume</option>
+                                    <option v-for="volume in volumes" :key="volume.number" :value="volume.number">
+                                        Volume {{ volume.number }}
+                                    </option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
+                        <div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
+                            <button
+                                @click="showAssignModal = false"
+                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 shadow-sm hover:shadow-md"
+                            >
+                                Annuler
+                            </button>
+                            <button
+                                @click="confirmAssignToVolume"
+                                :disabled="!selectedVolumeForAssignment"
+                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-transparent bg-green-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 transition-all duration-200 shadow-md hover:shadow-lg"
+                            >
+                                Assigner
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Modal de déplacement multiple Material Design -->
+        <div v-if="showMoveToVolumeModal" class="fixed inset-0 z-60 overflow-y-auto">
+            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+                <div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="showMoveToVolumeModal = false"></div>
+                <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full border border-gray-100 dark:border-gray-700">
+                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100 dark:border-gray-700">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
+                                <ArrowPathIcon class="h-5 w-5 text-green-600" />
+                            </div>
+                            <h3 class="text-lg font-medium text-gray-900">Déplacer {{ selectedChapters.length }} chapitre(s)</h3>
+                        </div>
+                    </div>
+                    <div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-6">
+                        <div class="space-y-4">
+                            <div class="bg-green-50 p-4 rounded-lg border border-green-200">
+                                <p class="text-sm text-green-800 font-medium">
+                                    Chapitres sélectionnés : {{ selectedChapters.map(c => c.number).join(', ') }}
+                                </p>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-2">Volume de destination</label>
+                                <select
+                                    v-model="selectedVolumeForMove"
+                                    class="block w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors duration-200"
+                                >
+                                    <option value="">Sélectionner un volume</option>
+                                    <option v-for="volume in volumes" :key="volume.number" :value="volume.number">
+                                        Volume {{ volume.number }}
+                                    </option>
+                                    <option value="unassigned">Chapitres non assignés</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
+                        <div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
+                            <button
+                                @click="showMoveToVolumeModal = false"
+                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 shadow-sm hover:shadow-md"
+                            >
+                                Annuler
+                            </button>
+                            <button
+                                @click="confirmMoveToVolume"
+                                :disabled="!selectedVolumeForMove"
+                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-transparent bg-green-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 transition-all duration-200 shadow-md hover:shadow-lg"
+                            >
+                                Déplacer
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Modal de séparation du volume fourre-tout Material Design -->
+        <div v-if="showSplitVolumeZeroModal" class="fixed inset-0 z-60 overflow-y-auto">
+            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+                <div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="showSplitVolumeZeroModal = false"></div>
+                <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border border-gray-100">
+                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
+                                <ArrowPathIcon class="h-5 w-5 text-green-600" />
+                            </div>
+                            <h3 class="text-lg font-medium text-gray-900">Séparer le volume 00</h3>
+                        </div>
+                    </div>
+                    <div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-6">
+                        <div class="space-y-4">
+                            <div class="bg-green-50 p-4 rounded-lg border border-green-200">
+                                <p class="text-sm text-green-800 font-medium">
+                                    Le volume 00 contient {{ volumeZeroChapters.length }} chapitres et sera séparé en {{ numberOfNewVolumes }} nouveaux volumes.
+                                </p>
+                            </div>
+                            <div class="bg-green-50 p-4 rounded-lg border border-green-200">
+                                <p class="text-sm text-green-800">
+                                    <strong>Moyenne des autres volumes :</strong> {{ averageChaptersPerVolume.toFixed(1) }} chapitres par volume
+                                </p>
+                                <p class="text-sm text-green-800 mt-1">
+                                    <strong>Chapitres par nouveau volume :</strong> {{ chaptersPerNewVolume }}
+                                </p>
+                            </div>
+                            <div class="space-y-3">
+                                <h4 class="text-sm font-medium text-gray-700">Répartition proposée :</h4>
+                                <div class="space-y-2 max-h-32 overflow-y-auto">
+                                    <div v-for="(group, index) in proposedVolumeGroups" :key="index" class="text-sm text-gray-600 bg-gray-50 p-3 rounded-lg border border-gray-200">
+                                        <strong>Volume {{ group.volumeNumber }} :</strong>
+                                        Chapitres {{ group.chapters.map(c => c.number).join(', ') }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
+                        <div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
+                            <button
+                                @click="showSplitVolumeZeroModal = false"
+                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 shadow-sm hover:shadow-md"
+                            >
+                                Annuler
+                            </button>
+                            <button
+                                @click="confirmSplitVolumeZero"
+                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-transparent bg-green-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 shadow-md hover:shadow-lg"
+                            >
+                                Confirmer la séparation
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {
+    ArrowPathIcon,
+    CheckIcon,
+    ChevronDownIcon,
+    ChevronRightIcon,
+    DocumentIcon,
+    FolderIcon,
+    PencilIcon,
+    PlusIcon,
+    XMarkIcon
+} from '@heroicons/vue/24/outline';
+import { computed, nextTick, ref, watch } from 'vue';
+
+const props = defineProps({
+    isOpen: {
+        type: Boolean,
+        required: true
+    },
+    manga: {
+        type: Object,
+        default: null
+    },
+    chapters: {
+        type: Array,
+        default: () => []
+    },
+    isLoading: {
+        type: Boolean,
+        default: false
+    },
+    isSaving: {
+        type: Boolean,
+        default: false
+    },
+    error: {
+        type: String,
+        default: null
+    }
+});
+
+const emit = defineEmits(['close', 'save']);
+
+// État local
+const localChapters = ref([]);
+const showCreateVolumeModal = ref(false);
+const showAssignModal = ref(false);
+const showMoveToVolumeModal = ref(false);
+const showSplitVolumeZeroModal = ref(false);
+const showUnassignedChapters = ref(true);
+const newVolumeNumber = ref('');
+const selectedChapter = ref(null);
+const selectedVolumeForAssignment = ref('');
+const selectedVolumeForMove = ref('');
+const titleInput = ref(null);
+const expandedVolumes = ref(new Set());
+const selectedChapters = ref([]);
+
+// Computed properties
+const volumes = computed(() => {
+    const volumeMap = new Map();
+
+    // Ajouter les volumes existants avec leurs chapitres
+    localChapters.value.forEach(chapter => {
+        if (chapter.volume) {
+            if (!volumeMap.has(chapter.volume)) {
+                volumeMap.set(chapter.volume, {
+                    number: chapter.volume,
+                    chapters: []
+                });
+            }
+            volumeMap.get(chapter.volume).chapters.push(chapter);
+        }
+    });
+
+    // Ajouter les volumes vides qui sont dans expandedVolumes
+    expandedVolumes.value.forEach(volumeNumber => {
+        if (!volumeMap.has(volumeNumber)) {
+            volumeMap.set(volumeNumber, {
+                number: volumeNumber,
+                chapters: []
+            });
+        }
+    });
+
+    const volumesArray = Array.from(volumeMap.values())
+        .sort((a, b) => b.number - a.number) // Tri décroissant (derniers volumes en premier)
+        .map(volume => ({
+            ...volume,
+            chapters: volume.chapters.sort((a, b) => b.number - a.number), // Chapitres décroissants
+            isExpanded: expandedVolumes.value.has(volume.number)
+        }));
+
+    return volumesArray;
+});
+
+const unassignedChapters = computed(() => {
+    return localChapters.value
+        .filter(chapter => !chapter.volume)
+        .sort((a, b) => b.number - a.number); // Tri décroissant (derniers chapitres en premier)
+});
+
+const totalChapters = computed(() => localChapters.value.length);
+
+const volumeExists = computed(() => {
+    if (!newVolumeNumber.value) return false;
+    const volumeNumber = parseInt(newVolumeNumber.value);
+    return volumes.value.some(volume => volume.number === volumeNumber);
+});
+
+const isValidVolumeNumber = computed(() => {
+    if (!newVolumeNumber.value) return false;
+    const volumeNumber = parseInt(newVolumeNumber.value);
+    return volumeNumber > 0 && volumeNumber <= 999;
+});
+
+const hasChanges = computed(() => {
+    return localChapters.value.some(chapter => chapter.isModified);
+});
+
+// Computed properties pour la séparation du volume fourre-tout
+const volumeZeroChapters = computed(() => {
+    return localChapters.value.filter(chapter => chapter.volume === 0);
+});
+
+const hasVolumeZero = computed(() => {
+    return volumeZeroChapters.value.length > 0;
+});
+
+const otherVolumes = computed(() => {
+    return volumes.value.filter(volume => volume.number !== 0 && volume.chapters.length > 0);
+});
+
+const averageChaptersPerVolume = computed(() => {
+    if (otherVolumes.value.length === 0) return 10; // Valeur par défaut si aucun autre volume
+    const totalChapters = otherVolumes.value.reduce((sum, volume) => sum + volume.chapters.length, 0);
+    return totalChapters / otherVolumes.value.length;
+});
+
+const canSplitVolumeZero = computed(() => {
+    return hasVolumeZero.value && volumeZeroChapters.value.length > averageChaptersPerVolume.value;
+});
+
+const numberOfNewVolumes = computed(() => {
+    if (!canSplitVolumeZero.value) return 0;
+    return Math.ceil(volumeZeroChapters.value.length / averageChaptersPerVolume.value);
+});
+
+const chaptersPerNewVolume = computed(() => {
+    if (!canSplitVolumeZero.value) return 0;
+    return Math.ceil(volumeZeroChapters.value.length / numberOfNewVolumes.value);
+});
+
+const proposedVolumeGroups = computed(() => {
+    if (!canSplitVolumeZero.value) return [];
+
+    const chapters = [...volumeZeroChapters.value].sort((a, b) => a.number - b.number); // Tri croissant par numéro
+    const groups = [];
+    const chaptersPerGroup = chaptersPerNewVolume.value;
+
+    // Trouver le prochain numéro de volume disponible
+    const existingVolumeNumbers = volumes.value.map(v => v.number).filter(n => n !== 0);
+    const maxVolumeNumber = existingVolumeNumbers.length > 0 ? Math.max(...existingVolumeNumbers) : 0;
+
+    for (let i = 0; i < numberOfNewVolumes.value; i++) {
+        const startIndex = i * chaptersPerGroup;
+        const endIndex = Math.min(startIndex + chaptersPerGroup, chapters.length);
+        const groupChapters = chapters.slice(startIndex, endIndex);
+
+        if (groupChapters.length > 0) {
+            groups.push({
+                volumeNumber: maxVolumeNumber + i + 1,
+                chapters: groupChapters
+            });
+        }
+    }
+
+    return groups;
+});
+
+// Méthodes
+const handleClose = () => {
+    if (!props.isSaving) {
+        emit('close');
+    }
+};
+
+const handleSave = () => {
+    const modifiedChapters = localChapters.value
+        .filter(chapter => chapter.isModified)
+        .map(chapter => ({
+            id: chapter.id,
+            title: chapter.title,
+            volume: chapter.volume || null
+        }));
+
+    if (modifiedChapters.length > 0) {
+        emit('save', modifiedChapters);
+    }
+};
+
+const toggleVolumeExpanded = (volume) => {
+    if (expandedVolumes.value.has(volume.number)) {
+        expandedVolumes.value.delete(volume.number);
+    } else {
+        expandedVolumes.value.add(volume.number);
+    }
+};
+
+const createVolume = () => {
+    if (newVolumeNumber.value && !volumeExists.value && isValidVolumeNumber.value) {
+        const volumeNumber = parseInt(newVolumeNumber.value);
+
+        // Ajouter le nouveau volume à la liste des volumes dépliés
+        expandedVolumes.value.add(volumeNumber);
+
+        // Fermer la modale et réinitialiser
+        showCreateVolumeModal.value = false;
+        newVolumeNumber.value = '';
+    }
+};
+
+const deleteVolume = (volumeNumber) => {
+    localChapters.value.forEach(chapter => {
+        if (chapter.volume === volumeNumber) {
+            chapter.volume = null;
+            chapter.isModified = true;
+        }
+    });
+};
+
+const assignToVolume = (chapter) => {
+    selectedChapter.value = chapter;
+    selectedVolumeForAssignment.value = '';
+    showAssignModal.value = true;
+};
+
+const confirmAssignToVolume = () => {
+    if (selectedChapter.value && selectedVolumeForAssignment.value) {
+        selectedChapter.value.volume = parseInt(selectedVolumeForAssignment.value);
+        selectedChapter.value.isModified = true;
+        showAssignModal.value = false;
+        selectedChapter.value = null;
+        selectedVolumeForAssignment.value = '';
+    }
+};
+
+const removeFromVolume = (chapter) => {
+    chapter.volume = null;
+    chapter.isModified = true;
+};
+
+const startEditingTitle = async (chapter) => {
+    chapter.isEditing = true;
+    chapter.editingTitle = chapter.title || '';
+
+    await nextTick();
+    if (titleInput.value) {
+        titleInput.value.focus();
+    }
+};
+
+const saveTitle = (chapter) => {
+    if (chapter.editingTitle !== chapter.title) {
+        chapter.title = chapter.editingTitle;
+        chapter.isModified = true;
+    }
+    chapter.isEditing = false;
+    chapter.editingTitle = '';
+};
+
+const cancelEditingTitle = (chapter) => {
+    chapter.isEditing = false;
+    chapter.editingTitle = '';
+};
+
+// Méthodes de sélection multiple
+const isChapterSelected = (chapter) => {
+    return selectedChapters.value.some(selected => selected.id === chapter.id);
+};
+
+const toggleChapterSelection = (chapter) => {
+    const index = selectedChapters.value.findIndex(selected => selected.id === chapter.id);
+    if (index > -1) {
+        selectedChapters.value.splice(index, 1);
+    } else {
+        selectedChapters.value.push(chapter);
+    }
+};
+
+const clearSelection = () => {
+    selectedChapters.value = [];
+};
+
+const confirmMoveToVolume = () => {
+    if (selectedVolumeForMove.value && selectedChapters.value.length > 0) {
+        const targetVolume = selectedVolumeForMove.value === 'unassigned' ? null : parseInt(selectedVolumeForMove.value);
+
+        selectedChapters.value.forEach(chapter => {
+            chapter.volume = targetVolume;
+            chapter.isModified = true;
+        });
+
+        // Vider la sélection et fermer la modale
+        selectedChapters.value = [];
+        showMoveToVolumeModal.value = false;
+        selectedVolumeForMove.value = '';
+    }
+};
+
+const confirmSplitVolumeZero = () => {
+    if (!canSplitVolumeZero.value) return;
+
+    // Appliquer la répartition proposée
+    proposedVolumeGroups.value.forEach(group => {
+        group.chapters.forEach(chapter => {
+            chapter.volume = group.volumeNumber;
+            chapter.isModified = true;
+        });
+    });
+
+    // Fermer la modale
+    showSplitVolumeZeroModal.value = false;
+};
+
+// Initialiser les chapitres locaux quand les props changent
+watch(() => props.chapters, (newChapters) => {
+    localChapters.value = newChapters.map(chapter => ({
+        ...chapter,
+        isModified: false,
+        isEditing: false,
+        editingTitle: ''
+    }));
+}, { immediate: true });
+
+// Réinitialiser quand la modale s'ouvre
+watch(() => props.isOpen, (isOpen) => {
+    if (isOpen) {
+        localChapters.value = props.chapters.map(chapter => ({
+            ...chapter,
+            isModified: false,
+            isEditing: false,
+            editingTitle: ''
+        }));
+        showCreateVolumeModal.value = false;
+        showAssignModal.value = false;
+        showMoveToVolumeModal.value = false;
+        showSplitVolumeZeroModal.value = false;
+        showUnassignedChapters.value = true;
+        newVolumeNumber.value = '';
+        selectedChapter.value = null;
+        selectedVolumeForAssignment.value = '';
+        selectedVolumeForMove.value = '';
+        expandedVolumes.value.clear();
+        selectedChapters.value = [];
+
+        // S'assurer que le dernier volume est déplié après l'initialisation
+        nextTick(() => {
+            if (volumes.value.length > 0) {
+                expandedVolumes.value.add(volumes.value[0].number);
+            }
+        });
+    }
+});
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+    <div class="group relative bg-white dark:bg-gray-800 overflow-hidden shadow-sm">
+        <!-- Cover avec overlay -->
+        <div class="relative pb-[140%]">
+            <RouterLink
+                :to="{ name: 'manga-details', params: { id: manga.id } }"
+                class="absolute inset-0">
+                <img
+                    :src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
+                    :alt="manga.title"
+                    class="w-full h-full object-cover bg-gray-100" />
+            </RouterLink>
+
+            <!-- Gradient + actions au survol -->
+            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
+            <div class="absolute bottom-2 left-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                <button
+                    class="p-1.5 bg-black/60 hover:bg-black/80 text-white rounded transition-colors"
+                    title="Éditer"
+                    @click="$emit('edit', manga)">
+                    <PencilIcon class="w-3.5 h-3.5" />
+                </button>
+                <button
+                    class="p-1.5 bg-black/60 hover:bg-black/80 text-white rounded transition-colors"
+                    title="Sources préférées"
+                    @click="$emit('sources', manga)">
+                    <Cog6ToothIcon class="w-3.5 h-3.5" />
+                </button>
+                <button
+                    class="p-1.5 bg-black/60 hover:bg-black/80 text-white rounded transition-colors"
+                    title="Rafraîchir"
+                    @click="$emit('refresh', manga)">
+                    <ArrowPathIcon class="w-3.5 h-3.5" />
+                </button>
+            </div>
+        </div>
+
+        <!-- Titre + année -->
+        <RouterLink
+            :to="{ name: 'manga-details', params: { id: manga.id } }"
+            class="block p-2">
+            <h3 class="text-xs font-medium text-gray-800 dark:text-gray-100 truncate">{{ manga.title }}</h3>
+            <span v-if="manga.publicationYear" class="text-xs text-gray-500 dark:text-gray-400">{{ manga.publicationYear }}</span>
+        </RouterLink>
+    </div>
+</template>
+
+<script setup>
+import { ArrowPathIcon, Cog6ToothIcon, PencilIcon } from '@heroicons/vue/24/outline';
+import { RouterLink } from 'vue-router';
+
+defineProps({
+    manga: {
+        type: Object,
+        required: true
+    }
+});
+
+defineEmits(['edit', 'sources', 'refresh']);
+</script>

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

@@ -0,0 +1,157 @@
+<template>
+    <tr class="border-t dark:border-gray-700 hover:bg-green-100 dark:hover:bg-green-900/20">
+        <td class="px-4 py-2 text-gray-900 dark:text-gray-100" :class="{ 'text-green-500 dark:text-green-400': chapter.isAvailable }">
+            <template v-if="chapter.isVolumeGroup">{{ chapter.volumeChaptersRange }}</template>
+            <template v-else>{{ String(chapter.number).padStart(2, '0') }}</template>
+        </td>
+        <td class="px-4 py-2 w-full text-left text-gray-900 dark:text-gray-100">
+            <router-link
+                v-if="chapter.isAvailable"
+                class="hover:text-green-500 dark:hover:text-green-400"
+                :to="{
+                    name: 'reader',
+                    params: {
+                        chapterId: chapter.id
+                    }
+                }">
+                <template v-if="chapter.isVolumeGroup">
+                    {{ chapter.volumeChapterCount > 1 ? 'Chapitres ' : 'Chapitre ' }}{{ chapter.volumeChaptersRange }}
+                </template>
+                <template v-else>{{ chapter.title || 'Sans titre' }}</template>
+            </router-link>
+            <span v-else class="text-gray-500 dark:text-gray-400">
+                <template v-if="chapter.isVolumeGroup">
+                    {{ chapter.volumeChapterCount > 1 ? 'Chapitres ' : 'Chapitre ' }}{{ chapter.volumeChaptersRange }}
+                </template>
+                <template v-else>{{ chapter.title || 'Sans titre' }}</template>
+            </span>
+        </td>
+        <td class="px-4 py-2 flex justify-end gap-2">
+            <button v-if="!chapter.isAvailable" @click="handleSearch" :class="buttonClass">
+                <MagnifyingGlassIcon class="h-5 w-5" />
+            </button>
+            <button v-else @click="handleDelete" class="text-gray-500 hover:text-green-500">
+                <XMarkIcon class="h-5 w-5" />
+            </button>
+            <button @click="handleDownload" :class="downloadButtonClass" :disabled="isDownloading || !chapter.isAvailable">
+                <ArrowDownTrayIcon class="h-5 w-5" />
+            </button>
+            <button @click="handleHide" :class="hideButtonClass" :disabled="isHiding">
+                <TrashIcon class="h-5 w-5" />
+            </button>
+        </td>
+    </tr>
+</template>
+
+<script setup>
+    import { ArrowDownTrayIcon, MagnifyingGlassIcon, TrashIcon, XMarkIcon } from '@heroicons/vue/24/solid';
+import { computed, ref, watch } from 'vue';
+import { useMangaStore } from '../../application/store/mangaStore';
+
+    const props = defineProps({
+        chapter: {
+            type: Object,
+            required: true
+        },
+        mangaSlug: {
+            type: String,
+            required: true
+        },
+        mangaId: {
+            type: Number,
+            required: true
+        }
+    });
+
+    const store = useMangaStore();
+    const isLoading = ref(false);
+    const isDownloading = ref(false);
+    const isHiding = ref(false);
+
+    const buttonClass = computed(() => {
+        return isLoading.value ? 'text-yellow-500 cursor-wait' : 'text-gray-500 hover:text-green-500';
+    });
+
+    const downloadButtonClass = computed(() => {
+        if (isDownloading.value) {
+            return 'text-yellow-500 cursor-wait';
+        }
+        if (!props.chapter.isAvailable) {
+            return 'text-gray-300 cursor-not-allowed';
+        }
+        return 'text-gray-500 hover:text-green-500';
+    });
+
+    const hideButtonClass = computed(() => {
+        return isHiding.value ? 'text-yellow-500 cursor-wait' : 'text-gray-500 hover:text-green-500';
+    });
+
+    // Surveiller les changements d'état du chapitre
+    watch(
+        () => props.chapter.isAvailable,
+        (newValue, oldValue) => {
+            console.log(
+                `MangaChapter: État du chapitre ${props.chapter.number} (ID: ${props.chapter.id}) modifié - ${oldValue} => ${newValue}`
+            );
+
+            // Si le chapitre devient disponible, on arrête le chargement
+            if (newValue === true) {
+                isLoading.value = false;
+            }
+        }
+    );
+
+    const handleSearch = async () => {
+        try {
+            console.log(`MangaChapter: Recherche du chapitre ${props.chapter.number} (ID: ${props.chapter.id})`);
+            // Montrer l'indicateur de chargement
+            isLoading.value = true;
+
+            // Lancer la recherche du chapitre - L'UI sera mise à jour par l'événement Mercure
+            await store.searchChapter(props.chapter.id);
+        } catch (error) {
+            // En cas d'erreur, on arrête le chargement
+            isLoading.value = false;
+            console.error('Erreur lors de la recherche du chapitre:', error);
+        }
+    };
+
+    const handleDelete = async () => {
+        try {
+            console.log(`MangaChapter: Suppression du chapitre ${props.chapter.number} (ID: ${props.chapter.id})`);
+            await store.deleteChapter(props.chapter.id);
+        } catch (error) {
+            console.error('Erreur lors de la suppression du chapitre:', error);
+        }
+    };
+
+    const handleDownload = async () => {
+        try {
+            console.log(`MangaChapter: Téléchargement du chapitre ${props.chapter.number} (ID: ${props.chapter.id})`);
+            // Montrer l'indicateur de chargement
+            isDownloading.value = true;
+
+            await store.downloadChapter(props.chapter.id);
+        } catch (error) {
+            console.error('Erreur lors du téléchargement du chapitre:', error);
+        } finally {
+            // Arrêter l'indicateur de chargement
+            isDownloading.value = false;
+        }
+    };
+
+    const handleHide = async () => {
+        try {
+            console.log(`MangaChapter: Masquage du chapitre ${props.chapter.number} (ID: ${props.chapter.id})`);
+            // Montrer l'indicateur de chargement
+            isHiding.value = true;
+
+            await store.hideChapter(props.chapter.id, props.mangaId);
+        } catch (error) {
+            console.error('Erreur lors du masquage du chapitre:', error);
+        } finally {
+            // Arrêter l'indicateur de chargement
+            isHiding.value = false;
+        }
+    };
+</script>

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

@@ -0,0 +1,40 @@
+<template>
+    <div class="p-2 border-t dark:border-gray-700">
+        <table class="min-w-full table-auto">
+            <thead>
+                <tr class="text-gray-700 dark:text-gray-300">
+                    <th class="px-4 py-2 text-left">#</th>
+                    <th class="px-4 py-2 text-left">Titre</th>
+                    <th class="px-4 py-2 text-right">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                <MangaChapter
+                    v-for="chapter in chapters"
+                    :key="chapter.id"
+                    :chapter="chapter"
+                    :manga-slug="mangaSlug"
+                    :manga-id="mangaId" />
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script setup>
+    import MangaChapter from './MangaChapter.vue';
+
+    defineProps({
+        chapters: {
+            type: Array,
+            required: true
+        },
+        mangaSlug: {
+            type: String,
+            required: true
+        },
+        mangaId: {
+            type: Number,
+            required: true
+        }
+    });
+</script>

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

@@ -0,0 +1,128 @@
+<template>
+    <TransitionRoot as="template" :show="isOpen">
+        <Dialog as="div" class="relative z-50" @close="closeModal">
+            <TransitionChild
+                as="template"
+                enter="ease-out duration-300"
+                enter-from="opacity-0"
+                enter-to="opacity-100"
+                leave="ease-in duration-200"
+                leave-from="opacity-100"
+                leave-to="opacity-0"
+            >
+                <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity" />
+            </TransitionChild>
+
+            <div class="fixed inset-0 z-10 overflow-y-auto">
+                <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+                    <TransitionChild
+                        as="template"
+                        enter="ease-out duration-300"
+                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enter-to="opacity-100 translate-y-0 sm:scale-100"
+                        leave="ease-in duration-200"
+                        leave-from="opacity-100 translate-y-0 sm:scale-100"
+                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    >
+                        <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 px-6 pb-6 pt-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                            <div class="mb-6">
+                                <DialogTitle as="h3" class="text-lg font-semibold leading-6 text-gray-900 dark:text-gray-100">
+                                    Supprimer le manga
+                                </DialogTitle>
+                            </div>
+
+                            <!-- Error state -->
+                            <div v-if="error" class="mb-6 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded">
+                                {{ error.message || 'Une erreur est survenue lors de la suppression.' }}
+                            </div>
+
+                            <!-- Warning message -->
+                            <div class="mb-6">
+                                <div class="flex items-center mb-4">
+                                    <ExclamationTriangleIcon class="h-6 w-6 text-red-500 mr-3" />
+                                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100">Action irréversible</span>
+                                </div>
+                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                                    Êtes-vous sûr de vouloir supprimer le manga <strong>"{{ manga?.title }}"</strong> ?
+                                </p>
+                                <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-md p-4">
+                                    <div class="flex">
+                                        <ExclamationTriangleIcon class="h-5 w-5 text-yellow-400" />
+                                        <div class="ml-3">
+                                            <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-300">
+                                                Attention
+                                            </h3>
+                                            <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-400">
+                                                <p>Cette action supprimera définitivement :</p>
+                                                <ul class="list-disc list-inside mt-1 space-y-1">
+                                                    <li>Le manga et toutes ses métadonnées</li>
+                                                    <li>Tous les chapitres associés</li>
+                                                    <li>Tous les fichiers CBZ téléchargés</li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Action buttons -->
+                            <div class="mt-6 flex justify-end space-x-3">
+                                <button
+                                    type="button"
+                                    class="inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                                    @click="closeModal"
+                                    :disabled="isLoading"
+                                >
+                                    Annuler
+                                </button>
+                                <button
+                                    type="button"
+                                    class="inline-flex justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                                    @click="confirmDelete"
+                                    :disabled="isLoading"
+                                >
+                                    <ArrowPathIcon v-if="isLoading" class="h-4 w-4 mr-2 animate-spin" />
+                                    {{ isLoading ? 'Suppression...' : 'Supprimer définitivement' }}
+                                </button>
+                            </div>
+                        </DialogPanel>
+                    </TransitionChild>
+                </div>
+            </div>
+        </Dialog>
+    </TransitionRoot>
+</template>
+
+<script setup>
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
+import { ArrowPathIcon, ExclamationTriangleIcon } from '@heroicons/vue/24/outline';
+
+const props = defineProps({
+    isOpen: {
+        type: Boolean,
+        required: true
+    },
+    manga: {
+        type: Object,
+        default: null
+    },
+    isLoading: {
+        type: Boolean,
+        default: false
+    },
+    error: {
+        type: Object,
+        default: null
+    }
+});
+
+const emit = defineEmits(['close', 'confirm']);
+
+const closeModal = () => {
+    emit('close');
+};
+
+const confirmDelete = () => {
+    emit('confirm');
+};
+</script>

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

@@ -0,0 +1,371 @@
+<template>
+    <TransitionRoot as="template" :show="isOpen">
+        <Dialog as="div" class="relative z-50" @close="closeModal">
+            <TransitionChild
+                as="template"
+                enter="ease-out duration-300"
+                enter-from="opacity-0"
+                enter-to="opacity-100"
+                leave="ease-in duration-200"
+                leave-from="opacity-100"
+                leave-to="opacity-0"
+            >
+                <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity" />
+            </TransitionChild>
+
+            <div class="fixed inset-0 z-10 overflow-y-auto">
+                <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+                    <TransitionChild
+                        as="template"
+                        enter="ease-out duration-300"
+                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enter-to="opacity-100 translate-y-0 sm:scale-100"
+                        leave="ease-in duration-200"
+                        leave-from="opacity-100 translate-y-0 sm:scale-100"
+                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    >
+                        <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 px-6 pb-6 pt-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl">
+                            <div class="mb-6">
+                                <DialogTitle as="h3" class="text-lg font-semibold leading-6 text-gray-900 dark:text-gray-100">
+                                    Edit Manga
+                                </DialogTitle>
+                            </div>
+
+                            <!-- Error state -->
+                            <div v-if="error" class="mb-6 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded">
+                                {{ error.message || 'Une erreur est survenue lors de la sauvegarde.' }}
+                            </div>
+
+                            <!-- Form -->
+                            <form @submit.prevent="saveChanges" class="space-y-6">
+                                <!-- Titre et Slug -->
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                    <div>
+                                        <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Titre</label>
+                                        <input
+                                            id="title"
+                                            v-model="formData.title"
+                                            type="text"
+                                            class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                                            placeholder="Titre du manga"
+                                        />
+                                    </div>
+                                    <div>
+                                        <label for="slug" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Slug</label>
+                                        <input
+                                            id="slug"
+                                            :value="manga?.slug || ''"
+                                            type="text"
+                                            disabled
+                                            class="block w-full rounded-md border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-600 shadow-sm sm:text-sm text-gray-500 dark:text-gray-400"
+                                        />
+                                    </div>
+                                </div>
+
+                                <!-- Année de publication -->
+                                <div>
+                                    <label for="publicationYear" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Année de publication</label>
+                                    <input
+                                        id="publicationYear"
+                                        v-model.number="formData.publicationYear"
+                                        type="number"
+                                        min="1900"
+                                        :max="new Date().getFullYear()"
+                                        class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                                        placeholder="2023"
+                                    />
+                                </div>
+
+                                <!-- Description -->
+                                <div>
+                                    <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
+                                    <textarea
+                                        id="description"
+                                        v-model="formData.description"
+                                        rows="4"
+                                        class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                                        placeholder="Description du manga"
+                                    />
+                                </div>
+
+                                <!-- Auteur et Statut -->
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                    <div>
+                                        <label for="author" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Auteur</label>
+                                        <input
+                                            id="author"
+                                            v-model="formData.author"
+                                            type="text"
+                                            class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                                            placeholder="Auteur du manga"
+                                        />
+                                    </div>
+                                    <div>
+                                        <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Statut</label>
+                                        <input
+                                            id="status"
+                                            v-model="formData.status"
+                                            type="text"
+                                            class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                                            placeholder="ongoing"
+                                        />
+                                    </div>
+                                </div>
+
+                                <!-- Note -->
+                                <div>
+                                    <label for="rating" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Note</label>
+                                    <input
+                                        id="rating"
+                                        v-model.number="formData.rating"
+                                        type="number"
+                                        min="0"
+                                        max="10"
+                                        step="0.001"
+                                        class="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                                        placeholder="9.541"
+                                    />
+                                </div>
+
+                                <!-- Slugs alternatifs -->
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Slugs alternatifs</label>
+                                    <div class="space-y-2">
+                                        <div v-if="formData.alternativeSlugs.length > 0" class="flex flex-wrap gap-2">
+                                            <span
+                                                v-for="(slug, index) in formData.alternativeSlugs"
+                                                :key="index"
+                                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300"
+                                            >
+                                                {{ slug }}
+                                                <button
+                                                    type="button"
+                                                    @click="removeAlternativeSlug(index)"
+                                                    class="ml-1.5 inline-flex items-center justify-center w-4 h-4 rounded-full text-green-400 hover:text-green-600"
+                                                >
+                                                    <XMarkIcon class="w-3 h-3" />
+                                                </button>
+                                            </span>
+                                        </div>
+                                        <button
+                                            type="button"
+                                            @click="showAlternativeSlugInput = !showAlternativeSlugInput"
+                                            class="text-green-600 hover:text-green-700 text-sm font-medium"
+                                        >
+                                            + Ajouter un slug alternatif
+                                        </button>
+                                        <div v-if="showAlternativeSlugInput" class="flex gap-2">
+                                            <input
+                                                v-model="newAlternativeSlug"
+                                                type="text"
+                                                class="flex-1 rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                                                placeholder="Nouveau slug alternatif"
+                                                @keyup.enter="addAlternativeSlug"
+                                            />
+                                            <button
+                                                type="button"
+                                                @click="addAlternativeSlug"
+                                                class="px-3 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm"
+                                            >
+                                                Ajouter
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Genres -->
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Genres</label>
+                                    <div class="space-y-3">
+                                        <div v-if="formData.genres.length > 0" class="grid grid-cols-2 md:grid-cols-4 gap-2">
+                                            <span
+                                                v-for="(genre, index) in formData.genres"
+                                                :key="index"
+                                                class="inline-flex items-center justify-between px-3 py-1 rounded-md text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
+                                            >
+                                                {{ genre }}
+                                                <button
+                                                    type="button"
+                                                    @click="removeGenre(index)"
+                                                    class="ml-2 inline-flex items-center justify-center w-4 h-4 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+                                                >
+                                                    <XMarkIcon class="w-3 h-3" />
+                                                </button>
+                                            </span>
+                                        </div>
+                                        <button
+                                            type="button"
+                                            @click="showGenreInput = !showGenreInput"
+                                            class="text-green-600 hover:text-green-700 text-sm font-medium"
+                                        >
+                                            + Ajouter un genre
+                                        </button>
+                                        <div v-if="showGenreInput" class="flex gap-2">
+                                            <input
+                                                v-model="newGenre"
+                                                type="text"
+                                                class="flex-1 rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                                                placeholder="Nouveau genre"
+                                                @keyup.enter="addGenre"
+                                            />
+                                            <button
+                                                type="button"
+                                                @click="addGenre"
+                                                class="px-3 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm"
+                                            >
+                                                Ajouter
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </form>
+
+                            <!-- Boutons -->
+                            <div class="mt-8 flex justify-end space-x-3">
+                                <button
+                                    type="button"
+                                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600"
+                                    @click="closeModal"
+                                    :disabled="isSaving"
+                                >
+                                    Cancel
+                                </button>
+                                <button
+                                    type="button"
+                                    class="px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                                    :disabled="isSaving"
+                                    @click="saveChanges"
+                                >
+                                    <div v-if="isSaving" class="flex items-center">
+                                        <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                                        Saving...
+                                    </div>
+                                    <span v-else>Save</span>
+                                </button>
+                            </div>
+                        </DialogPanel>
+                    </TransitionChild>
+                </div>
+            </div>
+        </Dialog>
+    </TransitionRoot>
+</template>
+
+<script setup>
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
+import { XMarkIcon } from '@heroicons/vue/24/outline';
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+    isOpen: {
+        type: Boolean,
+        required: true
+    },
+    manga: {
+        type: Object,
+        default: null
+    },
+    isSaving: {
+        type: Boolean,
+        default: false
+    },
+    error: {
+        type: Object,
+        default: null
+    }
+});
+
+const emit = defineEmits(['close', 'save']);
+
+// Données du formulaire
+const formData = ref({
+    title: '',
+    description: '',
+    author: '',
+    publicationYear: null,
+    status: '',
+    rating: null,
+    genres: [],
+    alternativeSlugs: []
+});
+
+// Contrôle de l'affichage des inputs
+const showGenreInput = ref(false);
+const showAlternativeSlugInput = ref(false);
+
+// Champs temporaires pour ajouter des genres et slugs
+const newGenre = ref('');
+const newAlternativeSlug = ref('');
+
+// Initialiser le formulaire avec les données du manga
+watch(() => props.manga, (newManga) => {
+    if (newManga) {
+        formData.value = {
+            title: newManga.title || '',
+            description: newManga.description || '',
+            author: newManga.author || '',
+            publicationYear: newManga.publicationYear || null,
+            status: newManga.status || '',
+            rating: newManga.rating || null,
+            genres: Array.isArray(newManga.genres) ? [...newManga.genres] : [],
+            alternativeSlugs: Array.isArray(newManga.alternativeSlugs) ? [...newManga.alternativeSlugs] : []
+        };
+    }
+}, { immediate: true });
+
+const closeModal = () => {
+    // Réinitialiser les états d'affichage
+    showGenreInput.value = false;
+    showAlternativeSlugInput.value = false;
+    newGenre.value = '';
+    newAlternativeSlug.value = '';
+    emit('close');
+};
+
+const saveChanges = () => {
+    // Nettoyer les données avant de les envoyer
+    const dataToSave = {
+        title: formData.value.title || undefined,
+        description: formData.value.description || undefined,
+        author: formData.value.author || undefined,
+        publicationYear: formData.value.publicationYear || undefined,
+        status: formData.value.status || undefined,
+        rating: formData.value.rating || undefined,
+        genres: formData.value.genres.length > 0 ? formData.value.genres : undefined,
+        alternativeSlugs: formData.value.alternativeSlugs.length > 0 ? formData.value.alternativeSlugs : undefined
+    };
+
+    // Supprimer les valeurs undefined
+    Object.keys(dataToSave).forEach(key => {
+        if (dataToSave[key] === undefined) {
+            delete dataToSave[key];
+        }
+    });
+
+    emit('save', dataToSave);
+};
+
+const addGenre = () => {
+    if (newGenre.value.trim() && !formData.value.genres.includes(newGenre.value.trim())) {
+        formData.value.genres.push(newGenre.value.trim());
+        newGenre.value = '';
+        showGenreInput.value = false;
+    }
+};
+
+const removeGenre = (index) => {
+    formData.value.genres.splice(index, 1);
+};
+
+const addAlternativeSlug = () => {
+    if (newAlternativeSlug.value.trim() && !formData.value.alternativeSlugs.includes(newAlternativeSlug.value.trim())) {
+        formData.value.alternativeSlugs.push(newAlternativeSlug.value.trim());
+        newAlternativeSlug.value = '';
+        showAlternativeSlugInput.value = false;
+    }
+};
+
+const removeAlternativeSlug = (index) => {
+    formData.value.alternativeSlugs.splice(index, 1);
+};
+</script>

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

@@ -0,0 +1,96 @@
+<template>
+    <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8 gap-3 p-4">
+        <MangaCard
+            v-for="manga in mangas"
+            :key="manga.id"
+            :manga="manga"
+            @edit="openEdit"
+            @sources="openSources"
+            @refresh="doRefresh" />
+    </div>
+
+    <!-- Modales -->
+    <MangaEditModal
+        :is-open="isEditModalOpen"
+        :manga="selectedManga"
+        :is-saving="editIsLoading"
+        :error="editError"
+        @close="closeEditModal"
+        @save="handleSaveEdit" />
+
+    <MangaPreferredSourcesModal
+        :is-open="isSourcesModalOpen"
+        :sources="preferredSources"
+        :is-loading="sourcesIsLoading"
+        :error="sourcesError"
+        :is-saving="sourcesIsSaving"
+        @close="isSourcesModalOpen = false"
+        @save="handleSaveSources" />
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { useMangaEdit } from '../composables/useMangaEdit';
+import { useMangaPreferredSources } from '../composables/useMangaPreferredSources';
+import { useMangaRefresh } from '../composables/useMangaRefresh';
+import MangaCard from './MangaCard.vue';
+import MangaEditModal from './MangaEditModal.vue';
+import MangaPreferredSourcesModal from './MangaPreferredSourcesModal.vue';
+
+defineProps({
+    mangas: {
+        type: Array,
+        required: true
+    }
+});
+
+const selectedManga = ref(null);
+const isSourcesModalOpen = ref(false);
+
+// ── Edit ──────────────────────────────────────────────────
+const { isEditModalOpen, openEditModal, closeEditModal, editManga, isLoading: editIsLoading, error: editError } = useMangaEdit();
+
+function openEdit(manga) {
+    selectedManga.value = manga;
+    openEditModal();
+}
+
+async function handleSaveEdit(data) {
+    if (!selectedManga.value) return;
+    await editManga(selectedManga.value.id, data);
+}
+
+// ── Sources préférées ─────────────────────────────────────
+const selectedMangaId = computed(() => selectedManga.value?.id ?? null);
+const {
+    sources: preferredSources,
+    isLoading: sourcesIsLoading,
+    error: sourcesError,
+    isSaving: sourcesIsSaving,
+    savePreferredSources
+} = useMangaPreferredSources(selectedMangaId);
+
+function openSources(manga) {
+    selectedManga.value = manga;
+    isSourcesModalOpen.value = true;
+}
+
+function handleSaveSources(sourceIds) {
+    savePreferredSources(sourceIds);
+    isSourcesModalOpen.value = false;
+}
+
+// ── Refresh ───────────────────────────────────────────────
+const { refreshMetadata } = useMangaRefresh();
+const refreshingId = ref(null);
+
+async function doRefresh(manga) {
+    if (refreshingId.value) return;
+    refreshingId.value = manga.id;
+    try {
+        await refreshMetadata(manga.id);
+    } finally {
+        refreshingId.value = null;
+    }
+}
+</script>

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

@@ -0,0 +1,102 @@
+<template>
+    <div class="shadow-lg text-white">
+        <div class="relative h-64 sm:h-80 lg:h-96 bg-cover bg-center" :style="{ backgroundImage: `url('${manga.imageUrl}')` }">
+            <div class="absolute inset-0 bg-black opacity-50"></div>
+            <div class="absolute inset-0 flex flex-col lg:flex-row justify-center p-4 lg:p-6">
+                <!-- Image de couverture - cachée sur mobile, visible sur desktop -->
+                <div class="hidden lg:block mr-12">
+                    <img :src="manga.thumbnailUrl" :alt="manga.title" class="max-w-48 lg:max-w-72 max-h-48 lg:max-h-72" />
+                </div>
+
+                <!-- Informations du manga -->
+                <div class="flex flex-col space-y-3 lg:space-y-4 flex-1 min-w-0">
+                    <div class="flex items-start lg:items-center space-x-3">
+                        <BookmarkIcon class="h-6 w-6 lg:h-8 lg:w-8 text-white flex-shrink-0 mt-1 lg:mt-0" />
+                        <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold leading-tight">{{ manga.title }}</h1>
+                    </div>
+
+                    <div class="flex flex-wrap items-center gap-4 text-sm lg:text-base">
+                        <span>{{ manga.year }}</span>
+                        <span>Chapitres: {{ manga.totalChapters }}</span>
+                    </div>
+
+                    <div class="flex items-start lg:items-center space-x-2">
+                        <FolderIcon class="h-5 w-5 lg:h-6 lg:w-6 text-gray-400 flex-shrink-0 mt-0.5 lg:mt-0" />
+                        <div class="flex flex-col lg:flex-row lg:items-center lg:space-x-4 min-w-0 flex-1">
+                            <span class="truncate text-sm lg:text-base">/media/mangas/{{ manga.title }} ({{ manga.year }})</span>
+                            <span class="bg-green-600 py-1 px-2 rounded text-xs lg:text-sm self-start lg:self-auto">{{ manga.status || 'Terminé' }}</span>
+                        </div>
+                    </div>
+
+                    <div class="flex flex-wrap gap-2" v-if="manga.tags?.length">
+                        <template v-for="(tag, index) in manga.tags.slice(0, isMobile ? 3 : 5)" :key="index">
+                            <span class="bg-gray-700 py-1 px-2 rounded-sm text-xs lg:text-sm">{{ tag }}</span>
+                        </template>
+                        <span v-if="manga.tags.length > (isMobile ? 3 : 5)" class="bg-gray-700 py-1 px-2 rounded-sm text-xs lg:text-sm">...</span>
+                    </div>
+
+                    <div class="space-y-2">
+                        <div class="flex items-center space-x-2">
+                            <HeartIcon class="h-5 w-5 lg:h-6 lg:w-6 text-red-500" />
+                            <span class="text-sm lg:text-base">{{ manga.rating }}</span>
+                        </div>
+                        <p class="text-sm lg:text-base line-clamp-3 lg:line-clamp-5">{{ manga.description }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { BookmarkIcon, FolderIcon, HeartIcon } from '@heroicons/vue/24/outline';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+    defineProps({
+        manga: {
+            type: Object,
+            required: true
+        }
+    });
+
+    // Détection du mobile
+    const windowWidth = ref(window.innerWidth);
+    const isMobile = computed(() => windowWidth.value < 1024);
+
+    const updateWindowWidth = () => {
+        windowWidth.value = window.innerWidth;
+    };
+
+    onMounted(() => {
+        window.addEventListener('resize', updateWindowWidth);
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('resize', updateWindowWidth);
+    });
+</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;
+            line-clamp: 3;
+            -webkit-box-orient: vertical;
+        }
+    }
+
+    @supports (-webkit-line-clamp: 5) {
+        .line-clamp-5 {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 5;
+            line-clamp: 5;
+            -webkit-box-orient: vertical;
+        }
+    }
+</style>

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

@@ -0,0 +1,171 @@
+<template>
+    <div>
+        <div class="border-t border-gray-200 dark:border-gray-700">
+            <div
+                v-for="manga in mangas"
+                :key="manga.id"
+                class="flex items-center gap-4 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/40 transition-colors border-b border-gray-100 dark:border-gray-700">
+
+                <!-- Cover -->
+                <img
+                    :src="manga.thumbnailUrl || manga.imageUrl || '/placeholder-cover.png'"
+                    alt=""
+                    class="h-36 w-24 object-cover flex-shrink-0 self-start"
+                    referrerpolicy="no-referrer" />
+
+                <!-- Titre + méta + résumé -->
+                <div class="flex-1 min-w-0">
+                    <div class="flex items-start gap-2 flex-wrap">
+                        <RouterLink
+                            :to="{ name: 'manga-details', params: { id: manga.id } }"
+                            class="text-2xl font-semibold text-gray-900 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400 transition-colors"
+                            @click.stop>
+                            {{ manga.title }}
+                        </RouterLink>
+                        <span
+                            v-if="manga.status"
+                            class="text-xs font-medium px-2 py-0.5 rounded-full flex-shrink-0"
+                            :class="statusClass(manga.status)">
+                            {{ manga.status }}
+                        </span>
+                    </div>
+                    <p v-if="manga.description" class="text-sm text-gray-600 dark:text-gray-300 mt-2 line-clamp-4">
+                        {{ manga.description }}
+                    </p>
+                </div>
+
+                <!-- Actions verticales -->
+                <div class="flex flex-col items-center justify-center gap-0.5 flex-shrink-0 self-stretch">
+                    <button
+                        class="p-1.5 rounded-md text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
+                        title="Éditer"
+                        @click.stop="openEdit(manga)">
+                        <PencilIcon class="w-4 h-4" />
+                    </button>
+                    <button
+                        class="p-1.5 rounded-md text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
+                        title="Sources préférées"
+                        @click.stop="openSources(manga)">
+                        <Cog6ToothIcon class="w-4 h-4" />
+                    </button>
+                    <button
+                        class="p-1.5 rounded-md transition-colors"
+                        :class="refreshingId === manga.id
+                            ? 'text-blue-400 cursor-not-allowed'
+                            : 'text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600'"
+                        title="Rafraîchir"
+                        :disabled="refreshingId === manga.id"
+                        @click.stop="doRefresh(manga)">
+                        <ArrowPathIcon
+                            class="w-4 h-4"
+                            :class="{ 'animate-spin': refreshingId === manga.id }" />
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Modales -->
+        <MangaEditModal
+            :is-open="isEditModalOpen"
+            :manga="selectedManga"
+            :is-saving="editIsLoading"
+            :error="editError"
+            @close="closeEditModal"
+            @save="handleSaveEdit" />
+
+        <MangaPreferredSourcesModal
+            :is-open="isSourcesModalOpen"
+            :sources="preferredSources"
+            :is-loading="sourcesIsLoading"
+            :error="sourcesError"
+            :is-saving="sourcesIsSaving"
+            @close="isSourcesModalOpen = false"
+            @save="handleSaveSources" />
+    </div>
+</template>
+
+<script setup>
+import { ArrowPathIcon, Cog6ToothIcon, PencilIcon } from '@heroicons/vue/24/outline';
+import { computed, ref } from 'vue';
+import { RouterLink } from 'vue-router';
+import { useMangaEdit } from '../composables/useMangaEdit';
+import { useMangaPreferredSources } from '../composables/useMangaPreferredSources';
+import { useMangaRefresh } from '../composables/useMangaRefresh';
+import MangaEditModal from './MangaEditModal.vue';
+import MangaPreferredSourcesModal from './MangaPreferredSourcesModal.vue';
+
+const emit = defineEmits(['manga-click']);
+
+const props = defineProps({
+    mangas: {
+        type: Array,
+        required: true
+    }
+});
+
+function formatDate(dateString) {
+    if (!dateString) return '';
+    try {
+        return new Date(dateString).toLocaleDateString();
+    } catch (e) {
+        return dateString;
+    }
+}
+
+function statusClass(status) {
+    if (status === 'ongoing') return 'text-blue-600 bg-blue-50 dark:bg-blue-900/20';
+    if (status === 'completed') return 'text-green-600 bg-green-50 dark:bg-green-900/20';
+    return 'text-gray-500 bg-gray-100 dark:bg-gray-700';
+}
+
+// ── Selected manga ────────────────────────────────────────
+const selectedManga = ref(null);
+const isSourcesModalOpen = ref(false);
+
+// ── Edit ──────────────────────────────────────────────────
+const { isEditModalOpen, openEditModal, closeEditModal, editManga, isLoading: editIsLoading, error: editError } = useMangaEdit();
+
+function openEdit(manga) {
+    selectedManga.value = manga;
+    openEditModal();
+}
+
+async function handleSaveEdit(data) {
+    if (!selectedManga.value) return;
+    await editManga(selectedManga.value.id, data);
+}
+
+// ── Sources préférées ─────────────────────────────────────
+const selectedMangaId = computed(() => selectedManga.value?.id ?? null);
+const {
+    sources: preferredSources,
+    isLoading: sourcesIsLoading,
+    error: sourcesError,
+    isSaving: sourcesIsSaving,
+    savePreferredSources
+} = useMangaPreferredSources(selectedMangaId);
+
+function openSources(manga) {
+    selectedManga.value = manga;
+    isSourcesModalOpen.value = true;
+}
+
+function handleSaveSources(sourceIds) {
+    savePreferredSources(sourceIds);
+    isSourcesModalOpen.value = false;
+}
+
+// ── Refresh ───────────────────────────────────────────────
+const { refreshMetadata } = useMangaRefresh();
+const refreshingId = ref(null);
+
+async function doRefresh(manga) {
+    if (refreshingId.value) return;
+    refreshingId.value = manga.id;
+    try {
+        await refreshMetadata(manga.id);
+    } finally {
+        refreshingId.value = null;
+    }
+}
+</script>

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/manga/presentation/components/MangaPreferredSourcesModal.vue

@@ -0,0 +1,277 @@
+<template>
+    <TransitionRoot as="template" :show="isOpen">
+        <Dialog as="div" class="relative z-50" @close="closeModal">
+            <TransitionChild
+                as="template"
+                enter="ease-out duration-300"
+                enter-from="opacity-0"
+                enter-to="opacity-100"
+                leave="ease-in duration-200"
+                leave-from="opacity-100"
+                leave-to="opacity-0"
+            >
+                <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity" />
+            </TransitionChild>
+
+            <div class="fixed inset-0 z-10 overflow-y-auto">
+                <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+                    <TransitionChild
+                        as="template"
+                        enter="ease-out duration-300"
+                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enter-to="opacity-100 translate-y-0 sm:scale-100"
+                        leave="ease-in duration-200"
+                        leave-from="opacity-100 translate-y-0 sm:scale-100"
+                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    >
+                        <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+                            <div>
+                                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-100">
+                                    <Cog6ToothIcon class="h-6 w-6 text-blue-600" aria-hidden="true" />
+                                </div>
+                                <div class="mt-3 text-center sm:mt-5">
+                                    <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-100">
+                                        Sources préférées
+                                    </DialogTitle>
+                                    <div class="mt-2">
+                                        <p class="text-sm text-gray-500 dark:text-gray-400">
+                                            Configurez l'ordre de priorité des sources pour ce manga. Glissez-déposez les sources pour les réorganiser.
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Loading state -->
+                            <div v-if="isLoading" class="mt-5 flex justify-center items-center py-8">
+                                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+                            </div>
+
+                            <!-- Error state -->
+                            <div v-else-if="error" class="mt-5 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded">
+                                {{ error.message || 'Une erreur est survenue lors du chargement des sources.' }}
+                            </div>
+
+                            <!-- Sources list -->
+                            <div v-else class="mt-5">
+                                <div v-if="localSources.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
+                                    Aucune source disponible
+                                </div>
+                                <div v-else class="space-y-3">
+                                    <div
+                                        v-for="(source, index) in localSources"
+                                        :key="source.id"
+                                        :class="[
+                                            'group relative flex items-center p-4 rounded-lg border-2 transition-all duration-200 cursor-grab active:cursor-grabbing select-none',
+                                            {
+                                                'bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-blue-300 dark:border-blue-700 shadow-md': index === 0,
+                                                'bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border-green-300 dark:border-green-700': index === 1,
+                                                'bg-gradient-to-r from-yellow-50 to-amber-50 dark:from-yellow-900/20 dark:to-amber-900/20 border-yellow-300 dark:border-yellow-700': index === 2,
+                                                'bg-gray-50 dark:bg-gray-700/50 border-gray-200 dark:border-gray-600': index > 2,
+                                                'scale-105 shadow-lg border-blue-400': draggedIndex === index,
+                                                'opacity-50': dragOverIndex === index && draggedIndex !== index,
+                                                'scale-95 active:scale-95': isPressed === index
+                                            }
+                                        ]"
+                                        draggable="true"
+                                        @dragstart="handleDragStart(index, $event)"
+                                        @dragover="handleDragOver(index, $event)"
+                                        @dragleave="handleDragLeave"
+                                        @drop="handleDrop(index, $event)"
+                                        @dragend="handleDragEnd"
+                                        @mousedown="handleMouseDown(index)"
+                                        @mouseup="handleMouseUp"
+                                        @mouseleave="handleMouseUp"
+                                    >
+                                        <!-- Badge de priorité -->
+                                        <div class="absolute -top-2 -left-2 z-10">
+                                            <div :class="[
+                                                'inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-bold text-white shadow-lg',
+                                                {
+                                                    'bg-gradient-to-r from-blue-500 to-indigo-600': index === 0,
+                                                    'bg-gradient-to-r from-green-500 to-emerald-600': index === 1,
+                                                    'bg-gradient-to-r from-yellow-500 to-amber-600': index === 2,
+                                                    'bg-gradient-to-r from-gray-500 to-slate-600': index > 2
+                                                }
+                                            ]">
+                                                {{ index + 1 }}
+                                            </div>
+                                        </div>
+
+                                        <!-- Indicateur de priorité -->
+                                        <div class="mr-4">
+                                            <div :class="[
+                                                'flex items-center space-x-1 px-3 py-1 rounded-full text-xs font-semibold',
+                                                {
+                                                    'bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300': index === 0,
+                                                    'bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300': index === 1,
+                                                    'bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-300': index === 2,
+                                                    'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300': index > 2
+                                                }
+                                            ]">
+                                                <span v-if="index === 0">🥇 Priorité haute</span>
+                                                <span v-else-if="index === 1">🥈 Priorité moyenne</span>
+                                                <span v-else-if="index === 2">🥉 Priorité basse</span>
+                                                <span v-else>Priorité {{ index + 1 }}</span>
+                                            </div>
+                                        </div>
+
+                                        <!-- Informations de la source -->
+                                        <div class="flex-1 min-w-0">
+                                            <div class="font-semibold text-gray-900 dark:text-gray-100 truncate">{{ source.name }}</div>
+                                            <div class="text-sm text-gray-600 dark:text-gray-400 truncate">
+                                                <a :href="source.baseUrl" target="_blank" class="hover:text-blue-600 hover:underline">{{ source.baseUrl }}</a>
+                                            </div>
+                                        </div>
+
+                                        <!-- Indicateur de drag -->
+                                        <div class="ml-4 text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-200">
+                                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9h8M8 15h8" />
+                                            </svg>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+                                <button
+                                    type="button"
+                                    class="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 sm:col-start-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                                    :disabled="isSaving || isLoading"
+                                    @click="saveChanges"
+                                >
+                                    <div v-if="isSaving" class="flex items-center">
+                                        <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                                        Sauvegarde...
+                                    </div>
+                                    <span v-else>Sauvegarder</span>
+                                </button>
+                                <button
+                                    type="button"
+                                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 sm:col-start-1 sm:mt-0"
+                                    @click="closeModal"
+                                    :disabled="isSaving"
+                                >
+                                    Annuler
+                                </button>
+                            </div>
+                        </DialogPanel>
+                    </TransitionChild>
+                </div>
+            </div>
+        </Dialog>
+    </TransitionRoot>
+</template>
+
+<script setup>
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
+import { Cog6ToothIcon } from '@heroicons/vue/24/outline';
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+    isOpen: {
+        type: Boolean,
+        required: true
+    },
+    sources: {
+        type: Array,
+        default: () => []
+    },
+    isLoading: {
+        type: Boolean,
+        default: false
+    },
+    error: {
+        type: Object,
+        default: null
+    },
+    isSaving: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['close', 'save']);
+
+// Copie locale des sources pour le drag & drop
+const localSources = ref([]);
+
+// États pour le drag & drop
+const draggedIndex = ref(null);
+const dragOverIndex = ref(null);
+
+// État pour l'effet de clic
+const isPressed = ref(null);
+
+// Watcher pour mettre à jour la copie locale quand les props changent
+watch(
+    () => props.sources,
+    (newSources) => {
+        localSources.value = [...newSources];
+    },
+    { immediate: true, deep: true }
+);
+
+const closeModal = () => {
+    emit('close');
+};
+
+// Fonctions pour l'effet de clic
+const handleMouseDown = (index) => {
+    isPressed.value = index;
+};
+
+const handleMouseUp = () => {
+    isPressed.value = null;
+};
+
+// Fonctions pour le drag & drop
+const handleDragStart = (index, event) => {
+    draggedIndex.value = index;
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('text/html', event.target);
+};
+
+const handleDragOver = (index, event) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    dragOverIndex.value = index;
+};
+
+const handleDragLeave = () => {
+    dragOverIndex.value = null;
+};
+
+const handleDrop = (dropIndex, event) => {
+    event.preventDefault();
+
+    if (draggedIndex.value !== null && draggedIndex.value !== dropIndex) {
+        const sources = [...localSources.value];
+        const draggedItem = sources[draggedIndex.value];
+
+        // Supprimer l'élément de sa position actuelle
+        sources.splice(draggedIndex.value, 1);
+
+        // L'insérer à la nouvelle position
+        // Si on drop après l'élément original, on doit ajuster l'index
+        const insertIndex = draggedIndex.value < dropIndex ? dropIndex - 1 : dropIndex;
+        sources.splice(insertIndex, 0, draggedItem);
+
+        localSources.value = sources;
+    }
+
+    draggedIndex.value = null;
+    dragOverIndex.value = null;
+};
+
+const handleDragEnd = () => {
+    draggedIndex.value = null;
+    dragOverIndex.value = null;
+};
+
+const saveChanges = () => {
+    // Extraire seulement les IDs dans l'ordre actuel
+    const sourceIds = localSources.value.map(source => source.id);
+    emit('save', sourceIds);
+};
+</script>

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

@@ -0,0 +1,208 @@
+<template>
+    <div>
+        <div class="border-t border-gray-200 dark:border-gray-700">
+            <table class="w-full text-sm">
+                <thead>
+                    <tr class="bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                        <th class="w-10 px-4 py-3"></th>
+                        <th class="py-3 pr-4 text-left font-medium">Titre</th>
+                        <th class="py-3 pr-4 text-left font-medium w-44">Source préférée</th>
+                        <th class="py-3 pr-4 text-left font-medium w-44">Chapitres</th>
+                        <th class="py-3 px-4 text-right font-medium w-28">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+                    <tr
+                        v-for="manga in mangas"
+                        :key="manga.id"
+                        class="hover:bg-gray-50 dark:hover:bg-gray-700/40 transition-colors">
+
+                        <!-- Monitoring -->
+                        <td class="px-4 py-3 text-center">
+                            <button
+                                :title="manga.monitored ? 'Monitoring actif — cliquer pour désactiver' : 'Monitoring inactif — cliquer pour activer'"
+                                :class="manga.monitored
+                                    ? 'text-green-500 hover:text-green-600'
+                                    : 'text-gray-300 dark:text-gray-600 hover:text-gray-400 dark:hover:text-gray-500'"
+                                class="transition-colors"
+                                @click="doToggleMonitoring(manga)">
+                                <component
+                                    :is="manga.monitored ? BookmarkIcon : BookmarkSlashIcon"
+                                    class="w-4 h-4" />
+                            </button>
+                        </td>
+
+                        <!-- Titre -->
+                        <td class="py-3 pr-4">
+                            <RouterLink
+                                :to="{ name: 'manga-details', params: { id: manga.id } }"
+                                class="font-medium text-gray-900 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400 transition-colors">
+                                {{ manga.title }}
+                            </RouterLink>
+                        </td>
+
+                        <!-- Source préférée -->
+                        <td class="py-3 pr-4">
+                            <MangaPreferredSourceCell :manga-id="manga.id" />
+                        </td>
+
+                        <!-- Chapitres — barre de progression -->
+                        <td class="py-3 pr-4">
+                            <div v-if="manga.chaptersTotal > 0">
+                                <div class="flex items-center justify-between mb-1">
+                                    <span class="text-xs tabular-nums text-gray-500 dark:text-gray-400">
+                                        {{ manga.chaptersScraped }} / {{ manga.chaptersTotal }}
+                                    </span>
+                                    <span class="text-xs text-gray-400 dark:text-gray-500">
+                                        {{ progressPercent(manga) }}%
+                                    </span>
+                                </div>
+                                <div class="w-full bg-gray-100 dark:bg-gray-600 rounded-full h-1.5">
+                                    <div
+                                        class="h-1.5 rounded-full transition-all"
+                                        :class="progressPercent(manga) >= 100
+                                            ? 'bg-green-500'
+                                            : 'bg-blue-500'"
+                                        :style="{ width: progressPercent(manga) + '%' }" />
+                                </div>
+                            </div>
+                            <span v-else class="text-gray-400 dark:text-gray-600 text-xs">—</span>
+                        </td>
+
+                        <!-- Actions -->
+                        <td class="py-3 px-4">
+                            <div class="flex items-center justify-end gap-0.5">
+                                <button
+                                    class="p-1.5 rounded-md text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
+                                    title="Éditer"
+                                    @click="openEdit(manga)">
+                                    <PencilIcon class="w-4 h-4" />
+                                </button>
+                                <button
+                                    class="p-1.5 rounded-md text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
+                                    title="Sources préférées"
+                                    @click="openSources(manga)">
+                                    <Cog6ToothIcon class="w-4 h-4" />
+                                </button>
+                                <button
+                                    class="p-1.5 rounded-md transition-colors"
+                                    :class="refreshingId === manga.id
+                                        ? 'text-blue-400 cursor-not-allowed'
+                                        : 'text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600'"
+                                    title="Rafraîchir"
+                                    :disabled="refreshingId === manga.id"
+                                    @click="doRefresh(manga)">
+                                    <ArrowPathIcon
+                                        class="w-4 h-4"
+                                        :class="{ 'animate-spin': refreshingId === manga.id }" />
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <!-- Modales -->
+        <MangaEditModal
+            :is-open="isEditModalOpen"
+            :manga="selectedManga"
+            :is-saving="editIsLoading"
+            :error="editError"
+            @close="closeEditModal"
+            @save="handleSaveEdit" />
+
+        <MangaPreferredSourcesModal
+            :is-open="isSourcesModalOpen"
+            :sources="preferredSources"
+            :is-loading="sourcesIsLoading"
+            :error="sourcesError"
+            :is-saving="sourcesIsSaving"
+            @close="isSourcesModalOpen = false"
+            @save="handleSaveSources" />
+    </div>
+</template>
+
+<script setup>
+import { ArrowPathIcon, BookmarkIcon, BookmarkSlashIcon, Cog6ToothIcon, PencilIcon } from '@heroicons/vue/24/outline';
+import { computed, ref } from 'vue';
+import { RouterLink } from 'vue-router';
+import { useMangaEdit } from '../composables/useMangaEdit';
+import { useMangaMonitoring } from '../composables/useMangaMonitoring';
+import { useMangaPreferredSources } from '../composables/useMangaPreferredSources';
+import { useMangaRefresh } from '../composables/useMangaRefresh';
+import MangaEditModal from './MangaEditModal.vue';
+import MangaPreferredSourceCell from './MangaPreferredSourceCell.vue';
+import MangaPreferredSourcesModal from './MangaPreferredSourcesModal.vue';
+
+const props = defineProps({
+    mangas: {
+        type: Array,
+        required: true
+    }
+});
+
+function progressPercent(manga) {
+    if (!manga.chaptersTotal) return 0;
+    return Math.round((manga.chaptersScraped / manga.chaptersTotal) * 100);
+}
+
+// ── Monitoring ────────────────────────────────────────────
+const { toggleMonitoring } = useMangaMonitoring();
+
+async function doToggleMonitoring(manga) {
+    await toggleMonitoring(manga.id, !manga.monitored);
+    manga.monitored = !manga.monitored;
+}
+
+// ── Selected manga ────────────────────────────────────────
+const selectedManga = ref(null);
+const isSourcesModalOpen = ref(false);
+
+// ── Edit ──────────────────────────────────────────────────
+const { isEditModalOpen, openEditModal, closeEditModal, editManga, isLoading: editIsLoading, error: editError } = useMangaEdit();
+
+function openEdit(manga) {
+    selectedManga.value = manga;
+    openEditModal();
+}
+
+async function handleSaveEdit(data) {
+    if (!selectedManga.value) return;
+    await editManga(selectedManga.value.id, data);
+}
+
+// ── Sources préférées ─────────────────────────────────────
+const selectedMangaId = computed(() => selectedManga.value?.id ?? null);
+const {
+    sources: preferredSources,
+    isLoading: sourcesIsLoading,
+    error: sourcesError,
+    isSaving: sourcesIsSaving,
+    savePreferredSources
+} = useMangaPreferredSources(selectedMangaId);
+
+function openSources(manga) {
+    selectedManga.value = manga;
+    isSourcesModalOpen.value = true;
+}
+
+function handleSaveSources(sourceIds) {
+    savePreferredSources(sourceIds);
+    isSourcesModalOpen.value = false;
+}
+
+// ── Refresh ───────────────────────────────────────────────
+const { refreshMetadata } = useMangaRefresh();
+const refreshingId = ref(null);
+
+async function doRefresh(manga) {
+    if (refreshingId.value) return;
+    refreshingId.value = manga.id;
+    try {
+        await refreshMetadata(manga.id);
+    } finally {
+        refreshingId.value = null;
+    }
+}
+</script>

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

@@ -0,0 +1,178 @@
+<template>
+    <div class="bg-white dark:bg-gray-800 rounded-sm shadow mb-2">
+        <!-- En-tête du volume -->
+        <div class="relative bg-white dark:bg-gray-800 p-3 sm:p-4 rounded-t-sm">
+            <!-- Layout mobile/desktop -->
+            <div class="flex items-center justify-between">
+                <!-- Partie gauche -->
+                <div class="flex items-center space-x-1 sm:space-x-4 flex-1 min-w-0">
+                    <BookmarkIcon class="h-6 w-6 sm:h-8 sm:w-8 text-gray-500 dark:text-gray-400 flex-shrink-0" />
+                    <h2 class="text-lg sm:text-xl font-semibold w-20 sm:w-28 flex-shrink-0 dark:text-gray-100">Vol {{ String(volume.number).padStart(2, '0') }}</h2>
+                    <div class="flex items-center">
+                        <span
+                            :class="[
+                                'px-2 py-1 text-xs sm:text-sm rounded text-center text-white min-w-[3rem] sm:min-w-[4rem]',
+                                {
+                                    'bg-red-500': volume.downloadedChapter === 0,
+                                    'bg-yellow-500':
+                                        volume.downloadedChapter < volume.totalChapter && volume.downloadedChapter > 0,
+                                    'bg-green-500': volume.downloadedChapter === volume.totalChapter
+                                }
+                            ]">
+                            {{ volume.downloadedChapter }}/{{ volume.totalChapter }}
+                        </span>
+                    </div>
+                </div>
+
+                <!-- Actions du volume -->
+                <div class="flex items-center space-x-1 sm:space-x-2">
+                    <button
+                        class="w-8 sm:w-10 h-8 sm:h-10 flex items-center justify-center"
+                        @click="handleSearch"
+                        :class="{
+                            'text-yellow-500 cursor-wait': isSearching,
+                            'text-gray-500 hover:text-green-500': !isSearching
+                        }">
+                        <MagnifyingGlassIcon class="h-5 w-5 sm:h-6 sm:w-6" />
+                    </button>
+                    <button
+                        class="w-8 sm:w-10 h-8 sm:h-10 flex items-center justify-center"
+                        @click="handleDownload"
+                        :class="{
+                            'text-yellow-500 cursor-wait': isDownloading,
+                            'text-gray-500 hover:text-green-500': !isDownloading
+                        }"
+                        :disabled="isDownloading">
+                        <ArrowDownTrayIcon class="h-5 w-5 sm:h-6 sm:w-6" />
+                    </button>
+                </div>
+            </div>
+
+            <!-- Bouton toggle centré -->
+            <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                <button
+                    @click="toggleVolume"
+                    class="w-8 sm:w-10 h-8 sm:h-10 flex items-center justify-center">
+                    <component
+                        :is="isOpen ? ChevronUpIcon : ChevronDownIcon"
+                        class="h-5 w-5 sm:h-6 sm:w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
+                    />
+                </button>
+            </div>
+        </div>
+
+        <!-- Liste des chapitres -->
+        <MangaChapterList v-show="isOpen" :chapters="volume.chapters" :manga-slug="mangaSlug" :manga-id="mangaId" />
+
+        <!-- Chevron de fermeture -->
+        <div v-show="isOpen" class="flex justify-center p-2 bg-white dark:bg-gray-800 rounded-b-sm">
+            <button @click="toggleVolume" class="w-8 h-8 flex items-center justify-center">
+                <ChevronUpIcon
+                    class="h-5 w-5 sm:h-6 sm:w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
+                />
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import {
+    ArrowDownTrayIcon,
+    BookmarkIcon,
+    ChevronDownIcon,
+    ChevronUpIcon,
+    MagnifyingGlassIcon
+} from '@heroicons/vue/24/outline';
+import { ref, watch } from 'vue';
+import { useMangaStore } from '../../application/store/mangaStore';
+import MangaChapterList from './MangaChapterList.vue';
+
+    const props = defineProps({
+        volume: {
+            type: Object,
+            required: true
+        },
+        mangaSlug: {
+            type: String,
+            required: true
+        },
+        mangaId: {
+            type: Number,
+            required: true
+        },
+        isOpen: {
+            type: Boolean,
+            default: false
+        }
+    });
+
+    const emit = defineEmits(['toggle']);
+
+    const store = useMangaStore();
+    const isOpen = ref(props.isOpen);
+    const isSearching = ref(false);
+    const isDownloading = ref(false);
+
+    // Synchroniser l'état local avec la prop
+    watch(() => props.isOpen, (newValue) => {
+        isOpen.value = newValue;
+    });
+
+    const toggleVolume = () => {
+        isOpen.value = !isOpen.value;
+        emit('toggle', props.volume.number);
+    };
+
+    const handleSearch = async () => {
+        if (isSearching.value) return; // Éviter les clicks multiples
+
+        try {
+            isSearching.value = true;
+            console.log(
+                `Recherche du volume ${props.volume.number} - Lancement du scraping de ${props.volume.chapters.length} chapitres`
+            );
+
+            // Récupérer tous les chapitres non disponibles du volume
+            const chaptersToSearch = props.volume.chapters
+                .filter(chapter => !chapter.isAvailable)
+                .map(chapter => chapter.id);
+
+            if (chaptersToSearch.length === 0) {
+                console.log('Tous les chapitres sont déjà disponibles !');
+                isSearching.value = false;
+                return;
+            }
+
+            console.log(`Chapitres à scraper: ${chaptersToSearch.length}`);
+
+            // Lancer le scraping de chaque chapitre non disponible en séquentiel
+            for (const chapterId of chaptersToSearch) {
+                console.log(`Scraping du chapitre ${chapterId}...`);
+                await store.searchChapter(chapterId);
+                // Petite pause entre chaque requête pour éviter de surcharger le serveur
+                await new Promise(resolve => setTimeout(resolve, 500));
+            }
+
+            console.log(`Scraping des chapitres du volume ${props.volume.number} terminé`);
+        } catch (error) {
+            console.error(`Erreur lors du scraping du volume ${props.volume.number}:`, error);
+        } finally {
+            isSearching.value = false;
+        }
+    };
+
+    const handleDownload = async () => {
+        try {
+            console.log(`MangaVolume: Téléchargement du volume ${props.volume.number} (Manga ID: ${props.mangaId})`);
+            // Montrer l'indicateur de chargement
+            isDownloading.value = true;
+
+            await store.downloadVolume(props.mangaId, props.volume.number);
+        } catch (error) {
+            console.error('Erreur lors du téléchargement du volume:', error);
+        } finally {
+            // Arrêter l'indicateur de chargement
+            isDownloading.value = false;
+        }
+    };
+</script>

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

@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <MangaVolume
+            v-for="(volume, index) in volumes"
+            :key="volume.number"
+            :volume="volume"
+            :mangaSlug="mangaSlug"
+            :mangaId="mangaId"
+            :isOpen="expandedVolumes.has(volume.number)"
+            @toggle="handleVolumeToggle" />
+    </div>
+</template>
+
+<script setup>
+    import { ref, watch } from 'vue';
+import MangaVolume from './MangaVolume.vue';
+
+    const props = defineProps({
+        volumes: {
+            type: Array,
+            required: true
+        },
+        mangaSlug: {
+            type: String,
+            required: true
+        },
+        mangaId: {
+            type: Number,
+            required: true
+        },
+        expandAll: {
+            type: Boolean,
+            default: false
+        }
+    });
+
+    const emit = defineEmits(['update:expandAll']);
+
+    // Set pour stocker les numéros de volumes ouverts
+    const expandedVolumes = ref(new Set());
+
+    // Initialiser avec le premier volume ouvert par défaut
+    watch(() => props.volumes, (newVolumes) => {
+        if (newVolumes.length > 0 && expandedVolumes.value.size === 0) {
+            // Ouvrir le premier volume (volume 00) par défaut
+            expandedVolumes.value.add(newVolumes[0].number);
+        }
+    }, { immediate: true });
+
+    // Gérer l'expansion de tous les volumes
+    watch(() => props.expandAll, (shouldExpand) => {
+        if (shouldExpand) {
+            // Ouvrir tous les volumes
+            props.volumes.forEach(volume => {
+                expandedVolumes.value.add(volume.number);
+            });
+        } else {
+            // Fermer tous les volumes (y compris le volume 00)
+            expandedVolumes.value.clear();
+        }
+    });
+
+    const handleVolumeToggle = (volumeNumber) => {
+        if (expandedVolumes.value.has(volumeNumber)) {
+            expandedVolumes.value.delete(volumeNumber);
+        } else {
+            expandedVolumes.value.add(volumeNumber);
+        }
+
+        // Émettre l'état d'expansion
+        const allExpanded = props.volumes.length > 0 &&
+                           props.volumes.every(volume => expandedVolumes.value.has(volume.number));
+        emit('update:expandAll', allExpanded);
+    };
+
+    // Méthode publique pour contrôler l'expansion
+    const expandAllVolumes = () => {
+        props.volumes.forEach(volume => {
+            expandedVolumes.value.add(volume.number);
+        });
+        emit('update:expandAll', true);
+    };
+
+    const collapseAllVolumes = () => {
+        expandedVolumes.value.clear();
+        // Ne plus garder le premier volume ouvert, tous les volumes sont fermés
+        emit('update:expandAll', false);
+    };
+
+    // Exposer les méthodes pour le composant parent
+    defineExpose({
+        expandAllVolumes,
+        collapseAllVolumes
+    });
+</script>

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

@@ -0,0 +1,134 @@
+<template>
+    <!-- Composant invisible qui écoute les événements Mercure -->
+</template>
+
+<script setup>
+    import { ref, onMounted, onBeforeUnmount, watch, inject } from 'vue';
+    import { useMangaStore } from '../../application/store/mangaStore';
+    import { useQueryClient } from '@tanstack/vue-query';
+
+    const props = defineProps({
+        mangaId: {
+            type: String,
+            required: true
+        }
+    });
+
+    const store = useMangaStore();
+    const eventSource = ref(null);
+    // On récupère le client de requête pour invalider le cache
+    const queryClient = useQueryClient();
+
+    const setupMercureEventSource = () => {
+        if (eventSource.value) {
+            eventSource.value.close();
+        }
+
+        // Créer les topics à écouter
+        const topics = [`manga/${props.mangaId}/chapters`, 'scraping/status'];
+
+        // Construire l'URL du hub Mercure avec les topics
+        const mercureHubUrl = new URL('/.well-known/mercure', window.location.origin);
+        topics.forEach(topic => {
+            mercureHubUrl.searchParams.append('topic', topic);
+        });
+
+        console.log(`MercureListener: Abonnement aux topics pour manga ${props.mangaId}`);
+        console.log(`MercureListener: URL Mercure - ${mercureHubUrl.toString()}`);
+
+        // Créer la source d'événements
+        eventSource.value = new EventSource(mercureHubUrl, { withCredentials: true });
+
+        // Définir les gestionnaires d'événements
+        eventSource.value.onmessage = event => {
+            try {
+                console.log('MercureListener: Événement reçu', event.data);
+                const data = JSON.parse(event.data);
+                handleMercureEvent(data);
+            } catch (error) {
+                console.error("Erreur lors du traitement de l'événement Mercure:", error);
+            }
+        };
+
+        eventSource.value.onerror = error => {
+            console.error('Erreur de connexion à Mercure:', error);
+            // Tenter de reconnecter après un délai
+            setTimeout(() => {
+                if (eventSource.value) {
+                    setupMercureEventSource();
+                }
+            }, 5000);
+        };
+    };
+
+    const handleMercureEvent = data => {
+        if (!data || !data.type) {
+            console.warn('MercureListener: Événement sans type reçu', data);
+            return;
+        }
+
+        switch (data.type) {
+            case 'chapter.scraped':
+                console.log(`MercureListener: Chapitre ${data.chapterNumber} scrappé avec succès!`, data);
+
+                // Vérifier que l'ID du chapitre est présent et au bon format
+                if (!data.chapterId) {
+                    console.error("MercureListener: ID du chapitre manquant dans l'événement", data);
+                    return;
+                }
+
+                // Mettre à jour l'état du chapitre dans le store
+                try {
+                    // Mettre à jour le store Pinia
+                    store.updateChapterAvailability(data.chapterId, true);
+                    console.log(
+                        `MercureListener: Chapitre ${data.chapterNumber} (ID: ${data.chapterId}) marqué comme disponible`
+                    );
+
+                    // Invalider le cache des requêtes pour forcer un rechargement frais
+                    console.log(`MercureListener: Invalidation du cache pour les chapitres du manga ${props.mangaId}`);
+                    queryClient.invalidateQueries(['manga', ref(props.mangaId), 'chapters']);
+
+                    // Force le rechargement des chapitres via le store
+                    setTimeout(() => {
+                        console.log('MercureListener: Rechargement forcé des chapitres via le store');
+                        store.loadChapters(props.mangaId);
+                    }, 100);
+                } catch (error) {
+                    console.error('MercureListener: Erreur lors de la mise à jour du chapitre', error);
+                }
+                break;
+
+            case 'chapter.scraping.failed':
+                console.error(`MercureListener: Échec du scraping du chapitre ${data.chapterNumber}:`, data.reason);
+                break;
+
+            default:
+                console.log('MercureListener: Événement Mercure non géré:', data);
+        }
+    };
+
+    watch(
+        () => props.mangaId,
+        (newMangaId, oldMangaId) => {
+            console.log(`MercureListener: MangaId changé de ${oldMangaId} à ${newMangaId}`);
+            if (newMangaId) {
+                setupMercureEventSource();
+            } else if (eventSource.value) {
+                eventSource.value.close();
+                eventSource.value = null;
+            }
+        }
+    );
+
+    onMounted(() => {
+        setupMercureEventSource();
+    });
+
+    onBeforeUnmount(() => {
+        if (eventSource.value) {
+            eventSource.value.close();
+            eventSource.value = null;
+        }
+    });
+</script>

assets/vue/app/domain/manga/presentation/composables/useMangaChapters.js

@@ -0,0 +1,37 @@
+import { computed } from 'vue';
+import { useQuery } from '@tanstack/vue-query';
+import { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';
+
+export function useMangaChapters(mangaId) {
+    const mangaRepository = new ApiMangaRepository();
+
+    const query = useQuery({
+        queryKey: ['manga', mangaId, 'chapters'],
+        queryFn: async () => {
+            if (!mangaId.value) {
+                return Promise.resolve([]); // Retourne un tableau vide si pas d'ID
+            }
+
+            console.log(`useMangaChapters: Chargement des chapitres pour le manga ${mangaId.value}`);
+            const response = await mangaRepository.getChapters(mangaId.value);
+
+            // Log pour déboguer
+            console.log(`useMangaChapters: ${response.items?.length || 0} chapitres chargés`);
+
+            // Assure de toujours retourner un tableau
+            return Array.isArray(response) ? response : response?.items ?? [];
+        },
+        // Refresh toutes les 30 secondes en arrière-plan
+        refetchInterval: 30000,
+        // S'assurer que si le composant est visible à nouveau, on récupère les données fraîches
+        refetchOnWindowFocus: true,
+        // Query activée uniquement si mangaId est défini
+        enabled: computed(() => !!mangaId.value),
+        // Options pour conserver les données entre les requêtes
+        staleTime: 60000, // Considère les données comme "périmées" après 1 minute
+        cacheTime: 5 * 60 * 1000 // Garde les données en cache pendant 5 minutes
+    });
+
+    // Retourne le résultat de useQuery (contenant data, isLoading, etc.)
+    return query;
+}

assets/vue/app/domain/manga/presentation/composables/useMangaDelete.js

@@ -0,0 +1,49 @@
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import { ref } from 'vue';
+import { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';
+
+export function useMangaDelete() {
+    const mangaRepository = new ApiMangaRepository();
+    const queryClient = useQueryClient();
+    const isDeleteModalOpen = ref(false);
+
+    const deleteMutation = useMutation({
+        mutationFn: ({ mangaId }) => {
+            return mangaRepository.deleteManga(mangaId);
+        },
+        onSuccess: (data, variables) => {
+            // Invalider et refetch les listes de mangas
+            queryClient.invalidateQueries({ queryKey: ['mangas'] });
+            queryClient.invalidateQueries({ queryKey: ['manga-search'] });
+        }
+    });
+
+    const openDeleteModal = () => {
+        isDeleteModalOpen.value = true;
+    };
+
+    const closeDeleteModal = () => {
+        isDeleteModalOpen.value = false;
+    };
+
+    const deleteManga = async (mangaId) => {
+        try {
+            await deleteMutation.mutateAsync({ mangaId });
+            closeDeleteModal();
+            return true;
+        } catch (error) {
+            console.error('Erreur lors de la suppression du manga:', error);
+            throw error;
+        }
+    };
+
+    return {
+        isDeleteModalOpen,
+        openDeleteModal,
+        closeDeleteModal,
+        deleteManga,
+        isLoading: deleteMutation.isPending,
+        error: deleteMutation.error,
+        isSuccess: deleteMutation.isSuccess
+    };
+}

assets/vue/app/domain/manga/presentation/composables/useMangaDetails.js

@@ -0,0 +1,31 @@
+import { computed } from 'vue';
+import { useQuery } from '@tanstack/vue-query';
+import { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';
+
+// Accepte un ID de manga (peut être une ref, un computed ref, ou une valeur simple)
+export function useMangaDetails(mangaId) {
+    const mangaRepository = new ApiMangaRepository();
+
+    // Assure que mangaId est une ref ou une computed pour la réactivité de la queryKey
+    // Si ce n'est pas déjà le cas, mais généralement on passera une computed( () => route.params.id )
+    // const mangaIdRef = computed(() => unref(mangaId)); // unref est utile si on accepte des valeurs simples aussi
+
+    const query = useQuery({
+        // La queryKey doit être réactive à mangaId
+        queryKey: ['manga', mangaId], // mangaId est déjà une computed ref, donc c'est bon
+        queryFn: () => {
+            // Vérifier que l'ID a une valeur avant d'appeler l'API
+            if (!mangaId.value) {
+                // Retourner null ou undefined si pas d'ID, pour éviter un appel API invalide
+                // TanStack Query gère aussi l'option 'enabled' pour cela
+                return Promise.resolve(null); // ou throw new Error("ID manquant");
+            }
+            return mangaRepository.getMangaById(mangaId.value);
+        },
+        // Activer la requête seulement si mangaId a une valeur truthy
+        enabled: computed(() => !!mangaId.value)
+    });
+
+    // Retourne tous les états et données fournis par useQuery
+    return query;
+}

assets/vue/app/domain/manga/presentation/composables/useMangaEdit.js

@@ -0,0 +1,48 @@
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import { ref } from 'vue';
+import { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';
+
+export function useMangaEdit() {
+    const mangaRepository = new ApiMangaRepository();
+    const queryClient = useQueryClient();
+    const isEditModalOpen = ref(false);
+
+    const editMutation = useMutation({
+        mutationFn: ({ mangaId, updateData }) => {
+            return mangaRepository.editManga(mangaId, updateData);
+        },
+        onSuccess: (data, variables) => {
+            // Invalider et refetch les données du manga
+            queryClient.invalidateQueries({ queryKey: ['manga', variables.mangaId] });
+            queryClient.invalidateQueries({ queryKey: ['mangas'] });
+        }
+    });
+
+    const openEditModal = () => {
+        isEditModalOpen.value = true;
+    };
+
+    const closeEditModal = () => {
+        isEditModalOpen.value = false;
+    };
+
+    const editManga = async (mangaId, updateData) => {
+        try {
+            await editMutation.mutateAsync({ mangaId, updateData });
+            closeEditModal();
+        } catch (error) {
+            console.error('Erreur lors de l\'édition du manga:', error);
+            throw error;
+        }
+    };
+
+    return {
+        isEditModalOpen,
+        openEditModal,
+        closeEditModal,
+        editManga,
+        isLoading: editMutation.isPending,
+        error: editMutation.error,
+        isSuccess: editMutation.isSuccess
+    };
+}

assets/vue/app/domain/manga/presentation/composables/useMangaMonitoring.js

@@ -0,0 +1,67 @@
+import { ref } from 'vue';
+import { useNotifications } from '../../../../shared/composables/useNotifications';
+import { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';
+
+const mangaRepository = new ApiMangaRepository();
+
+export function useMangaMonitoring() {
+    const { showSuccess, showError } = useNotifications();
+
+    const isToggling = ref(false);
+    const toggleError = ref(null);
+
+    const toggleMonitoring = async (mangaId, enabled) => {
+        if (isToggling.value || !mangaId) return;
+
+        isToggling.value = true;
+        toggleError.value = null;
+
+        try {
+            console.log(`${enabled ? 'Activation' : 'Désactivation'} du monitoring pour le manga ${mangaId}`);
+
+            await mangaRepository.toggleMonitoring(mangaId, enabled);
+
+            const message = enabled
+                ? 'Monitoring activé avec succès. Vous recevrez les nouveaux chapitres automatiquement.'
+                : 'Monitoring désactivé avec succès. Les nouveaux chapitres ne seront plus téléchargés automatiquement.';
+
+            showSuccess(message);
+
+            console.log(`Monitoring ${enabled ? 'activé' : 'désactivé'} avec succès`);
+            return true;
+        } catch (error) {
+            console.error('Erreur lors du changement de monitoring:', error);
+            toggleError.value = error.message || 'Erreur lors du changement de monitoring';
+
+            const errorMessage = enabled
+                ? `Erreur lors de l'activation du monitoring: ${error.message || 'Une erreur inattendue est survenue'}`
+                : `Erreur lors de la désactivation du monitoring: ${error.message || 'Une erreur inattendue est survenue'}`;
+
+            showError(errorMessage);
+            throw error;
+        } finally {
+            isToggling.value = false;
+        }
+    };
+
+    const enableMonitoring = async (mangaId) => {
+        return await toggleMonitoring(mangaId, true);
+    };
+
+    const disableMonitoring = async (mangaId) => {
+        return await toggleMonitoring(mangaId, false);
+    };
+
+    const clearError = () => {
+        toggleError.value = null;
+    };
+
+    return {
+        isToggling,
+        toggleError,
+        toggleMonitoring,
+        enableMonitoring,
+        disableMonitoring,
+        clearError
+    };
+}

assets/vue/app/domain/manga/presentation/composables/useMangaPreferredSources.js

@@ -0,0 +1,52 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
+import { computed } from 'vue';
+import { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';
+
+export function useMangaPreferredSources(mangaId) {
+    const mangaRepository = new ApiMangaRepository();
+    const queryClient = useQueryClient();
+
+    // Query pour récupérer les sources préférées
+    const preferredSourcesQuery = useQuery({
+        queryKey: ['manga', mangaId, 'preferred-sources'],
+        queryFn: () => {
+            if (!mangaId.value) {
+                return Promise.resolve(null);
+            }
+            return mangaRepository.getPreferredSources(mangaId.value);
+        },
+        enabled: computed(() => !!mangaId.value)
+    });
+
+    // Mutation pour sauvegarder les sources préférées
+    const setPreferredSourcesMutation = useMutation({
+        mutationFn: ({ sourceIds }) => {
+            return mangaRepository.setPreferredSources(mangaId.value, sourceIds);
+        },
+        onSuccess: () => {
+            // Invalider le cache pour refaire la requête de récupération
+            queryClient.invalidateQueries({
+                queryKey: ['manga', mangaId.value, 'preferred-sources']
+            });
+        }
+    });
+
+    const sources = computed(() => preferredSourcesQuery.data.value?.sources || []);
+    const hasPreferredSources = computed(() => preferredSourcesQuery.data.value?.hasPreferredSources || false);
+    const isLoading = computed(() => preferredSourcesQuery.isLoading.value);
+    const error = computed(() => preferredSourcesQuery.error.value);
+    const isSaving = computed(() => setPreferredSourcesMutation.isPending.value);
+
+    const savePreferredSources = (sourceIds) => {
+        return setPreferredSourcesMutation.mutate({ sourceIds });
+    };
+
+    return {
+        sources,
+        hasPreferredSources,
+        isLoading,
+        error,
+        isSaving,
+        savePreferredSources
+    };
+}

assets/vue/app/domain/manga/presentation/composables/useMangaRefresh.js

@@ -0,0 +1,48 @@
+import { ref } from 'vue';
+import { useNotifications } from '../../../../shared/composables/useNotifications';
+import { useMangaStore } from '../../application/store/mangaStore';
+
+export function useMangaRefresh() {
+    const mangaStore = useMangaStore();
+    const { showSuccess, showError } = useNotifications();
+
+    const isRefreshing = ref(false);
+    const refreshError = ref(null);
+
+    const refreshMetadata = async (mangaId) => {
+        if (isRefreshing.value || !mangaId) return;
+
+        isRefreshing.value = true;
+        refreshError.value = null;
+
+        try {
+            console.log(`Début du refresh des métadonnées pour le manga ${mangaId}`);
+
+            // Appel à l'endpoint de refresh des chapitres
+            await mangaStore.refreshMangaChapters(mangaId);
+
+            showSuccess('Refresh des métadonnées lancé avec succès. Les nouveaux chapitres apparaîtront sous peu.');
+
+            console.log('Refresh des métadonnées déclenché avec succès');
+            return true;
+        } catch (error) {
+            console.error('Erreur lors du refresh des métadonnées:', error);
+            refreshError.value = error.message || 'Erreur lors du refresh des métadonnées';
+            showError(`Erreur lors du refresh: ${error.message || 'Une erreur inattendue est survenue'}`);
+            throw error;
+        } finally {
+            isRefreshing.value = false;
+        }
+    };
+
+    const clearError = () => {
+        refreshError.value = null;
+    };
+
+    return {
+        isRefreshing,
+        refreshError,
+        refreshMetadata,
+        clearError
+    };
+}

assets/vue/app/domain/manga/presentation/composables/useMangaVolumes.js

@@ -0,0 +1,78 @@
+import { computed, watch } from 'vue';
+import { useMangaStore } from '../../application/store/mangaStore';
+import { useMangaChapters } from './useMangaChapters'; // Importe le composable des chapitres
+
+export function useMangaVolumes(mangaId) {
+    // Récupération du store pour avoir accès aux chapitres mis à jour en temps réel
+    const mangaStore = useMangaStore();
+
+    // Utilise le composable des chapitres pour récupérer les données brutes et les états
+    const { data: rawChaptersData, isLoading, isFetching, error, status, refetch } = useMangaChapters(mangaId);
+
+    // Fonction pour forcer le rechargement des données
+    const refresh = () => {
+        console.log('useMangaVolumes: Rechargement forcé des chapitres');
+        refetch();
+    };
+
+    // Surveiller les changements dans le store pour les chapitres du manga actuel
+    watch(
+        () => mangaStore.mangaChapters[mangaId.value],
+        () => {
+            console.log('useMangaVolumes: Changement détecté dans les chapitres du store');
+            refresh();
+        },
+        { deep: true }
+    );
+
+    // Calcule les volumes à partir des données des chapitres
+    const volumes = computed(() => {
+        console.log('useMangaVolumes: Recalcul des volumes');
+        const chaptersArray = rawChaptersData.value || []; // Utilise la data retournée par useMangaChapters
+        if (chaptersArray.length === 0) return [];
+
+        const volumeMap = new Map();
+        chaptersArray.forEach(chapter => {
+            const volumeNumber = chapter.volume || '00';
+            if (!volumeMap.has(volumeNumber)) {
+                volumeMap.set(volumeNumber, {
+                    number: volumeNumber,
+                    downloadedChapter: 0,
+                    totalChapter: 0,
+                    chapters: []
+                });
+            }
+            const volumeEntry = volumeMap.get(volumeNumber);
+            volumeEntry.chapters.push({
+                ...chapter,
+                isAvailable: Boolean(chapter.isAvailable)
+            });
+            volumeEntry.totalChapter++;
+            if (chapter.isAvailable) {
+                volumeEntry.downloadedChapter++;
+            }
+        });
+
+        return Array.from(volumeMap.values()).sort((a, b) => {
+            // Cas spécial pour le volume 00, qui doit apparaître en premier
+            if (a.number === '00') return -1;
+            if (b.number === '00') return 1;
+
+            // Pour tous les autres volumes, tri décroissant
+            const numA = Number(a.number);
+            const numB = Number(b.number);
+            return numB - numA;
+        });
+    });
+
+    // Retourne les volumes calculés et propage les états pertinents de useMangaChapters
+    return {
+        volumes, // Les données transformées
+        isLoading, // L'état de chargement initial des chapitres
+        isFetching, // L'état de rafraîchissement des chapitres
+        error, // L'erreur potentielle lors du fetch des chapitres
+        status, // L'état global ('pending', 'error', 'success')
+        refresh
+        // On pourrait aussi retourner rawChaptersData si nécessaire ailleurs
+    };
+}

assets/vue/app/domain/manga/presentation/pages/AddManga.vue

@@ -0,0 +1,234 @@
+<template>
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
+
+        <div class="overflow-y-auto flex-1">
+            <div class="px-6 py-8">
+
+                <!-- Recherche -->
+                <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">Recherche</h2>
+                    <input
+                        type="text"
+                        v-model="searchQuery"
+                        @keyup.enter="performSearch"
+                        placeholder="Rechercher un manga..."
+                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" />
+                </section>
+
+                <!-- État de chargement -->
+                <section v-if="loading" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-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">Recherche en cours...</span>
+                    </div>
+                </section>
+
+                <!-- Message d'erreur -->
+                <section v-if="error" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+                    <p class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
+                </section>
+
+                <!-- Résultats -->
+                <section v-if="searchResults.length > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-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">Résultats</h2>
+                        <span class="text-xs text-gray-500 dark:text-gray-400">{{ searchResults.length }} manga(s)</span>
+                    </div>
+                    <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+                        <div
+                            v-for="manga in searchResults"
+                            :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>
+
+                <!-- Aucun résultat -->
+                <section v-else-if="hasSearched && !loading" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+                    <p class="text-sm text-gray-500 dark:text-gray-400 text-center">Aucun résultat trouvé</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, MagnifyingGlassIcon } from '@heroicons/vue/24/outline';
+import { storeToRefs } from 'pinia';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+import { useMangaStore } from '../../application/store/mangaStore';
+
+const router = useRouter();
+const route = useRoute();
+const mangaStore = useMangaStore();
+
+const searchQuery = ref('');
+const hasSearched = ref(false);
+const isModalOpen = ref(false);
+const selectedManga = ref(null);
+
+const { searchResults, loadingSearch: loading, searchError: error, addingManga: adding } = storeToRefs(mangaStore);
+
+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'label', text: 'Ajouter un manga', class: 'text-sm font-medium' },
+    ],
+    rightSection: [
+        {
+            type: 'button',
+            icon: MagnifyingGlassIcon,
+            label: 'Rechercher',
+            onClick: performSearch,
+            disabled: !searchQuery.value.trim() || loading.value,
+        },
+    ],
+}));
+
+let debounceTimer = null;
+watch(searchQuery, newVal => {
+    clearTimeout(debounceTimer);
+    if (newVal.trim().length > 3) {
+        debounceTimer = setTimeout(performSearch, 500);
+    }
+});
+
+onMounted(() => {
+    const queryParam = route.query.q;
+    if (queryParam) {
+        searchQuery.value = queryParam;
+        performSearch();
+    }
+});
+
+onBeforeUnmount(() => {
+    clearTimeout(debounceTimer);
+    searchQuery.value = '';
+    mangaStore.clearSearchResults();
+});
+
+const performSearch = async () => {
+    if (!searchQuery.value.trim()) return;
+    try {
+        await mangaStore.searchMangaDex(searchQuery.value);
+        hasSearched.value = true;
+    } catch (e) {
+        console.error('Erreur de recherche:', e);
+    }
+};
+
+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>

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>

assets/vue/app/domain/manga/presentation/pages/HomePage.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
+        <div class="overflow-y-auto flex-1">
+        <div class="w-full">
+            <MangaGrid v-if="viewMode === 'grid'" :mangas="pagedItems" />
+            <MangaOverview
+                v-else-if="viewMode === 'list'"
+                :mangas="pagedItems"
+                @manga-click="handleMangaClick" />
+            <MangaTable v-else-if="viewMode === 'table'" :mangas="pagedItems" />
+            <Pagination
+                v-if="totalPages > 1"
+                :current-page="currentPage"
+                :total-pages="totalPages"
+                :total="sortedCollection.length"
+                :limit="prefs.itemsPerPage"
+                :has-next-page="currentPage < totalPages"
+                :has-previous-page="currentPage > 1"
+                @page-change="currentPage = $event" />
+            <div
+                v-if="isBackgroundLoading"
+                class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg">
+                Mise à jour en cours...
+            </div>
+        </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import {
+    ArrowPathIcon,
+    ArrowsUpDownIcon,
+    Cog6ToothIcon,
+    EyeIcon,
+    FunnelIcon,
+    MagnifyingGlassIcon
+} from '@heroicons/vue/24/outline';
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useUserPreferencesStore } from '../../../../domain/setting/application/store/userPreferencesStore';
+import Pagination from '../../../../shared/components/ui/Pagination.vue';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+import { useMangaStore } from '../../application/store/mangaStore';
+import MangaGrid from '../components/MangaGrid.vue';
+import MangaOverview from '../components/MangaOverview.vue';
+import MangaTable from '../components/MangaTable.vue';
+
+    const router = useRouter();
+    const mangaStore = useMangaStore();
+    const prefs = useUserPreferencesStore();
+
+    const {
+        collection,
+        loadingCollection: loading,
+        errorCollection: error,
+        isBackgroundLoadingCollection: isBackgroundLoading
+    } = storeToRefs(mangaStore);
+
+    const viewMode = ref(prefs.defaultView);
+    const currentPage = ref(1);
+
+    onMounted(() => {
+        mangaStore.loadCollection();
+    });
+
+    const handleMangaClick = manga => {
+        router.push({ name: 'manga-details', params: { id: manga.id } });
+    };
+
+    const sortedCollection = computed(() => {
+        const items = [...(collection.value?.items || [])];
+        if (prefs.sortBy === 'title') {
+            items.sort((a, b) => a.title.localeCompare(b.title));
+        } else if (prefs.sortBy === 'addedAt') {
+            items.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+        }
+        return items;
+    });
+
+    const pagedItems = computed(() => {
+        const start = (currentPage.value - 1) * prefs.itemsPerPage;
+        return sortedCollection.value.slice(start, start + prefs.itemsPerPage);
+    });
+
+    const totalPages = computed(() => Math.ceil(sortedCollection.value.length / prefs.itemsPerPage));
+
+    watch(() => prefs.itemsPerPage, () => {
+        currentPage.value = 1;
+    });
+
+    const toolbarConfig = {
+        leftSection: [
+            {
+                icon: ArrowPathIcon,
+                label: 'Refresh',
+                type: 'button',
+                onClick: () => mangaStore.refreshCollectionInBackground(),
+                active: isBackgroundLoading.value
+            },
+            { icon: MagnifyingGlassIcon, label: 'Search', type: 'button', onClick: () => {} }
+        ],
+        rightSection: [
+            { icon: Cog6ToothIcon, type: 'button', onClick: () => {} },
+            {
+                icon: EyeIcon,
+                type: 'dropdown',
+                label: 'View',
+                items: [
+                    { label: 'Overview', onClick: () => { viewMode.value = 'list'; prefs.setDefaultView('list'); } },
+                    { label: 'Grid',     onClick: () => { viewMode.value = 'grid'; prefs.setDefaultView('grid'); } },
+                    { label: 'Table',    onClick: () => { viewMode.value = 'table'; prefs.setDefaultView('table'); } }
+                ]
+            },
+            {
+                icon: ArrowsUpDownIcon,
+                type: 'dropdown',
+                label: 'Sort',
+                items: [
+                    { label: 'Title', onClick: () => prefs.setSortBy('title') },
+                    { label: "Date d'ajout", onClick: () => prefs.setSortBy('addedAt') },
+                    { label: 'Progression', onClick: () => prefs.setSortBy('progress') }
+                ]
+            },
+            {
+                icon: FunnelIcon,
+                type: 'dropdown',
+                label: 'Filter',
+                items: [
+                    { label: 'All', onClick: () => {} },
+                    { label: 'Completed', onClick: () => {} },
+                    { label: 'In Progress', onClick: () => {} }
+                ]
+            }
+        ]
+    };
+</script>

assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue

@@ -0,0 +1,405 @@
+<template>
+    <div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
+        <!-- Notifications Toast -->
+        <NotificationToast />
+
+        <Toolbar v-if="currentManga" :config="toolbarConfig" />
+
+        <div class="overflow-y-auto flex-1">
+
+        <div v-if="errorDetails" class="bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded mx-4 mt-4">
+            {{ errorDetails.message || 'Une erreur est survenue lors du chargement des détails.' }}
+        </div>
+
+        <div v-else-if="currentManga" class="relative">
+            <!-- Composant invisible qui écoute les mises à jour Mercure -->
+            <MercureListener :manga-id="String(mangaId)" />
+
+            <div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500 dark:text-gray-400 z-20">
+                <ArrowPathIcon class="h-5 w-5 animate-spin" />
+            </div>
+
+            <MangaHeader :manga="currentManga" />
+
+            <!-- Section Volumes avec conteneur mobile -->
+            <div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 pb-8">
+                <div v-if="isLoadingVolumes" class="flex justify-center items-center h-32">
+                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+                </div>
+                <div v-else-if="errorVolumes" class="bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded">
+                    {{ errorVolumes.message || 'Une erreur est survenue lors du chargement des volumes.' }}
+                </div>
+                <MangaVolumeList
+                    v-else
+                    ref="volumeListRef"
+                    :volumes="volumes"
+                    :manga-slug="currentManga.slug"
+                    :manga-id="mangaId"
+                    v-model:expand-all="isAllExpanded" />
+            </div>
+
+            <!-- Modale des sources préférées -->
+            <MangaPreferredSourcesModal
+                :is-open="isPreferredSourcesModalOpen"
+                :sources="preferredSources"
+                :is-loading="isLoadingSources"
+                :error="sourcesError"
+                :is-saving="isSavingSources"
+                @close="closePreferredSourcesModal"
+                @save="savePreferredSources"
+            />
+
+            <!-- Modale d'édition du manga -->
+            <MangaEditModal
+                :is-open="isEditModalOpen"
+                :manga="currentManga"
+                :is-saving="isEditLoading"
+                :error="editError"
+                @close="closeEditModal"
+                @save="saveMangaEdit"
+            />
+
+            <!-- Modale de gestion des chapitres -->
+            <ManageChaptersModal
+                :is-open="isManageChaptersModalOpen"
+                :manga="currentManga"
+                :chapters="mangaStore.mangaChapters[mangaId]?.items || []"
+                :is-loading="mangaStore.loadingChapters"
+                :is-saving="isSavingChapters"
+                :error="chaptersError"
+                @close="closeManageChaptersModal"
+                @save="saveChaptersChanges"
+            />
+
+            <!-- Modale de suppression du manga -->
+            <MangaDeleteModal
+                :is-open="isDeleteModalOpen"
+                :manga="currentManga"
+                :is-loading="isDeleting"
+                :error="deleteError"
+                @close="closeDeleteModal"
+                @confirm="confirmDeleteManga"
+            />
+        </div>
+
+        <div v-else-if="isLoadingDetails" class="flex justify-center items-center h-64">
+            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+        </div>
+
+        <div v-else class="text-center text-gray-500 dark:text-gray-400 py-10 px-4">
+            Aucun manga sélectionné ou trouvé.
+        </div>
+
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import {
+    ArrowPathIcon,
+    BookmarkIcon,
+    BookmarkSlashIcon,
+    ChevronDoubleDownIcon,
+    ChevronDoubleUpIcon,
+    Cog6ToothIcon,
+    PencilSquareIcon,
+    TrashIcon,
+    WrenchIcon
+} from '@heroicons/vue/24/outline';
+import { computed, onUnmounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+    import { useMangaDelete } from '../composables/useMangaDelete';
+import { useMangaDetails } from '../composables/useMangaDetails';
+import { useMangaEdit } from '../composables/useMangaEdit';
+import { useMangaMonitoring } from '../composables/useMangaMonitoring';
+import { useMangaPreferredSources } from '../composables/useMangaPreferredSources';
+import { useMangaRefresh } from '../composables/useMangaRefresh';
+import { useMangaVolumes } from '../composables/useMangaVolumes';
+
+    import ManageChaptersModal from '../components/ManageChaptersModal.vue';
+import MangaDeleteModal from '../components/MangaDeleteModal.vue';
+import MangaEditModal from '../components/MangaEditModal.vue';
+import MangaHeader from '../components/MangaHeader.vue';
+import MangaPreferredSourcesModal from '../components/MangaPreferredSourcesModal.vue';
+import MangaVolumeList from '../components/MangaVolumeList.vue';
+import MercureListener from '../components/MercureListener.vue';
+
+    import NotificationToast from '../../../../shared/components/ui/NotificationToast.vue';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+import { useMangaStore } from '../../application/store/mangaStore';
+
+    const route = useRoute();
+    const router = useRouter();
+    const mangaStore = useMangaStore();
+
+    const mangaId = computed(() => Number(route.params.id) || null);
+
+    // État de la modale
+    const isPreferredSourcesModalOpen = ref(false);
+    const isManageChaptersModalOpen = ref(false);
+    const isSavingChapters = ref(false);
+    const chaptersError = ref(null);
+
+    // État d'expansion des volumes
+    const isAllExpanded = ref(false);
+    const volumeListRef = ref(null);
+
+    const {
+        data: currentManga,
+        isLoading: isLoadingDetails,
+        isFetching: isRefreshingDetails,
+        error: errorDetails,
+        refetch: refetchMangaDetails
+    } = useMangaDetails(mangaId);
+
+    const {
+        volumes,
+        isLoading: isLoadingVolumes,
+        isFetching: isRefreshingVolumes,
+        error: errorVolumes
+    } = useMangaVolumes(mangaId);
+
+    const {
+        sources: preferredSources,
+        isLoading: isLoadingSources,
+        error: sourcesError,
+        isSaving: isSavingSources,
+        savePreferredSources: saveSourcesOrder
+    } = useMangaPreferredSources(mangaId);
+
+    // Composable pour l'édition des mangas
+    const {
+        isEditModalOpen,
+        openEditModal,
+        closeEditModal,
+        editManga,
+        isLoading: isEditLoading,
+        error: editError
+    } = useMangaEdit();
+
+    // Composable pour le refresh des métadonnées
+    const {
+        isRefreshing,
+        refreshMetadata
+    } = useMangaRefresh();
+
+    // Composable pour le monitoring
+    const {
+        isToggling: isTogglingMonitoring,
+        toggleMonitoring,
+        toggleError: monitoringError
+    } = useMangaMonitoring();
+
+    // Composable pour la suppression
+    const {
+        isDeleteModalOpen,
+        openDeleteModal,
+        closeDeleteModal,
+        deleteManga,
+        isLoading: isDeleting,
+        error: deleteError
+    } = useMangaDelete();
+
+    // Charger les chapitres dans le store quand le manga est chargé
+    watch(
+        mangaId,
+        newId => {
+            if (newId) {
+                mangaStore.loadChapters(newId);
+            }
+        },
+        { immediate: true }
+    );
+
+    const openPreferredSourcesModal = () => {
+        isPreferredSourcesModalOpen.value = true;
+    };
+
+    const closePreferredSourcesModal = () => {
+        isPreferredSourcesModalOpen.value = false;
+    };
+
+    const openManageChaptersModal = () => {
+        isManageChaptersModalOpen.value = true;
+    };
+
+    const closeManageChaptersModal = () => {
+        isManageChaptersModalOpen.value = false;
+        chaptersError.value = null;
+    };
+
+    const confirmDeleteManga = async () => {
+        if (!mangaId.value) return;
+
+        try {
+            await deleteManga(mangaId.value);
+            // Rediriger vers la liste des mangas après suppression
+            router.push('/manga');
+        } catch (error) {
+            console.error('Erreur lors de la suppression du manga:', error);
+        }
+    };
+
+    const savePreferredSources = async (sourceIds) => {
+        try {
+            await saveSourcesOrder(sourceIds);
+            closePreferredSourcesModal();
+        } catch (error) {
+            console.error('Erreur lors de la sauvegarde des sources préférées:', error);
+        }
+    };
+
+    // Fonction pour sauvegarder l'édition du manga
+    const saveMangaEdit = async (updateData) => {
+        try {
+            await editManga(mangaId.value, updateData);
+        } catch (error) {
+            console.error('Erreur lors de l\'édition du manga:', error);
+        }
+    };
+
+    // Fonction pour sauvegarder les changements des chapitres
+    const saveChaptersChanges = async (chaptersData) => {
+        if (!mangaId.value) return;
+
+        isSavingChapters.value = true;
+        chaptersError.value = null;
+
+        try {
+            const response = await fetch('/api/chapters/batch-edit', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    chapters: chaptersData
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error('Erreur lors de la sauvegarde des chapitres');
+            }
+
+            // Recharger les chapitres et les volumes
+            await mangaStore.loadChapters(mangaId.value);
+            closeManageChaptersModal();
+        } catch (error) {
+            chaptersError.value = error.message;
+            console.error('Erreur lors de la sauvegarde des chapitres:', error);
+        } finally {
+            isSavingChapters.value = false;
+        }
+    };
+
+    // Fonction pour le refresh des métadonnées
+    const handleRefreshMetadata = async () => {
+        if (!mangaId.value) return;
+
+        try {
+            await refreshMetadata(mangaId.value);
+        } catch (error) {
+            // L'erreur est déjà gérée dans le composable avec les notifications
+            console.error('Erreur lors du refresh:', error);
+        }
+    };
+
+    // Fonction pour basculer le monitoring
+    const handleToggleMonitoring = async () => {
+        if (!mangaId.value || !currentManga.value) return;
+
+        try {
+            const newMonitoringState = !currentManga.value.monitored;
+            await toggleMonitoring(mangaId.value, newMonitoringState);
+
+            // Recharger les détails du manga pour mettre à jour l'état du monitoring
+            await refetchMangaDetails();
+        } catch (error) {
+            console.error('Erreur lors du changement de monitoring:', error);
+        }
+    };
+
+    // Fonction pour étendre/réduire tous les volumes
+    const handleExpandAll = () => {
+        if (!volumeListRef.value) return;
+
+        if (isAllExpanded.value) {
+            volumeListRef.value.collapseAllVolumes();
+        } else {
+            volumeListRef.value.expandAllVolumes();
+        }
+    };
+
+    const toolbarConfig = computed(() => ({
+        leftSection: [
+            {
+                icon: ArrowPathIcon,
+                label: 'Refresh metadata',
+                type: 'button',
+                onClick: handleRefreshMetadata,
+                loading: isRefreshing.value,
+                disabled: isRefreshing.value
+            },
+            {
+                icon: PencilSquareIcon,
+                label: 'Manage chapters',
+                type: 'button',
+                onClick: openManageChaptersModal
+            },
+            {
+                icon: Cog6ToothIcon,
+                label: 'Preferred Sources',
+                type: 'button',
+                onClick: openPreferredSourcesModal
+            }
+        ],
+        rightSection: [
+            {
+                icon: currentManga.value?.monitored ? BookmarkIcon : BookmarkSlashIcon,
+                label: currentManga.value?.monitored ? 'Désactiver monitoring' : 'Activer monitoring',
+                type: 'button',
+                onClick: handleToggleMonitoring,
+                loading: isTogglingMonitoring.value,
+                disabled: isTogglingMonitoring.value,
+                variant: currentManga.value?.monitored ? 'active' : 'default'
+            },
+            {
+                icon: WrenchIcon,
+                label: 'Edit',
+                type: 'button',
+                onClick: openEditModal
+            },
+            {
+                icon: TrashIcon,
+                label: 'Delete',
+                type: 'button',
+                onClick: openDeleteModal
+            },
+            {
+                icon: isAllExpanded.value ? ChevronDoubleUpIcon : ChevronDoubleDownIcon,
+                label: isAllExpanded.value ? 'Collapse all' : 'Expand all',
+                type: 'button',
+                onClick: handleExpandAll,
+                variant: isAllExpanded.value ? 'active' : 'default'
+            }
+        ]
+    }));
+
+    const loading = computed(() => isLoadingDetails.value || isLoadingVolumes.value);
+    const isRefreshingData = computed(() => isRefreshingDetails.value || isRefreshingVolumes.value || isRefreshing.value);
+    const error = computed(() => errorDetails.value || errorVolumes.value);
+
+    watch(
+        mangaId,
+        newId => {
+            if (newId) {
+                mangaStore.setCurrentMangaId(newId);
+            }
+        },
+        { immediate: true }
+    );
+
+    onUnmounted(() => {
+        mangaStore.clearCurrentMangaFocus();
+    });
+</script>

assets/vue/app/domain/reader/application/store/readerStore.js

@@ -0,0 +1,213 @@
+import { defineStore } from 'pinia';
+import { useUserPreferencesStore } from '../../../setting/application/store/userPreferencesStore';
+import { Chapter } from '../../domain/entities/Chapter';
+import { ApiChapterRepository } from '../../infrastructure/repository/ApiChapterRepository';
+
+export const useReaderStore = defineStore('reader', {
+    state: () => ({
+        currentChapter: null,
+        currentPage: 0,
+        readingMode: 'single', // 'single' ou 'infinite'
+        readingDirection: 'ltr', // 'ltr' ou 'rtl'
+        zoom: 1,
+        isLoading: false,
+        error: null,
+        pages: [],
+        totalPages: 0,
+
+        // Paramètres pour les doubles pages
+        doublePageSettings: {
+            autoDetect: true,
+            mobileMode: 'rotate', // 'rotate', 'scroll', 'normal'
+            detectionThreshold: 1.2 // Ratio largeur/hauteur pour détecter une double page
+        }
+    }),
+
+    getters: {
+        isFirstPage: state => state.currentPage === 0,
+        isLastPage: state => state.currentPage === state.totalPages - 1,
+        currentPageData: state => state.pages[state.currentPage],
+        hasPreviousChapter: state => Boolean(state.currentChapter?.navigation?.previousChapter),
+        hasNextChapter: state => Boolean(state.currentChapter?.navigation?.nextChapter),
+
+        // Getters pour les doubles pages
+        effectiveDoublePageMode: (state) => {
+            if (!state.doublePageSettings.autoDetect) {
+                return 'normal';
+            }
+            return state.doublePageSettings.mobileMode;
+        },
+
+        // Préférences sauvegardées dans localStorage
+        savedPreferences: (state) => ({
+            readingMode: state.readingMode,
+            readingDirection: state.readingDirection,
+            zoom: state.zoom,
+            doublePageSettings: state.doublePageSettings
+        })
+    },
+
+    actions: {
+        async loadChapter(chapterId) {
+            this.isLoading = true;
+            this.error = null;
+            try {
+                const repository = new ApiChapterRepository();
+
+                const [chapterData, pagesData] = await Promise.all([
+                    repository.getChapter(chapterId),
+                    repository.getChapterPages(chapterId, 1, 9999),
+                ]);
+
+                this.currentChapter = Chapter.create(chapterData);
+                this.pages = pagesData.pages.map(p => ({
+                    id: p.id,
+                    pageNumber: p.pageNumber,
+                    url: p.url,
+                    dimensions: p.dimensions,
+                }));
+                this.totalPages = pagesData.totalItems;
+                this.currentPage = 0;
+            } catch (error) {
+                this.error = error.message;
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        handlePageVisible(pageIndex) {
+            if (pageIndex !== this.currentPage) {
+                this.currentPage = pageIndex;
+            }
+        },
+
+        nextPage() {
+            if (!this.isLastPage) {
+                this.currentPage++;
+            }
+        },
+
+        previousPage() {
+            if (!this.isFirstPage) {
+                this.currentPage--;
+            }
+        },
+
+        async setReadingMode(mode) {
+            if (mode === this.readingMode) return;
+            this.readingMode = mode;
+            this.savePreferences();
+        },
+
+        setReadingDirection(direction) {
+            this.readingDirection = direction;
+            this.savePreferences();
+        },
+
+        setZoom(zoom) {
+            this.zoom = Math.max(0.5, Math.min(2, zoom));
+            this.savePreferences();
+        },
+
+        setDoublePageMode(mode) {
+            if (['rotate', 'scroll', 'normal'].includes(mode)) {
+                this.doublePageSettings.mobileMode = mode;
+                this.savePreferences();
+            }
+        },
+
+        setDoublePageAutoDetect(enabled) {
+            this.doublePageSettings.autoDetect = enabled;
+            this.savePreferences();
+        },
+
+        setDoublePageDetectionThreshold(threshold) {
+            this.doublePageSettings.detectionThreshold = Math.max(1.0, Math.min(3.0, threshold));
+            this.savePreferences();
+        },
+
+        updateDoublePageSettings(settings) {
+            this.doublePageSettings = {
+                ...this.doublePageSettings,
+                ...settings
+            };
+            this.savePreferences();
+        },
+
+        async goToNextChapter() {
+            if (this.currentChapter?.navigation?.nextChapter) {
+                await this.loadChapter(this.currentChapter.navigation.nextChapter);
+            }
+        },
+
+        async goToPreviousChapter() {
+            if (this.currentChapter?.navigation?.previousChapter) {
+                await this.loadChapter(this.currentChapter.navigation.previousChapter);
+                this.currentPage = Math.max(0, this.totalPages - 1);
+            }
+        },
+
+        savePreferences() {
+            try {
+                const preferences = {
+                    readingMode: this.readingMode,
+                    readingDirection: this.readingDirection,
+                    zoom: this.zoom,
+                    doublePageSettings: this.doublePageSettings
+                };
+                localStorage.setItem('mangarr-reader-preferences', JSON.stringify(preferences));
+            } catch (error) {
+                console.error('Erreur lors de la sauvegarde des préférences:', error);
+            }
+        },
+
+        loadPreferences() {
+            try {
+                const stored = localStorage.getItem('mangarr-reader-preferences');
+                if (!stored) {
+                    const userPrefs = useUserPreferencesStore();
+                    this.readingDirection = userPrefs.readingDirection;
+                    const modeMap = { scroll: 'infinite', single: 'single', double: 'single' };
+                    this.readingMode = modeMap[userPrefs.readingMode] ?? 'single';
+                    if (userPrefs.readingMode === 'double') {
+                        this.doublePageSettings.autoDetect = true;
+                    }
+                    return;
+                }
+                if (stored) {
+                    const preferences = JSON.parse(stored);
+
+                    if (preferences.readingMode) this.readingMode = preferences.readingMode;
+                    if (preferences.readingDirection) this.readingDirection = preferences.readingDirection;
+                    if (typeof preferences.zoom === 'number') this.zoom = preferences.zoom;
+
+                    // Migration: si l'ancien doublePageMode existe, le migrer vers mobileMode
+                    if (preferences.doublePageMode && ['rotate', 'scroll', 'normal'].includes(preferences.doublePageMode)) {
+                        this.doublePageSettings.mobileMode = preferences.doublePageMode;
+                    }
+
+                    if (preferences.doublePageSettings) {
+                        this.doublePageSettings = {
+                            ...this.doublePageSettings,
+                            ...preferences.doublePageSettings
+                        };
+                    }
+                }
+            } catch (error) {
+                console.error('Erreur lors du chargement des préférences:', error);
+            }
+        },
+
+        resetPreferences() {
+            this.readingMode = 'single';
+            this.readingDirection = 'ltr';
+            this.zoom = 1;
+            this.doublePageSettings = {
+                autoDetect: true,
+                mobileMode: 'rotate',
+                detectionThreshold: 1.2
+            };
+            this.savePreferences();
+        }
+    }
+});

assets/vue/app/domain/reader/domain/entities/Chapter.js

@@ -0,0 +1,34 @@
+export class Chapter {
+    constructor({ id, mangaId, number, title, pages = [], read = false, lastReadPage = 0, navigation = {} }) {
+        this.id = id;
+        this.mangaId = mangaId;
+        this.number = number;
+        this.title = title;
+        this.pages = pages;
+        this.read = read;
+        this.lastReadPage = lastReadPage;
+        this.navigation = {
+            previousChapter: navigation.previousChapter || null,
+            nextChapter: navigation.nextChapter || null
+        };
+    }
+
+    static create(data) {
+        return new Chapter(data);
+    }
+
+    markAsRead() {
+        this.read = true;
+        this.lastReadPage = this.pages.length;
+    }
+
+    markAsUnread() {
+        this.read = false;
+        this.lastReadPage = 0;
+    }
+
+    updateLastReadPage(pageNumber) {
+        this.lastReadPage = pageNumber;
+        this.read = pageNumber === this.pages.length;
+    }
+}

assets/vue/app/domain/reader/domain/repository/ChapterRepositoryInterface.js

@@ -0,0 +1,31 @@
+export class ChapterRepositoryInterface {
+    /**
+     * Récupère les informations d'un chapitre
+     * @param {string} chapterId - L'identifiant du chapitre
+     * @returns {Promise<Object>} Les informations du chapitre
+     */
+    async getChapter(chapterId) {
+        throw new Error('Method not implemented');
+    }
+
+    /**
+     * Récupère la liste des pages d'un chapitre
+     * @param {string} chapterId - L'identifiant du chapitre
+     * @param {number} page - Le numéro de page
+     * @param {number} itemsPerPage - Le nombre d'éléments par page
+     * @returns {Promise<Object>} La liste des pages avec leurs métadonnées
+     */
+    async getChapterPages(chapterId, page = 1, itemsPerPage = 20) {
+        throw new Error('Method not implemented');
+    }
+
+    /**
+     * Récupère une page spécifique d'un chapitre
+     * @param {string} chapterId - L'identifiant du chapitre
+     * @param {number} pageNumber - Le numéro de la page
+     * @returns {Promise<Object>} Les données de la page
+     */
+    async getChapterPage(chapterId, pageNumber) {
+        throw new Error('Method not implemented');
+    }
+}

assets/vue/app/domain/reader/infrastructure/repository/ApiChapterRepository.js

@@ -0,0 +1,21 @@
+import { ChapterRepositoryInterface } from '../../domain/repository/ChapterRepositoryInterface';
+
+export class ApiChapterRepository extends ChapterRepositoryInterface {
+    async getChapter(chapterId) {
+        const response = await fetch(`/api/reader/chapter/${chapterId}`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch chapter');
+        }
+        return response.json();
+    }
+
+    async getChapterPages(chapterId, page = 1, itemsPerPage = 9999) {
+        const response = await fetch(
+            `/api/reader/chapter/${chapterId}/pages?page=${page}&itemsPerPage=${itemsPerPage}`
+        );
+        if (!response.ok) {
+            throw new Error('Failed to fetch chapter pages');
+        }
+        return response.json();
+    }
+}

assets/vue/app/domain/reader/presentation/components/ChapterNavigation.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="chapter-navigation">
+        <button
+            v-if="hasPreviousChapter"
+            @click="goToPreviousChapter"
+            class="nav-button nav-button-previous"
+            :disabled="isLoading"
+            title="Chapitre précédent"
+        >
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+            </svg>
+            <span class="hidden sm:inline">Chapitre précédent</span>
+            <span class="sm:hidden">Précédent</span>
+        </button>
+
+        <div class="flex-1"></div>
+
+        <button
+            v-if="hasNextChapter"
+            @click="goToNextChapter"
+            class="nav-button nav-button-next"
+            :disabled="isLoading"
+            title="Chapitre suivant"
+        >
+            <span class="hidden sm:inline">Chapitre suivant</span>
+            <span class="sm:hidden">Suivant</span>
+            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+        </button>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useReaderStore } from '../../application/store/readerStore';
+
+const store = useReaderStore();
+
+const props = defineProps({
+    position: {
+        type: String,
+        default: 'top', // 'top' ou 'bottom'
+        validator: (value) => ['top', 'bottom'].includes(value)
+    }
+});
+
+const hasPreviousChapter = computed(() => store.hasPreviousChapter);
+const hasNextChapter = computed(() => store.hasNextChapter);
+const isLoading = computed(() => store.isLoading);
+
+const goToPreviousChapter = async () => {
+    await store.goToPreviousChapter();
+};
+
+const goToNextChapter = async () => {
+    await store.goToNextChapter();
+};
+</script>
+
+<style lang="postcss" scoped>
+.chapter-navigation {
+    @apply flex items-center justify-between w-full px-4 py-3;
+    @apply bg-gray-800/80 backdrop-blur-sm border border-gray-700/50;
+    @apply rounded-lg shadow-lg;
+}
+
+.nav-button {
+    @apply flex items-center px-4 py-2;
+    @apply bg-blue-600 hover:bg-blue-700 text-white;
+    @apply rounded-md transition-all duration-200;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
+    @apply font-medium text-sm;
+}
+
+.nav-button:disabled {
+    @apply hover:bg-blue-600;
+}
+
+.nav-button-previous {
+    @apply mr-auto;
+}
+
+.nav-button-next {
+    @apply ml-auto;
+}
+</style>

assets/vue/app/domain/reader/presentation/components/ChapterReader.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="chapter-reader" :class="{ rtl: store.readingDirection === 'rtl' }">
+        <div v-if="store.isLoading" class="loading">
+            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+        </div>
+
+        <div v-else-if="store.error" class="error">
+            {{ store.error }}
+        </div>
+
+        <div v-else class="reader-content">
+            <template v-if="store.readingMode === 'single'">
+                <SingleModeReader
+                    :page-data="store.currentPageData"
+                    :page-number="store.currentPage + 1"
+                    :zoom="store.zoom"
+                    :double-page-mode="store.effectiveDoublePageMode"
+                    @button-click="showButtonsWithTimer" />
+            </template>
+            <template v-else>
+                <InfiniteReader
+                    :pages="store.pages"
+                    :zoom="store.zoom"
+                    :double-page-mode="store.effectiveDoublePageMode"
+                    :initial-page="store.currentPage"
+                    @page-visible="store.handlePageVisible"
+                    ref="infiniteReaderRef" />
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { useHeaderStore } from '../../../../shared/stores/headerStore';
+import { useUserPreferencesStore } from '../../../../domain/setting/application/store/userPreferencesStore';
+import { useReaderStore } from '../../application/store/readerStore';
+import InfiniteReader from './InfiniteReader.vue';
+import SingleModeReader from './SingleModeReader.vue';
+
+    const props = defineProps({
+        chapterId: {
+            type: String,
+            required: true
+        },
+        availableChapters: {
+            type: Array,
+            default: () => []
+        }
+    });
+
+    const store = useReaderStore();
+    const headerStore = useHeaderStore();
+    const prefs = useUserPreferencesStore();
+
+    const infiniteReaderRef = ref(null);
+
+    // Actions de l'interface lecteur
+    const toggleReadingMode = () => {
+        const newMode = store.readingMode === 'single' ? 'infinite' : 'single';
+        store.setReadingMode(newMode);
+        prefs.setReadingMode(newMode === 'infinite' ? 'scroll' : 'single');
+
+        if (newMode === 'single') {
+            headerStore.disableAutoHide();
+            headerStore.disableReaderToolbarAutoHide();
+        } else {
+            headerStore.enableReaderToolbarAutoHide();
+            headerStore.enableAutoHide();
+            showButtonsWithTimer();
+        }
+    };
+
+    const toggleReadingDirection = () => {
+        const newDir = store.readingDirection === 'ltr' ? 'rtl' : 'ltr';
+        store.setReadingDirection(newDir);
+        prefs.setReadingDirection(newDir);
+    };
+
+    const zoomIn = () => store.setZoom(Math.min(store.zoom + 0.1, 2));
+    const zoomOut = () => store.setZoom(Math.max(store.zoom - 0.1, 0.5));
+
+    const handleZoomChange = (zoom) => store.setZoom(zoom);
+
+    const handleDoublePageModeChange = (mode) => store.setDoublePageMode(mode);
+    const handleDoublePageAutoDetectChange = (enabled) => store.setDoublePageAutoDetect(enabled);
+    const handleDetectionThresholdChange = (threshold) => store.setDoublePageDetectionThreshold(threshold);
+    const handleResetPreferences = () => store.resetPreferences();
+
+    const showButtonsWithTimer = () => {
+        if (store.readingMode === 'infinite' && infiniteReaderRef.value) {
+            infiniteReaderRef.value.showButtonsWithTimer();
+        }
+    };
+
+    const resetButtonsTimer = () => {
+        if (store.readingMode === 'infinite' && infiniteReaderRef.value) {
+            infiniteReaderRef.value.resetButtonsTimer();
+        }
+    };
+
+    const handleKeyPress = event => {
+        if (store.readingMode === 'single') {
+            if (event.key === 'ArrowRight') {
+                store.nextPage();
+            } else if (event.key === 'ArrowLeft') {
+                store.previousPage();
+            }
+        }
+    };
+
+    watch(
+        () => props.chapterId,
+        newId => {
+            if (newId) {
+                store.loadChapter(newId);
+            }
+        },
+        { immediate: true }
+    );
+
+    onMounted(() => {
+        store.loadPreferences();
+        window.addEventListener('keydown', handleKeyPress);
+
+        if (prefs.autoHideHeaderReader) {
+            headerStore.enableAutoHide();
+        }
+
+        if (store.readingMode === 'infinite') {
+            headerStore.enableReaderToolbarAutoHide();
+        }
+
+        if (prefs.autoFullscreen && document.documentElement.requestFullscreen) {
+            document.documentElement.requestFullscreen().catch(() => {});
+        }
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('keydown', handleKeyPress);
+        headerStore.disableAutoHide();
+        headerStore.disableReaderToolbarAutoHide();
+    });
+
+    defineExpose({
+        toggleReadingMode,
+        toggleReadingDirection,
+        zoomIn,
+        zoomOut,
+        handleZoomChange,
+        handleDoublePageModeChange,
+        handleDoublePageAutoDetectChange,
+        handleDetectionThresholdChange,
+        handleResetPreferences,
+        resetButtonsTimer,
+        showButtonsWithTimer,
+    });
+</script>
+
+<style lang="postcss" scoped>
+    .chapter-reader {
+        @apply w-full h-full flex flex-col bg-gray-900 text-white;
+    }
+
+    .loading {
+        @apply flex items-center justify-center h-full;
+    }
+
+    .error {
+        @apply text-red-500 text-xl;
+    }
+
+    .reader-content {
+        @apply w-full flex-1 flex flex-col min-h-0;
+    }
+
+    .rtl {
+        direction: rtl;
+    }
+</style>

assets/vue/app/domain/reader/presentation/components/ChapterSelector.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="chapter-selector">
+        <label for="chapter-select" class="sr-only">Sélectionner un chapitre</label>
+        <select
+            id="chapter-select"
+            v-model="selectedChapterId"
+            @change="handleChapterChange"
+            class="chapter-select"
+            :disabled="isLoading"
+        >
+            <option
+                v-for="chapter in availableChapters"
+                :key="chapter.id"
+                :value="chapter.id"
+                :selected="chapter.id === currentChapterId"
+            >
+                Chapitre {{ chapter.number }} - {{ chapter.title }}
+            </option>
+        </select>
+    </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { useReaderStore } from '../../application/store/readerStore';
+
+const props = defineProps({
+    availableChapters: {
+        type: Array,
+        default: () => []
+    }
+});
+
+const emit = defineEmits(['chapter-selected']);
+
+const store = useReaderStore();
+
+const selectedChapterId = ref(null);
+
+const currentChapterId = computed(() => store.currentChapter?.id);
+const isLoading = computed(() => store.isLoading);
+
+// Synchroniser la sélection avec le chapitre actuel
+watch(currentChapterId, (newId) => {
+    selectedChapterId.value = newId;
+}, { immediate: true });
+
+// Gérer le changement de chapitre
+const handleChapterChange = async () => {
+    if (selectedChapterId.value && selectedChapterId.value !== currentChapterId.value) {
+        await store.loadChapter(selectedChapterId.value);
+        emit('chapter-selected', selectedChapterId.value);
+    }
+};
+</script>
+
+<style lang="postcss" scoped>
+.chapter-selector {
+    @apply relative;
+}
+
+.chapter-select {
+    @apply w-full px-3 py-2 text-sm;
+    @apply bg-gray-800 text-white border border-gray-600;
+    @apply rounded-md shadow-sm;
+    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply transition-all duration-200;
+}
+
+.chapter-select:hover:not(:disabled) {
+    @apply border-gray-500;
+}
+
+/* Style personnalisé pour la flèche du select */
+.chapter-select {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    padding-right: 2.5rem;
+}
+</style>

assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue

@@ -0,0 +1,369 @@
+<template>
+    <div class="infinite-reader" ref="containerRef">
+        <div v-for="(page, index) in pages" :key="index"
+             class="page-wrapper" :data-page-index="index">
+
+            <!-- Pas d'URL : spinner de chargement -->
+            <div v-if="!page?.url" class="loading">
+                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+            </div>
+
+            <!-- Hors de la zone de rendu : placeholder dimensionné -->
+            <div v-else-if="!mountedPageIndices.has(index)"
+                 class="page-placeholder"
+                 :style="{ height: getPlaceholderHeight(page) + 'px' }" />
+
+            <!-- Dans la zone : composant complet -->
+            <ReaderPage v-else
+                :page-data="page"
+                :page-number="index + 1"
+                :zoom="zoom"
+                :double-page-mode="doublePageMode"
+                :window-width="windowWidth"
+                loading="lazy" />
+        </div>
+
+        <!-- Bouton flottant pour revenir en haut -->
+        <Transition
+            enter-active-class="transition-all duration-300 ease-out"
+            leave-active-class="transition-all duration-300 ease-in"
+            enter-from-class="opacity-0 translate-y-5 scale-75"
+            enter-to-class="opacity-100 translate-y-0 scale-100"
+            leave-from-class="opacity-100 translate-y-0 scale-100"
+            leave-to-class="opacity-0 translate-y-5 scale-75"
+        >
+            <button
+                v-show="showFloatingButtons"
+                @click="scrollToTop"
+                class="fixed bottom-6 right-6 z-[9999] bg-gray-800 hover:bg-gray-700 text-white hover:text-green-500 flex flex-col items-center justify-center w-12 h-12 rounded shadow-lg transition-colors duration-200"
+                title="Revenir en haut"
+                type="button"
+            >
+                <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+                </svg>
+                <span class="text-xs hidden sm:inline">Haut</span>
+            </button>
+        </Transition>
+    </div>
+</template>
+
+<script setup>
+    import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { useHeaderStore } from '../../../../shared/stores/headerStore';
+import ReaderPage from './ReaderPage.vue';
+
+    const props = defineProps({
+        pages: {
+            type: Array,
+            required: true
+        },
+        zoom: {
+            type: Number,
+            required: true
+        },
+        doublePageMode: {
+            type: String,
+            required: true
+        }
+    });
+
+    const emit = defineEmits(['pageVisible', 'buttonsVisibilityChange']);
+
+    const headerStore = useHeaderStore();
+    const containerRef = ref(null);
+    const observer = ref(null);
+    const visibilityObserver = ref(null);
+    const mountedPageIndices = reactive(new Set());
+    const windowWidth = ref(window.innerWidth);
+
+    // État unique pour tous les boutons flottants avec timer de 3 secondes
+    const showFloatingButtons = ref(false);
+    let buttonsTimer = null;
+
+    // Variables pour détecter la direction du scroll
+    let lastScrollTop = 0;
+    let scrollDirection = 'down';
+
+    const observeIntersection = entries => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const pageIndex = parseInt(entry.target.getAttribute('data-page-index'));
+                emit('pageVisible', pageIndex);
+            }
+        });
+    };
+
+    // Calcul de la hauteur du placeholder — miroir exact du maxWidth de ReaderPage, zoom inclus
+    const getPlaceholderHeight = (page) => {
+        const dims = page?.dimensions;
+        if (!dims?.width || !dims?.height) return Math.round(800 * props.zoom);
+        const displayWidth = windowWidth.value < 1200
+            ? Math.min(dims.width, windowWidth.value * 0.95)
+            : Math.min(dims.width, 1200);
+        return Math.round((dims.height / dims.width) * displayWidth * props.zoom);
+    };
+
+    const setupObservers = () => {
+        observer.value?.disconnect();
+        visibilityObserver.value?.disconnect();
+
+        observer.value = new IntersectionObserver(observeIntersection, {
+            root: containerRef.value,
+            threshold: 0.5
+        });
+
+        visibilityObserver.value = new IntersectionObserver(
+            (entries) => {
+                entries.forEach(entry => {
+                    const idx = parseInt(entry.target.getAttribute('data-page-index'));
+                    if (entry.isIntersecting) {
+                        mountedPageIndices.add(idx);
+                    } else {
+                        mountedPageIndices.delete(idx);
+                    }
+                });
+            },
+            { root: containerRef.value, rootMargin: '1000px 0px', threshold: 0 }
+        );
+
+        nextTick(() => {
+            const els = containerRef.value?.querySelectorAll('.page-wrapper');
+            els?.forEach((el, i) => {
+                el.setAttribute('data-page-index', i);
+                observer.value.observe(el);
+                visibilityObserver.value.observe(el);
+            });
+        });
+    };
+
+    // Fonction unique pour gérer la visibilité de tous les boutons flottants
+    const showButtonsWithTimer = () => {
+        showFloatingButtons.value = true;
+        emit('buttonsVisibilityChange', true);
+        // Réinitialiser le timer à chaque fois
+        clearTimeout(buttonsTimer);
+        buttonsTimer = setTimeout(() => {
+            showFloatingButtons.value = false;
+            emit('buttonsVisibilityChange', false);
+        }, 3000); // 3 secondes
+    };
+
+    const hideButtonsImmediately = () => {
+        showFloatingButtons.value = false;
+        emit('buttonsVisibilityChange', false);
+        clearTimeout(buttonsTimer);
+    };
+
+    // Fonction exposée pour réinitialiser le timer depuis l'extérieur
+    const resetButtonsTimer = () => {
+        if (showFloatingButtons.value) {
+            clearTimeout(buttonsTimer);
+            buttonsTimer = setTimeout(() => {
+                showFloatingButtons.value = false;
+                emit('buttonsVisibilityChange', false);
+            }, 3000);
+        } else {
+            showButtonsWithTimer();
+        }
+    };
+
+    // Gestion du scroll pour tous les boutons flottants et le header
+    const handleScroll = () => {
+        let scrollTop = 0;
+
+        // Vérifier le scroll sur le conteneur direct
+        if (containerRef.value && containerRef.value.scrollTop > 0) {
+            scrollTop = containerRef.value.scrollTop;
+        } else {
+            // Vérifier le scroll sur les conteneurs parents
+            let currentElement = containerRef.value?.parentElement;
+            while (currentElement && scrollTop === 0) {
+                if (currentElement.scrollTop > 0) {
+                    scrollTop = currentElement.scrollTop;
+                    break;
+                }
+                currentElement = currentElement.parentElement;
+            }
+
+            // Vérifier le scroll sur la fenêtre
+            if (scrollTop === 0) {
+                scrollTop = window.scrollY;
+            }
+        }
+
+        // Détecter la direction du scroll
+        if (scrollTop > lastScrollTop) {
+            scrollDirection = 'down';
+        } else if (scrollTop < lastScrollTop) {
+            scrollDirection = 'up';
+        }
+
+        // Gestion du header auto-hide (header : seulement si largeur < 1200px, toolbar : toujours)
+        headerStore.updateScrollDirection(scrollTop);
+
+        // Gestion de la visibilité des boutons flottants (même condition pour tous)
+        // Afficher si on scroll et qu'on est à plus de 300px
+        if (scrollTop > 300) {
+            showButtonsWithTimer();
+        } else if (scrollTop <= 100) {
+            // Masquer immédiatement si on est en haut de page
+            hideButtonsImmediately();
+        }
+
+        // Sauvegarder la position actuelle pour la prochaine comparaison
+        lastScrollTop = scrollTop;
+    };
+
+    // Fonction pour revenir en haut de la page
+    const scrollToTop = () => {
+        // Réinitialiser le timer lors du clic
+        resetButtonsTimer();
+
+        // Stratégie 1: Scroll sur le conteneur direct
+        if (containerRef.value) {
+            if (containerRef.value.scrollTop > 0) {
+                containerRef.value.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+                return;
+            }
+        }
+
+        // Stratégie 2: Chercher le conteneur parent avec scroll
+        let currentElement = containerRef.value?.parentElement;
+        while (currentElement) {
+            const styles = window.getComputedStyle(currentElement);
+            if (styles.overflowY === 'auto' || styles.overflowY === 'scroll' || currentElement.scrollTop > 0) {
+                currentElement.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+                return;
+            }
+            currentElement = currentElement.parentElement;
+        }
+
+        // Stratégie 3: Scroll sur la fenêtre entière
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    };
+
+    // Exposer la fonction pour le parent
+    defineExpose({
+        resetButtonsTimer,
+        showButtonsWithTimer
+    });
+
+    watch(
+        () => props.pages,
+        () => {
+            mountedPageIndices.clear();
+            setupObservers();
+        },
+        { immediate: true }
+    );
+
+    // Gestion du redimensionnement de la fenêtre
+    const handleResize = () => {
+        const newWidth = window.innerWidth;
+        windowWidth.value = newWidth;
+
+        // Activer/désactiver l'auto-hide selon la largeur
+        if (newWidth < 1200) {
+            headerStore.enableAutoHide();
+        } else {
+            headerStore.disableAutoHide();
+        }
+    };
+
+    onMounted(() => {
+        setupObservers();
+
+        // Activer l'auto-hide du header si la largeur < 1200px
+        if (windowWidth.value < 1200) {
+            headerStore.enableAutoHide();
+        }
+
+        // Ajouter l'écouteur de scroll sur le conteneur
+        if (containerRef.value) {
+            containerRef.value.addEventListener('scroll', handleScroll, { passive: true });
+        }
+
+        // Ajouter l'écouteur de scroll sur la fenêtre
+        window.addEventListener('scroll', handleScroll, { passive: true });
+
+        // Ajouter l'écouteur de redimensionnement
+        window.addEventListener('resize', handleResize, { passive: true });
+    });
+
+    onUnmounted(() => {
+        observer.value?.disconnect();
+        visibilityObserver.value?.disconnect();
+
+        // Désactiver l'auto-hide du header en quittant
+        headerStore.disableAutoHide();
+
+        // Nettoyer les timers
+        clearTimeout(buttonsTimer);
+
+        // Nettoyer l'écouteur de scroll du conteneur
+        if (containerRef.value) {
+            containerRef.value.removeEventListener('scroll', handleScroll);
+        }
+
+        // Nettoyer l'écouteur de scroll de la fenêtre
+        window.removeEventListener('scroll', handleScroll);
+
+        // Nettoyer l'écouteur de redimensionnement
+        window.removeEventListener('resize', handleResize);
+    });
+</script>
+
+<style lang="postcss" scoped>
+    .infinite-reader {
+        @apply flex-1 flex flex-col items-center overflow-y-auto relative min-h-0;
+        /* Réduction du padding sur mobile */
+        @apply py-2 sm:py-8;
+    }
+
+    .page-wrapper {
+        @apply w-full flex justify-center;
+        @apply mb-2 sm:mb-4 px-1 sm:px-4;
+    }
+
+    .page-placeholder {
+        @apply w-full;
+        max-width: 1200px;
+        min-height: 400px;
+    }
+
+    .loading,
+    .error {
+        @apply flex items-center justify-center min-h-[400px];
+        /* Largeur adaptative selon la taille d'écran */
+        width: 95vw; /* Mobile : 95% de la largeur */
+    }
+
+    @screen sm {
+        .loading,
+        .error {
+            width: 80vw; /* Tablette : 80% de la largeur */
+        }
+    }
+
+    @screen lg {
+        .loading,
+        .error {
+            width: 70vw; /* Desktop : 70% de la largeur */
+        }
+    }
+
+    .error {
+        @apply text-red-500 text-xl bg-red-500/10 rounded-lg;
+    }
+
+</style>

assets/vue/app/domain/reader/presentation/components/ReaderControls.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="reader-controls">
+        <button @click="onPrevious" :disabled="isFirstPage" class="nav-button">
+            <ChevronLeftIcon class="h-6 w-6" />
+        </button>
+
+        <div class="controls-center">
+            <div class="page-info"> {{ currentPage + 1 }} / {{ totalPages }} </div>
+            <div class="chapter-selector-wrapper" v-if="availableChapters.length > 0">
+                <ChapterSelector
+                    :available-chapters="availableChapters"
+                    @chapter-selected="onChapterSelected"
+                />
+            </div>
+        </div>
+
+        <div class="controls-right">
+            <!-- Bouton paramètres intégré -->
+            <button @click="onToggleSettings" class="settings-button" :class="{ 'active': settingsOpen }" title="Paramètres">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
+                </svg>
+            </button>
+
+            <button @click="onNext" :disabled="isLastPage" class="nav-button">
+                <ChevronRightIcon class="h-6 w-6" />
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
+import ChapterSelector from './ChapterSelector.vue';
+
+    defineProps({
+        currentPage: {
+            type: Number,
+            required: true
+        },
+        totalPages: {
+            type: Number,
+            required: true
+        },
+        isFirstPage: {
+            type: Boolean,
+            required: true
+        },
+        isLastPage: {
+            type: Boolean,
+            required: true
+        },
+        availableChapters: {
+            type: Array,
+            default: () => []
+        },
+        settingsOpen: {
+            type: Boolean,
+            default: false
+        }
+    });
+
+    const emit = defineEmits(['previous', 'next', 'chapter-selected', 'toggle-settings']);
+
+    const onPrevious = () => emit('previous');
+    const onNext = () => emit('next');
+    const onChapterSelected = (chapterId) => emit('chapter-selected', chapterId);
+    const onToggleSettings = () => emit('toggle-settings');
+</script>
+
+<style lang="postcss" scoped>
+    .reader-controls {
+        @apply flex items-center justify-between p-4 bg-gray-800;
+    }
+
+    /* Responsive pour reader-controls */
+    @media (max-width: 480px) {
+        .reader-controls {
+            padding: 0.5rem;
+            gap: 0.25rem;
+        }
+    }
+
+    .controls-center {
+        @apply flex flex-col items-center space-y-2;
+    }
+
+    /* Responsive pour controls-center */
+    @media (max-width: 480px) {
+        .controls-center {
+            gap: 0.25rem;
+        }
+    }
+
+    .controls-right {
+        @apply flex items-center gap-2;
+    }
+
+    /* Responsive pour controls-right */
+    @media (max-width: 480px) {
+        .controls-right {
+            gap: 0.25rem;
+        }
+    }
+
+    .page-info {
+        @apply text-lg font-medium;
+    }
+
+    .chapter-selector-wrapper {
+        @apply min-w-[120px] max-w-[200px];
+    }
+
+    /* Responsive pour chapter-selector-wrapper */
+    @media (max-width: 480px) {
+        .chapter-selector-wrapper {
+            min-width: 100px;
+            max-width: 60vw;
+        }
+    }
+
+    .nav-button {
+        @apply px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors;
+    }
+
+    /* Responsive pour nav-button */
+    @media (max-width: 480px) {
+        .nav-button {
+            padding: 0.25rem 0.5rem;
+        }
+    }
+
+    .nav-button:disabled {
+        @apply opacity-50 cursor-not-allowed;
+    }
+
+    .settings-button {
+        @apply px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded transition-colors duration-200 flex items-center justify-center;
+    }
+
+    /* Responsive pour settings-button */
+    @media (max-width: 480px) {
+        .settings-button {
+            padding: 0.25rem 0.5rem;
+        }
+    }
+
+    .settings-button.active {
+        @apply bg-blue-600 hover:bg-blue-700;
+    }
+</style>

assets/vue/app/domain/reader/presentation/components/ReaderPage.vue

@@ -0,0 +1,431 @@
+<template>
+    <div
+        class="page-container"
+        :style="containerStyle"
+    >
+        <div v-if="!pageData" class="error">Aucune donnée d'image disponible</div>
+        <div v-else-if="!pageData.url" class="error">URL de l'image manquante</div>
+
+        <!-- Affichage spécial pour les doubles pages sur mobile -->
+        <div v-else-if="isDoublePage && isMobile && doublePageMode !== 'normal'" class="double-page-mobile">
+            <!-- Mode rotation automatique -->
+            <div v-if="doublePageMode === 'rotate'" class="double-page-rotated">
+                <img
+                    :src="imageSource"
+                    :alt="`Page ${pageNumber} (Double page)`"
+                    class="page-image rotated"
+                    :style="doublePageRotatedStyle"
+                    @load="handleImageLoad"
+                    ref="imageRef" />
+                <div class="rotation-hint">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    </svg>
+                    <span>Tournez votre appareil pour une meilleure lecture</span>
+                </div>
+            </div>
+
+            <!-- Mode défilement horizontal -->
+            <div v-else-if="doublePageMode === 'scroll'" class="double-page-scroll">
+                <div class="scroll-container" ref="scrollContainerRef">
+                    <img
+                        :src="imageSource"
+                        :alt="`Page ${pageNumber} (Double page)`"
+                        class="page-image scrollable"
+                        :style="doublePageScrollStyle"
+                        @load="handleImageLoad"
+                        ref="imageRef" />
+                </div>
+                <div class="scroll-hint">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18" />
+                    </svg>
+                    <span>Glissez horizontalement (commence par la droite)</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Affichage normal pour les pages simples, sur desktop, ou mode normal forcé -->
+        <img
+            v-else
+            :src="imageSource"
+            :alt="`Page ${pageNumber}`"
+            class="page-image"
+            :style="imageStyle"
+            @load="handleImageLoad"
+            ref="imageRef" />
+    </div>
+</template>
+
+<script setup>
+    import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useReaderStore } from '../../application/store/readerStore';
+
+    const props = defineProps({
+        pageData: {
+            type: Object,
+            required: true
+        },
+        pageNumber: {
+            type: Number,
+            required: true
+        },
+        zoom: {
+            type: Number,
+            required: true
+        },
+        doublePageMode: {
+            type: String,
+            default: 'rotate', // 'rotate', 'scroll', 'normal'
+            validator: (value) => ['rotate', 'scroll', 'normal'].includes(value)
+        },
+        windowWidth: {
+            type: Number,
+            default: null
+        }
+    });
+
+    const store = useReaderStore();
+
+    // zoom via la propriété CSS `zoom` dans les deux modes (affecte le layout → pas de chevauchement en mode scroll)
+    const containerStyle = computed(() => {
+        return { zoom: props.zoom };
+    });
+
+    const imageRef = ref(null);
+    const scrollContainerRef = ref(null);
+    const naturalWidth = ref(0);
+    const naturalHeight = ref(0);
+    const localWindowWidth = ref(window.innerWidth);
+    const effectiveWindowWidth = computed(() =>
+        props.windowWidth !== null ? props.windowWidth : localWindowWidth.value
+    );
+    const isMobile = computed(() => effectiveWindowWidth.value < 768);
+    const imageLoaded = ref(false);
+
+    const imageSource = computed(() => {
+        return props.pageData?.url ?? '';
+    });
+
+    // Détection des doubles pages basée sur le ratio largeur/hauteur et les dimensions API
+    const isDoublePage = computed(() => {
+        // Ne pas détecter si la détection automatique est désactivée
+        if (!store.doublePageSettings.autoDetect) {
+            return false;
+        }
+
+        const threshold = store.doublePageSettings.detectionThreshold || 1.2;
+
+        // Utiliser d'abord les dimensions de l'API si disponibles
+        if (props.pageData?.dimensions?.width && props.pageData?.dimensions?.height) {
+            const ratio = props.pageData.dimensions.width / props.pageData.dimensions.height;
+            return ratio > threshold;
+        }
+
+        // Fallback sur les dimensions naturelles de l'image (seulement si l'image est chargée)
+        if (imageLoaded.value && naturalWidth.value && naturalHeight.value) {
+            const ratio = naturalWidth.value / naturalHeight.value;
+            return ratio > threshold;
+        }
+
+        return false;
+    });
+
+    const handleImageLoad = () => {
+        if (imageRef.value) {
+            naturalWidth.value = imageRef.value.naturalWidth;
+            naturalHeight.value = imageRef.value.naturalHeight;
+            imageLoaded.value = true;
+
+            // Positionner le scroll à droite si c'est le mode scroll
+            if (props.doublePageMode === 'scroll' && scrollContainerRef.value) {
+                nextTick(() => {
+                    scrollContainerRef.value.scrollLeft = scrollContainerRef.value.scrollWidth - scrollContainerRef.value.clientWidth;
+                });
+            }
+        }
+    };
+
+    // Réinitialiser les dimensions quand on change de page
+    const resetDimensions = () => {
+        naturalWidth.value = 0;
+        naturalHeight.value = 0;
+        imageLoaded.value = false;
+    };
+
+    // Watcher pour détecter les changements de page
+    watch(
+        () => props.pageData,
+        (newPageData, oldPageData) => {
+            // Réinitialiser les dimensions si c'est une nouvelle page
+            if (newPageData?.id !== oldPageData?.id) {
+                resetDimensions();
+            }
+        },
+        { immediate: true }
+    );
+
+    // Watcher pour détecter les changements de numéro de page
+    watch(
+        () => props.pageNumber,
+        () => {
+            resetDimensions();
+        }
+    );
+
+    // Calculer la largeur maximale en fonction de la largeur disponible
+    const maxWidth = computed(() => {
+        // Utiliser les dimensions API en priorité
+        let width = naturalWidth.value;
+        let height = naturalHeight.value;
+
+        if (props.pageData?.dimensions?.width && props.pageData?.dimensions?.height) {
+            width = props.pageData.dimensions.width;
+            height = props.pageData.dimensions.height;
+        }
+
+        if (!width || !height) return null;
+
+        const availableWidth = effectiveWindowWidth.value;
+
+        // Si la largeur disponible est < 1200px : utiliser 95% de la largeur
+        if (availableWidth < 1200) {
+            return Math.min(width, availableWidth * 0.95);
+        }
+
+        // Si la largeur disponible est >= 1200px : limiter à 1200px maximum
+        return Math.min(width, 1200);
+    });
+
+    const imageStyle = computed(() => {
+        // Mode simple : laisser CSS contraindre les deux dimensions proportionnellement
+        if (store.readingMode === 'single') {
+            return {
+                maxWidth: '100%',
+                maxHeight: '100%',
+                width: 'auto',
+                height: 'auto',
+            };
+        }
+
+        // Mode scroll : fixer la largeur, hauteur libre
+        const style = {
+            height: 'auto',
+            maxWidth: '100%',
+        };
+
+        if (maxWidth.value) {
+            style.width = `${maxWidth.value}px`;
+        }
+
+        return style;
+    });
+
+    // Styles spéciaux pour les doubles pages
+    const doublePageRotatedStyle = computed(() => {
+        let width = naturalWidth.value;
+        let height = naturalHeight.value;
+
+        // Utiliser les dimensions API si disponibles
+        if (props.pageData?.dimensions?.width && props.pageData?.dimensions?.height) {
+            width = props.pageData.dimensions.width;
+            height = props.pageData.dimensions.height;
+        }
+
+        if (!width || !height) return {};
+
+        // En mode rotation : maximiser l'utilisation de l'espace
+        const availableWidth = effectiveWindowWidth.value;
+        const availableHeight = window.innerHeight - 100; // Laisser un peu d'espace pour les contrôles
+
+        // Après rotation, la largeur originale devient la hauteur affichée
+        // et la hauteur originale devient la largeur affichée
+        const rotatedWidth = height;  // Hauteur de l'image devient largeur après rotation
+        const rotatedHeight = width;  // Largeur de l'image devient hauteur après rotation
+
+        // Calculer le facteur d'échelle pour remplir l'écran
+        const scaleByWidth = availableWidth * 0.98 / rotatedWidth;
+        const scaleByHeight = availableHeight * 0.95 / rotatedHeight;
+        const scaleFactor = Math.min(scaleByWidth, scaleByHeight);
+
+        return {
+            width: `${width * scaleFactor}px`,
+            height: `${height * scaleFactor}px`,
+            maxWidth: 'none',
+            maxHeight: 'none',
+            transform: 'rotate(90deg)',
+            transformOrigin: 'center center'
+        };
+    });
+
+    const doublePageScrollStyle = computed(() => {
+        let width = naturalWidth.value;
+        let height = naturalHeight.value;
+
+        // Utiliser les dimensions API si disponibles
+        if (props.pageData?.dimensions?.width && props.pageData?.dimensions?.height) {
+            width = props.pageData.dimensions.width;
+            height = props.pageData.dimensions.height;
+        }
+
+        if (!width || !height) return {};
+
+        // Mode scroll : remplir la hauteur, permettre le défilement horizontal
+        const availableHeight = window.innerHeight - 80; // Espace pour les contrôles
+
+        // Échelle basée sur la hauteur pour remplir l'écran verticalement
+        const scaleFactor = (availableHeight * 0.95) / height;
+
+        return {
+            width: `${width * scaleFactor}px`,
+            height: `${height * scaleFactor}px`,
+            maxWidth: 'none',
+            maxHeight: 'none',
+            minWidth: '150vw' // Assurer un débordement horizontal pour le scroll
+        };
+    });
+
+    let ownResizeHandler = null;
+
+    onMounted(() => {
+        if (props.windowWidth === null) {
+            ownResizeHandler = () => { localWindowWidth.value = window.innerWidth; };
+            window.addEventListener('resize', ownResizeHandler, { passive: true });
+        }
+        if (imageRef.value?.complete) handleImageLoad();
+    });
+
+    onUnmounted(() => {
+        if (ownResizeHandler) window.removeEventListener('resize', ownResizeHandler);
+    });
+</script>
+
+<style lang="postcss" scoped>
+    .page-container {
+        @apply flex items-center justify-center;
+        transform-origin: center;
+        @apply p-0 sm:p-2;
+    }
+
+    .page-image {
+        @apply object-contain;
+        /* La largeur et max-height sont gérées par imageStyle selon le mode */
+        max-width: 100%;
+    }
+
+    /* Styles pour les doubles pages sur mobile */
+    .double-page-mobile {
+        @apply w-full h-full flex flex-col items-center justify-center relative;
+        /* Utiliser tout l'espace disponible */
+        min-height: 100vh;
+        min-width: 100vw;
+    }
+
+    .double-page-rotated {
+        @apply relative flex items-center justify-center;
+        /* Espace pour la rotation - utiliser tout l'espace */
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+    }
+
+    .double-page-rotated .page-image.rotated {
+        @apply origin-center;
+        /* Animation fluide pour la rotation */
+        transition: transform 0.3s ease-in-out;
+        /* Permettre le débordement contrôlé */
+        position: relative;
+        z-index: 1;
+    }
+
+    .double-page-scroll {
+        @apply w-full h-full flex flex-col items-center;
+        /* Utiliser toute la hauteur disponible */
+        min-height: 100vh;
+    }
+
+    .scroll-container {
+        @apply overflow-x-auto overflow-y-hidden w-full flex items-center justify-start;
+        /* Utiliser toute la hauteur et largeur */
+        height: 100vh;
+        width: 100vw;
+        /* Barres de défilement personnalisées */
+        scrollbar-width: thin;
+        scrollbar-color: #4F46E5 #E5E7EB;
+        /* Défilement fluide */
+        scroll-behavior: smooth;
+    }
+
+    .scroll-container::-webkit-scrollbar {
+        height: 12px; /* Plus visible sur mobile */
+    }
+
+    .scroll-container::-webkit-scrollbar-track {
+        @apply bg-gray-200 rounded;
+    }
+
+    .scroll-container::-webkit-scrollbar-thumb {
+        @apply bg-blue-600 rounded hover:bg-blue-700;
+    }
+
+    .double-page-scroll .page-image.scrollable {
+        @apply flex-shrink-0;
+        /* Centrer verticalement */
+        margin: auto 0;
+    }
+
+    /* Hints pour guider l'utilisateur - ajuster la position */
+    .rotation-hint,
+    .scroll-hint {
+        @apply absolute top-8 left-4 bg-black bg-opacity-70 text-white px-3 py-2 rounded-lg text-sm flex items-center gap-2 z-10;
+        /* Animation de disparition */
+        animation: fadeOut 4s ease-in-out 2s forwards;
+        /* S'assurer qu'ils sont visibles par-dessus tout */
+        z-index: 9999;
+    }
+
+    @keyframes fadeOut {
+        0%, 50% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
+    .error {
+        @apply text-red-500 text-xl;
+    }
+
+    /* Responsive ajustements */
+    @media (orientation: landscape) and (max-width: 768px) {
+        .double-page-rotated .page-image.rotated {
+            /* En mode paysage mobile, ajuster la rotation pour optimiser l'espace */
+            transform: none !important;
+        }
+
+        .rotation-hint {
+            display: none;
+        }
+
+        /* En paysage, utiliser le mode adaptatif automatiquement */
+        .double-page-rotated {
+            @apply flex items-center justify-center;
+            width: 100vw;
+            height: 100vh;
+        }
+    }
+
+    /* Spécifique pour les écrans très petits */
+    @media (max-width: 480px) {
+        .rotation-hint,
+        .scroll-hint {
+            @apply text-xs px-2 py-1;
+            top: 4px;
+            left: 4px;
+        }
+    }
+</style>
+
+

assets/vue/app/domain/reader/presentation/components/ReaderSettings.vue

@@ -0,0 +1,215 @@
+<template>
+    <div class="reader-settings">
+        <Transition
+            enter-active-class="transition-all duration-300 ease-out"
+            leave-active-class="transition-all duration-300 ease-in"
+            enter-from-class="opacity-0 translate-y-4 scale-95"
+            enter-to-class="opacity-100 translate-y-0 scale-100"
+            leave-from-class="opacity-100 translate-y-0 scale-100"
+            leave-to-class="opacity-0 translate-y-4 scale-95"
+        >
+            <div v-show="open" class="settings-panel" ref="panelRef">
+
+                <!-- Paramètres des doubles pages (mobile uniquement) -->
+                <div class="settings-section" v-if="isMobile">
+                    <h3 class="section-title">
+                        <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                        Doubles pages (Mobile)
+                    </h3>
+
+                    <div class="setting-item">
+                        <label class="setting-label">
+                            <input
+                                type="checkbox"
+                                :checked="doublePageSettings.autoDetect"
+                                @change="onDoublePageAutoDetectChange($event.target.checked)"
+                                class="setting-checkbox"
+                            />
+                            <span>Détection automatique</span>
+                        </label>
+                        <p class="setting-description">
+                            Détecter et optimiser automatiquement l'affichage des doubles pages sur mobile
+                        </p>
+                    </div>
+
+                    <div v-if="doublePageSettings.autoDetect" class="setting-item">
+                        <label class="setting-label">Mode d'affichage</label>
+                        <select
+                            :value="doublePageMode"
+                            @change="onDoublePageModeChange($event.target.value)"
+                            class="setting-select"
+                        >
+                            <option value="rotate">Rotation suggérée</option>
+                            <option value="scroll">Défilement horizontal</option>
+                            <option value="normal">Affichage normal</option>
+                        </select>
+                        <p class="setting-description">
+                            <span v-if="doublePageMode === 'rotate'">Suggère de tourner l'appareil pour une meilleure lecture</span>
+                            <span v-else-if="doublePageMode === 'scroll'">Permet le défilement horizontal pour naviguer dans la page (commence à droite)</span>
+                            <span v-else>Affichage standard sans optimisation spéciale</span>
+                        </p>
+                    </div>
+
+                    <div v-if="doublePageSettings.autoDetect" class="setting-item">
+                        <label class="setting-label">
+                            Sensibilité de détection: {{ doublePageSettings.detectionThreshold.toFixed(1) }}
+                        </label>
+                        <input
+                            type="range"
+                            :value="doublePageSettings.detectionThreshold"
+                            @input="onDetectionThresholdChange($event.target.value)"
+                            min="1.0"
+                            max="2.5"
+                            step="0.1"
+                            class="setting-slider"
+                        />
+                        <p class="setting-description">
+                            Plus la valeur est faible, plus la détection est sensible (1.4 recommandé)
+                        </p>
+                    </div>
+                </div>
+
+                <!-- Réinitialiser -->
+                <div class="settings-section">
+                    <div class="setting-actions">
+                        <button @click="onResetPreferences" class="action-button reset">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                            </svg>
+                            Réinitialiser les préférences
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>
+
+<script setup>
+    import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+    const props = defineProps({
+        doublePageMode: {
+            type: String,
+            default: 'rotate'
+        },
+        doublePageSettings: {
+            type: Object,
+            default: () => ({
+                autoDetect: true,
+                mobileOnly: true,
+                detectionThreshold: 1.4
+            })
+        },
+        open: {
+            type: Boolean,
+            default: false
+        }
+    });
+
+    const emit = defineEmits([
+        'toggleSettings',
+        'doublePageModeChange',
+        'doublePageAutoDetectChange',
+        'detectionThresholdChange',
+        'resetPreferences',
+    ]);
+
+    const isMobile = computed(() => window.innerWidth < 768);
+    const panelRef = ref(null);
+
+    const handleClickOutside = (event) => {
+        if (props.open && panelRef.value && !panelRef.value.contains(event.target)) {
+            emit('toggleSettings');
+        }
+    };
+
+    onMounted(() => document.addEventListener('click', handleClickOutside, true));
+    onUnmounted(() => document.removeEventListener('click', handleClickOutside, true));
+
+    const onDoublePageModeChange = (mode) => emit('doublePageModeChange', mode);
+    const onDoublePageAutoDetectChange = (enabled) => emit('doublePageAutoDetectChange', enabled);
+    const onDetectionThresholdChange = (threshold) => emit('detectionThresholdChange', parseFloat(threshold));
+    const onResetPreferences = () => {
+        emit('resetPreferences');
+        emit('toggleSettings');
+    };
+</script>
+
+<style lang="postcss" scoped>
+    .reader-settings {
+        @apply relative;
+    }
+
+    .settings-panel {
+        @apply fixed top-20 right-4 z-40 w-80 max-w-[calc(100vw-2rem)] bg-gray-800 rounded-lg shadow-xl border border-gray-700 max-h-[80vh] overflow-y-auto;
+    }
+
+    @media (max-width: 480px) {
+        .settings-panel {
+            width: 90vw;
+            max-width: calc(100vw - 1rem);
+            right: 0.5rem;
+        }
+    }
+
+    .settings-section {
+        @apply p-4 border-b border-gray-700 last:border-b-0;
+    }
+
+    .section-title {
+        @apply text-white font-semibold text-lg mb-3 flex items-center;
+    }
+
+    .setting-item {
+        @apply mb-4 last:mb-0;
+    }
+
+    .setting-label {
+        @apply flex items-center gap-2 text-white font-medium text-sm mb-2 cursor-pointer;
+    }
+
+    .setting-checkbox {
+        @apply w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2;
+    }
+
+    .setting-select {
+        @apply w-full bg-gray-700 border border-gray-600 text-white text-sm rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500;
+    }
+
+    .setting-slider {
+        @apply w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer mb-2;
+    }
+
+    .setting-slider::-webkit-slider-thumb {
+        @apply appearance-none w-4 h-4 bg-blue-600 rounded-full cursor-pointer;
+    }
+
+    .setting-slider::-moz-range-thumb {
+        @apply w-4 h-4 bg-blue-600 rounded-full cursor-pointer border-none;
+    }
+
+    .setting-description {
+        @apply text-gray-400 text-xs leading-relaxed;
+    }
+
+    .setting-actions {
+        @apply flex gap-2;
+    }
+
+    .action-button {
+        @apply flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors;
+    }
+
+    .action-button.reset {
+        @apply bg-red-600 hover:bg-red-700 text-white;
+    }
+
+    @media (max-width: 768px) {
+        .settings-panel {
+            @apply right-2 w-72;
+        }
+    }
+</style>

assets/vue/app/domain/reader/presentation/components/ReaderToolbar.vue

@@ -0,0 +1,178 @@
+<template>
+    <Toolbar :config="toolbarConfig">
+        <template #center>
+            <!-- Mode simple : navigation entre pages -->
+            <div v-if="store.readingMode === 'single'" class="flex items-center gap-1">
+                <button
+                    @click="store.previousPage()"
+                    :disabled="store.isFirstPage"
+                    class="nav-btn"
+                    title="Page précédente"
+                >
+                    <ChevronLeftIcon class="h-4 w-4" />
+                </button>
+                <span class="text-white text-sm w-16 text-center">
+                    {{ store.currentPage + 1 }} / {{ store.totalPages }}
+                </span>
+                <button
+                    @click="store.nextPage()"
+                    :disabled="store.isLastPage"
+                    class="nav-btn"
+                    title="Page suivante"
+                >
+                    <ChevronRightIcon class="h-4 w-4" />
+                </button>
+            </div>
+
+            <!-- Mode scroll : navigation entre chapitres (ordre inversé en RTL) -->
+            <div v-else class="flex items-center gap-1">
+                <button
+                    @click="leftChapterAction"
+                    :disabled="!canGoLeftChapter || store.isLoading"
+                    class="chapter-nav-btn"
+                    :title="store.readingDirection === 'rtl' ? 'Chapitre suivant' : 'Chapitre précédent'"
+                >
+                    <ChevronDoubleLeftIcon class="h-4 w-4 flex-shrink-0" />
+                    <span class="text-xs">{{ store.readingDirection === 'rtl' ? 'Suivant' : 'Précédent' }}</span>
+                </button>
+                <button
+                    @click="rightChapterAction"
+                    :disabled="!canGoRightChapter || store.isLoading"
+                    class="chapter-nav-btn"
+                    :title="store.readingDirection === 'rtl' ? 'Chapitre précédent' : 'Chapitre suivant'"
+                >
+                    <span class="text-xs">{{ store.readingDirection === 'rtl' ? 'Précédent' : 'Suivant' }}</span>
+                    <ChevronDoubleRightIcon class="h-4 w-4 flex-shrink-0" />
+                </button>
+            </div>
+        </template>
+    </Toolbar>
+</template>
+
+<script setup>
+    import {
+    ArrowLeftIcon,
+    ChevronDoubleLeftIcon,
+    ChevronDoubleRightIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    DocumentIcon,
+    EyeIcon,
+    EyeSlashIcon,
+    ListBulletIcon,
+    MinusIcon,
+    PlusIcon
+} from '@heroicons/vue/24/outline';
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+import { useHeaderStore } from '../../../../shared/stores/headerStore';
+import { useReaderStore } from '../../application/store/readerStore';
+
+    const props = defineProps({
+        chapterReaderRef: {
+            type: Object,
+            default: null
+        }
+    });
+
+    const store = useReaderStore();
+    const headerStore = useHeaderStore();
+    const router = useRouter();
+
+    // Vue auto-unwrap les refs dans le template : chapterReaderRef est déjà l'instance
+    const reader = computed(() => props.chapterReaderRef);
+
+    const goBack = () => {
+        const mangaId = store.currentChapter?.mangaId;
+        if (mangaId) {
+            router.push({ name: 'manga-details', params: { id: mangaId } });
+        } else {
+            router.back();
+        }
+    };
+
+    const toggleReadingMode = () => reader.value?.toggleReadingMode();
+    const toggleReadingDirection = () => reader.value?.toggleReadingDirection();
+    const zoomIn = () => store.setZoom(Math.min(store.zoom + 0.1, 2));
+    const zoomOut = () => store.setZoom(Math.max(store.zoom - 0.1, 0.5));
+
+    // En RTL, le bouton gauche (◄◄) avance dans l'histoire (chapitre suivant)
+    const isRtl = computed(() => store.readingDirection === 'rtl');
+    const leftChapterAction = () => isRtl.value ? store.goToNextChapter() : store.goToPreviousChapter();
+    const rightChapterAction = () => isRtl.value ? store.goToPreviousChapter() : store.goToNextChapter();
+    const canGoLeftChapter = computed(() => isRtl.value ? store.hasNextChapter : store.hasPreviousChapter);
+    const canGoRightChapter = computed(() => isRtl.value ? store.hasPreviousChapter : store.hasNextChapter);
+
+    const toolbarConfig = computed(() => ({
+        leftSection: [
+            {
+                type: 'button',
+                icon: ArrowLeftIcon,
+                label: 'Retour',
+                onClick: goBack,
+            },
+            {
+                type: 'label',
+                text: store.currentChapter?.title || '',
+                class: 'text-sm font-medium',
+            },
+            ...(store.currentChapter?.number != null ? [{
+                type: 'label',
+                text: `Ch.${store.currentChapter.number}`,
+            }] : []),
+        ],
+        rightSection: [
+            {
+                type: 'button',
+                icon: store.readingMode === 'single' ? ListBulletIcon : DocumentIcon,
+                label: store.readingMode === 'single' ? 'Scroll' : 'Simple',
+                active: store.readingMode === 'infinite',
+                onClick: toggleReadingMode,
+            },
+            {
+                type: 'button',
+                label: store.readingDirection.toUpperCase(),
+                active: store.readingDirection === 'rtl',
+                onClick: toggleReadingDirection,
+            },
+            { type: 'divider' },
+            {
+                type: 'button',
+                icon: MinusIcon,
+                disabled: store.zoom <= 0.5,
+                onClick: zoomOut,
+            },
+            {
+                type: 'label',
+                text: `${Math.round(store.zoom * 100)}%`,
+            },
+            {
+                type: 'button',
+                icon: PlusIcon,
+                disabled: store.zoom >= 2,
+                onClick: zoomIn,
+            },
+            ...(store.readingMode === 'infinite' ? [
+                { type: 'divider' },
+                {
+                    type: 'button',
+                    icon: headerStore.isReaderToolbarAutoHideEnabled ? EyeSlashIcon : EyeIcon,
+                    active: headerStore.isReaderToolbarAutoHideEnabled,
+                    title: headerStore.isReaderToolbarAutoHideEnabled ? 'Toolbar auto-masquée' : 'Toolbar toujours visible',
+                    onClick: () => headerStore.toggleReaderToolbarAutoHide(),
+                },
+            ] : []),
+        ],
+    }));
+</script>
+
+<style lang="postcss" scoped>
+    .nav-btn {
+        @apply flex items-center justify-center w-7 h-7 rounded bg-gray-700 hover:bg-gray-600 disabled:opacity-40 disabled:cursor-not-allowed transition-colors text-white;
+    }
+
+    .chapter-nav-btn {
+        @apply flex items-center justify-between gap-1 h-7 w-28 px-2 rounded bg-gray-700 hover:bg-gray-600 disabled:opacity-40 disabled:cursor-not-allowed transition-colors text-white;
+    }
+</style>

assets/vue/app/domain/reader/presentation/components/SingleModeReader.vue

@@ -0,0 +1,233 @@
+<template>
+    <div class="single-mode-reader">
+        <!-- Zone cliquable pour navigation -->
+        <div class="page-navigation-wrapper" @click="handlePageClick">
+                        <!-- Zone de navigation gauche (invisible) -->
+            <div
+                class="navigation-zone left-zone"
+                @click.stop="onLeftZoneClick"
+                @mouseenter="showLeftHint"
+                @mouseleave="hideLeftHint"
+                :title="isRtl ? 'Page suivante' : 'Page précédente'"
+            ></div>
+
+            <!-- Page centrale -->
+            <div class="page-content">
+                <ReaderPage
+                    :page-data="pageData"
+                    :page-number="pageNumber"
+                    :zoom="zoom"
+                    :double-page-mode="doublePageMode"
+                />
+            </div>
+
+            <!-- Zone de navigation droite (invisible) -->
+            <div
+                class="navigation-zone right-zone"
+                @click.stop="onRightZoneClick"
+                @mouseenter="showRightHint"
+                @mouseleave="hideRightHint"
+                :title="isRtl ? 'Page précédente' : 'Page suivante'"
+            ></div>
+        </div>
+
+        <!-- Indicateurs visuels de navigation -->
+        <div class="navigation-hints">
+            <div class="hint left-hint" v-if="canGoLeft && (showNavigationHints || showLeftHintHover)">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                </svg>
+            </div>
+            <div class="hint right-hint" v-if="canGoRight && (showNavigationHints || showRightHintHover)">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { useReaderStore } from '../../application/store/readerStore';
+import ReaderPage from './ReaderPage.vue';
+
+const props = defineProps({
+    pageData: {
+        type: Object,
+        required: true
+    },
+    pageNumber: {
+        type: Number,
+        required: true
+    },
+    zoom: {
+        type: Number,
+        required: true
+    },
+    doublePageMode: {
+        type: String,
+        required: true
+    }
+});
+
+const emit = defineEmits(['buttonClick']);
+
+const store = useReaderStore();
+
+// État pour afficher les indicateurs de navigation
+const showNavigationHints = ref(false);
+const showLeftHintHover = ref(false);
+const showRightHintHover = ref(false);
+let hintTimeout = null;
+
+const isRtl = computed(() => store.readingDirection === 'rtl');
+
+// Computed pour vérifier les possibilités de navigation
+const canGoToPrevious = computed(() => !store.isFirstPage || store.hasPreviousChapter);
+const canGoToNext = computed(() => !store.isLastPage || store.hasNextChapter);
+
+// En RTL, le côté gauche avance dans l'histoire (page suivante) et le droit recule
+const canGoLeft = computed(() => isRtl.value ? canGoToNext.value : canGoToPrevious.value);
+const canGoRight = computed(() => isRtl.value ? canGoToPrevious.value : canGoToNext.value);
+
+const onLeftZoneClick = () => isRtl.value ? goToNext() : goToPrevious();
+const onRightZoneClick = () => isRtl.value ? goToPrevious() : goToNext();
+
+// Navigation vers la page/chapitre précédent
+const goToPrevious = async () => {
+    if (!store.isFirstPage) {
+        // Page précédente dans le même chapitre
+        await store.previousPage();
+    } else if (store.hasPreviousChapter) {
+        // Chapitre précédent (le store gère automatiquement la navigation vers la dernière page)
+        await store.goToPreviousChapter();
+    }
+    showNavigationHints.value = true;
+    emit('buttonClick'); // Signaler l'interaction pour afficher les boutons
+    clearTimeout(hintTimeout);
+    hintTimeout = setTimeout(() => {
+        showNavigationHints.value = false;
+    }, 1000);
+};
+
+// Navigation vers la page/chapitre suivant
+const goToNext = async () => {
+    if (!store.isLastPage) {
+        // Page suivante dans le même chapitre
+        await store.nextPage();
+    } else if (store.hasNextChapter) {
+        // Première page du chapitre suivant
+        await store.goToNextChapter();
+        // Le store va charger le chapitre suivant et se positionner automatiquement à la première page
+    }
+    showNavigationHints.value = true;
+    emit('buttonClick'); // Signaler l'interaction pour afficher les boutons
+    clearTimeout(hintTimeout);
+    hintTimeout = setTimeout(() => {
+        showNavigationHints.value = false;
+    }, 1000);
+};
+
+// Gestion du clic général sur la page (fallback)
+const handlePageClick = (event) => {
+    // Si le clic n'a pas été intercepté par les zones, on navigue vers la page suivante
+    goToNext();
+};
+
+// Gestion des hints au hover
+const showLeftHint = () => {
+    showLeftHintHover.value = true;
+};
+
+const hideLeftHint = () => {
+    showLeftHintHover.value = false;
+};
+
+const showRightHint = () => {
+    showRightHintHover.value = true;
+};
+
+const hideRightHint = () => {
+    showRightHintHover.value = false;
+};
+</script>
+
+<style lang="postcss" scoped>
+.single-mode-reader {
+    @apply relative w-full flex-1 flex flex-col min-h-0 overflow-hidden;
+    @apply py-2;
+}
+
+.page-navigation-wrapper {
+    /* overflow-auto : scrollbars quand l'image zoomée déborde */
+    @apply relative w-full flex-1 min-h-0 overflow-auto cursor-pointer;
+}
+
+.page-content {
+    /* min-h-full : centre l'image quand elle est plus petite que le conteneur */
+    min-height: 100%;
+    @apply flex items-center justify-center;
+    pointer-events: none;
+}
+
+.navigation-zone {
+    @apply absolute top-0 bottom-0 z-10;
+    width: 33%; /* 1/3 de la largeur pour chaque zone */
+}
+
+.left-zone {
+    @apply left-0;
+    cursor: pointer;
+}
+
+.right-zone {
+    @apply right-0;
+    cursor: pointer;
+}
+
+/* Indicateurs visuels de navigation */
+.navigation-hints {
+    @apply absolute inset-0 pointer-events-none z-20;
+}
+
+.hint {
+    @apply absolute top-1/2 transform -translate-y-1/2;
+    @apply bg-black/50 text-white p-2 rounded-full;
+    @apply transition-all duration-300;
+}
+
+.left-hint {
+    @apply left-4;
+    animation: slideInLeft 0.3s ease-out;
+}
+
+.right-hint {
+    @apply right-4;
+    animation: slideInRight 0.3s ease-out;
+}
+
+@keyframes slideInLeft {
+    from {
+        opacity: 0;
+        transform: translateY(-50%) translateX(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(-50%) translateX(0);
+    }
+}
+
+@keyframes slideInRight {
+    from {
+        opacity: 0;
+        transform: translateY(-50%) translateX(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(-50%) translateX(0);
+    }
+}
+
+/* Pas d'effet hover background - les flèches apparaissent à la place */
+</style>

assets/vue/app/domain/reader/presentation/pages/ChapterPage.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="chapter-page">
+        <div
+            class="toolbar-wrapper"
+            :class="{ 'toolbar-hidden': !headerStore.shouldShowReaderToolbar }"
+        >
+            <div class="toolbar-slide">
+                <ReaderToolbar :chapter-reader-ref="chapterReaderRef" />
+            </div>
+        </div>
+        <div class="reader-container">
+            <ChapterReader ref="chapterReaderRef" :chapter-id="chapterId" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useHeaderStore } from '../../../../shared/stores/headerStore';
+import ChapterReader from '../components/ChapterReader.vue';
+import ReaderToolbar from '../components/ReaderToolbar.vue';
+
+    const route = useRoute();
+    const headerStore = useHeaderStore();
+
+    const chapterId = computed(() => route.params.chapterId);
+    const chapterReaderRef = ref(null);
+</script>
+
+<style lang="postcss" scoped>
+    .chapter-page {
+        @apply w-full h-full flex flex-col;
+    }
+
+    .toolbar-wrapper {
+        @apply overflow-hidden;
+        max-height: 5rem;
+        transition: max-height 300ms ease-in-out;
+    }
+
+    .toolbar-wrapper.toolbar-hidden {
+        max-height: 0;
+    }
+
+    .toolbar-slide {
+        transform: translateY(0);
+        transition: transform 300ms ease-in-out;
+    }
+
+    .toolbar-hidden .toolbar-slide {
+        transform: translateY(-100%);
+    }
+
+    .reader-container {
+        @apply flex-1 overflow-hidden min-h-0;
+    }
+</style>