From e5c319db7980f6af76e1d11cf9663579eb9a7ab5 Mon Sep 17 00:00:00 2001
From: "ext.jeremy.guillot@maxicoffee.domains" <j.guillot_ext@maxicoffee.com>
Date: Thu, 12 Mar 2026 18:55:15 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20am=C3=A9lioration=20du=20syst=C3=A8me=20?=
 =?UTF-8?q?de=20notifications?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Correction de l'affichage du texte dans le toast (suppression de w-0/truncate)
- Déplacement des toasts en bas à gauche avec animation slide depuis la gauche
- Inversion de l'ordre des éléments : bouton fermeture > texte > icône > bande couleur
- Fix timing : ChapterScrapingStarted synchrone pour notif "démarrage" avant le scraping
- Ajout make notify-test pour tester les 4 types de notifications

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 Makefile                                      |  7 ++++
 .../components/ui/NotificationToast.vue       | 42 +++++++++----------
 config/packages/messenger.yaml                |  2 +-
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/Makefile b/Makefile
index 4d080af..117cda3 100644
--- a/Makefile
+++ b/Makefile
@@ -145,6 +145,13 @@ twig-extension: ## Create a new twig extension
 stimulus: ## Create a new stimulus controller
 	@$(SYMFONY) make:stimulus-controller
 
+notify-test: ## Envoie les 4 types de notifications de test avec 2s d'intervalle
+	@for type in info success error warning; do \
+		$(SYMFONY) app:notify:test --type=$$type --message="Test $$type depuis Mangarr"; \
+		echo "[$$type] envoyé"; \
+		sleep 2; \
+	done
+
 consume-commands: ## Consume commands messages
 	@$(SYMFONY) messenger:consume commands -vv
 
diff --git a/assets/vue/app/shared/components/ui/NotificationToast.vue b/assets/vue/app/shared/components/ui/NotificationToast.vue
index c8e6eda..74be959 100644
--- a/assets/vue/app/shared/components/ui/NotificationToast.vue
+++ b/assets/vue/app/shared/components/ui/NotificationToast.vue
@@ -1,32 +1,21 @@
 <template>
-    <div class="fixed top-4 right-4 z-50 space-y-2">
+    <div class="fixed bottom-4 left-4 z-50 flex flex-col-reverse gap-2">
         <TransitionGroup
             name="notification"
             tag="div"
-            class="space-y-2"
+            class="flex flex-col-reverse gap-2"
         >
             <div
                 v-for="notification in notifications"
                 :key="notification.id"
                 :class="[
-                    'max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden',
+                    'max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden',
                     getNotificationClass(notification.type)
                 ]"
             >
                 <div class="p-4">
                     <div class="flex items-start">
-                        <div class="flex-shrink-0">
-                            <component :is="getIcon(notification.type)" :class="[
-                                'h-6 w-6',
-                                getIconClass(notification.type)
-                            ]" />
-                        </div>
-                        <div class="ml-3 w-0 flex-1 pt-0.5">
-                            <p class="text-sm font-medium text-gray-900">
-                                {{ notification.message }}
-                            </p>
-                        </div>
-                        <div class="ml-4 flex-shrink-0 flex">
+                        <div class="flex-shrink-0 mr-3">
                             <button
                                 @click="removeNotification(notification.id)"
                                 class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
@@ -35,6 +24,17 @@
                                 <XMarkIcon class="h-5 w-5" />
                             </button>
                         </div>
+                        <div class="flex-1 pt-0.5 min-w-0">
+                            <p class="text-sm font-medium text-gray-900 break-words">
+                                {{ notification.message }}
+                            </p>
+                        </div>
+                        <div class="flex-shrink-0 ml-3">
+                            <component :is="getIcon(notification.type)" :class="[
+                                'h-6 w-6',
+                                getIconClass(notification.type)
+                            ]" />
+                        </div>
                     </div>
                 </div>
             </div>
@@ -66,10 +66,10 @@ const getIcon = (type) => {
 
 const getNotificationClass = (type) => {
     const classes = {
-        success: 'border-l-4 border-green-400',
-        error: 'border-l-4 border-red-400',
-        warning: 'border-l-4 border-yellow-400',
-        info: 'border-l-4 border-blue-400'
+        success: 'border-r-4 border-green-400',
+        error: 'border-r-4 border-red-400',
+        warning: 'border-r-4 border-yellow-400',
+        info: 'border-r-4 border-blue-400'
     };
     return classes[type] || classes.info;
 };
@@ -93,11 +93,11 @@ const getIconClass = (type) => {
 
 .notification-enter-from {
     opacity: 0;
-    transform: translateX(100%);
+    transform: translateX(-100%);
 }
 
 .notification-leave-to {
     opacity: 0;
-    transform: translateX(100%);
+    transform: translateX(-100%);
 }
 </style>
diff --git a/config/packages/messenger.yaml b/config/packages/messenger.yaml
index cdf9b6d..3fffec8 100644
--- a/config/packages/messenger.yaml
+++ b/config/packages/messenger.yaml
@@ -29,7 +29,7 @@ framework:
             'App\Domain\Manga\Application\Command\RefreshMangaChapters': commands
             
             # Events spécifiques (pour compatibilité, peuvent être supprimés si tous implémentent AsyncDomainEvent)
-            'App\Domain\Scraping\Domain\Event\ChapterScrapingStarted': events
+            # ChapterScrapingStarted est synchrone pour que la notif "démarrage" arrive AVANT le scraping
             'App\Domain\Scraping\Domain\Event\ChapterScrapingCompleted': events
             'App\Domain\Scraping\Domain\Event\ChapterScrapingFailed': events
             'App\Domain\Manga\Domain\Event\ChapterReadyForScraping': events