Added:

- new simpler modal without bootstrap
- new loadingbutton component
- cleanupsome old code
- toolbar adjusments

assets/controllers/addmanga_controller.js

@@ -0,0 +1,14 @@
+// assets/controllers/addmanga_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    index: Number
+  }
+
+  openModal(event) {
+    event.preventDefault()
+    const openEvent = new CustomEvent(`openAddMangaModal${this.indexValue}`)
+    document.dispatchEvent(openEvent)
+  }
+}

assets/controllers/bootstrap-modal_controller.js

@@ -1,21 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-import { Modal } from 'bootstrap';
-
-/**
- * Allows you to dispatch a "modal:close" JavaScript event to close it.
- *
- * This is useful inside a LiveComponent, where you can emit a browser event
- * to open or close the modal.
- *
- * See templates/components/BootstrapModal.html.twig to see how this is
- * attached to Bootstrap modal.
- */
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-  modal = null;
-
-  connect() {
-    this.modal = Modal.getOrCreateInstance(this.element);
-    document.addEventListener('modal:close', () => this.modal.hide());
-  }
-}

assets/controllers/loading_button_controller.js

@@ -0,0 +1,21 @@
+// assets/controllers/loading_button_controller.js
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["text", "loader"];
+  static values = {form: String};
+
+  startLoading(event) {
+    event.preventDefault();
+    this.textTarget.classList.add("hidden");
+    this.loaderTarget.classList.remove("hidden");
+    this.element.disabled = true;
+
+    if (this.hasFormValue) {
+      const form = document.getElementById(this.formValue);
+      if (form) {
+        form.submit();
+      }
+    }
+  }
+}

assets/controllers/modal_controller.js

@@ -0,0 +1,37 @@
+// assets/controllers/modal_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["modal"]
+  static values = {
+    openTrigger: String,
+    closeTrigger: String
+  }
+
+  connect() {
+    if (this.hasOpenTriggerValue) {
+      document.addEventListener(this.openTriggerValue, this.open.bind(this))
+    }
+    if (this.hasCloseTriggerValue) {
+      document.addEventListener(this.closeTriggerValue, this.close.bind(this))
+    }
+  }
+
+  disconnect() {
+    if (this.hasOpenTriggerValue) {
+      document.removeEventListener(this.openTriggerValue, this.open.bind(this))
+    }
+    if (this.hasCloseTriggerValue) {
+      document.removeEventListener(this.closeTriggerValue, this.close.bind(this))
+    }
+  }
+
+  open() {
+    console.log("Opening modal...")
+    this.modalTarget.classList.remove('hidden')
+  }
+
+  close() {
+    this.modalTarget.classList.add('hidden')
+  }
+}

assets/controllers/toolbar_controller.js

@@ -26,7 +26,8 @@ export default class extends Controller {
   }
 
   editManga() {
-    console.log("Editing manga...");
+    const event = new CustomEvent('openEditModal');
+    document.dispatchEvent(event);
   }
 
   deleteMangas() {
@@ -34,13 +35,17 @@ export default class extends Controller {
   }
 
   deleteManga() {
-    console.log("Deleting manga...");
+    const event = new CustomEvent('openDeleteModal');
+    document.dispatchEvent(event);
   }
 
   showOptions() {
     console.log("Showing options...");
   }
 
+  expandAll() {
+    console.log("Expanding all...");
+  }
   changeView(event) {
     event.preventDefault();
     const viewOption = event.currentTarget.dataset.view;

src/Controller/MangaController.php

@@ -5,39 +5,35 @@ namespace App\Controller;
 use App\Entity\Chapter;
 use App\Entity\Manga;
 use App\Manager\Toolbar\Factory\ToolbarFactory;
-use App\Manager\ToolbarManager;
 use App\Message\DownloadChapter;
 use App\Repository\ChapterRepository;
 use App\Repository\MangaRepository;
 use App\Service\CbzService;
-use App\Service\MangaExportService;
-use App\Service\LelScansProviderService;
-use App\Service\MangaScraperServiceOld;
-use App\Service\MangaUpdatesMetadataProvider;
+use App\Service\MangadexProvider;
+use Doctrine\DBAL\Exception\UniqueConstraintViolationException;
+use Doctrine\ORM\EntityManagerInterface;
 use Doctrine\ORM\NonUniqueResultException;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\BinaryFileResponse;
 use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpFoundation\ResponseHeaderBag;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 use Symfony\Component\Messenger\MessageBusInterface;
 use Symfony\Component\Routing\Attribute\Route;
-use Symfony\Component\String\Slugger\AsciiSlugger;
 
 class MangaController extends AbstractController
 {
     public function __construct(
-        private readonly MangaScraperServiceOld       $mangaScraperService,
-        private readonly MangaExportService           $mangaExportService,
-        private readonly LelScansProviderService      $mangaProviderService,
         private readonly MangaRepository              $mangaRepository,
         private readonly ChapterRepository            $chapterRepository,
-        private readonly MangaUpdatesMetadataProvider $mangaUpdatesDbProvider,
         private readonly MessageBusInterface          $bus,
         private readonly CbzService                   $cbzService,
-        private readonly ToolbarFactory               $toolbarFactory
+        private readonly ToolbarFactory               $toolbarFactory,
+        private MangadexProvider $mangadexProvider,
+        private EntityManagerInterface $entityManager
     )
     {
     }
@@ -146,21 +142,70 @@ class MangaController extends AbstractController
         ]);
     }
 
