- trop de trucs d'un coup... je vais faire attention ensuite ^^'

.env

@@ -27,3 +27,8 @@ POSTGRES_PORT=5432
 ###> nelmio/cors-bundle ###
 CORS_ALLOW_ORIGIN='^https?://(localhost|127\.0\.0\.1)(:[0-9]+)?$'
 ###< nelmio/cors-bundle ###
+
+MANGADEX_CLIENT_ID='personal-client-c6ea0ee7-8d48-41cd-8813-51b874177332-627526e7'
+MANGADEX_CLIENT_SECRET='abMpCrSDYMWPjd24Pitl14t6RFqTs0cy'
+MANGADEX_USERNAME='Colgora'
+MANGADEX_PASSWORD='Hagaren666!'

Dockerfile

@@ -23,7 +23,18 @@ RUN apk add --no-cache \
 	;
 
 # Install Node.js and npm
-RUN apk add --no-cache nodejs npm
+ENV CHROME_BIN="/usr/bin/chromium-browser" \
+    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="true"
+RUN set -x \
+    && apk update \
+    && apk upgrade \
+    && apk add --no-cache \
+    nodejs \
+    npm \
+    udev \
+    ttf-freefont \
+    chromium \
+    && npm install puppeteer@1.10.0
 
 RUN set -eux; \
 	install-php-extensions \

Makefile

@@ -126,6 +126,15 @@ state-processor: ## Create a new state processor
 state-provider: ## Create a new state provider
 	@$(SYMFONY) make:state-provider
 
+twig-component: ## Create a new twig component
+	@$(SYMFONY) make:twig-component
+
+twig-extension: ## Create a new twig extension
+	@$(SYMFONY) make:twig-extension
+
+stimulus: ## Create a new stimulus controller
+	@$(SYMFONY) make:stimulus-controller
+
 ## —— Webpack Encore —————————————————————————————————————————————————————————————
 npm-install: ## Install npm dependencies
 	@$(DOCKER_COMP) exec php npm install

assets/app.js

@@ -1,3 +1,6 @@
+import './bootstrap.js';
+
+import '@fortawesome/fontawesome-free/js/all.js';
 /*
  * Welcome to your app's main JavaScript file!
  *

assets/controllers.json

@@ -1,4 +1,14 @@
 {
-    "controllers": [],
+    "controllers": {
+        "@symfony/ux-live-component": {
+            "live": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "@symfony/ux-live-component/dist/live.min.css": true
+                }
+            }
+        }
+    },
     "entrypoints": []
 }

assets/controllers/bootstrap-modal_controller.js

@@ -0,0 +1,21 @@
+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/search_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+* The following line makes this controller "lazy": it won't be downloaded until needed
+* See https://github.com/symfony/stimulus-bridge#lazy-controllers
+*/
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    static targets = ['input']
+
+    clearSearch() {
+      this.inputTarget.value = '';
+      this.inputTarget.focus();
+    }
+}

assets/controllers/table_controller.js

@@ -0,0 +1,24 @@
+import {Controller} from '@hotwired/stimulus';
+
+/*
+* The following line makes this controller "lazy": it won't be downloaded until needed
+* See https://github.com/symfony/stimulus-bridge#lazy-controllers
+*/
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+  static targets = ['body']
+
+  // ...
+  collapse(event) {
+    if (this.bodyTarget.style.display === "none") {
+      this.bodyTarget.style.display = "block";
+      event.currentTarget.classList.remove('fa-chevron-up');
+      event.currentTarget.classList.add('fa-chevron-down');
+    } else {
+      this.bodyTarget.style.display = "none";
+      event.currentTarget.classList.remove('fa-chevron-down');
+      event.currentTarget.classList.add('fa-chevron-up');
+    }
+
+  }
+}

assets/styles/app.scss

@@ -1,3 +1,4 @@
+//@import "bootstrap/scss/bootstrap";
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
@@ -6,3 +7,94 @@ body {
     background-color: white;
 }
 
+.modal {
+    z-index: 1072!important;
+    @apply hidden fixed top-0 left-0 w-full h-full outline-none
+}
+
+.modal-dialog {
+    z-index: 1073!important;
+}
+
+.modal.show {
+    @apply block
+}
+
+.modal-backdrop {
+    z-index: 9!important;
+    width: 100vw;
+    height: 100vh;
+    @apply fixed bg-black top-0 left-0
+}
+
+.modal-backdrop.fade {
+    @apply opacity-0
+}
+
+.modal-backdrop.show {
+    @apply opacity-50
+}
+
+.modal.fade .modal-dialog {
+    transition: -webkit-transform .3s ease-out;
+    transition: transform .3s ease-out;
+    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
+    -webkit-transform: translate(0, -50px);
+    transform: translate(0, -50px);
+}
+
+.modal.show .modal-dialog {
+    -webkit-transform: none;
+    transform: none;
+}
+
+::-webkit-scrollbar {
+    @apply w-2 h-1;
+    /* Ajuster la largeur et la hauteur de la scrollbar */
+}
+
+::-webkit-scrollbar-thumb {
+    @apply bg-green-600;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    @apply bg-green-700;
+}
+
+::-webkit-scrollbar-track {
+    @apply bg-white;
+}
+
+#searchResults::-webkit-scrollbar {
+    @apply w-2 h-1;
+    /* Ajuster la largeur et la hauteur de la scrollbar */
+}
+
+#searchResults::-webkit-scrollbar-thumb {
+    @apply bg-green-600 rounded-r-sm;
+}
+
+#searchResults::-webkit-scrollbar-thumb:hover {
+    @apply bg-green-700;
+}
+
+#searchResults::-webkit-scrollbar-track {
+    @apply bg-gray-700;
+}
+
+///* Custom styles for the scrollbar buttons */
+//::-webkit-scrollbar-button {
+//    @apply bg-gray-700;
+//    height: 10px; /* Adjust the height of the scrollbar buttons */
+//    width: 10px; /* Adjust the width of the scrollbar buttons */
+//}
+//
+//::-webkit-scrollbar-button:vertical:decrement {
+//    @apply bg-gray-700;
+//    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 8l6 6H6z'/%3E%3C/svg%3E");
+//}
+//
+//::-webkit-scrollbar-button:vertical:increment {
+//    @apply bg-gray-700;
+//    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 16l-6-6h12z'/%3E%3C/svg%3E");
+//}

compose.override.yaml

@@ -20,9 +20,6 @@ services:
       - host.docker.internal:host-gateway
     tty: true
 
-###> symfony/mercure-bundle ###
-###< symfony/mercure-bundle ###
-
 ###> doctrine/doctrine-bundle ###
   database:
     ports:

compose.yaml

@@ -20,6 +20,8 @@ services:
     volumes:
       - caddy_data:/data
       - caddy_config:/config
+    networks:
+      - mangarr_network
     ports:
       # HTTP
       - target: 80
@@ -35,11 +37,11 @@ services:
         protocol: udp
 
 # Mercure is installed as a Caddy module, prevent the Flex recipe from installing another service
-###> symfony/mercure-bundle ###
-###< symfony/mercure-bundle ###
 
 ###> doctrine/doctrine-bundle ###
   database:
+    hostname: database
+    container_name: database
     image: postgres:${POSTGRES_VERSION:-16}-alpine
     environment:
       POSTGRES_DB: ${POSTGRES_DB:-app}
@@ -48,6 +50,8 @@ services:
       POSTGRES_USER: ${POSTGRES_USER:-app}
     volumes:
       - database_data:/var/lib/postgresql/data:rw
+    networks:
+        - mangarr_network
     ports:
         - '5432:5432'
       # You may use a bind-mounted host directory instead, so that it is harder to accidentally remove the volume and lose all your data!
@@ -63,9 +67,10 @@ services:
 volumes:
   caddy_data:
   caddy_config:
-###> symfony/mercure-bundle ###
-###< symfony/mercure-bundle ###
 
 ###> doctrine/doctrine-bundle ###
   database_data:
 ###< doctrine/doctrine-bundle ###
+networks:
+  mangarr_network:
+    external: true

composer.json

@@ -27,16 +27,21 @@
         "symfony/flex": "^2",
         "symfony/framework-bundle": "7.0.*",
         "symfony/http-client": "7.0.*",
+        "symfony/mime": "7.0.*",
         "symfony/monolog-bundle": "^3.10",
         "symfony/property-access": "7.0.*",
         "symfony/property-info": "7.0.*",
         "symfony/runtime": "7.0.*",
         "symfony/security-bundle": "7.0.*",
         "symfony/serializer": "7.0.*",
+        "symfony/stimulus-bundle": "^2.17",
         "symfony/twig-bundle": "7.0.*",
+        "symfony/ux-live-component": "^2.17",
         "symfony/validator": "7.0.*",
         "symfony/webpack-encore-bundle": "^2.1",
-        "symfony/yaml": "7.0.*"
+        "symfony/yaml": "7.0.*",
+        "twig/extra-bundle": "^2.12|^3.0",
+        "twig/twig": "^2.12|^3.0"
     },
     "config": {
         "allow-plugins": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "721e53091aa5df1279e1b346d6a8e9b7",
+    "content-hash": "08c76de0049c9ace64fab221e185979c",
     "packages": [
         {
             "name": "api-platform/core",
@@ -4561,6 +4561,90 @@
             ],
             "time": "2023-12-30T15:41:17+00:00"
         },
+        {
+            "name": "symfony/mime",
+            "version": "v7.0.8",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/mime.git",
+                "reference": "3426d1e95f432c82ceef57e9943383116800f406"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/mime/zipball/3426d1e95f432c82ceef57e9943383116800f406",
+                "reference": "3426d1e95f432c82ceef57e9943383116800f406",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/polyfill-intl-idn": "^1.10",
+                "symfony/polyfill-mbstring": "^1.0"
+            },
+            "conflict": {
+                "egulias/email-validator": "~3.0.0",
+                "phpdocumentor/reflection-docblock": "<3.2.2",
+                "phpdocumentor/type-resolver": "<1.4.0",
+                "symfony/mailer": "<6.4",
+                "symfony/serializer": "<6.4"
+            },
+            "require-dev": {
+                "egulias/email-validator": "^2.1.10|^3.1|^4",
+                "league/html-to-markdown": "^5.0",
+                "phpdocumentor/reflection-docblock": "^3.0|^4.0|^5.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/process": "^6.4|^7.0",
+                "symfony/property-access": "^6.4|^7.0",
+                "symfony/property-info": "^6.4|^7.0",
+                "symfony/serializer": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Mime\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Allows manipulating MIME messages",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "mime",
+                "mime-type"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/mime/tree/v7.0.8"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-06-02T15:49:03+00:00"
+        },
         {
             "name": "symfony/monolog-bridge",
             "version": "v7.0.3",
@@ -4873,6 +4957,90 @@
             ],
             "time": "2023-01-26T09:26:14+00:00"
         },
+        {
+            "name": "symfony/polyfill-intl-idn",
+            "version": "v1.29.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-intl-idn.git",
+                "reference": "a287ed7475f85bf6f61890146edbc932c0fff919"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-intl-idn/zipball/a287ed7475f85bf6f61890146edbc932c0fff919",
+                "reference": "a287ed7475f85bf6f61890146edbc932c0fff919",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1",
+                "symfony/polyfill-intl-normalizer": "^1.10",
+                "symfony/polyfill-php72": "^1.10"
+            },
+            "suggest": {
+                "ext-intl": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "name": "symfony/polyfill",
+                    "url": "https://github.com/symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Intl\\Idn\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Laurent Bassin",
+                    "email": "laurent@bassin.info"
+                },
+                {
+                    "name": "Trevor Rowbotham",
+                    "email": "trevor.rowbotham@pm.me"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for intl's idn_to_ascii and idn_to_utf8 functions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "idn",
+                "intl",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-intl-idn/tree/v1.29.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-01-29T20:11:03+00:00"
+        },
         {
             "name": "symfony/polyfill-intl-normalizer",
             "version": "v1.28.0",
@@ -5966,6 +6134,75 @@
             ],
             "time": "2023-12-26T14:02:43+00:00"
         },
+        {
+            "name": "symfony/stimulus-bundle",
+            "version": "v2.17.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/stimulus-bundle.git",
+                "reference": "b828a32fe9f75500d26b563cc01874657162c413"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/stimulus-bundle/zipball/b828a32fe9f75500d26b563cc01874657162c413",
+                "reference": "b828a32fe9f75500d26b563cc01874657162c413",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/config": "^5.4|^6.0|^7.0",
+                "symfony/dependency-injection": "^5.4|^6.0|^7.0",
+                "symfony/deprecation-contracts": "^2.0|^3.0",
+                "symfony/finder": "^5.4|^6.0|^7.0",
+                "symfony/http-kernel": "^5.4|^6.0|^7.0",
+                "twig/twig": "^2.15.3|^3.8"
+            },
+            "require-dev": {
+                "symfony/asset-mapper": "^6.3|^7.0",
+                "symfony/framework-bundle": "^5.4|^6.0|^7.0",
+                "symfony/phpunit-bridge": "^5.4|^6.0|^7.0",
+                "symfony/twig-bundle": "^5.4|^6.0|^7.0",
+                "zenstruck/browser": "^1.4"
+            },
+            "type": "symfony-bundle",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\UX\\StimulusBundle\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Integration with your Symfony app & Stimulus!",
+            "keywords": [
+                "symfony-ux"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/stimulus-bundle/tree/v2.17.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-04-21T10:23:35+00:00"
+        },
         {
             "name": "symfony/stopwatch",
             "version": "v7.0.0",
@@ -6384,6 +6621,182 @@
             ],
             "time": "2024-01-23T15:02:46+00:00"
         },
