refactored

app/javascript/controllers/flash_controller.js

@@ -14,7 +14,7 @@ export default class FlashController extends Controller {
   static targets = ['flashItem']
 
   connect() {
-    if (FlashController.should_popup) { this.doPopup() }
+    if (FlashController.should_popup) { this.buildPopupFromWithin() }
   }
 
   enable() { FlashController.should_popup = true }
@@ -27,10 +27,10 @@ export default class FlashController extends Controller {
   textNotice(message) { return `${this.iconNotice()}<div>${message}</div>` }
   textAlert(message) { return `${this.iconAlert()}<div>${message}</div>` }
 
-  doPopup() {
+  buildPopupFromWithin() {
     FlashController.should_popup = false
     this.flashItemTargets.forEach((item) => {
-      this.popup({ detail: { type: item.dataset.type, message: item.textContent.trim() } })
+      this.onPopupEvent({ detail: { type: item.dataset.type, message: item.textContent.trim() } })
     })
   }
 
@@ -40,7 +40,7 @@ export default class FlashController extends Controller {
     </svg>`
   }
 
-  popup(event) {
+  onPopupEvent(event) {
     const { type, message } = event.detail
     switch (type) {
       case 'notice': this.notice(message); break

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

@@ -4,8 +4,8 @@
     data-action="
     turbo:before-fetch-request@window->flash#enable
     turbo:visit@window->flash#disable
-    turbo:load@window->flash#doPopup"
-    >
+    turbo:load@window->flash#buildPopupFromWithin
+    popup-toast@window->flash#onPopupEvent " >
     <% flash.each do |type, messages| %>
       <%= Time.now%>
       <% Array(messages).each do |message| %>

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

@@ -1,8 +1,7 @@
 <div 
     id='flashbar'
     class='flex justify-center'
-    data-controller='flash' data-turbo-permanent
-    data-action="popup-toast@window->flash#popup" 
+    data-turbo-permanent
   >
   <!-- 
   here is a shadow root which serves as a placeholder for the toaster area.