-    #[Route('/manga/new/{query}', name: 'app_manga_new')]
-    public function addNew(string $query = ''): Response
+    #[Route('/manga/search/{query}', name: 'app_manga_search')]
+    public function search(string $query = ''): Response
     {
         return $this->render('manga/add_new.html.twig', [
             'query' => $query,
         ]);
     }
 
-    public function search(string $title): Response
-    {
-        $mangas = $this->mangaUpdatesDbProvider->search($title);
 
-        return $this->render('manga/add_new.html.twig', [
-            'mangas' => $mangas,
-        ]);
+    #[Route('/addManga', name: 'app_manga_add')]
+    public function addManga(Request $request): Response
+    {
+        $manga = new Manga();
+        $manga->setTitle($request->request->get('title'))
+            ->setSlug($request->request->get('slug'))
+            ->setDescription($request->request->get('description'))
+            ->setImageUrl($request->request->get('imageUrl'))
+            ->setStatus($request->request->get('status'))
+            ->setGenres(explode(',', $request->request->get('genres')))
+            ->setAuthor($request->request->get('author'))
+            ->setPublicationYear($request->request->get('publicationYear'))
+            ->setRating($request->request->get('rating'))
+            ->setExternalId($request->request->get('externalId'));
+
+        $mangaFeed = $this->mangadexProvider->getFeed($manga);
+        $mangaAggregate = $this->mangadexProvider->getMangaAggregate($manga);
+
+        $allChapters = array_merge($mangaFeed, $mangaAggregate);
+
+        $mergedChapters = [];
+        foreach ($allChapters as $chapter) {
+            $number = $chapter->getNumber();
+
+            if (isset($mergedChapters[$number])) {
+                $existingChapter = $mergedChapters[$number];
+
+                if (!empty($chapter->getExternalId()) ||
+                    (empty($existingChapter->getExternalId()) && !strpos($chapter->getTitle(), 'Chapter ') == 0)) {
+                    $mergedChapters[$number] = $chapter;
+                }
+            } else {
+                $mergedChapters[$number] = $chapter;
+            }
+        }
+
+        foreach($mergedChapters as $chapter) {
+            $manga->addChapter($chapter);
+        }
+
+        try {
+            foreach ($manga->getChapters() as $chapter) {
+                $this->entityManager->persist($chapter);
+            }
+
+            $this->entityManager->persist($manga);
+            $this->entityManager->flush();
+        } catch (\Exception $e) {
+            if ($e instanceof UniqueConstraintViolationException) {
+                return $this->redirectToRoute('app_manga_show', ['mangaSlug' => $manga->getSlug()]);
+            }
+            throw $e;
+        }
+
+        return $this->redirectToRoute('app_manga_show', ['mangaSlug' => $manga->getSlug()]);
     }
 
     #[Route('/addChapter/{id}', name: 'add_chapter')]
@@ -226,108 +271,4 @@ class MangaController extends AbstractController
 
         return true;
     }
