fix: adds action button to manually run monitors

templates/base.html.twig

@@ -20,7 +20,12 @@
             </div>
             <div class="col-span-6 md:col-span-5 h-screen overflow-y-scroll">
                 <twig:Header />
-                <h2 class="px-4 mt-4 mb-2 text-3xl font-bold text-gray-50">{% block h2 %}{% endblock %}</h2>
+                <div class="flex justify-between items-center">
+                    <h2 class="px-4 mt-4 mb-2 text-3xl font-bold text-gray-50">{% block h2 %}{% endblock %}</h2>
+                    <div class="flex mt-4 gap-2 items-center grow-0 md:px-4">
+                        {% block action_buttons %}{% endblock %}
+                    </div>
+                </div>
                 {% block body %}{% endblock %}
             </div>
         </div>

templates/components/ActionButton.html.twig

@@ -0,0 +1,7 @@
+<button
+    class="h-8 bg-{{ color|default('orange') }}-500/80 hover:bg-{{ color|default('orange') }}-600/80 px-2 text-{{ text_color|default('white') }} rounded text-sm font-semibold"
+    {{ attributes.defaults(stimulus_controller('action_button')) }}
+    {{ stimulus_action('action_button', action|default('default')) }}
+>
+    {{ text|default('button') }}
+</button>

templates/monitor/index.html.twig

@@ -3,6 +3,10 @@
 {% block title %}Monitors — Torsearch{% endblock %}
 {% block h2 %}Monitors{% endblock %}
 
+{% block action_buttons %}
+    <twig:ActionButton action="monitorDispatch" text="Run Monitors" />
+{% endblock %}
+
 {% block body %}
     <div class="px-4 py-2">
         <twig:Card title="Active Monitors">