+        {
+            "name": "symfony/ux-live-component",
+            "version": "v2.17.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/ux-live-component.git",
+                "reference": "65947f886b3835a504dd86951b5d07ccc4dcb5e1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/ux-live-component/zipball/65947f886b3835a504dd86951b5d07ccc4dcb5e1",
+                "reference": "65947f886b3835a504dd86951b5d07ccc4dcb5e1",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/property-access": "^5.4.5|^6.0|^7.0",
+                "symfony/ux-twig-component": "^2.8",
+                "twig/twig": "^3.8.0"
+            },
+            "conflict": {
+                "symfony/config": "<5.4.0"
+            },
+            "require-dev": {
+                "doctrine/annotations": "^1.0",
+                "doctrine/collections": "^1.6.8|^2.0",
+                "doctrine/doctrine-bundle": "^2.4.3",
+                "doctrine/orm": "^2.9.4",
+                "doctrine/persistence": "^2.5.2|^3.0",
+                "phpdocumentor/reflection-docblock": "5.x-dev",
+                "symfony/dependency-injection": "^5.4|^6.0|^7.0",
+                "symfony/expression-language": "^5.4|^6.0|^7.0",
+                "symfony/form": "^5.4|^6.0|^7.0",
+                "symfony/framework-bundle": "^5.4|^6.0|^7.0",
+                "symfony/options-resolver": "^5.4|^6.0|^7.0",
+                "symfony/phpunit-bridge": "^6.1|^7.0",
+                "symfony/property-info": "^5.4|^6.0|^7.0",
+                "symfony/security-bundle": "^5.4|^6.0|^7.0",
+                "symfony/serializer": "^5.4|^6.0|^7.0",
+                "symfony/twig-bundle": "^5.4|^6.0|^7.0",
+                "symfony/validator": "^5.4|^6.0|^7.0",
+                "zenstruck/browser": "^1.2.0",
+                "zenstruck/foundry": "1.37.*"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "thanks": {
+                    "name": "symfony/ux",
+                    "url": "https://github.com/symfony/ux"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\UX\\LiveComponent\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Live components for Symfony",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "components",
+                "symfony-ux",
+                "twig"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/ux-live-component/tree/v2.17.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-04-22T18:53:03+00:00"
+        },
+        {
+            "name": "symfony/ux-twig-component",
+            "version": "v2.17.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/ux-twig-component.git",
+                "reference": "fb3d978b7f19e9a94533a3bf30d68269908ffae1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/ux-twig-component/zipball/fb3d978b7f19e9a94533a3bf30d68269908ffae1",
+                "reference": "fb3d978b7f19e9a94533a3bf30d68269908ffae1",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/dependency-injection": "^5.4|^6.0|^7.0",
+                "symfony/deprecation-contracts": "^2.2|^3.0",
+                "symfony/event-dispatcher": "^5.4|^6.0|^7.0",
+                "symfony/property-access": "^5.4|^6.0|^7.0",
+                "twig/twig": "^3.8"
+            },
+            "conflict": {
+                "symfony/config": "<5.4.0"
+            },
+            "require-dev": {
+                "symfony/console": "^5.4|^6.0|^7.0",
+                "symfony/css-selector": "^5.4|^6.0|^7.0",
+                "symfony/dom-crawler": "^5.4|^6.0|^7.0",
+                "symfony/framework-bundle": "^5.4|^6.0|^7.0",
+                "symfony/phpunit-bridge": "^6.0|^7.0",
+                "symfony/stimulus-bundle": "^2.9.1",
+                "symfony/stopwatch": "^5.4|^6.0|^7.0",
+                "symfony/twig-bundle": "^5.4|^6.0|^7.0",
+                "symfony/webpack-encore-bundle": "^1.15"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "thanks": {
+                    "name": "symfony/ux",
+                    "url": "https://github.com/symfony/ux"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\UX\\TwigComponent\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Twig components for Symfony",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "components",
+                "symfony-ux",
+                "twig"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/ux-twig-component/tree/v2.17.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-04-19T16:14:05+00:00"
+        },
         {
             "name": "symfony/validator",
             "version": "v7.0.3",
@@ -6860,6 +7273,80 @@
             ],
             "time": "2023-11-07T10:26:03+00:00"
         },
+        {
+            "name": "twig/extra-bundle",
+            "version": "v3.10.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/twigphp/twig-extra-bundle.git",
+                "reference": "cdc6e23aeb7f4953c1039568c3439aab60c56454"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/twigphp/twig-extra-bundle/zipball/cdc6e23aeb7f4953c1039568c3439aab60c56454",
+                "reference": "cdc6e23aeb7f4953c1039568c3439aab60c56454",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2.5",
+                "symfony/framework-bundle": "^5.4|^6.4|^7.0",
+                "symfony/twig-bundle": "^5.4|^6.4|^7.0",
+                "twig/twig": "^3.0"
+            },
+            "require-dev": {
+                "league/commonmark": "^1.0|^2.0",
+                "symfony/phpunit-bridge": "^6.4|^7.0",
+                "twig/cache-extra": "^3.0",
+                "twig/cssinliner-extra": "^3.0",
+                "twig/html-extra": "^3.0",
+                "twig/inky-extra": "^3.0",
+                "twig/intl-extra": "^3.0",
+                "twig/markdown-extra": "^3.0",
+                "twig/string-extra": "^3.0"
+            },
+            "type": "symfony-bundle",
+            "autoload": {
+                "psr-4": {
+                    "Twig\\Extra\\TwigExtraBundle\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com",
+                    "homepage": "http://fabien.potencier.org",
+                    "role": "Lead Developer"
+                }
+            ],
+            "description": "A Symfony bundle for extra Twig extensions",
+            "homepage": "https://twig.symfony.com",
+            "keywords": [
+                "bundle",
+                "extra",
+                "twig"
+            ],
+            "support": {
+                "source": "https://github.com/twigphp/twig-extra-bundle/tree/v3.10.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/twig/twig",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-05-11T07:35:57+00:00"
+        },
         {
             "name": "twig/twig",
             "version": "v3.8.0",

config/bundles.php

@@ -14,4 +14,8 @@ return [
     Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle::class => ['dev' => true, 'test' => true],
     Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
     Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
+    Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
+    Symfony\UX\LiveComponent\LiveComponentBundle::class => ['all' => true],
+    Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
+    Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
 ];

config/packages/twig_component.yaml

@@ -0,0 +1,5 @@
+twig_component:
+    anonymous_template_directory: 'components/'
+    defaults:
+        # Namespace & directory for components
+        App\Twig\Components\: 'components/'

config/routes/ux_live_component.yaml

@@ -0,0 +1,5 @@
+live_component:
+    resource: '@LiveComponentBundle/config/routes.php'
+    prefix: '/_components'
+    # adjust prefix to add localization to your components
+    #prefix: '/{_locale}/_components'

config/services.yaml

@@ -41,6 +41,10 @@ services:
                     track_redirects: true
                     
     
+    App\Service\MangaScraperServiceOld:
+        arguments:
+            $projectDir: '%kernel.project_dir%'
+            
     App\Service\MangaScraperService:
         arguments:
             $projectDir: '%kernel.project_dir%'
@@ -55,3 +59,15 @@ services:
 
     App\Controller\MenuController:
         tags: [ 'controller.service_arguments' ]
+
+    App\Client\MangadexClient:
+        arguments:
+            $httpClient: '@GuzzleHttp\Client'
+            $clientId: '%env(MANGADEX_CLIENT_ID)%'
+            $clientSecret: '%env(MANGADEX_CLIENT_SECRET)%'
+            $username: '%env(MANGADEX_USERNAME)%'
+            $password: '%env(MANGADEX_PASSWORD)%'
+
+    App\Service\MangadexProvider:
+        arguments:
+            $client: '@App\Client\MangadexClient'

frankenphp/conf.d/app.ini

@@ -12,3 +12,4 @@ opcache.interned_strings_buffer = 16
 opcache.max_accelerated_files = 20000
 opcache.memory_consumption = 256
 opcache.enable_file_override = 1
+max_execution_time = 60

package.json

@@ -4,6 +4,7 @@
         "@babel/preset-env": "^7.16.0",
         "@hotwired/stimulus": "^3.0.0",
         "@symfony/stimulus-bridge": "^3.2.0",
+        "@symfony/ux-live-component": "file:vendor/symfony/ux-live-component/assets",
         "@symfony/webpack-encore": "^4.0.0",
         "core-js": "^3.23.0",
         "daisyui": "^4.4.2",
@@ -23,9 +24,12 @@
         "build": "encore production --progress"
     },
     "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.5.2",
         "alpinejs": "^3.13.3",
         "autoprefixer": "^10.4.14",
+        "bootstrap": "^5.3.3",
         "postcss-loader": "^7.1.0",
+        "puppeteer": "^22.10.0",
         "tailwindcss": "^3.2.7"
     }
 }

public/puppeteer-script.js

@@ -0,0 +1,89 @@
+const puppeteer = require('puppeteer');
+
+(async () => {
+  try {
+    // Récupérer les paramètres de la ligne de commande
+    const [url, imageSelector, nextButtonSelector] = process.argv.slice(2);
+
+    console.log('URL:', url);
+    console.log('Image Selector:', imageSelector);
+    console.log('Next Button Selector:', nextButtonSelector);
+
+    const browser = await puppeteer.launch({
+      headless: true,
+      executablePath: process.env.CHROME_BIN || null,
+      args: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage']
+    });
+
+    console.log('Browser launched');
+
+    const page = await browser.newPage();
+    console.log('New page created');
+
+    await page.goto(url, {waitUntil: 'networkidle2'});
+    console.log('Page loaded');
+
+    // Function to scroll to the bottom of the page
+    async function autoScroll(page){
+      await page.evaluate(async () => {
+        await new Promise((resolve, reject) => {
+          var totalHeight = 0;
+          var distance = 100;
+          var timer = setInterval(() => {
+            var scrollHeight = document.body.scrollHeight;
+            window.scrollBy(0, distance);
+            totalHeight += distance;
+
+            if(totalHeight >= scrollHeight){
+              clearInterval(timer);
+              resolve();
+            }
+          }, 100);
+        });
+      });
+    }
+
+    // Attendre que le conteneur des images soit présent pour s'assurer que la page est complètement chargée
+    await page.waitForSelector(imageSelector);
+
+    console.log('Image selector found');
+
+    const imageUrls = new Set(); // Utiliser un Set pour éviter les doublons
+
+    // let previousImageUrl = null;
+    while (true) {
+      console.log('Fetching images');
+      const pageImageUrls = await page.$$eval(imageSelector, imgs =>
+        imgs.map(img => img.getAttribute('src') || img.getAttribute('data-src'))
+      );
+
+      console.log('Page image URLs:', pageImageUrls);
+
+      pageImageUrls.forEach(url => {
+        if (!imageUrls.has(url)) {
+          imageUrls.add(url);
+          console.log('Image URL:', url);
+        }
+      });
+
+      // Cliquer sur le bouton suivant
+      const nextButton = await page.$(nextButtonSelector);
+      console.log('Next button');
+      if (!nextButton) {
+        console.log(page);
+        break; // Sortir de la boucle si le bouton suivant n'existe pas
+      }
+      console.log('Clicking next button');
+      await nextButton.click();
+      // await page.waitForTimeout(1000); // Attendre 1 seconde
+      await page.waitForSelector(imageSelector);
+    }
+
+    console.log('Image URLs:', JSON.stringify(Array.from(imageUrls)));
+
+    await browser.close();
+  } catch (error) {
+    console.error('Error:', error);
+    process.exit(1); // Exit with a failure code
+  }
+})();

src/Client/MangadexClient.php