-
-    #[Route('/scrape', name: 'manga_scrape', methods: 'POST')]
-    public function scrapeByMangaAndChapter(Request $request): Response
-    {
-        $mangaSlug = $request->request->get('mangaSlug');
-        $chapterNumber = $request->request->get('chapterNumber');
-
-        $response = $this->scrapeChapter($mangaSlug, $chapterNumber);
-
-        $manga = $this->mangaRepository->findOneBy(['slug' => $mangaSlug]);
-
-        $availableChapters = $this->mangaProviderService->getChapterList($mangaSlug);
-
-        return $this->render('manga/show_chapters.html.twig', [
-            'controller_name' => 'MangaController',
-            'manga' => $manga,
-            'availableChapters' => $availableChapters,
-        ]);
-    }
-
-    #[Route('/scrapeFrom', name: 'manga_scrape_from_chapter', methods: 'POST')]
-    public function scrapeByMangaFromChapter(Request $request): Response
-    {
-        $mangaSlug = $request->request->get('mangaSlug');
-        $chapterNumber = $request->request->get('chapterNumber');
-
-        do {
-            $response = $this->scrapeChapter($mangaSlug, $chapterNumber);
-            $chapterNumber++;
-        } while ($response !== false);
-
-        $availableChapters = $this->mangaProviderService->getChapterList($mangaSlug);
-
-        return $this->redirectToRoute('app_manga_show', ['mangaSlug' => $mangaSlug, 'availableChapters' => $availableChapters]);
-    }
-
-    #[Route('/manga/exportFrom/{mangaSlug}/{chapterNumber}', name: 'manga_export')]
-    public function exportMangaCbz(string $mangaSlug, float $chapterNumber)
-    {
-        $response = $this->exportCbz($this->slugToTitle($mangaSlug), $chapterNumber);
-
-        dd($response);
-    }
-
-    #[Route('/getList', name: 'get_manga_list')]
-    public function getMangaList()
-    {
-        $list = $this->mangaProviderService->getMangaList();
-
-    }
-
-    private function scrapeChapter(string $mangaSlug, float $chapterNumber): array|bool
-    {
-        $url = 'https://lelscans.net/scan-' . $mangaSlug . '/' . $chapterNumber;
-
-        $manga = $this->mangaRepository->findOneBy(['slug' => $mangaSlug]);
-
-        if (!is_null($manga)) {
-            $scrapedManga = $this->mangaScraperService->scrapeMangaChapter($url, $manga->getTitle(), $chapterNumber);
-        } else {
-            $title = $this->slugToTitle($mangaSlug);
-            $manga = new Manga();
-            $manga->setTitle($title);
-            $manga->setSlug($mangaSlug);
-            $this->mangaRepository->save($manga);
-            $scrapedManga = $this->mangaScraperService->scrapeMangaChapter($url, $title, $chapterNumber);
-        }
-
-        return $scrapedManga;
-    }
-
-    private function exportCbz(string $mangaSlug, float $chapterNumber): array
-    {
-        $exported = [];
-        do {
-            $response = $this->mangaExportService->exportMangaChapter($mangaSlug, $chapterNumber);
-
-            if ($response === 'already_exported') {
-                $exported[] = $mangaSlug . ' - ' . $chapterNumber . ' ' . $response;
-            } elseif ($response === true) {
-                $exported[] = $mangaSlug . ' - ' . $chapterNumber . ' exported';
-            } else {
-                $exported[] = $mangaSlug . ' - ' . $chapterNumber . ' something went wrong';
-            }
-
-            $chapterNumber++;
-        } while ($response !== false);
-
-        return $exported;
-    }
-
-    private function slugToTitle(string $slug): string
-    {
-        $slugger = new AsciiSlugger();
-        $title = $slugger->slug($slug)->replace('-', ' ')->title(true)->toString();
-
-        return $title;
-    }
-
-    private function titleToSlug(string $title): string
-    {
-        $slugger = new AsciiSlugger();
-        return $slugger->slug($title)->lower()->toString();
-    }
 }

src/Manager/Toolbar/Definition/ChapterListToolbar.php

@@ -9,13 +9,18 @@ class ChapterListToolbar extends Toolbar
 {
     public function __construct()
     {
-        $this->addToLeftGroup(new ToolbarButton('keyboard', 'Rename chapters', 'renameChapters'))
+        $this
+            ->addToLeftGroup(new ToolbarButton('arrows-rotate', 'Refresh metadata', 'refreshMetadata'))
+            ->addToLeftGroup(new ToolbarDivider())
+            ->addToLeftGroup(new ToolbarButton('keyboard', 'Rename chapters', 'renameChapters'))
             ->addToLeftGroup(new ToolbarButton('file-zipper', 'Manage cbz', 'manageCbz'))
             ->addToLeftGroup(new ToolbarButton('history', 'History', 'history'))
-            ->addToLeftGroup(new ToolbarDivider())
-            ->addToLeftGroup(new ToolbarButton('bookmark', 'Monitoring', 'monitoring'))
-            ->addToLeftGroup(new ToolbarButton('wrench', 'Edit', 'edit'))
-            ->addToLeftGroup(new ToolbarButton('trash-can', 'Delete', 'delete'))
+
+
+            ->addToRightGroup(new ToolbarButton('bookmark', 'Monitoring', 'monitoring'))
+            ->addToRightGroup(new ToolbarButton('wrench', 'Edit', 'editManga'))
+            ->addToRightGroup(new ToolbarButton('trash-can', 'Delete', 'deleteManga'))
+            ->addToRightGroup(new ToolbarDivider())
             ->addToRightGroup(new ToolbarButton('chevron-down', 'Expand all', 'expandAll'));
     }
 }

