obie/_alert.haml

## _alert.haml
%sl-alert.popup-toast{id: id, type: type, open: false, duration: duration, closable: true}
  %sl-icon{slot: "icon", name: icon}
  - if title.present?
    %strong= title
    %br

  = text

## alerts_channel.js
// app/javascript/channels/alerts_channel.js

import CableReady from 'cable_ready'
import consumer from "./consumer"

consumer.subscriptions.create("AlertsChannel", {
  connected() {
    console.log("AlertsChannel connected")
  },

  disconnected() {
    console.log("AlertsChannel disconnected")
  },

  received(data) {
    if (data.cableReady) {
      CableReady.perform(data.operations)
      document.querySelectorAll('sl-alert.popup-toast').forEach(function (a) {
        a.toast()
      })
    }
  }
});

## alerts_channel.rb
# app/channels/alerts_channel.rb

class AlertsChannel < ApplicationCable::Channel
  def subscribed
    stream_from "alerts"
    stream_for current_user
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

## application.html.erb
<!DOCTYPE html>
<html lang="en">
<%= render partial: "head" %>

<body class="sl-theme-dark" data-reflex-root="#site-content">
  <%= render partial: "header" %>
  <div id="site-content">
    <%= yield %>
    <%= render Audio::Player.new(track: @track_to_play) %>
    <div id="dialogs"></div>
  </div>
  <div id="alerts"></div>
  <%= render partial: "footer" %>
  <%= render partial: "flash" %>
</body>

</html>

## application_reflex.rb
# app/reflexes/application_reflex.rb

class ApplicationReflex < StimulusReflex::Reflex
  include ApplicationHelper
  include CableReady::Broadcaster

  delegate :current_user, to: :connection
  delegate :render, to: ApplicationController

  # todo: extract to a concern. bonus points if it works for both reflexes and controllers
  around_reflex :broadcast_alerts

  def alert(opts)
    @alerts << opts.merge(type: "primary", icon: "info-circle")
  end

  def success(opts)
    @alerts << opts.merge(type: "success", icon: "check2-circle")
  end

  def info(opts)
    @alerts << opts.merge(type: "info", icon: "gear")
  end

  def warning(opts)
    @alerts << opts.merge(type: "warning", icon: "exclamation-triangle", duration: nil)
  end

  def danger(opts)
    @alerts << opts.merge(type: "danger", icon: "exclamation-octagon", duration: nil)
  end

  private

  def broadcast_alerts
    @alerts = []
    yield
    @alerts.each { |opts| send_alert(opts) }
  end

  def send_alert(opts)
    opts = { id: random_id, title: "", duration: 3000 }.merge(opts)
    cable_ready["alerts"].insert_adjacent_html(selector: "#alerts", html: render(partial: "alert", locals: opts))
    cable_ready.broadcast_to(current_user)
  end

end
	%sl-alert.popup-toast{id: id, type: type, open: false, duration: duration, closable: true}
	%sl-icon{slot: "icon", name: icon}
	- if title.present?
	%strong= title
	%br

	= text
	// app/javascript/channels/alerts_channel.js

	import CableReady from 'cable_ready'
	import consumer from "./consumer"

	consumer.subscriptions.create("AlertsChannel", {
	connected() {
	console.log("AlertsChannel connected")
	},

	disconnected() {
	console.log("AlertsChannel disconnected")
	},

	received(data) {
	if (data.cableReady) {
	CableReady.perform(data.operations)
	document.querySelectorAll('sl-alert.popup-toast').forEach(function (a) {
	a.toast()
	})
	}
	}
	});
	# app/channels/alerts_channel.rb

	class AlertsChannel < ApplicationCable::Channel
	def subscribed
	stream_from "alerts"
	stream_for current_user
	end

	def unsubscribed
	# Any cleanup needed when channel is unsubscribed
	end
	end
	<!DOCTYPE html>
	<html lang="en">
	<%= render partial: "head" %>

	<body class="sl-theme-dark" data-reflex-root="#site-content">
	<%= render partial: "header" %>
	<div id="site-content">
	<%= yield %>
	<%= render Audio::Player.new(track: @track_to_play) %>
	<div id="dialogs"></div>
	</div>
	<div id="alerts"></div>
	<%= render partial: "footer" %>
	<%= render partial: "flash" %>
	</body>

	</html>
	# app/reflexes/application_reflex.rb

	class ApplicationReflex < StimulusReflex::Reflex
	include ApplicationHelper
	include CableReady::Broadcaster

	delegate :current_user, to: :connection
	delegate :render, to: ApplicationController

	# todo: extract to a concern. bonus points if it works for both reflexes and controllers
	around_reflex :broadcast_alerts

	def alert(opts)
	@alerts << opts.merge(type: "primary", icon: "info-circle")
	end

	def success(opts)
	@alerts << opts.merge(type: "success", icon: "check2-circle")
	end

	def info(opts)
	@alerts << opts.merge(type: "info", icon: "gear")
	end

	def warning(opts)
	@alerts << opts.merge(type: "warning", icon: "exclamation-triangle", duration: nil)
	end

	def danger(opts)
	@alerts << opts.merge(type: "danger", icon: "exclamation-octagon", duration: nil)
	end

	private

	def broadcast_alerts
	@alerts = []
	yield
	@alerts.each { \|opts\| send_alert(opts) }
	end

	def send_alert(opts)
	opts = { id: random_id, title: "", duration: 3000 }.merge(opts)
	cable_ready["alerts"].insert_adjacent_html(selector: "#alerts", html: render(partial: "alert", locals: opts))
	cable_ready.broadcast_to(current_user)
	end

	end