@@ -0,0 +1,86 @@
+<?php
+
+namespace App\Client;
+
+use App\Interface\ClientInterface;
+use GuzzleHttp\ClientInterface as GuzzleInterface;
+
+class MangadexClient implements ClientInterface
+{
+    private CONST AUTHENTICATION_URL = 'https://auth.mangadex.org/realms/mangadex/protocol/openid-connect/token';
+    private CONST API_URL = 'https://api.mangadex.org';
+    private GuzzleInterface $httpClient;
+    private string $clientId;
+    private string $clientSecret;
+    private string $username;
+    private string $password;
+    private ?string $accessToken = null;
+    private ?string $refreshToken = null;
+
+    public function __construct(GuzzleInterface $httpClient, string $clientId, string $clientSecret, string $username, string $password)
+    {
+        $this->httpClient = $httpClient;
+        $this->clientId = $clientId;
+        $this->clientSecret = $clientSecret;
+        $this->username = $username;
+        $this->password = $password;
+        $this->authenticate();
+    }
+
+    public function authenticate(): void
+    {
+        $response = $this->httpClient->request('POST', self::AUTHENTICATION_URL, [
+            'form_params' => [
+                'grant_type' => 'password',
+                'username' => $this->username,
+                'password' => $this->password,
+                'client_id' => $this->clientId,
+                'client_secret' => $this->clientSecret,
+            ],
+        ]);
+
+        $data = json_decode($response->getBody()->getContents(), true);
+        $this->accessToken = $data['access_token'];
+        $this->refreshToken = $data['refresh_token'];
+    }
+
+    public function refresh(): void
+    {
+        $response = $this->httpClient->request('POST', self::AUTHENTICATION_URL, [
+            'form_params' => [
+                'grant_type' => 'refresh_token',
+                'refresh_token' => $this->refreshToken,
+                'client_id' => $this->clientId,
+                'client_secret' => $this->clientSecret,
+            ],
+        ]);
+
+        $data = json_decode($response->getBody()->getContents(), true);
+        $this->accessToken = $data['access_token'];
+    }
+
+    private function request(string $method, string $endpoint, array $options = []): array
+    {
+        $options['headers']['Authorization'] = 'Bearer ' . $this->accessToken;
+
+        $response = $this->httpClient->request($method, self::API_URL . $endpoint, $options);
+
+        if ($response->getStatusCode() === 429) {
+            $this->refresh();
+            $options['headers']['Authorization'] = 'Bearer ' . $this->accessToken;
+            $response = $this->httpClient->request($method, self::API_URL . $endpoint, $options);
+        }
+
+        return json_decode($response->getBody()->getContents(), true);
+    }
+
+    public function get(string $endpoint, array $params = []): array
+    {
+        return $this->request('GET', $endpoint, ['query' => $params]);
+    }
+
+    public function post(string $endpoint, array $data): array
+    {
+        return $this->request('POST', $endpoint, ['json' => $data]);
+    }
+}

src/Controller/MangaController.php

@@ -6,8 +6,8 @@ use App\Entity\Manga;
 use App\Repository\MangaRepository;
 use App\Service\MangaExportService;
 use App\Service\LelScansProviderService;
-use App\Service\MangaScraperService;
+use App\Service\MangaScraperServiceOld;
-use App\Service\MangaUpdatesDbProvider;
+use App\Service\MangaUpdatesMetadataProvider;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\BinaryFileResponse;
 use Symfony\Component\HttpFoundation\Request;
@@ -20,11 +20,11 @@ use Symfony\Component\String\Slugger\AsciiSlugger;
 class MangaController extends AbstractController
 {
     public function __construct(
-        private readonly MangaScraperService     $mangaScraperService,
+        private readonly MangaScraperServiceOld  $mangaScraperService,
         private readonly MangaExportService      $mangaExportService,
         private readonly LelScansProviderService $mangaProviderService,
         private readonly MangaRepository         $mangaRepository,
-        private MangaUpdatesDbProvider           $mangaUpdatesDbProvider
+        private MangaUpdatesMetadataProvider     $mangaUpdatesDbProvider
     )
     {
     }
@@ -48,12 +48,17 @@ class MangaController extends AbstractController
             throw new NotFoundHttpException("Le manga demandé n'existe pas.");
         }
 
-        $availableChapters = $this->mangaProviderService->getChapterList($mangaSlug);
+        $chaptersByVolume = [];
+        foreach ($manga->getChapters() as $chapter) {
+            $volume = $chapter->getVolume() ?? 'Not Found';
+            $chaptersByVolume[$volume][] = $chapter;
+        }
+
+        $chaptersByVolume = array_map('array_reverse', array_reverse($chaptersByVolume, true));
 
         return $this->render('manga/show_chapters.html.twig', [
-            'controller_name' => 'MangaController',
+            'chapters_by_volume' => $chaptersByVolume,
             'manga' => $manga,
-            'availableChapters' => $availableChapters,
         ]);
     }
 
@@ -83,19 +88,11 @@ class MangaController extends AbstractController
         ]);
     }
 
-    #[Route('/addNew', name: 'add_new_manga')]
+    #[Route('/addNew/{query}', name: 'add_new_manga')]
-    public function addNew(): Response
+    public function addNew(string $query = ''): Response
     {
-        $availableManga = $this->mangaProviderService->getMangaList();
-
-        foreach ($availableManga as $key => $manga) {
-            $availableManga[$key]['slug'] = $this->titleToSlug($manga['name']);
-        }
-
-        $mangas = $this->mangaRepository->findAll();
         return $this->render('manga/add_new.html.twig', [
-            'availableManga' => $availableManga,
+            'query' => $query,
-            'mangas' => $mangas,
         ]);
     }
 

src/Controller/TestController.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Controller;
+
+use App\Entity\Chapter;
+use App\Entity\ContentSource;
+use App\Entity\Manga;
+use App\Repository\MangaRepository;
+use App\Service\MangadexProvider;
+use App\Service\MangaScraperService;
+use App\Service\MangaUpdatesMetadataProvider;
+use App\Service\SushiScanProviderService;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class TestController extends AbstractController
+{
+    public function __construct(private MangadexProvider $mangadexProvider, private MangaRepository $mangaRepository)
+    {
+    }
+
+    #[Route('/test', name: 'test')]
+    public function test(): Response
+    {
+        $manga = $this->mangaRepository->find(8);
+
+        dd($this->mangadexProvider->getFeed($manga));
+    }
+}

src/Entity/Chapter.php

@@ -28,6 +28,15 @@ class Chapter
     #[ORM\OneToMany(mappedBy: 'chapter', targetEntity: Page::class, orphanRemoval: true)]
     private Collection $pagesLink;
 
+    #[ORM\Column(nullable: true)]
+    private ?int $volume = null;
+
+    #[ORM\Column(length: 255, nullable: true)]
+    private ?string $title = null;
+
+    #[ORM\Column(length: 255, nullable: true)]
+    private ?string $localPath = null;
+
     public function __construct()
     {
         $this->pagesLink = new ArrayCollection();
@@ -117,4 +126,40 @@ class Chapter
                            
                            		return null;
                            	}
+
+    public function getVolume(): ?int
+    {
+        return $this->volume;
+    }
+
+    public function setVolume(?int $volume): static
+    {
+        $this->volume = $volume;
+
+        return $this;
+    }
+
+    public function getTitle(): ?string
+    {
+        return $this->title;
+    }
+
+    public function setTitle(?string $title): static
+    {
+        $this->title = $title;
+
+        return $this;
+    }
+
+    public function getLocalPath(): ?string
+    {
+        return $this->localPath;
+    }
+
+    public function setLocalPath(?string $localPath): static
+    {
+        $this->localPath = $localPath;
+
+        return $this;
+    }
 }

src/Entity/ContentSource.php

@@ -0,0 +1,100 @@
+<?php
+
+namespace App\Entity;
+
+use App\Repository\ContentSourceRepository;
+use Doctrine\ORM\Mapping as ORM;
+
+#[ORM\Entity(repositoryClass: ContentSourceRepository::class)]
+class ContentSource
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column]
+    private ?int $id = null;
+
+    #[ORM\Column(length: 255)]
+    private ?string $baseUrl = null;
+
+    #[ORM\Column(length: 255)]
+    private ?string $imageSelector = null;
+
+    #[ORM\Column(length: 255)]
+    private ?string $NextPageSelector = null;
+
+    #[ORM\Column(length: 255)]
+    private ?string $chapterUrlFormat = null;
+
+    #[ORM\Column(length: 255)]
+    private ?string $scrapingType = null;
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getBaseUrl(): ?string
+    {
+        return $this->baseUrl;
+    }
+
+    public function setBaseUrl(string $baseUrl): static
+    {
+        $this->baseUrl = $baseUrl;
+
+        return $this;
+    }
+
+    public function getImageSelector(): ?string
+    {
+        return $this->imageSelector;
+    }
+
+    public function setImageSelector(string $imageSelector): static
+    {
+        $this->imageSelector = $imageSelector;
+
+        return $this;
+    }
+
+    public function getNextPageSelector(): ?string
+    {
+        return $this->NextPageSelector;
+    }
+
+    public function setNextPageSelector(string $NextPageSelector): static
+    {
+        $this->NextPageSelector = $NextPageSelector;
+
+        return $this;
+    }
+
+    public function getChapterUrlFormat(): ?string
+    {
+        return $this->chapterUrlFormat;
+    }
+
+    public function setChapterUrlFormat(string $chapterUrlFormat): static
+    {
+        $this->chapterUrlFormat = $chapterUrlFormat;
+
+        return $this;
+    }
+
+    public function getChapterUrl(string $mangaTitle, float $chapterNumber): string
+    {
+        return sprintf($this->chapterUrlFormat, $mangaTitle, $chapterNumber);
+    }
+
+    public function getScrapingType(): ?string
+    {
+        return $this->scrapingType;
+    }
+
+    public function setScrapingType(string $scrapingType): static
+    {
+        $this->scrapingType = $scrapingType;
+
+        return $this;
+    }
+}

src/Entity/Manga.php

@@ -22,7 +22,7 @@ class Manga
     #[ORM\OneToMany(mappedBy: 'manga', targetEntity: Chapter::class, orphanRemoval: true)]
     private Collection $chapters;
 
-    #[ORM\Column(length: 255)]
+    #[ORM\Column(length: 255, unique: true)]
     private ?string $slug = null;
 
     #[ORM\Column(length: 255, nullable: true)]
@@ -37,9 +37,25 @@ class Manga
     #[ORM\Column(type: Types::ARRAY, nullable: true)]
     private ?array $genres = null;
 
+    #[ORM\Column]
+    private ?\DateTimeImmutable $createdAt = null;
+
+    #[ORM\Column(nullable: true)]
+    private ?float $rating = null;
+
+    #[ORM\Column(length: 255, nullable: true)]
+    private ?string $author = null;
+
+    #[ORM\Column(length: 255, nullable: true)]
+    private ?string $externalId = null;
+
+    #[ORM\Column(length: 255, nullable: true)]
+    private ?string $status = null;
+
     public function __construct()
     {
         $this->chapters = new ArrayCollection();
+        $this->createdAt = new \DateTimeImmutable();
     }
 
     public function getId(): ?int
@@ -158,4 +174,64 @@ class Manga
 
         return $this;
     }
+
+    public function getCreatedAt(): ?\DateTimeImmutable
+    {
+        return $this->createdAt;
+    }
+
+    public function setCreatedAt(\DateTimeImmutable $createdAt): static
+    {
+        $this->createdAt = $createdAt;
+
+        return $this;
+    }
+
+    public function getRating(): ?float
+    {
+        return $this->rating;
+    }
+
+    public function setRating(?float $rating): static
+    {
+        $this->rating = $rating;
+
+        return $this;
+    }
+
+    public function getAuthor(): ?string
+    {
+        return $this->author;
+    }
+
+    public function setAuthor(?string $author): static
+    {
+        $this->author = $author;
+
+        return $this;
+    }
+
+    public function getExternalId(): ?string
+    {
+        return $this->externalId;
+    }
+
+    public function setExternalId(?string $externalId): static
+    {
+        $this->externalId = $externalId;
+
+        return $this;
+    }
+
+    public function getStatus(): ?string
+    {
+        return $this->status;
+    }
+
+    public function setStatus(?string $status): static
+    {
+        $this->status = $status;
+
+        return $this;
+    }
 }

src/EventListener/ExceptionListener.php

@@ -21,24 +21,24 @@ class ExceptionListener
 
     public function onKernelException(ExceptionEvent $event): void
     {
-        $exception = $event->getThrowable();
+//        $exception = $event->getThrowable();
-
+//
-        $response = match(true) {
+//        $response = match(true) {
-            $exception instanceof FilterValidationException,
+//            $exception instanceof FilterValidationException,
-                $exception instanceof BadRequestException => $this->createResponse($exception, Response::HTTP_BAD_REQUEST),
+//                $exception instanceof BadRequestException => $this->createResponse($exception, Response::HTTP_BAD_REQUEST),
-            $exception instanceof NotFoundHttpException,
+//            $exception instanceof NotFoundHttpException,
-                $exception instanceof ItemNotFoundException => $this->createResponse($exception, Response::HTTP_NOT_FOUND),
+//                $exception instanceof ItemNotFoundException => $this->createResponse($exception, Response::HTTP_NOT_FOUND),
-            $exception instanceof AccessDeniedHttpException => $this->createResponse($exception, Response::HTTP_FORBIDDEN),
+//            $exception instanceof AccessDeniedHttpException => $this->createResponse($exception, Response::HTTP_FORBIDDEN),
-            $exception instanceof ValidationException,
+//            $exception instanceof ValidationException,
-                $exception instanceof NotNormalizableValueException => $this->createResponse($exception, Response::HTTP_UNPROCESSABLE_ENTITY),
+//                $exception instanceof NotNormalizableValueException => $this->createResponse($exception, Response::HTTP_UNPROCESSABLE_ENTITY),
-            default => null,
+//            default => null,
-        };
+//        };
-
+//
-        if ($response) {
+//        if ($response) {
-            $event->setResponse($response);
+//            $event->setResponse($response);
-        }else{
+//        }else{
-            $this->logger->error($exception->getMessage(), ['exception' => $exception]);
+//            $this->logger->error($exception->getMessage(), ['exception' => $exception]);
-        }
+//        }
     }
 
     private function createResponse(\Throwable $exception, int $statusCode): Response

src/Factory/MangaFactory.php