src/Manager/Toolbar/Definition/MangaListToolbar.php

@@ -10,10 +10,8 @@ class MangaListToolbar extends Toolbar
 {
     public function __construct()
     {
-        $this->addToLeftGroup(new ToolbarButton('arrows-rotate', 'Refresh metadata', 'refreshMetadata'))
-            ->addToLeftGroup(new ToolbarButton('search', 'Search last chapter', 'searchLastChapter'))
-            ->addToLeftGroup(new ToolbarDivider())
-            ->addToLeftGroup(new ToolbarButton('plus', 'Add Manga', 'addManga'))
+        $this->addToLeftGroup(new ToolbarButton('arrows-rotate', 'Refresh', 'refreshMetadata'))
+            ->addToLeftGroup(new ToolbarButton('search', 'Search', 'searchLastChapter'))
 
             ->addToRightGroup(new ToolbarButton('th-large', 'Options', 'options'))
             ->addToRightGroup(new ToolbarDivider())

src/Twig/Components/MangaSearch.php

@@ -2,16 +2,12 @@
 
 namespace App\Twig\Components;
 
-use App\Repository\MangaRepository;
 use App\Service\MangadexProvider;
-use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
 use Exception;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
 use Symfony\UX\LiveComponent\Attribute\LiveProp;
-use Symfony\UX\LiveComponent\ComponentToolsTrait;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
-use Symfony\UX\LiveComponent\ValidatableComponentTrait;
 
 #[AsLiveComponent]
 class MangaSearch
@@ -21,7 +17,7 @@ class MangaSearch
     #[LiveProp(writable: true)]
     public ?string $query = null;
 
-    public function __construct(private readonly MangadexProvider $mangadexProvider, private MangaRepository $mangaRepository)
+    public function __construct(private readonly MangadexProvider $mangadexProvider)
     {
     }
 
@@ -30,8 +26,6 @@ class MangaSearch
      */
     public function getMangas(): Collection|null
     {
-//        return new ArrayCollection($this->mangaRepository->findAll());
-
         if ($this->query === null || $this->query === '') {
             return null;
         }

templates/activity/index.html.twig

@@ -5,7 +5,7 @@
     {% endif %}
 {% endblock %}
 {% block body %}
-    <div class="container mx-auto mt-2">
+    <div class="container mx-auto">
         <div class="bg-white overflow-hidden">
             <div class="overflow-x-auto">
                 <table class="min-w-full bg-white">

templates/base.html.twig

@@ -15,7 +15,7 @@
 <body class="bg-gray-50 h-full overflow-hidden" data-controller="menu">
 <div data-controller="mercure" data-mercure-topic="notification"></div>
 
-<div data-controller="alert" class="fixed right-0 z-50 flex justify-center w-full">
+<div data-controller="alert" class="fixed right-0 z-[60] flex justify-center w-full">
     <div data-alert-target="alert" style="display: none;"
          class="mt-8 max-w-fit p-4 rounded-lg shadow-lg text-white border-2 border-gray-200 transition-opacity duration-1000 ease-out">
         <i data-alert-target="icon" class="fa text-xl mr-2"></i>
@@ -24,11 +24,8 @@
 </div>
 
 <!-- Header -->
-<header class="bg-green-600 h-16 flex items-center fixed w-full z-30">
-    <button data-action="click->menu#toggleMenu" class="text-white p-2 md:hidden">
-        <i class="fas fa-bars"></i>
-    </button>
-    <div class="flex justify-center ml-10">
+<header class="bg-green-600 h-16 flex items-center fixed w-full z-50">
+    <div class="flex justify-center ml-4">
         <a class="flex flex-row justify-start" href="{{ path('app_manga') }}">
             {#                <div class="flex items-center"> #}
             {#                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" #}
@@ -50,8 +47,11 @@
             <img src="{{ asset('img/mangarr_logo.png') }}" alt="Mangarr" class="w-32 shadow-xl">
         </a>
     </div>
-    <div class="ml-8 w-60">
-        <twig:Search/>
+    <button data-action="click->menu#toggleMenu" class="ml-4 text-white p-2 md:hidden">
+        <i class="fas fa-bars"></i>
+    </button>
+    <div class="ml-4 w-60 relative">
+        <twig:Search/> <!-- Search component -->
     </div>
 </header>
 
@@ -59,7 +59,7 @@
 <div class="flex h-full pt-16">
     <!-- Sidebar -->
     <nav data-menu-target="sidebar" class="w-60 bg-white h-full overflow-y-auto fixed left-0 transform -translate-x-full transition-transform duration-200 ease-in-out md:translate-x-0 z-40">
-        {% include 'menu/menu.html.twig' %}
+        {% include 'menu/menu.html.twig' %} <!-- Menu component -->
     </nav>
 
     <!-- Main content -->

templates/components/BootstrapModal.html.twig

@@ -1,34 +0,0 @@
-<div {{ attributes.defaults({
-    class: 'modal fade',
-    tabindex: '-1',
-    'aria-hidden': 'true',
-    id: id ? id : false,
-}) }}
-    data-controller="bootstrap-modal"
-    data-bs-backdrop="false"
->
-    <div class="fixed top-0 left-0 w-full h-full outline-none" tabindex="-1" role="dialog">
-        <div class="modal-dialog mt-44 relative w-auto pointer-events-none max-w-lg my-8 mx-auto px-4 sm:px-0"
-             role="document">
-            <div class="relative flex flex-col w-full pointer-events-auto bg-white border border-gray-300 rounded-sm">
-                <div class="flex items-start justify-between p-4 border-b border-gray-300 rounded-t">
-                    <div class="modal-header w-full">
-                        {% block modal_header %}{% endblock %}
-                    </div>
-                </div>
-                <div class="relative flex p-4">
-                    <div class="modal-body">
-                        {% block modal_body %}{% endblock %}
-                    </div>
-                </div>
-                <div class="flex items-center justify-end p-4 border-t border-gray-300">
-                    {% if block('modal_footer') %}
-                        <div class="modal-footer">
-                            {% block modal_footer %}{% endblock %}
-                        </div>
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

templates/components/DropdownMenu.html.twig

@@ -6,6 +6,7 @@
             text="{{ text }}"
             action="toggle"
             data-dropdown-target="button"
+            controller="dropdown"
         />
         <div class="absolute left-0 mt-2 w-max z-10 bg-gray-800 rounded-sm shadow-lg hidden"
              data-dropdown-target="menu" data-controller="toolbar">

templates/components/LoadingButton.html.twig

@@ -0,0 +1,17 @@
+{# templates/components/LoadingButton.html.twig #}
+<button {{ attributes }}
+    {% if type is defined %}type="{{ type }}"{% endif %}
+    {% if form is defined %}form="{{ form }}" data-loading-button-form-value="{{ form }}"{% endif %}
+    data-controller="loading-button"
+    data-action="click->loading-button#startLoading"
+    class="bg-{{ color|default('green') }}-500 hover:bg-{{ color|default('green') }}-600 text-sm text-white font-bold py-2 px-4 rounded flex items-center justify-center"
+>
+    <span data-loading-button-target="text">{{ text }}</span>
+    <span data-loading-button-target="loader" class="hidden">
+        <svg class="animate-spin h-5 w-5 text-white" 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>
+    </span>
+</button>

templates/components/MangaSearch.html.twig

@@ -22,15 +22,17 @@
     {% if this.mangas %}
         <div data-loading="addClass(opacity-50)" class="mt-3">
             {% for manga in this.mangas %}
-                <div class="flex w-full bg-white shadow-lg mb-8 hover:bg-green-50" data-bs-toggle="modal"
-                     data-bs-target="#mangaModal{{ loop.index }}-{{ manga.slug }}">
+                <div {{ stimulus_controller('addmanga', { 'index': loop.index })}}>
+                    <div class="flex w-full bg-white shadow-lg mb-8 hover:bg-green-50"
+                         data-action="click->addmanga#openModal">
                         <a href="#" class="flex-none w-48 relative">
                             <img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}"
                                  class="w-full h-full -z-10 object-cover" style="width: 150px; height: 220px;">
                         </a>
                         <div class="w-full p-4 flex flex-col justify-between leading-normal">
                             <div class="mb-2">
-                            <div class="flex w-full text-xl font-bold text-gray-900 mb-4 items-center justify-between">
+                                <div
+                                    class="flex w-full text-xl font-bold text-gray-900 mb-4 items-center justify-between">
                                     <div class="flex items-center">
                                         <span>{{ manga.title }}</span>
                                         <span class="text-2xl text-gray-500 ml-2">({{ manga.publicationYear }})</span>
@@ -58,7 +60,54 @@
                             </div>
                         </div>
                     </div>
-                {{ component('NewMangaForm', {manga: manga, index: loop.index}) }}
+
+
+                    <twig:Modal
+                        openTrigger="openAddMangaModal{{ loop.index }}"
+                        closeTrigger="closeAddMangaModal{{ loop.index }}"
+                        title="Add Manga"
+                        modalId="manga-modal-{{ loop.index }}"
+                    >
+                        {% block content %}
+                            <form id="manga-{{ loop.index }}" action="{{ path('app_manga_add') }}" method="POST">
+                                <input type="hidden" name="title" value="{{ manga.title }}">
+                                <input type="hidden" name="slug" value="{{ manga.slug }}">
+                                <input type="hidden" name="description" value="{{ manga.description }}">
+                                <input type="hidden" name="imageUrl" value="{{ manga.imageUrl }}">
+                                <input type="hidden" name="status" value="{{ manga.status }}">
+                                <input type="hidden" name="genres" value="{{ manga.genres|join(',') }}">
+                                <input type="hidden" name="author" value="{{ manga.author }}">
+                                <input type="hidden" name="publicationYear" value="{{ manga.publicationYear }}">
+                                <input type="hidden" name="rating" value="{{ manga.rating }}">
+                                <input type="hidden" name="externalId" value="{{ manga.externalId }}">
+                                <div class="flex justify-between">
+                                    <img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}"
+                                         alt="{{ manga.title }}"
+                                         class="img-fluid mb-2"
+                                         style="width: 150px; height: 220px;"
+                                    >
+                                    <div class="ml-4">
+                                        <p>{{ manga.description|truncate(250) }}</p>
+                                        <p><strong>Année de publication:</strong> {{ manga.publicationYear }}</p>
+                                        <p><strong>Genres:</strong> {{ manga.genres|join(', ') }}</p>
+                                        <p><strong>Note:</strong> {{ manga.rating }}</p>
+                                    </div>
+                                </div>
+                            </form>
+                        {% endblock %}
+                        {% block footer %}
+                            <button type="button" data-action="modal#close" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+                                Cancel
+                            </button>
+                            {{ component('LoadingButton', {
+                                text: 'Add ' ~ manga.title,
+                                type: 'submit',
+                                form: 'manga-' ~ loop.index,
+                                color: 'green'
+                            }) }}
+                        {% endblock %}
+                    </twig:Modal>
+                </div>
             {% endfor %}
         </div>
     {% endif %}

templates/components/Modal.html.twig

@@ -0,0 +1,33 @@
+{# templates/components/Modal.html.twig #}
+<div
+    {{ attributes }}
+    data-controller="modal"
+    data-modal-open-trigger-value="{{ openTrigger }}"
+    data-modal-close-trigger-value="{{ closeTrigger }}"
+    {% if modalId is defined %}id="{{ modalId }}"{% endif %}
+>
+    <div data-modal-target="modal" class="fixed inset-0 z-50 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            {# Backdrop #}
+            <div data-action="click->modal#close" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
+
+            {# Centrage vertical trick #}
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+            {# Modal panel #}
+            <div class="inline-block align-bottom bg-white rounded-sm text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+                        {{ title }}
+                    </h3>
+                    <div class="mt-2">
+                        {{ block('content') }}
+                    </div>
+                </div>
+                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                    {{ block('footer') }}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

templates/components/Search.html.twig

@@ -1,3 +1,4 @@
+{# templates/components/Search.html.twig #}
 <div{{ attributes }}>
     <div class="flex items-center py">
         <i class="fas fa-search text-white"></i>
@@ -10,7 +11,7 @@
     </div>
 
     {% if query %}
-        <div id="searchResults" class="fixed min-w-60 ml-8 mt-2 rounded-sm shadow-lg max-h-60 overflow-y-auto">
+        <div id="searchResults" class="absolute left-0 right-0 min-w-60 ml-8 mt-2 rounded-sm shadow-lg max-h-60 overflow-y-auto z-50">
             <ul class="bg-gray-700 text-white">
                 {% if this.mangas is not empty %}
                     <li class="px-4 py-2 text-gray-400">Mangas existants</li>
@@ -26,7 +27,7 @@
                 {% else %}
                     <li class="px-4 py-2 text-gray-400">Aucun manga trouvé.</li>
                     <li class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
-                        <a class="flex items-center" href="{{ path('app_manga_new', {query: query}) }}">
+                        <a class="flex items-center" href="{{ path('app_manga_search', {query: query}) }}">
                             <span>Ajouter {{ query }}</span>
                         </a>
                     </li>

templates/components/ToolBarButton.html.twig

@@ -3,7 +3,7 @@
     <button
         class="flex flex-col justify-around min-h-14 w-min ml-4 items-center text-white group"
         {% if action %}
-            {{ stimulus_action('dropdown', action) }}
+            {{ stimulus_action(controller|default('toolbar'), action) }}
         {% endif %}
     >
         <i class="fas fa-{{ icon }} text-xl group-hover:text-green-500"></i>

templates/manga/index.html.twig

@@ -34,16 +34,18 @@
             {% for manga in mangas %}
                 <div
                     class="bg-white overflow-hidden border border-gray-200 hover:shadow-lg hover:border-gray-400 transition-all duration-300 flex">
+                    <a class="flex flex-row" href="{{ path('app_manga_show', {'mangaSlug': manga.slug}) }}">
                         <img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}"
                              class="w-32 h-48 object-cover">
                         <div class="p-4 flex flex-col justify-between flex-grow">
                             <div>
                                 <h3 class="text-lg font-semibold">{{ manga.title }}</h3>
                                 <p class="text-sm text-gray-500">{{ manga.publicationYear }}</p>
-                            <p class="text-sm text-gray-600 mt-2">{{ manga.description|truncate(200) }}</p>
+                                <p class="text-sm text-gray-600 mt-2">{{ manga.description|truncate(350) }}</p>
                             </div>
                             <p class="text-xs text-gray-400 mt-2">Added: {{ manga.createdAt|date('M d, Y') }}</p>
                         </div>
+                    </a>
                 </div>
             {% else %}
                 <p class="text-center text-gray-500">Aucun manga trouvé.</p>

templates/manga/show_chapters.html.twig

@@ -62,21 +62,39 @@
 
             <div data-controller="table" data-table-open-value="{{ is_first ? 'true' : 'false' }}">
                 <div class="bg-white rounded-sm shadow mb-4">
-                    <div class="flex items-center justify-between bg-white p-4 rounded-t-sm">
-                        <div class="flex flex-row gap-4">
-                            <i class="fas fa-bookmark text-gray-500 text-3xl"></i>
-                            <h2 class="text-xl font-semibold">Volume {{ '%02d'|format(volume) }}</h2>
-                            <div class="flex items-center">
-                                <span
-                                    class="px-2 py-1 text-sm rounded {{ available_chapters|length > 0 ? 'bg-green-500 text-white' : 'bg-red-500 text-white' }}">
+                    <div class="relative flex items-center justify-between bg-white p-4 rounded-t-sm">
+                        <!-- Partie gauche -->
+                        <div class="flex items-center space-x-4">
+                            <i class="fas fa-bookmark text-gray-500 text-3xl w-8"></i>
+                            <h2 class="text-xl font-semibold w-28">Volume {{ '%02d'|format(volume) }}</h2>
+                            <div class="flex items-center w-16">
+                                <span class="px-2 py-1 text-sm rounded w-full text-center
+                                    {% if available_chapters|length == 0 %}
+                                        bg-red-500 text-white
+                                    {% elseif available_chapters|length < total_chapters %}
+                                        bg-yellow-500 text-white
+                                    {% else %}
+                                        bg-green-500 text-white
+                                    {% endif %}">
                                     {{ available_chapters|length }} / {{ total_chapters }}
                                 </span>
                             </div>
                         </div>
-                        <div class="flex items-center">
-                            <span class="text-gray-600 mr-2">{{ chapters|length }} Chapters</span>
+
+                        <!-- Chevron centré -->
+                        <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
                             <i data-table-target="toggleIcon" data-action="click->table#toggle"
-                               class="fas fa-chevron-{{ is_first ? 'up' : 'down' }} cursor-pointer"></i>
+                               class="bg-gray-400 rounded-full font-bold text-sm text-white p-1 hover:bg-green-500 fas fa-chevron-{{ is_first ? 'up' : 'down' }} cursor-pointer"></i>
+                        </div>
+
+                        <!-- Partie droite -->
+                        <div class="flex space-x-2 text-xl text-bold">
+                            <a href="#" class="w-8 text-center">
+                                <i class="fas fa-search text-gray-500 hover:text-green-500"></i>
+                            </a>
+                            <a href="#" class="w-8 text-center">
+                                <i class="fas fa-download text-gray-500 hover:text-green-500"></i>
+                            </a>
                         </div>
                     </div>
 
@@ -161,9 +179,74 @@
                             {% endif %}
                             </tbody>
                         </table>
+                        <div class="relative flex items-center justify-between bg-white mt-4 mb-2 rounded-t-sm">
+                            <div
+                                class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                                <i data-table-target="toggleIcon" data-action="click->table#toggle"
+                                   class="bg-gray-400 rounded-full font-bold text-sm text-white p-1 hover:bg-green-500 fas fa-chevron-up cursor-pointer"></i>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         {% endfor %}
     </div>
+    {# Modal d'édition #}
+    <twig:Modal
+        openTrigger="openEditModal"
+        closeTrigger="closeEditModal"
+        title="Edit Manga"
+    >
+        {% block content %}
+            <form id="editForm" method="post" action="">
+                <div class="mb-4">
+                    <label for="title" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
+                    <input type="text" id="title" name="title" value="{{ manga.title }}"
+                           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                </div>
+                <div class="mb-4">
+                    <label for="description" class="block text-gray-700 text-sm font-bold mb-2">Description:</label>
+                    <textarea id="description" name="description"
+                              class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                              rows="3">{{ manga.description }}</textarea>
+                </div>
+                {# Ajoutez d'autres champs selon vos besoins #}
+            </form>
+        {% endblock %}
+        {% block footer %}
+            <button type="submit" form="editForm"
+                    class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+                Save
+            </button>
+            <button type="button" data-action="modal#close"
+                    class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+                Cancel
+            </button>
+        {% endblock %}
+    </twig:Modal>
+
+    {# Modal de confirmation de suppression #}
+    <twig:Modal
+        openTrigger="openDeleteModal"
+        closeTrigger="closeDeleteModal"
+        title="Delete Manga"
+    >
+        <twig:block name="content">
+            <p class="text-sm text-gray-500">
+                Are you sure you want to delete this manga? This action cannot be undone.
+            </p>
+        </twig:block>
+        <twig:block name="footer">
+            <form id="deleteForm" method="post" action="">
+                <button type="submit"
+                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
+                    Delete
+                </button>
+            </form>
+            <button type="button" data-action="modal#close"
+                    class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+                Cancel
+            </button>
+        </twig:block>
+    </twig:Modal>
 {% endblock %}

templates/menu/base_menu.html.twig

@@ -1,10 +0,0 @@
-<!-- Menu latéral -->
-{#<header class="fixed top-0 left-0 z-10 w-full bg-blue-600 p-4 md:hidden">#}
-{#    <button id="hamburger-button" class="text-white">#}
-{#        <i class="fas fa-bars"></i>#}
-{#    </button>#}
-{#</header>#}
-
-<div id="menu" class="fixed left-0 h-full w-60 bg-gray-600 text-white hidden md:block">
-    {{ render(controller('App\\Controller\\MenuController::menu')) }}
-</div>

templates/menu/menu.html.twig

@@ -1,4 +1,4 @@
-<div id="menu" class="h-full w-full bg-gray-600 text-white overflow-y-auto">
+<div id="menu" class="h-full w-full bg-gray-600 text-white">
     <nav>
         <ul>
             <li class="{{ app.request.get('_route') starts with 'app_manga' ? 'border-l-4 border-green-600' : '' }}">
@@ -8,7 +8,7 @@
                 </a>
                 {% if app.request.get('_route') starts with 'app_manga' %}
                     <ul class="ml-8 mt-2 space-y-4">
-                        <li><a href="{{ path('app_manga_new') }}" class="hover:text-green-600">Ajouter un nouveau</a></li>
+                        <li><a href="{{ path('app_manga_search') }}" class="hover:text-green-600">Ajouter un nouveau</a></li>
                         <li><a href="{{ path('app_manga_import') }}" class="hover:text-green-600">Import bibliothèque</a></li>
                         <li><a href="#" class="hover:text-green-600">Découvrir</a></li>
                     </ul>

templates/menu/menu_old.html.twig

@@ -1,35 +0,0 @@
-<div class="fixed left-0 h-screen w-60">
-        <h2 class="text-xl font-bold mb-4">Menu</h2>
-        <form>
-            <div class="form-group">
-                <label for="manga-select">Choisissez un manga :</label>
-                <select id="manga-select" class="form-control w-full">
-                    <option value="" selected disabled>Sélectionnez un manga</option>
-                    {% for manga in availableManga %}
-                        <option value="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}">{{ manga.name }}</option>
-                    {% endfor %}
-                </select>
-            </div>
-        </form>
-        <div>
-            <ul>
-                {% for manga in mangas %}
-                    <li class="my-2">
-                        <a href="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}" class="text-blue-600 hover:text-blue-800">
-                            {{ manga.title }}
-                        </a>
-                    </li>
-                {% endfor %}
-            </ul>
-        </div>
-</div>
-
-{% block javascripts %}
-    <script>
-        const mangaSelect = document.getElementById('manga-select');
-        mangaSelect.addEventListener('change', () => {
-            const selectedUrl = mangaSelect.options[mangaSelect.selectedIndex].value;
-            window.open(selectedUrl, '_top');
-        });
-    </script>
-{% endblock %}