both toaster

app/views/layouts/_notification.html.erb

@@ -1,10 +1,27 @@
 <h2>NOTIFICATION BAR</h2>
 
-<% if flash %>
+<% if flash.count.positive? %>
   <script type="module">
     import { Notyf } from 'notyf';
-    const notyf=new Notyf
-    notyf.success('<%=notice%>')
-    notyf.error('<%=alert%>')
+    import Toastify from 'toastify-js'
+
+    const notyf=new Notyf({
+      duration: 3000,
+      position: {
+        x: 'center',
+        y: 'top',
+      }
+    })
+    <% if flash.alert %>
+      notyf.error('<%=alert%>')
+      Toastify({  text: "<%=alert%>",  gravity: "top", oldestFirst: false, close: true, position: "center", style: {  background: "red" }}).showToast();
+    <%end%>
+
+    <% if flash.notice %>
+      notyf.success('<%=notice%>')
+      Toastify({  text: "<%=notice%>",  gravity: "top", oldestFirst: false, close: true, position: "center", style: {  background: "green" }}).showToast();
+    <%end%>
+
+    console.log('notification loaded')
   </script>
 <%end%>

app/views/layouts/application.html.erb

@@ -6,6 +6,8 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
 
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>

config/importmap.rb

@@ -7,3 +7,4 @@ pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js'
 pin_all_from 'app/javascript/controllers', under: 'controllers'
 
 pin 'notyf' # @3.10.0
+pin 'toastify-js' # @1.12.0