@@ -52,6 +52,10 @@ final class MangaFactory extends ModelFactory
         return [
             'slug' => $this->slugger->slug($title)->lower(),
             'title' => $title,
+            'description' => self::faker()->text(),
+            'genres' => self::faker()->words(rand(1, 5)),
+            'publicationYear' => self::faker()->year(),
+            'rating' => self::faker()->randomFloat(1, 0, 10),
         ];
     }
 

src/Factory/PageFactory.php

@@ -48,8 +48,8 @@ final class PageFactory extends ModelFactory
     {
         return [
             'chapter' => ChapterFactory::new(),
-            'imageLocalUrl' => self::faker()->text(255),
+            'imageLocalUrl' => 'https://placehold.co/770x1090',
-            'imageUrl' => self::faker()->text(255),
+            'imageUrl' => 'https://placehold.co/770x1090',
             'number' => self::faker()->randomNumber(2),
         ];
     }

src/Interface/ClientInterface.php

@@ -0,0 +1,9 @@
+<?php
+
+namespace App\Interface;
+
+interface ClientInterface
+{
+    public function get(string $endpoint, array $params = []): array;
+    public function post(string $endpoint, array $data): array;
+}

src/Interface/ContentProviderInterface.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Interface;
+
+use App\Entity\Manga;
+
+interface ContentProviderInterface
+{
+	public function getAvailableContent(Manga $manga): array;
+	public function getContent(Manga $manga): array;
+}

src/Interface/MetadataProviderInterface.php

@@ -1,10 +1,10 @@
 <?php
 
-namespace App\Service;
+namespace App\Interface;
 
 use Doctrine\Common\Collections\Collection;
 
-interface MangaDbProviderInterface
+interface MetadataProviderInterface
 {
     public function search(string $title): Collection;
 }

src/Repository/ContentSourceRepository.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Repository;
+
+use App\Entity\ContentSource;
+use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\Persistence\ManagerRegistry;
+
+/**
+ * @extends ServiceEntityRepository<ContentSource>
+ *
+ * @method ContentSource|null find($id, $lockMode = null, $lockVersion = null)
+ * @method ContentSource|null findOneBy(array $criteria, array $orderBy = null)
+ * @method ContentSource[]    findAll()
+ * @method ContentSource[]    findBy(array $criteria, array $orderBy = null, $limit = null, $offset = null)
+ */
+class ContentSourceRepository extends ServiceEntityRepository
+{
+    public function __construct(ManagerRegistry $registry)
+    {
+        parent::__construct($registry, ContentSource::class);
+    }
+
+//    /**
+//     * @return ContentSource[] Returns an array of ContentSource objects
+//     */
+//    public function findByExampleField($value): array
+//    {
+//        return $this->createQueryBuilder('c')
+//            ->andWhere('c.exampleField = :val')
+//            ->setParameter('val', $value)
+//            ->orderBy('c.id', 'ASC')
+//            ->setMaxResults(10)
+//            ->getQuery()
+//            ->getResult()
+//        ;
+//    }
+
+//    public function findOneBySomeField($value): ?ContentSource
+//    {
+//        return $this->createQueryBuilder('c')
+//            ->andWhere('c.exampleField = :val')
+//            ->setParameter('val', $value)
+//            ->getQuery()
+//            ->getOneOrNullResult()
+//        ;
+//    }
+}

src/Repository/MangaRepository.php

@@ -39,6 +39,15 @@ class MangaRepository extends ServiceEntityRepository
         }
     }
 
+    public function findByTitle(string $title): array
+    {
+        return $this->createQueryBuilder('m')
+            ->andWhere('m.title LIKE :title')
+            ->setParameter('title', "%$title%")
+            ->getQuery()
+            ->getResult();
+    }
+
 //    /**
 //     * @return Manga[] Returns an array of Manga objects
 //     */

src/Service/LelScansProviderService.php

@@ -1,10 +1,12 @@
 <?php
 namespace App\Service;
 
+use App\Entity\Manga;
+use App\Interface\ContentProviderInterface;
 use Symfony\Component\BrowserKit\HttpBrowser as Client;
 use Symfony\Component\DomCrawler\Crawler;
 
-class LelScansProviderService implements MangaProviderInterface
+class LelScansProviderService implements ContentProviderInterface
 {
 	const PROVIDER_URL = 'https://lelscans.net/';
 	const MANGA_SLUG = '/{manga}/{chapter}/{page}';
@@ -53,4 +55,13 @@ class LelScansProviderService implements MangaProviderInterface
 		return $chapterList;
 	}
 
+    #[\Override] public function getAvailableContent(Manga $manga): array
+    {
+        // TODO: Implement getAvailableContent() method.
+    }
+
+    #[\Override] public function getContent(Manga $manga): array
+    {
+        // TODO: Implement getContent() method.
+    }
 }

src/Service/MangaProviderFactory.php

@@ -2,9 +2,11 @@
 
 namespace App\Service;
 
