Rebuild growler without jQuery

app/javascript/alchemy_admin/growler.js

@@ -1,28 +1,36 @@
-function build(message, flash_type) {
-  const $flash_container = $(`<div class="flash ${flash_type}" />`)
-  $flash_container.append(Alchemy.messageIcon(flash_type))
-  if (flash_type === "error") {
-    $flash_container.append('<alchemy-icon name="close"></alchemy-icon>')
+import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
+
+function build(message, flashType) {
+  const notices = document.getElementById("flash_notices")
+  const flashContainer = createHtmlElement(
+    `<div class="flash ${flashType}"></div>`
+  )
+  const icon = createHtmlElement(Alchemy.messageIcon(flashType))
+  flashContainer.append(icon)
+  if (flashType === "error") {
+    const closeButton = createHtmlElement(
+      '<alchemy-icon name="close"></alchemy-icon>'
+    )
+    flashContainer.append(closeButton)
   }
-  $flash_container.append(message)
-  $("#flash_notices").append($flash_container)
-  $("#flash_notices").show()
-  $flash_container.on("click", () => dismiss($flash_container))
+  flashContainer.append(message)
+  notices.append(flashContainer)
+  flashContainer.addEventListener("click", () => dismiss(flashContainer))
 
   fade()
 }
 
 function dismiss(element) {
-  $(element).on("transitionend", () => $(element).remove())
-  $(element).addClass("dismissed")
+  element.addEventListener("transitionend", () => element.remove())
+  element.classList.add("dismissed")
 }
 
 export function fade() {
-  $(".flash:not(.error)", "#flash_notices")
-    .delay(5000)
-    .queue(function () {
-      dismiss(this)
-    })
+  const notices = document.getElementById("flash_notices")
+  const flashNotices = notices.querySelectorAll(".flash:not(.error)")
+  setTimeout(() => {
+    flashNotices.forEach((notice) => dismiss(notice))
+  }, 5000)
 }
 
 export function growl(message, style = "notice") {

app/views/alchemy/admin/partials/_flash_notices.html.erb

@@ -1,4 +1,4 @@
-<div id="flash_notices" style="display: <%= flash.keys.blank? ? "none" : "block" %>">
+<div id="flash_notices">
 <% flash.keys.each do |flash_type| %>
   <%= render_flash_notice(flash[flash_type.to_sym], flash_type) if flash[flash_type.to_sym].present? %>
 <% end %>