Make toast support preventDuplicates (#31501)

make preventDuplicates default to true, users get a clear UI feedback
and know that "a new message appears".

Fixes: https://github.com/go-gitea/gitea/issues/26651

---------

Co-authored-by: silverwind <me@silverwind.io>

web_src/css/modules/animations.css

@@ -92,20 +92,22 @@ code.language-math.is-loading::after {
   }
 }
 
-@keyframes pulse {
+/* 1p5 means 1-point-5. it can't use "pulse" here, otherwise the animation is not right (maybe due to some conflicts */
+@keyframes pulse-1p5 {
   0% {
     transform: scale(1);
   }
   50% {
-    transform: scale(1.8);
+    transform: scale(1.5);
   }
   100% {
     transform: scale(1);
   }
 }
 
-.pulse {
-  animation: pulse 2s linear;
+/* pulse animation for scale(1.5) in 200ms */
+.pulse-1p5-200 {
+  animation: pulse-1p5 200ms linear;
 }
 
 .ui.modal,

web_src/css/modules/toast.css

@@ -22,17 +22,31 @@
   overflow-wrap: anywhere;
 }
 
-.toast-close,
-.toast-icon {
-  color: currentcolor;
+.toast-close {
   border-radius: var(--border-radius);
-  background: transparent;
-  border: none;
-  display: flex;
   width: 30px;
   height: 30px;
   justify-content: center;
+}
+
+.toast-icon {
+  display: inline-flex;
+  width: 30px;
+  height: 30px;
   align-items: center;
+  justify-content: center;
+}
+
+.toast-duplicate-number::before {
+  content: "(";
+}
+.toast-duplicate-number {
+  display: inline-block;
+  margin-right: 5px;
+  user-select: none;
+}
+.toast-duplicate-number::after {
+  content: ")";
 }
 
 .toast-close:hover {