+use App\Interface\ContentProviderInterface;
+
 class MangaProviderFactory
 {
-	public static function create($providerName): MangaProviderInterface
+	public static function create($providerName): ContentProviderInterface
 	{
 		return match ($providerName) {
 			'LelScans' => new LelScansProviderService(),

src/Service/MangaProviderInterface.php

@@ -1,9 +0,0 @@
-<?php
-
-namespace App\Service;
-
-interface MangaProviderInterface
-{
-	public function getMangaList(): array;
-	public function getChapterList(string $mangaSlug): array;
-}

src/Service/MangaScraperService.php

@@ -2,6 +2,9 @@
 
 namespace App\Service;
 
+use App\Entity\Chapter;
+use App\Entity\Manga;
+use App\Entity\ContentSource;
 use App\EventSubscriber\MangaScrapedEvent;
 use GuzzleHttp\Client;
 use GuzzleHttp\Exception\GuzzleException;
@@ -14,7 +17,7 @@ use Symfony\Contracts\EventDispatcher\EventDispatcherInterface;
 
 class MangaScraperService
 {
-	const string IMG_BASE_DIR = '/public/manga-images';
+    const IMG_BASE_DIR = '/public/manga-images';
     private string $projectDir;
     private EventDispatcherInterface $eventDispatcher;
 
@@ -24,32 +27,42 @@ class MangaScraperService
         $this->eventDispatcher = $eventDispatcher;
     }
 
-	public function extractMangaPageData(string $html): array
+    public function extractMangaPageData(string $html, ContentSource $mangaSource): array
     {
-		$baseUrl = 'https://lelscans.net';
-        //pour éviter à PhpStorm de gueuler...
-        $selector = 'img';
         $crawler = new Crawler($html);
-		$imgUrl = $crawler->filter($selector)->attr('src');
+        $imgUrls = [];
-		$nextLink = $crawler->filter('a[title="Suivant"]');
 
+        // Search for images with different extensions
+        foreach (['img[src$=".jpg"]', 'img[src$=".jpeg"]', 'img[src$=".png"]', 'img'] as $selector) {
+            $crawler->filter($selector)->each(function (Crawler $node) use (&$imgUrls) {
+                $src = $node->attr('src') ?? $node->attr('data-src');
+                if ($src) {
+                    $imgUrls[] = $src;
+                }
+            });
+        }
+
+        if (empty($imgUrls)) {
+            throw new \Exception('No valid image found on the page.');
+        }
+
+        $nextLink = $crawler->filter($mangaSource->getNextPageSelector());
+        $nextUrl = $nextLink->count() > 0 ? $nextLink->attr('href') : null;
+
+        // Convert relative URLs to absolute URLs
+        $baseUrl = $mangaSource->getBaseUrl();
+        $imgUrls = array_map(function ($imgUrl) use ($baseUrl) {
             if (!preg_match('/^https?:\/\//', $imgUrl)) {
                 $urlComponents = parse_url($baseUrl);
                 $scheme = $urlComponents['scheme'];
                 $host = $urlComponents['host'];
-
-			// Construit l'URL absolue de l'image
                 $imgUrl = $scheme . '://' . $host . '/' . ltrim($imgUrl, '/');
             }
-
+            return $imgUrl;
-		if($nextLink->count() > 0){
+        }, $imgUrls);
-			$nextUrl = $nextLink->attr('href');
-		}else{
-			$nextUrl = null;
-		}
 
         return [
-			'image_url' => $imgUrl,
+            'image_urls' => $imgUrls,
             'next_page_url' => $nextUrl,
         ];
     }
@@ -57,21 +70,83 @@ class MangaScraperService
     /**
      * @throws GuzzleException
      */
-    public function scrapeMangaChapter(string $chapterUrl, string $mangaTitle, float $chapterNumber): array|bool
+    public function scrapeManga(Manga $manga, ContentSource $mangaSource): array
     {
-		if(!$this->isChapterAvailable($chapterUrl, $chapterNumber)){
+        $allChaptersData = [];
-			return false;
+
+        foreach ($manga->getChapters() as $chapter) {
+            $chapterData = $this->scrapeChapter($manga, $chapter, $mangaSource);
+            if ($chapterData !== false) {
+                $allChaptersData[$chapter->getNumber()] = $chapterData;
             }
+        }
+
+        return $allChaptersData;
+    }
+
+    private function scrapeChapter(Manga $manga, Chapter $chapter, ContentSource $mangaSource): array|bool
+    {
+        switch ($mangaSource->getScrapingType()) {
+            case 'html':
+                return $this->scrapeChapterHtml($manga, $chapter, $mangaSource);
+            case 'javascript':
+                return $this->scrapeChapterJavaScript($manga, $chapter, $mangaSource);
+//            case 'api':
+//                // Implémentez la méthode de scraping par API si nécessaire
+//                return $this->scrapeChapterApi($manga, $chapter, $mangaSource);
+            default:
+                throw new \Exception('Unsupported scraping type: ' . $mangaSource->getScrapingType());
+        }
+    }
+
+//    private function scrapeChapterHtml(Manga $manga, Chapter $chapter, MangaSource $mangaSource): array|bool
+//    {
+//        $chapterUrl = $mangaSource->getChapterUrl($manga->getTitle(), $chapter->getChapterNumber());
+//        $html = $this->fetchHtml($chapterUrl);
+//        $imgUrls = $this->extractMangaPageData($html);
+//
+//        return $this->saveChapterImages($manga, $chapter, $imgUrls);
+//    }
+
+    private function scrapeChapterJavaScript(Manga $manga, Chapter $chapter, ContentSource $mangaSource): array|bool
+    {
+        $chapterUrl = $mangaSource->getChapterUrl($manga->getTitle(), $chapter->getNumber());
+        $imgUrls = $this->fetchImagesUsingPuppeteer($chapterUrl, $mangaSource->getImageSelector(), $mangaSource->getNextPageSelector());
+
+        return $this->saveChapterImages($manga, $chapter, $imgUrls);
+    }
+
+    private function fetchImagesUsingPuppeteer(string $url, string $imageSelector, string $nextButtonSelector): array
+    {
+        // Appeler le script Puppeteer avec les paramètres nécessaires
+        $output = [];
+        $command = sprintf('node puppeteer-script.js "%s" "%s" "%s" 2>&1', $url, $imageSelector, $nextButtonSelector); // Redirect stderr to stdout
+        dump($command);
+//        exec($command, $output, $return_var);
+
+        dd($command, $output);
+
+        // Convertir la sortie JSON en tableau PHP
+        return json_decode(implode("", $output), true);
+    }
+
+    /**
+     * @throws GuzzleException
+     */
+    private function scrapeChapterHtml(Manga $manga, Chapter $chapter, ContentSource $mangaSource): array|bool
+    {
+        $chapterUrl = $mangaSource->getChapterUrl($manga->getSlug(), $chapter->getNumber());
 
         $pageData = [];
         $currentPageUrl = $chapterUrl;
+        $mangaTitle = $manga->getTitle();
+        $chapterNumber = $chapter->getNumber();
 
         $mangaDir = sprintf('%s/%s', $this->projectDir . self::IMG_BASE_DIR, $mangaTitle);
         if (!is_dir($mangaDir)) {
             mkdir($mangaDir, 0755, true);
         }
 
-		// Créez le dossier du chapitre s'il n'existe pas
         $chapterDir = sprintf('%s/%s', $mangaDir, $chapterNumber);
         if (!is_dir($chapterDir)) {
             mkdir($chapterDir, 0755, true);
@@ -79,23 +154,33 @@ class MangaScraperService
 
         do {
             $html = $this->fetchHtml($currentPageUrl);
-			$page = $this->extractMangaPageData($html);
+            $page = $this->extractMangaPageData($html, $mangaSource);
-			$pageData[] = $page;
-			$currentPageUrl = $page['next_page_url'];
 
-			// Construisez le nom de fichier de l'image
+            foreach ($page['image_urls'] as $imgUrl) {
-			$imageName = sprintf('%03d.jpg', count($pageData));
+                dump($imgUrl);
+                dump(base64_decode($imgUrl));
+                // Déterminer l'extension de l'image
+                $imageExtension = pathinfo(parse_url($imgUrl, PHP_URL_PATH), PATHINFO_EXTENSION);
 
-			// Construisez le chemin du fichier de l'image
+                // Construire le nom de fichier de l'image
+                $imageName = sprintf('%03d.%s', count($pageData) + 1, $imageExtension);
                 $imagePath = sprintf('%s/%s', $chapterDir, $imageName);
 
-			// Téléchargez et enregistrez l'image
+                $this->downloadAndSaveImage($imgUrl, $imagePath);
-			$this->downloadAndSaveImage($page['image_url'], $imagePath);
 
-			// Modifiez les données de la page pour inclure l'URL de l'image stockée localement
+                $pageData[] = [
-			$pageData[count($pageData) - 1]['local_image_url'] = sprintf('/manga-images/%s/%s/%s', $mangaTitle, $chapterNumber, $imageName);
+                    'image_url' => $imgUrl,
-			$pageData[count($pageData) - 1]['page_number'] = count($pageData);
+                    'local_image_url' => sprintf('/manga-images/%s/%s/%s', $mangaTitle, $chapterNumber, $imageName),
+                    'page_number' => count($pageData) + 1,
+                ];
+            }
 
+            // Si plus d'une image a été trouvée, ne pas chercher la page suivante
+            if (count($page['image_urls']) > 1) {
+                break;
+            }
+
+            $currentPageUrl = $page['next_page_url'];
         } while ($currentPageUrl);
 
         $event = new MangaScrapedEvent($mangaTitle, $chapterNumber, $pageData);
@@ -112,7 +197,7 @@ class MangaScraperService
         $client = new Client();
         $response = $client->get($url);
 
-		return (string) $response->getBody();
+        return (string)$response->getBody();
     }
 
     /**
@@ -126,21 +211,55 @@ class MangaScraperService
         file_put_contents($destinationPath, $response->getBody()->getContents());
     }
 
+    private function saveChapterImages(Manga $manga, Chapter $chapter, array $imgUrls): array
+    {
+        $mangaTitle = $manga->getTitle();
+        $chapterNumber = $chapter->getNumber();
+
+        $mangaDir = sprintf('%s/%s', $this->projectDir . self::IMG_BASE_DIR, $mangaTitle);
+        if (!is_dir($mangaDir)) {
+            mkdir($mangaDir, 0755, true);
+        }
+
+        $chapterDir = sprintf('%s/%s', $mangaDir, $chapterNumber);
+        if (!is_dir($chapterDir)) {
+            mkdir($chapterDir, 0755, true);
+        }
+
+        $pageData = [];
+        foreach ($imgUrls as $index => $imgUrl) {
+            $imageName = sprintf('%03d.%s', $index + 1, pathinfo(parse_url($imgUrl, PHP_URL_PATH), PATHINFO_EXTENSION));
+            $imagePath = sprintf('%s/%s', $chapterDir, $imageName);
+
+            $this->downloadAndSaveImage($imgUrl, $imagePath);
+
+            $pageData[] = [
+                'image_url' => $imgUrl,
+                'local_image_url' => sprintf('/manga-images/%s/%s/%s', $mangaTitle, $chapterNumber, $imageName),
+                'page_number' => $index + 1,
+            ];
+        }
+
+        $event = new MangaScrapedEvent($mangaTitle, $chapterNumber, $pageData);
+        $this->eventDispatcher->dispatch($event, MangaScrapedEvent::NAME);
+
+        return $pageData;
+    }
+
     /**
      * @throws GuzzleException
      */
-    private function isChapterAvailable(string $chapterUrl, float $chapterNumber): bool
+    private function isChapterAvailable(string $chapterUrl, float $chapterNumber, ContentSource $mangaSource): bool
     {
         $html = $this->fetchHtml($chapterUrl);
         $crawler = new Crawler($html);
-		$nextLink = $crawler->filter('a[title="Suivant"]');
+        $nextLink = $crawler->filter($mangaSource->getNextPageSelector());
 
-		if($nextLink->count() === 0){
+        if ($nextLink->count() === 0) {
             return false;
-		}else{
-			$nextUrl = $nextLink->attr('href');
         }
 
+        $nextUrl = $nextLink->attr('href');
         $routeCollection = new RouteCollection();
         $routeCollection->add('manga_chapter', new Route('/scan-{manga}/{chapter}/{page}'));
         $context = new RequestContext('/');
@@ -148,10 +267,6 @@ class MangaScraperService
         $path = parse_url($nextUrl, PHP_URL_PATH);
         $parameters = $matcher->match($path);
 
-		if((float) $parameters['chapter'] !== $chapterNumber){
+        return (float)$parameters['chapter'] === $chapterNumber;
-			return false;
-		}
-
-		return true;
     }
 }

src/Service/MangaScraperServiceOld.php

@@ -0,0 +1,157 @@
+<?php
+
+namespace App\Service;
+
+use App\EventSubscriber\MangaScrapedEvent;
+use GuzzleHttp\Client;
+use GuzzleHttp\Exception\GuzzleException;
+use Symfony\Component\DomCrawler\Crawler;
+use Symfony\Component\Routing\Matcher\UrlMatcher;
+use Symfony\Component\Routing\RequestContext;
+use Symfony\Component\Routing\Route;
+use Symfony\Component\Routing\RouteCollection;
+use Symfony\Contracts\EventDispatcher\EventDispatcherInterface;
+
+class MangaScraperServiceOld
+{
+	const string IMG_BASE_DIR = '/public/manga-images';
+	private string $projectDir;
+	private EventDispatcherInterface $eventDispatcher;
+
+	public function __construct($projectDir, EventDispatcherInterface $eventDispatcher)
+	{
+		$this->projectDir = $projectDir;
+		$this->eventDispatcher = $eventDispatcher;
+	}
+
+	public function extractMangaPageData(string $html): array
+	{
+		$baseUrl = 'https://lelscans.net';
+        //pour éviter à PhpStorm de gueuler...
+        $selector = 'img';
+		$crawler = new Crawler($html);
+		$imgUrl = $crawler->filter($selector)->attr('src');
+		$nextLink = $crawler->filter('a[title="Suivant"]');
+
+		if (!preg_match('/^https?:\/\//', $imgUrl)) {
+			$urlComponents = parse_url($baseUrl);
+			$scheme = $urlComponents['scheme'];
+			$host = $urlComponents['host'];
+
+			// Construit l'URL absolue de l'image
+			$imgUrl = $scheme . '://' . $host . '/' . ltrim($imgUrl, '/');
+		}
+
+		if($nextLink->count() > 0){
+			$nextUrl = $nextLink->attr('href');
+		}else{
+			$nextUrl = null;
+		}
+
+		return [
+			'image_url' => $imgUrl,
+			'next_page_url' => $nextUrl,
+		];
+	}
+
+    /**
+     * @throws GuzzleException
+     */
+    public function scrapeMangaChapter(string $chapterUrl, string $mangaTitle, float $chapterNumber): array|bool
+	{
+		if(!$this->isChapterAvailable($chapterUrl, $chapterNumber)){
+			return false;
+		}
+
+		$pageData = [];
+		$currentPageUrl = $chapterUrl;
+
+		$mangaDir = sprintf('%s/%s', $this->projectDir . self::IMG_BASE_DIR, $mangaTitle);
+		if (!is_dir($mangaDir)) {
+			mkdir($mangaDir, 0755, true);
+		}
+
+		// Créez le dossier du chapitre s'il n'existe pas
+		$chapterDir = sprintf('%s/%s', $mangaDir, $chapterNumber);
+		if (!is_dir($chapterDir)) {
+			mkdir($chapterDir, 0755, true);
+		}
+
+		do {
+			$html = $this->fetchHtml($currentPageUrl);
+			$page = $this->extractMangaPageData($html);
+			$pageData[] = $page;
+			$currentPageUrl = $page['next_page_url'];
+
+			// Construisez le nom de fichier de l'image
+			$imageName = sprintf('%03d.jpg', count($pageData));
+
+			// Construisez le chemin du fichier de l'image
+			$imagePath = sprintf('%s/%s', $chapterDir, $imageName);
+
+			// Téléchargez et enregistrez l'image
+			$this->downloadAndSaveImage($page['image_url'], $imagePath);
+
+			// Modifiez les données de la page pour inclure l'URL de l'image stockée localement
+			$pageData[count($pageData) - 1]['local_image_url'] = sprintf('/manga-images/%s/%s/%s', $mangaTitle, $chapterNumber, $imageName);
+			$pageData[count($pageData) - 1]['page_number'] = count($pageData);
+
+		} while ($currentPageUrl);
+
+		$event = new MangaScrapedEvent($mangaTitle, $chapterNumber, $pageData);
+		$this->eventDispatcher->dispatch($event, MangaScrapedEvent::NAME);
+
+		return $pageData;
+	}
+
+    /**
+     * @throws GuzzleException
+     */
+    private function fetchHtml(string $url): string
+	{
+		$client = new Client();
+		$response = $client->get($url);
+
+		return (string) $response->getBody();
+	}
+
+    /**
+     * @throws GuzzleException
+     */
+    private function downloadAndSaveImage(string $imageUrl, string $destinationPath): void
+	{
+		$client = new Client();
+		$response = $client->get($imageUrl);
+
+		file_put_contents($destinationPath, $response->getBody()->getContents());
+	}
+
+    /**
+     * @throws GuzzleException
+     */
+    private function isChapterAvailable(string $chapterUrl, float $chapterNumber): bool
+	{
+		$html = $this->fetchHtml($chapterUrl);
+		$crawler = new Crawler($html);
+		$nextLink = $crawler->filter('a[title="Suivant"]');
+
+		if($nextLink->count() === 0){
+			return false;
+		}else{
+			$nextUrl = $nextLink->attr('href');
+		}
+
+		$routeCollection = new RouteCollection();
+		$routeCollection->add('manga_chapter', new Route('/scan-{manga}/{chapter}/{page}'));
+		$context = new RequestContext('/');
+		$matcher = new UrlMatcher($routeCollection, $context);
+		$path = parse_url($nextUrl, PHP_URL_PATH);
+		$parameters = $matcher->match($path);
+
+		if((float) $parameters['chapter'] !== $chapterNumber){
+			return false;
+		}
+
+		return true;
+	}
+}

src/Service/MangaUpdatesMetadataProvider.php

@@ -3,20 +3,19 @@
 namespace App\Service;
 
 use App\Entity\Manga;
+use App\Interface\MetadataProviderInterface;
 use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
 use Exception;
 use GuzzleHttp\Client;
 use GuzzleHttp\Exception\GuzzleException;
-use Symfony\Component\BrowserKit\HttpBrowser;
 use Symfony\Component\String\Slugger\SluggerInterface;
-use Symfony\Contracts\HttpClient\HttpClientInterface;
 
-class MangaUpdatesDbProvider implements MangaDbProviderInterface
+class MangaUpdatesMetadataProvider implements MetadataProviderInterface
 {
     private Client $client;
 
-    public function __construct(private SluggerInterface $slugger)
+    public function __construct(private readonly SluggerInterface $slugger)
     {
         $this->client = new Client();
     }
@@ -40,6 +39,9 @@ class MangaUpdatesDbProvider implements MangaDbProviderInterface
             $results = $this->client->request('POST', 'https://api.mangaupdates.com/v1/series/search', [
                 'json' => [
                     'search' => $title,
+                    'licensed' => 'yes',
+                    'type' => ['Manga'],
+                    'exclude_genre' => ['Doujinshi', 'Adult', 'Hentai', 'Ecchi', 'Yaoi', 'Yuri', 'Josei', 'Smut', 'Gender Bender'],
                     'orderby' => 'score',
                 ]
             ])->withHeader('Authorization', 'Bearer ' . $jwt)
@@ -50,13 +52,21 @@ class MangaUpdatesDbProvider implements MangaDbProviderInterface
             $mangas = [];
             foreach (json_decode($results, true)['results'] as $record) {
                 $record = $record['record'];
+
+                $genres = [];
+                foreach ($record['genres'] as $genre) {
+                    $genres[] = $genre['genre'];
+                }
+
                 $mangas[] = (new Manga())
                     ->setTitle($record['title'])
                     ->setSlug($this->slugger->slug($record['title'])->lower())
                     ->setDescription($record['description'])
                     ->setImageUrl($record['image']['url']['original'])
-                    ->setGenres($record['genres'])
+                    ->setGenres($genres)
-                    ->setPublicationYear((int)$record['year']);
+                    ->setPublicationYear((int)$record['year'])
+                    ->setRating((float)$record['bayesian_rating'])
+                ;
             }
 
             return new ArrayCollection($mangas);

src/Service/MangadexProvider.php

@@ -0,0 +1,123 @@
+<?php
+
+namespace App\Service;
+
+use App\Entity\Chapter;
+use App\Entity\Manga;
+use App\Interface\ClientInterface;
+use App\Interface\MetadataProviderInterface;
+use Doctrine\Common\Collections\ArrayCollection;
+use Doctrine\Common\Collections\Collection;
+use Symfony\Component\String\Slugger\SluggerInterface;
+
+readonly class MangadexProvider implements MetadataProviderInterface
+{
+    public function __construct(private ClientInterface $client, private SluggerInterface $slugger)
+    {
+    }
+
+    public function search(?string $title): Collection
+    {
+        if($title === null) {
+            return new ArrayCollection();
+        }
+
+        $results = $this->client->get('/manga', [
+            'title' => $title,
+            'contentRating' => ['safe'],
+            'includes' => ['cover_art', 'author']
+        ]);
+
+        $mangas = [];
+        foreach ($results['data'] as $result) {
+            $mangas[] = (new Manga())
+                ->setExternalId($result['id'])
+                ->setTitle($result['attributes']['title']['en'])
+                ->setSlug($this->slugger->slug($result['attributes']['title']['en'])->lower())
+                ->setDescription($result['attributes']['description']['fr'] ?? $result['attributes']['description']['en'] ?? '')
+                ->setPublicationYear($result['attributes']['year'])
+            ;
+            $tags = [];
+            foreach($result['attributes']['tags'] as $tag){
+                $tags[] = $tag['attributes']['name']['en'];
+            }
+
+            $mangas[count($mangas) - 1]->setGenres($tags);
+
+            foreach($result['relationships'] as $relationship) {
+                if($relationship['type'] === 'author') {
+                    $mangas[count($mangas) - 1]->setAuthor($relationship['attributes']['name']);
+                }
+
+                if($relationship['type'] === 'cover_art') {
+                    $mangas[count($mangas) - 1]->setImageUrl('https://mangadex.org/covers/' . $result['id'] . '/' .$relationship['attributes']['fileName']);
+                }
+            }
+        }
+
+        $test = array_map(fn($manga) => $manga->getExternalId(), $mangas);
+
+        $ratings = $this->client->get('/statistics/manga', [
+            'manga' => $test
+        ]);
+
+        foreach($mangas as $manga) {
+            $manga->setRating($ratings['statistics'][$manga->getExternalId()]['rating']['average']);
+        }
+
+        return new ArrayCollection($mangas);
+    }
+
+    public function getFeed(Manga $manga): Manga
+    {
+        if($manga->getExternalId() === null) {
+            return $manga;
+        }
+
+        $chapters = [];
+        $page = 0;
+
+        do {
+            $results = $this->getFeedWithPagination($manga->getExternalId(), $page);
+            if (isset($results['data'])) {
+                $chapters = array_merge($chapters, $results['data']);
+            } else {
+                break;
+            }
+            $page++;
+        } while (count($chapters) < $results['total']);
+
+        foreach($chapters as $result) {
+            $chapterNumber = (float)$result['attributes']['chapter'];
+
+            // Utilisez la méthode exists de Doctrine pour vérifier si un chapitre avec le même numéro existe déjà
+            $chapterExists = $manga->getChapters()->exists(function($key, $existingChapter) use ($chapterNumber) {
+                return $existingChapter->getNumber() === $chapterNumber;
+            });
+
+            // Si le chapitre existe déjà, on skip
+            if ($chapterExists) {
+                continue;
+            }
+
+            // Créez et ajoutez le nouveau chapitre
+            $chapter = new Chapter();
+            $chapter->setNumber($chapterNumber)
+                ->setTitle($result['attributes']['title'])
+                ->setVolume((int)$result['attributes']['volume'] ?? null);
+
+            $manga->addChapter($chapter);
+        }
+
+        return $manga;
+    }
+
+    private function getFeedWithPagination(string $externalId, int $page){
+        return $this->client->get('/manga/' . $externalId . '/feed', [
+            'limit' => 500,
+            'translatedLanguage' =>['en'],
+            'order' => ['chapter' => 'asc'],
+            'offset' => $page * 500
+        ]);
+    }
+}

src/Service/SushiScanProviderService.php

@@ -2,25 +2,64 @@
 
 namespace App\Service;
 
-use Goutte\Client;
+use App\Entity\Manga;
+use App\Interface\ContentProviderInterface;
+use Symfony\Component\BrowserKit\HttpBrowser;
+use Symfony\Component\BrowserKit\HttpBrowser as Client;
+//use GuzzleHttp\Client;
+use GuzzleHttp\Exception\GuzzleException;
+use Symfony\Component\DomCrawler\Crawler;
+use Symfony\Component\HttpClient\HttpClient;
 
-class SushiScanProviderService implements MangaProviderInterface
+class SushiScanProviderService
 {
-	const PROVIDER_URL = 'https://sushiscan.com/';
+    const PROVIDER_URL = 'https://sushiscan.net/catalogue/';
     const MANGA_SLUG = '/{manga}/{chapter}/{page}';
+
+    const CONTENT_TYPE = ['volume', 'chapitre'];
     private Client $client;
 
     public function __construct()
     {
-		$this->client = new Client();
+        $httpClient = HttpClient::create(['timeout' => 60]);
+        $this->client = new HttpBrowser($httpClient);
     }
 
-	/**
+    public function getAvailableContent(Manga $manga)
-	 * @return array
-	 */
-	public function getMangaList(): array
     {
-		// TODO: Implement getMangaList() method.
+        $url = 'http://flaresolverr:8191/v1';
+        $jsonContent = json_encode([
+            'cmd' => 'request.get',
+            'url' => self::PROVIDER_URL . $manga->getSlug(),
+            'maxTimeout' => 90000,
+        ]);
+
+
+        try{
+        $crawler = $this->client->request('POST', $url, [], [], [
+            'HTTP_CONTENT_TYPE' => 'application/json',
+        ], $jsonContent);
+
+        }catch (\Exception $e) {
+            dd($e);
+        }
+        $contentList = [];
+
+        dd($crawler);
+
+        $crawler->filter('#chapterList ul > li')->each(function (Crawler $node) use (&$contentList) {
+            dump($node);
+//            $contentName = $node->text();
+//            $contentUrl = $node->attr('href');
+//            if ($contentName && $contentUrl) {
+//                $contentList[] = [
+//                    'name' => $contentName,
+//                    'url' => $contentUrl,
+//                ];
+//            }
+        });
+
+        return $contentList;
     }
 
     /**

src/Twig/Components/AddMangaModalComponent.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Entity\Manga;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+class AddMangaModalComponent
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(writable: true)]
+    public ?Manga $manga;
+
+    public function open(Manga $manga): void
+    {
+        $this->manga = $manga;
+    }
+
+    public function close(): void
+    {
+        $this->manga = null;
+    }
+}

src/Twig/Components/BootstrapModal.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Twig\Components;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+class BootstrapModal
+{
+    public ?string $id = null;
+}

src/Twig/Components/DownloadChapter.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Repository\ChapterRepository;
+use App\Repository\MangaRepository;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+final class DownloadChapter
+{
+    use DefaultActionTrait;
+
+    public ?string $mangaSlug = '';
+    public float $chapter;
+
+    public function __construct()
+    {
+    }
+
+    public function downloadChapter(MangaRepository $mangaRepository, ChapterRepository $chapterRepository): int
+    {
+//        $mangaSlug = $this->mangaSlug;
+//        $chapter = $this->chapter;
+//        $manga = $mangaRepository->findOneBy(['slug' => $mangaSlug]);
+//        $chapter = $chapterRepository->findOneBy(['manga' => $manga, 'number' => $chapter]);
+
+
+        return 0;
+
+    }
+}

src/Twig/Components/MangaSearch.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Twig\Components;
+
+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
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(writable: true)]
+    public ?string $query = null;
+
+    public function __construct(private readonly MangadexProvider $mangadexProvider)
+    {
+    }
+
+    /**
+     * @throws Exception
+     */
+    public function getMangas(): Collection|null
+    {
+        if ($this->query === null || $this->query === '') {
+            return null;
+        }
+
+        return $this->mangadexProvider->search($this->query);
+    }
+}

src/Twig/Components/NewMangaForm.php

@@ -0,0 +1,79 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Entity\Manga;
+use App\Service\MangadexProvider;
+use Doctrine\DBAL\Exception\UniqueConstraintViolationException;
+use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Component\HttpFoundation\RedirectResponse;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\ComponentToolsTrait;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+class NewMangaForm
+{
+    use ComponentToolsTrait;
+    use DefaultActionTrait;
+
+    public ?Manga $manga = null;
+    #[LiveProp(writable: true)]
+    public array $mangaData = [];
+
+    #[LiveProp(writable: true)]
+    public ?int $index = 0;
+
+    public function mount(Manga $manga): void
+    {
+        $this->manga = $manga;
+        $this->mangaData = [
+            'title' => $manga->getTitle(),
+            'slug' => $manga->getSlug(),
+            'description' => $manga->getDescription(),
+            'imageUrl' => $manga->getImageUrl(),
+            'status' => $manga->getStatus(),
+            'genres' => $manga->getGenres(),
+            'author' => $manga->getAuthor(),
+            'publicationYear' => $manga->getPublicationYear(),
+            'rating' => $manga->getRating(),
+            'externalId' => $manga->getExternalId(),
+        ];
+    }
+
+    #[LiveAction]
+    public function saveManga(EntityManagerInterface $entityManager, MangadexProvider $mangadexProvider): Response
+    {
+        $manga = new Manga();
+        $manga->setTitle($this->mangaData['title'])
+            ->setSlug($this->mangaData['slug'])
+            ->setDescription($this->mangaData['description'])
+            ->setImageUrl($this->mangaData['imageUrl'])
+            ->setStatus($this->mangaData['status'])
+            ->setGenres($this->mangaData['genres'])
+            ->setAuthor($this->mangaData['author'])
+            ->setPublicationYear($this->mangaData['publicationYear'])
+            ->setRating($this->mangaData['rating'])
+            ->setExternalId($this->mangaData['externalId']);
+
+        $mangadexProvider->getFeed($manga);
+        try {
+            foreach ($manga->getChapters() as $chapter) {
+                $entityManager->persist($chapter);
+            }
+
+            $entityManager->persist($manga);
+            $entityManager->flush();
+        } catch (\Exception $e) {
+            if ($e instanceof UniqueConstraintViolationException) {
+                return new RedirectResponse('/manga/' . $manga->getSlug());
+            }
+            throw $e;
+        }
+
+        return new RedirectResponse('/manga/' . $manga->getSlug());
+    }
+}

src/Twig/Components/Search.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Repository\MangaRepository;
+use Doctrine\Common\Collections\ArrayCollection;
+use Doctrine\Common\Collections\Collection;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+final class Search
+{
+    use DefaultActionTrait;
+
+    #[LiveProp (writable: true)]
+    public ?string $query = null;
+
+    public function __construct(private readonly MangaRepository $mangaRepository)
+    {
+    }
+
+    public function getMangas(): array
+    {
+        return $this->query ? $this->mangaRepository->findByTitle($this->query) : [];
+    }
+}

src/Twig/Components/ToolBarButton.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Twig\Components;
+
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+final class ToolBarButton
+{
+    use DefaultActionTrait;
+}

src/Twig/Extension/TruncateExtension.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Twig\Extension;
+
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+
+class TruncateExtension extends AbstractExtension
+{
+    public function getFilters(): array
+    {
+        return [
+            new TwigFilter('truncate', [$this, 'truncate']),
+        ];
+    }
+
+    public function truncate(?string $value, int $limit): string
+    {
+        if ($value === null) {
+            return '';
+        }
+        return strlen($value) > $limit ? substr($value, 0, $limit) . '...' : $value;
+    }
+}

src/Twig/Runtime/TruncateExtensionRuntime.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Twig\Runtime;
+
+use Twig\Extension\RuntimeExtensionInterface;
+
+class TruncateExtensionRuntime implements RuntimeExtensionInterface
+{
+    public function __construct()
+    {
+        // Inject dependencies if needed
+    }
+
+    public function doSomething($value)
+    {
+        // ...
+    }
+}

symfony.lock

@@ -195,6 +195,20 @@
             "config/routes/security.yaml"
         ]
     },
+    "symfony/stimulus-bundle": {
+        "version": "2.17",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.13",
+            "ref": "6acd9ff4f7fd5626d2962109bd4ebab351d43c43"
+        },
+        "files": [
+            "assets/bootstrap.js",
+            "assets/controllers.json",
+            "assets/controllers/hello_controller.js"
+        ]
+    },
     "symfony/twig-bundle": {
         "version": "7.0",
         "recipe": {
@@ -208,6 +222,30 @@
             "templates/base.html.twig"
         ]
     },
+    "symfony/ux-live-component": {
+        "version": "2.17",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.6",
+            "ref": "73e69baf18f47740d6f58688c5464b10cdacae06"
+        },
+        "files": [
+            "config/routes/ux_live_component.yaml"
+        ]
+    },
+    "symfony/ux-twig-component": {
+        "version": "2.17",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.13",
+            "ref": "67814b5f9794798b885cec9d3f48631424449a01"
+        },
+        "files": [
+            "config/packages/twig_component.yaml"
+        ]
+    },
     "symfony/validator": {
         "version": "7.0",
         "recipe": {
@@ -249,6 +287,9 @@
             "webpack.config.js"
         ]
     },
+    "twig/extra-bundle": {
+        "version": "v3.10.0"
+    },
     "zenstruck/foundry": {
         "version": "1.36",
         "recipe": {

tailwind.config.js

@@ -7,6 +7,6 @@ module.exports = {
     extend: {},
   },
   plugins: [
-    require("daisyui"),
+    // require("daisyui"),
   ],
 }

templates/base.html.twig

@@ -7,25 +7,55 @@
           href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
     {% block stylesheets %}
         {{ encore_entry_link_tags('app') }}
-        {{ encore_entry_link_tags('app') }}
+    {% endblock %}
+    {% block javascripts %}
+        {{ encore_entry_script_tags('app') }}
     {% endblock %}
 </head>
-<body class="h-screen">
+<body>
-
+<div class="h-full">
-<div class="fixed w-full bg-green-600 h-16">
+    <div class="fixed flex flex-row justify-start items-center w-full z-10 bg-green-600 h-16 z-30">
-    <a href="{{ path('app_manga') }}">
+        <div class="flex justify-center ml-10">
-    <span class="">Mangarr</span>
+            <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" #}
+                {#                         x="0px" y="0px" width="50" height="50" viewBox="-40 -90 500 500"> #}
+                {#                        <path cx="100" cy="100" r="150" fill="white" stroke="green" stroke-width="15" #}
+                {#                              d="M448 160A240 240 0 0 1 208 400A240 240 0 0 1 -32 160A240 240 0 0 1 448 160z"/> #}
+                {#                        <g transform="translate(28, -15) scale(0.9)"> #}
+                {#                            <g> #}
+                {#                                <path style="fill:#16A34A; stroke:black; stroke-width:3;" #}
+                {#                                      d="M68.955 285.752c45.294 0.882 84.544 7.654 113.51 19.587a4.037 4.037 0 0 0 5.571 -3.73l0.016 -216.52a4.032 4.032 0 0 0 -2.544 -3.749L70.525 35.586a4.032 4.032 0 0 0 -5.525 3.749v242.384a4.032 4.032 0 0 0 3.955 4.034"/> #}
+                {#                                <path style="fill:green; stroke:black; stroke-width:3;" #}
+                {#                                      d="M398.374 74.04a4.048 4.048 0 0 0 -3.565 -0.63l-40.667 12.158a4.032 4.032 0 0 0 -2.88 3.864v209.165s0.181 3.299 -3.293 3.299h-6.592c-32.806 0 -93.773 3.405 -133.496 26.213l-7.883 4.514 -7.883 -4.514c-39.723 -22.806 -100.688 -26.213 -133.496 -26.213H50.208c-1.568 0 -1.472 -1.885 -1.472 -1.883V89.434a4.032 4.032 0 0 0 -2.878 -3.864L5.189 73.411A4.032 4.032 0 0 0 0 77.274V330.336c0 1.138 0.482 2.224 1.325 2.99a4.032 4.032 0 0 0 3.104 1.026c12.086 -1.186 30.984 -2.597 52.363 -2.597 46.957 0 84.691 6.858 109.146 19.837 3.592 1.885 24.422 13.109 34.064 13.109s30.47 -11.224 34.062 -13.109c24.454 -12.979 62.19 -19.837 109.146 -19.837 21.378 0 40.275 1.411 52.362 2.597a4.032 4.032 0 0 0 4.429 -4.014V77.274a4.048 4.048 0 0 0 -1.626 -3.234"/> #}
+                {#                                <path style="fill:#16A34A; stroke:black; stroke-width:3;" #}
+                {#                                      d="M213.75 304.962a4.048 4.048 0 0 0 3.782 0.378c28.965 -11.933 68.216 -18.707 113.51 -19.587a4.032 4.032 0 0 0 3.957 -4.032V39.334a4.032 4.032 0 0 0 -5.525 -3.749l-114.986 45.755a4.032 4.032 0 0 0 -2.542 3.749l0.016 216.52a4.032 4.032 0 0 0 1.789 3.352"/> #}
+                {#                            </g> #}
+                {#                        </g> #}
+                {#                    </svg> #}
+                {#                </div> #}
+                <img src="{{ asset('img/mangarr_logo.png') }}" alt="Mangarr" class="w-32 shadow-xl">
             </a>
-</div>
+        </div>
-<div class="w-screen pt-16 flex bg-white">
+        <div class="ml-8 w-60">
+            <twig:Search/>
+        </div>
+    </div>
+    <div class="pt-16 flex bg-white">
         {% include 'menu/menu.html.twig' %}
-    {% block body %}{% endblock %}
-</div>
-{% block javascripts %}
-    {{ encore_entry_script_tags('app') }}
-    {{ encore_entry_script_tags('app') }}
-{% endblock %}
 
+        <div class="w-full flex flex-col ml-60 overscroll-contain">
+            <div class="sticky top-16 z-20">
+                {% block toolbar %}
+                {% endblock %}
+            </div>
+            <div class="z-10">
+                {% block body %}
+                {% endblock %}
+            </div>
+        </div>
+    </div>
+</div>
 <script src="https://kit.fontawesome.com/42e345444d.js" crossorigin="anonymous"></script>
 </body>
 </html>

templates/bundles/TwigBundle/Exception/error404.html.twig

@@ -0,0 +1,9 @@
+{# templates/bundles/TwigBundle/Exception/error404.html.twig #}
+{% extends 'base.html.twig' %}
+
+{% block title %}Page non trouvée{% endblock %}
+
+{% block body %}
+    <h1>Page non trouvée</h1>
+    <p>La page que vous cherchez n'existe pas.</p>
+{% endblock %}

templates/components/AddMangaModal.html.twig

@@ -0,0 +1,12 @@
+{# templates/components/manga_modal.html.twig #}
+<div id="manga-modal" style="display: {{ manga ? 'block' : 'none' }};">
+    <div class="modal-content">
+        <span class="close-button" data-action="live#action" data-live-action-param="close">&times;</span>
+        {% if manga %}
+            <h2>{{ manga.title }}</h2>
+            <p><strong>Year:</strong> {{ manga.publicationYear }}</p>
+            <p>{{ manga.description }}</p>
+            <button data-action="live#action" data-live-action-param="saveManga">Save Manga</button>
+        {% endif %}
+    </div>
+</div>

templates/components/BootstrapModal.html.twig

@@ -0,0 +1,33 @@
+<div {{ attributes.defaults({
+    class: 'modal fade',
+    tabindex: '-1',
+    'aria-hidden': 'true',
+    id: id ? id : false,
+}) }}
+    data-controller="bootstrap-modal"
+>
+    <div class="fixed top-0 left-0 w-full h-full outline-none" tabindex="-1" role="dialog">
+        <div class="modal-dialog 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/DownloadChapter.html.twig

@@ -0,0 +1,5 @@
+<div{{ attributes }}>
+    <a href="#" class="text-gray-500 hover:text-green-500">
+        <i class="fas fa-search"></i>
+    </a>
+</div>

templates/components/MangaSearch.html.twig

@@ -0,0 +1,65 @@
+{# templates/components/MangaSearch.html.twig #}
+
+<div {{ attributes }}>
+    <div class="w-full mx-auto">
+        <div data-controller="search">
+            <div class="flex items-center border border-gray-300 rounded bg-white">
+            <span class="flex items-center justify-center w-10 h-10 text-gray-500">
+                <i class="fas fa-search"></i>
+            </span>
+                <input data-search-target="input"
+                       data-model="debounce(500)|query" type="text"
+                       placeholder="eg. Naruto, Bleach, One Piece"
+                       class="w-full py-2 px-3 bg-green-50 border-none focus:outline-none focus:bg-white focus:border focus:border-green-200">
+                <button data-action="click->search#clearSearch"
+                        class="flex items-center justify-center w-10 h-10 text-gray-500 hover:bg-gray-200">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    {% 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 }}">
+                    <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 items-center">
+                                    <span>{{ manga.title }}</span>
+                                    <span class="text-2xl text-gray-500 ml-2">({{ manga.publicationYear }})</span>
+                                </div>
+                                <a href="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}"
+                                   class="text-gray-400 hover:text-gray-500">
+                                    <i class="fas fa-external-link-alt"></i>
+                                </a>
+                            </div>
+                            {% for genre in manga.genres %}
+                                <span
+                                    class="bg-gray-200 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                {{ genre }}
+                            </span>
+                            {% endfor %}
+                        </div>
+                        <div class="mb-2">
+                            <p class="text-gray-700 text-sm">{{ manga.description|truncate(250) }}</p>
+                        </div>
+                        <div class="flex items-center">
+                            <span class="text-gray-600 text-sm mr-2">
+                                <i class="fas fa-star text-yellow-500"></i>
+                                {{ manga.rating }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                {{ component('NewMangaForm', {manga: manga, index: loop.index}) }}
+            {% endfor %}
+        </div>
+    {% endif %}
+</div>

templates/components/NewMangaForm.html.twig

@@ -0,0 +1,40 @@
+<div {{ attributes }}>
+    {% component BootstrapModal with {id: 'mangaModal' ~ index ~ '-' ~ manga.slug } %}
+        {% block modal_header %}
+            <div class="flex justify-between">
+                <h5 class="modal-title text-lg font-bold">{{ manga.title }} <span
+                        class="text-md font-normal text-gray-500">({{ manga.publicationYear }})</span></h5>
+                <button type="button" class="btn-close text-black hover:text-gray-500"
+                        data-bs-dismiss="modal" aria-label="Close">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+        {% endblock %}
+        {% block modal_body %}
+            <form id="{{ 'form' ~ index }}" data-action="live#action:prevent" data-live-action-param="saveManga">
+            <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 }}</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 modal_footer %}
+            <button
+                type="submit"
+                form="{{ 'form' ~ index }}"
+                class="bg-green-500 hover:bg-green-600 text-sm text-white font-bold py-2 px-4 rounded">
+                Add {{ manga.title }}
+            </button>
+        {% endblock %}
+    {% endcomponent %}
+</div>

templates/components/Search.html.twig

@@ -0,0 +1,37 @@
+<div{{ attributes }}>
+    <div class="flex items-center py">
+        <i class="fas fa-search text-white"></i>
+        <input
+            data-model="query"
+            type="text"
+            placeholder="Rechercher"
+            class="appearance-none outline-none ml-2 pl-0 bg-transparent border-b border-white w-full placeholder:text-white text-white py-1 px-2 leading-tight transition-all duration-500 ease-in-out focus:placeholder:text-opacity-0 focus:border-opacity-0"
+        />
+    </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">
+            <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>
+                    {% for manga in this.mangas %}
+                        <li class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
+                            <a class="flex items-center" href="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}">
+                                <img src="{{ manga.imageUrl ?? 'https://placehold.co/40x60' }}" alt="{{ manga.title }}"
+                                     class="w-10 h-15 object-cover mr-4">
+                                <span>{{ manga.title }} ({{ manga.publicationYear }})</span>
+                            </a>
+                        </li>
+                    {% endfor %}
+                {% 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('add_new_manga', {query: query}) }}">
+                            <span>Ajouter {{ query }}</span>
+                        </a>
+                    </li>
+                {% endif %}
+            </ul>
+        </div>
+    {% endif %}
+</div>

templates/components/ToolBarButton.html.twig

@@ -0,0 +1,6 @@
+<div{{ attributes }}>
+    <button class="flex flex-col justify-around min-h-14 w-min ml-4 items-center text-white group">
+        <i class="fas fa-{{ icon }} text-xl group-hover:text-green-500"></i>
+        <span class="text-xs">{{ text }}</span>
+    </button>
+</div>

templates/manga/add_new.html.twig

@@ -1,80 +1,6 @@
 {% extends 'base.html.twig' %}
 {% block body %}
-    <div class="container w-full ml-60 p-4">
+    <div class="p-4">
-        <form>
+        {{ component('MangaSearch', {query: query}) }}
-            <div class="form-group">
-
-                <div class="relative h-10 w-72 min-w-[200px]">
-                    <label for="manga-select"></label>
-                    <select id="manga-select"
-                            class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent
-                            bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline
-                            outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200
-                            placeholder-shown:border-t-blue-gray-200 empty:!bg-gray-900 focus:border-2
-                            focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0
-                            disabled:bg-blue-gray-50">
-                        {% for manga in availableManga %}
-                            <option
-                                value="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}">{{ manga.name }}</option>
-                        {% endfor %}
-                    </select>
-                    <label
-                        class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex
-                        h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400
-                        transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border
-                        before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l
-                        before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px]
-                        after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow
-                        after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200
-                        after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75]
-                        peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent
-                        peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight
-                        peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2
-                        peer-focus:before:border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2
-                        peer-focus:after:border-gray-900 peer-disabled:text-transparent
-                        peer-disabled:before:border-transparent peer-disabled:after:border-transparent
-                        peer-disabled:peer-placeholder-shown:text-blue-gray-500">
-                        Select a Manga
-                    </label>
-                </div>
-            </div>
-        </form>
-    </div>
-    <div class="container w-full p-4">
-        <form>
-            <div class="relative w-full min-w-[200px] h-10">
-                <input
-                    class="peer w-full h-full bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0
-                    focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 transition-all placeholder-shown:border
-                    placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 border focus:border-2
-                    border-t-transparent focus:border-t-transparent text-sm px-3 py-2.5 rounded-[7px] border-blue-gray-200
-                    focus:border-gray-900" placeholder=" "/>
-                <label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal
-                !overflow-visible truncate peer-placeholder-shown:text-blue-gray-500 leading-tight
-                peer-focus:leading-tight peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500
-                transition-all -top-1.5 peer-placeholder-shown:text-sm text-[11px] peer-focus:text-[11px]
-                before:content[' '] before:block before:box-border before:w-2.5 before:h-1.5
-                before:mt-[6.5px] before:mr-1 peer-placeholder-shown:before:border-transparent before:rounded-tl-md
-                before:border-t peer-focus:before:border-t-2 before:border-l peer-focus:before:border-l-2
-                before:pointer-events-none before:transition-all peer-disabled:before:border-transparent after:content[' ']
-                after:block after:flex-grow after:box-border after:w-2.5 after:h-1.5 after:mt-[6.5px] after:ml-1
-                peer-placeholder-shown:after:border-transparent after:rounded-tr-md after:border-t peer-focus:after:border-t-2
-                after:border-r peer-focus:after:border-r-2 after:pointer-events-none after:transition-all peer-disabled:after:border-transparent
-                peer-placeholder-shown:leading-[3.75] text-gray-500 peer-focus:text-gray-900 before:border-blue-gray-200
-                peer-focus:before:!border-gray-900 after:border-blue-gray-200 peer-focus:after:!border-gray-900">
-                    Manga
-                </label>
-            </div>
-        </form>
     </div>
 {% endblock %}
-
-{% 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 %}

templates/manga/index.html.twig

@@ -1,16 +1,42 @@
 {% extends 'base.html.twig' %}
+{% block toolbar %}
+    <div class="bg-gray-800 p-3 min-h-14">
+        <div class="flex flex-row items-center justify-between">
+            <div class="flex mr-2 items-center">
+                <twig:ToolBarButton icon="sync-alt" text="Tout actualiser"/>
+                <twig:ToolBarButton icon="rss" text="Synchro RSS"/>
+                <div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
+                <twig:ToolBarButton icon="search" text="Rechercher tout"/>
+                <twig:ToolBarButton icon="user-plus" text="Importation manuelle"/>
+                <div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
+                <twig:ToolBarButton icon="wrench" text="Modifier Mangas"/>
+            </div>
+            <div class="flex mr-2 items-center">
+                <twig:ToolBarButton icon="th-large" text="Options"/>
+                <div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
+                <twig:ToolBarButton icon="eye" text="Vue"/>
+                <twig:ToolBarButton icon="sort" text="Trier"/>
+                <twig:ToolBarButton icon="filter" text="Filtre"/>
+            </div>
+        </div>
+    </div>
+{% endblock %}
 {% block body %}
-    <div class="container w-full ml-60 p-4 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12 gap-4">
+    <div
+        class="w-full p-4 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12 gap-4">
         {% for manga in mangas %}
-            <div class="bg-white overflow-hidden border-gray-300 hover:shadow-2xl hover:border transition-shadow duration-300">
+            <div
+                class="bg-white overflow-hidden border-gray-300 hover:shadow-2xl hover:border transition-shadow duration-300">
                 <a href="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}">
-                    <img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}" class="w-full">
+                    <img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}"
-{#                    <img src="https://placehold.co/150x220" alt="{{ manga.title }}" class="w-full">#}
+                         class="w-full">
                 </a>
                 <div class="p-4">
-                    <p class="text-lg font-semibold">{{ manga.title }}</p>
+                    <div class="flex justify-between text-xl">
-                    <p class="text-gray-600">Auteur</p>
+                        <span>{{ manga.title }}</span>
-                    <p class="text-gray-500">Ajouter: Jun 2 2024</p>
+                        <span class="text-md text-gray-500 ml-2">({{ manga.publicationYear }})</span>
+                    </div>
+                    <p class="text-gray-500">Added: {{ manga.createdAt|date('M d, Y') }}</p>
                 </div>
             </div>
         {% else %}

templates/manga/show_chapters.html.twig

@@ -1,64 +1,135 @@
 {% extends 'base.html.twig' %}
-{% block body %}
+{% block toolbar %}
-    <div class="container w-full ml-60 p-4">
+    <div class="bg-gray-800 p-3 min-h-14">
-        <h1 class="text-4xl font-bold mb-8">Chapitres de {{ manga.title }}</h1>
+        <div class="flex flex-row items-center justify-between">
-
+            <div class="flex mr-2 items-center">
-        <ul class="list-disc pl-5">
+                <twig:ToolBarButton icon="sync-alt" text="Tout actualiser"/>
-            {% for chapter in manga.chapters|sort((a, b) => a.number <=> b.number) %}
+                <twig:ToolBarButton icon="search" text="Rechercher le manga"/>
-                <li class="my-2">
+                <div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
-                    <a class="text-blue-600 hover:text-blue-800" href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': 1 }) }}">
+                <twig:ToolBarButton icon="sitemap" text="Aperçu renommage"/>
-                        Chapitre : {{ chapter.number }}
+                <twig:ToolBarButton icon="user-plus" text="Importation manuelle"/>
-                    </a>
+                <div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
-                    <a class="text-blue-600 hover:text-blue-800" href="{{ path('download_chapter', {'mangaSlug': manga.slug, 'chapterNumber': chapter.number}) }}"><i class="fas fa-save"></i></a>
+                <twig:ToolBarButton icon="wrench" text="Éditer"/>
-                </li>
+                <twig:ToolBarButton icon="trash-can" text="Supprimer"/>
-            {% else %}
-                <li>Aucun chapitre trouvé.</li>
-            {% endfor %}
-        </ul>
-
-        <h2 class="text-2xl font-semibold mb-4">Scrapper un chapitre</h2>
-        <form id="scrape-form" action="{{ path('manga_scrape') }}" method="post" class="space-y-4">
-            <input type="hidden" name="mangaSlug" value="{{ manga.slug }}">
-            <div>
-                <label for="chapterNumber" class="block mb-1">Numéro de chapitre :</label>
-                <input type="number" name="chapterNumber" id="chapterNumber" class="border border-gray-300 p-2 rounded">
             </div>
-            <div>
-                <label for="availableChapters" class="block mb-1">Chapitres disponibles :</label>
-                <select id="availableChapters" class="border border-gray-300 p-2 rounded">
-                    <option value="" selected disabled>Choisissez un chapitre</option>
-                    {% for chapter in availableChapters %}
-                        <option value="{{ chapter.number }}">{{ chapter.number }}</option>
-                    {% endfor %}
-                </select>
         </div>
-            <div class="flex items-center space-x-2">
-                <input type="checkbox" name="scrapeFromChapter" id="scrapeFromChapter" class="rounded">
-                <label for="scrapeFromChapter">Depuis ce chapitre :</label>
     </div>
-            <input type="submit" value="Scrapper" class="button bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded">
+{% endblock %}
-        </form>
+{% block body %}
-    </div>
+    <div class="relative">
-
+        <div class="shadow-lg text-white">
-    {% block javascripts %}
+            <div class="relative h-96 bg-cover bg-center" style="background-image: url('{{ manga.imageUrl }}')">
-        {{ parent() }}
+                <div class="absolute inset-0 bg-black opacity-50"></div>
-        <script>
+                <div class="absolute inset-0 flex flex-row  justify-center p-4">
-            document.getElementById('scrape-form').addEventListener('submit', function(event) {
+                    <div class="hidden mr-12 xl:block 2xl:block">
-                const chapterNumberInput = document.getElementById('chapterNumber');
+                        <img src="{{ manga.imageUrl }}" alt="{{ manga.title }}" class="max-w-72 max-h-72 ml-4">
-                const availableChaptersSelect = document.getElementById('availableChapters');
+                    </div>
-                if (availableChaptersSelect.value) {
+                    <div class="flex flex-col">
-                    chapterNumberInput.value = availableChaptersSelect.value;
+                        <div class="flex items-center mb-4">
-                }
+                            <i class="fas fa-bookmark text-white text-3xl"></i>
-            });
+                            <h1 class="text-3xl font-bold ml-4">{{ manga.title }}</h1>
-
+                        </div>
-            document.getElementById('scrapeFromChapter').addEventListener('change', function(event) {
+                        <div class="flex items-center mb-4">
-                const form = document.getElementById('scrape-form');
+                            <span class="mr-4">{{ manga.publicationYear }}</span>
-                if (event.target.checked) {
+                            <span>Chapters: {{ manga.chapters.count }}</span>
-                    form.action = "{{ path('manga_scrape_from_chapter') }}";
+                        </div>
-                } else {
+                        <div class="flex items-center mb-4">
-                    form.action = "{{ path('manga_scrape') }}";
+                            <i class="fas fa-folder text-gray-400 mr-2"></i>
-                }
+                            <span class="truncate">/media/mangas/{{ manga.title }} ({{ manga.publicationYear }})</span>
-            });
+                            <span class="ml-auto bg-green-600 py-1 px-2 rounded">{{ manga.status ?? 'Terminé' }}</span>
-        </script>
+                        </div>
-    {% endblock %}
+                        <div class="flex items-center mb-4">
+                            {% set genre_count = 0 %}
+                            {% for genre in manga.genres %}
+                                {% if genre_count < 5 %}
+                                    <span class="bg-gray-700 py-1 px-2 rounded-sm mr-2">{{ genre }}</span>
+                                    {% set genre_count = genre_count + 1 %}
+                                {% endif %}
+                            {% endfor %}
+                            {% if genre_count == 5 and manga.genres|length > 5 %}
+                                <span class="bg-gray-700 py-1 px-2 rounded-sm mr-2">...</span>
+                            {% endif %}
+                        </div>
+                        <div class="mb-4">
+                            <div class="flex items-center mb-2">
+                                <i class="fas fa-heart text-red-500 mr-2"></i>
+                                <span>{{ manga.rating|round(2) }}</span>
+                            </div>
+                            <p>{{ manga.description|truncate(500) }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="p-4">
+        {% for volume, chapters in chapters_by_volume %}
+            {% set non_null_chapters = chapters|filter(chapter => chapter.localPath is not null) %}
+            {% set total_chapters = chapters|length %}
+            <div data-controller="table">
+                <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 {{ volume }}</h2>
+                            <div class="flex items-center">
+                            <span
+                                class="px-2 py-1 text-sm rounded {{ non_null_chapters|length > 0 ? 'bg-green-500 text-white' : 'bg-red-500 text-white' }}">
+                                {{ non_null_chapters|length }} / {{ total_chapters }}
+                            </span>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <span class="text-gray-600 mr-2">{{ chapters|length }} Chapters</span>
+                            <i data-action="click->table#collapse" class="fas fa-chevron-down cursor-pointer"></i>
+                        </div>
+                    </div>
+                    <div data-table-target="body" class="p-4 border-t">
+                        <table class="min-w-full table-auto">
+                            <thead>
+                            <tr>
+                                <th class="px-4 py-2 text-left">#</th>
+                                <th class="px-4 py-2 text-left">Title</th>
+                                <th class="px-4 py-2 text-right">Actions</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {% for chapter in chapters %}
+                                <tr class="border-t hover:bg-green-100">
+                                    {% if chapter.pages|length > 0 %}
+                                        <td class="px-4 py-2 text-green-500">
+                                            <a href="{{ path('read_chapter_page', { mangaSlug: manga.slug, chapterNumber: chapter.number }) }}">
+                                                {{ chapter.number }}</a>
+                                        </td>
+                                    {% else %}
+                                        <td class="px-4 py-2">{{ chapter.number }}</td>
+                                    {% endif %}
+
+                                    <td class="px-4 py-2 w-full text-left">
+                                        {% if chapter.pages|length > 0 %}
+                                            <a class=""
+                                               href="{{ path('read_chapter_page', { mangaSlug: manga.slug, chapterNumber: chapter.number }) }}">{{ chapter.title ?? 'No title' }}</a>
+                                        {% else %}
+                                            {{ chapter.title ?? 'No title'}}
+                                        {% endif %}
+                                    </td>
+                                    <td class="px-4 py-2 flex justify-end gap-2">
+                                        {#                                    <twig:DownloadChapter mangaSlug="{{ manga.slug }}"  chapterNumber="{{ chapter.number }}" /> #}
+                                        <a href="#" class="text-gray-500 hover:text-green-500">
+                                            <i class="fas fa-download"></i>
+                                        </a>
+                                        {#                                    <a href="#" class="text-gray-500 hover:text-green-500"> #}
+                                        {#                                        <i class="fas fa-trash"></i> #}
+                                        {#                                    </a> #}
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
 {% endblock %}

templates/menu/menu.html.twig

@@ -3,12 +3,15 @@
         <nav>
             <ul>
                 <li class="mb-4 border-l-4 border-green-600">
-                    <div class="flex pl-8 p-4 items-center text-green-600 bg-gray-800">
+                    <div class="pl-8 p-4 items-center text-green-600 bg-gray-800">
+                        <a class="flex items-center" href="{{ path('app_manga') }}">
                             <i class="fas fa-book mr-2"></i>
                             <span>Mangas</span>
+                        </a>
                     </div>
                     <ul class="ml-14 mt-2 space-y-4">
-                        <li><a href="{{ path('add_new_manga') }}" class="hover:text-green-600">Ajouter un nouveau</a></li>
+                        <li><a href="{{ path('add_new_manga') }}" class="hover:text-green-600">Ajouter un nouveau</a>
+                        </li>
                         <li><a href="#" class="hover:text-green-600">Import bibliothèque</a></li>
                         <li><a href="#" class="hover:text-green-600">Collections</a></li>
                         <li><a href="#" class="hover:text-green-600">Découvrir</a></li>

webpack.config.js

@@ -21,7 +21,7 @@ Encore
      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
     .addEntry('app', './assets/app.js')
-    .addEntry('alpine', 'alpinejs')
+    // .addEntry('alpine', 'alpinejs')
 
     // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
     .enableStimulusBridge('./assets/controllers.json')