Implement adding relays by number

core/templates/manage/threshold/irc/network/actions.html

@@ -1,13 +1,21 @@
 <div id="actions">
+  {% if message is not None %}
+    <div class="notification is-{{ class }}" hx-ext="remove-me" remove-me="3s">
+      {{ message }}
+    </div>
+  {% endif %}
   <div class="buttons">
     <button
       hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+      hx-trigger="click"
+      hx-target="#channels"
+      hx-swap="outerHTML"
       class="button is-success">
       <span class="icon-text">
         <span class="icon">
           <i class="fa-solid fa-plus"></i>
         </span>
-        <span>Add relay</span>
+        <span>Relay</span>
       </span>
     </button>
     <button
@@ -17,7 +25,7 @@
         <span class="icon">
           <i class="fa-solid fa-wrench"></i>
         </span>
-        <span>Run auto</span>
+        <span>Auto</span>
       </span>
     </button>
     <button
@@ -27,8 +35,40 @@
         <span class="icon">
           <i class="fa-solid fa-list"></i>
         </span>
-        <span>Request list</span>
+        <span>List</span>
+      </span>
+    </button>
+    <button
+      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+      class="button is-success">
+      <span class="icon-text">
+        <span class="icon">
+          <i class="fa-solid fa-list"></i>
+        </span>
+        <span>Registration</span>
       </span>
     </button>
   </div>
+  <form method="POST">
+    <div class="field has-addons">
+      <div class="control is-expanded has-icons-left">
+        <input class="input" name="num" type="text" placeholder="Relay number">
+        <span class="icon is-small is-left">
+          <i class="fa-brands fa-unity"></i>
+        </span>
+      </div>
+      <div class="control">
+        <button
+          hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+          class="button is-primary is-fullwidth"
+          hx-put="{% url 'threshold_irc_network_actions_add_relay' net %}"
+          hx-trigger="click"
+          hx-target="#actions"
+          hx-swap="outerHTML">
+          Add
+        </button>
+      </div>
+    </div>
+  </form>
+  
 </div>

core/templates/manage/threshold/irc/network/network.html

@@ -29,13 +29,13 @@
   </div>
 
   <div
-  style="display: none;"
-  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-  hx-get="{% url 'threshold_irc_network_actions' net %}"
-  hx-trigger="load"
-  hx-target="#actions"
-  hx-swap="outerHTML">
-</div>
+    style="display: none;"
+    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+    hx-get="{% url 'threshold_irc_network_actions' net %}"
+    hx-trigger="load"
+    hx-target="#actions"
+    hx-swap="outerHTML">
+  </div>
 
   <div class="columns">
     <div class="column">
@@ -62,27 +62,24 @@
     <div class="column">
       <div class="box">
         <div id="alerts">
+          Alerts here
         </div>
       </div>
     </div>
   </div>
   <div class="columns">
     <div class="column">
+      {# This is the only thing included without HTMX because it isn't interactive #}
+      {# It needs no dynamic message element because it posts messages to chanels #}
       <div class="box">
         <form method="POST">
-          <div class="field">
-            <div class="field-body">
-              <div class="field">
-                <div class="control is-expanded has-icons-left">
-                  <input id="query" name="channel" class="input" type="text" placeholder="channel">
-                  <span class="icon is-small is-left">
-                    <i class="fa-solid fa-hashtag"></i>
-                  </span>
-                </div>
-              </div>
+          <div class="field has-addons">
+            <div class="control is-expanded has-icons-left">
+              <input id="query" name="channel" class="input" type="text" placeholder="channel">
+              <span class="icon is-small is-left">
+                <i class="fa-solid fa-hashtag"></i>
+              </span>
             </div>
-          </div>
-          <div class="field">
             <div class="control">
               <button
                 hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'

core/templates/manage/threshold/irc/overview/overview.html

@@ -20,13 +20,13 @@
   </div>
 
   <div
-  style="display: none;"
-  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-  hx-get="{% url 'threshold_irc_aliases' %}"
-  hx-trigger="load"
-  hx-target="#aliases"
-  hx-swap="outerHTML">
-</div>
+    style="display: none;"
+    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+    hx-get="{% url 'threshold_irc_aliases' %}"
+    hx-trigger="load"
+    hx-target="#aliases"
+    hx-swap="outerHTML">
+  </div>
 
   <div class="columns">
     <div class="column">