flash onTurboLoad multiple

app/controllers/notification_controller.rb

@@ -4,10 +4,13 @@ class NotificationController < ApplicationController
   end
 
   def show_notice
+    # flash.alert = 'toto'
+    flash.alert = %w[titi toto]
     redirect_to notification_index_path, notice: 'this is a notice'
   end
 
   def show_alert
+    flash.notice = ['<i>italic</i> <b>message</b>', 'normal <b>message</b>']
     redirect_to notification_index_path, alert: 'this is an alert'
   end
 end

app/javascript/controllers/flash_controller.js

@@ -3,6 +3,8 @@ import Toastify from 'toastify-js'
 
 export default class extends Controller {
 
+  static targets = ['flashItem']
+
   OPTIONS = {
     selector: 'flashbar',
     escapeMarkup: false,
@@ -11,6 +13,12 @@ export default class extends Controller {
     offset: { y: 30 },
   }
 
+  onLoad(event) {
+    this.flashItemTargets.forEach((item) => {
+      this.popup({ detail: { type: item.dataset.type, message: item.textContent.trim() } })
+    })
+  }
+
   icon(drawing) {
     return `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current mx-4" fill="none" viewBox="0 0 24 24">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${drawing}" />

app/views/layouts/components/_flashbar.html.erb

@@ -1,8 +1,8 @@
 <div 
     id='flashbar' 
     style='max-width: calc(50% - 20px)' 
-    data-controller='flash'
-    data-action="popup-toast@window->flash#popup" data-turbo-permanent
+    data-controller='flash' data-turbo-permanent
+    data-action="popup-toast@window->flash#popup" 
   >
   <!-- 
   here is a shadow root which serves as a placeholder for the toaster area.
@@ -10,3 +10,16 @@
   data-turbo-permant prevents morphing to dismiss active toasts
   -->
 </div>
+
+<div class='hidden'
+  data-controller='flash'
+  data-action="turbo:load@window->flash#onLoad"
+  >
+  <% flash.each do |type, messages| %>
+    <% Array(messages).each do |message| %>
+      <div data-flash-target='flashItem' data-type='<%= type %>'>
+        <%= message %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

app/views/layouts/components/_footer.html.erb

@@ -4,23 +4,4 @@
     Copyleft: AGPLv3<br/>
     source code<br/>
   </aside>
-
-  <aside>
-    <% if flash.any? %>
-      <h2 class='bold text-2xl'>FLASH</h2>
-      <ul>
-        <li>
-          <% if flash.key?(:alert) %>
-            ALERT = <%= flash.alert %>
-          <% end %>
-        </li>
-
-        <li>
-          <% if flash.key?(:notice) %>
-            NOTICE = <%= flash.notice %>
-          <% end %>
-        </li>
-      </ul>
-    <% end %>
-  </aside>
 </footer>