stimulus flash controller

app/assets/tailwind/application.css

@@ -1,4 +1,9 @@
 @import "tailwindcss";
 
-@plugin "./daisyui.js"; 
-@plugin "./daisyui-theme.js"; 
+@plugin "./daisyui.js" {
+  themes: dracula --default;
+  /* themes: light --default, dark --prefersdark; */
+  /* themes: light --default; */
+
+  logs: false;
+}

app/javascript/controllers/flash_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="flash"
+export default class extends Controller {
+  connect() {
+    console.log('FLASH stimulus ready!')
+  }
+
+  notice() {
+    console.warn('show notice')
+  }
+
+  alert() {
+    console.warn('show alert')
+  }
+
+  random() {
+    console.warn('show randow')
+  }
+
+}

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

@@ -3,20 +3,30 @@
     <p>Copyleft AGPLv3</p>
   </aside>
 
-  <% if flash.any? %>
-    <h2 class='bold text-2xl'>FLASH</h2>
-    <ul>
-      <li>
-        <% if flash.key?(:alert) %>
-          ALERT = <%= flash.alert %>
-        <% end %>
-      </li>
+  <aside data-controller="flash">
+    <% 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 %>
+        <li>
+          <% if flash.key?(:notice) %>
+            NOTICE = <%= flash.notice %>
+          <% end %>
+        </li>
+      </ul>
+    <% end %>
+    <div class='flex flex-row gap-4'>
+      <button data-action="click->flash#notice" class='btn btn-primary'>Notice</button>
+      <button data-action="click->flash#alert" class='btn btn-secondary'>Alert</button>
+      <button data-action="click->flash#random" class='btn btn-warning btn-dash'>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
+        Random
+      </button>
+    </div>
+  </aside>
 </footer>