Add back in flash messages

src/lib/html/base.html

@@ -18,10 +18,15 @@
   <block name="navigation">
     <include src="lib/html/navigation.html"></include>
   </block>
-  <!--     <include src="lib/html/message-flash.html"></include> -->
+
+  <include src="lib/html/message-flash.html"></include>
+
   <block name="content"></block>
 
-  <block name="footer"></block>
+  <block name="footer">
+    <script type="module" src="lib/js/index.ts"></script>
+  </block>
+
 </body>
 
 </html>

src/lib/html/message-flash.html

@@ -1,11 +1,6 @@
 {{#if flash}}
-<div
+<div class="notification is-{{flash.type}}">
-  class="alert alert-{{flash.type}} alert-dismissible fade show"
+  <button class="delete" aria-label="Close"></button>
-  role="alert"
+  <span role="alert"> {{ flash.message }} </span>
->
-  {{ flash.message }}
-  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-    <span aria-hidden="true">&times;</span>
-  </button>
 </div>
 {{/if}}

src/lib/js/index.ts

@@ -0,0 +1,30 @@
+document.addEventListener("DOMContentLoaded", () => {
+    let flashButtons = document.querySelectorAll(".notification .delete");
+
+    flashButtons.forEach((button) => {
+        let flash = button.parentNode;
+
+        if (flash == null) {
+            console.error(
+                "Unreachable because our `querySelector` includes a parent; something went very wrong"
+            );
+            return;
+        }
+
+        flash.addEventListener("click", () => {
+            if (flash == null) {
+                console.error("Completely unreachable.");
+                return;
+            }
+
+            if (flash.parentNode == null) {
+                console.error(
+                    "Notification not placed in DOM; something went very wrong"
+                );
+                return;
+            }
+
+            flash.parentNode.removeChild(flash);
+        });
+    });
+});

src/music/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 

src/music_sample.html

@@ -5,6 +5,9 @@
 
   <block name="content">
     <div id="playerUI" class="is-flex-grow-1 is-flex"></div>
-    <script type="module" src="./music/index.tsx"></script>
+  </block>
+
+  <block name="footer" type="append">
+    <script type="module" src="music/index.tsx"></script>
   </block>
 </extends>