fix htmx refactor route mismatches and remaining TODO items

- wireguard: POST /peers with JSON encoding (was /add-peer)
- rules: delete by rule_id in URL path (was JSON body); pass rule objects with id from server; add hx-disable to initial render
- nat: port forward delete uses URL path params to match blueprint
- nat: masquerade toggle uses native hx-post/hx-vals (was inline fetch)
- app.js renderers updated to use URL path deletes for rules and forwards
- remove TODO.md

webui/templates/interfaces.html

@@ -18,10 +18,9 @@
                 <th>IP Address</th>
                 <th>State</th>
                 <th>Zone</th>
-                <th>Action</th>
             </tr>
         </thead>
-        <tbody>
+        <tbody id="interface-list">
             {% for iface in (interfaces or []) %}
             <tr>
                 <td><strong>{{ iface.get('name', 'unknown') }}</strong></td>
@@ -39,12 +38,7 @@
                 <td>
                     {% if zones %}
                     <select
-                        class="htmx-on-success"
-                        data-success="Zone updated for {{ iface.name }}"
-                        hx-post="/api/firewall/zones/__ZONE__/interfaces/{{ iface.name }}"
-                        hx-swap="none"
-                        hx-select-oob="#toast-container *"
-                        onchange="assignInterfaceToZone(this, '{{ iface.name }}', '{{ iface.get('zone', '') }}')"
+                        hx-on::change="fetch('/api/firewall/zones/'+encodeURIComponent(this.value)+'/interfaces',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({interfaces:['{{ iface.name }}']})}).then(r=>{if(!r.ok)throw r}).then(r=>r.ok?(showSuccessToast('{{ iface.name }} assigned to '+this.value),refreshTable('/api/firewall/interfaces',document.getElementById('interface-list'),renderInterfaces)):r.json().then(j=>{throw new Error(j.error||r.statusText)})).catch(e=>{showErrorToast(e.message);this.selectedIndex=0})"
                     >
                         {% for zone in zones %}
                         <option value="{{ zone.get('name', '') }}" {% if zone.get('name') == iface.get('zone') %}selected{% endif %}>{{ zone.get('name', '') }}</option>
@@ -54,9 +48,6 @@
                     <span class="text-muted">No zones configured</span>
                     {% endif %}
                 </td>
-                <td>
-                    <button class="btn btn-sm btn-outline" onclick="assignInterfaceToZone(this.previousElementSibling, '{{ iface.name }}', null)">Apply</button>
-                </td>
             </tr>
             {% endfor %}
             {% if not (interfaces or []) %}
@@ -67,22 +58,4 @@
         </tbody>
     </table>
 </div>
-
-<script>
-function assignInterfaceToZone(selectEl, ifaceName, currentZone) {
-    var zoneName = selectEl.value;
-    var url = '/api/firewall/zones/' + encodeURIComponent(zoneName) + '/interfaces/' + encodeURIComponent(ifaceName);
-    fetch(url, { method: 'POST' })
-        .then(function(res) {
-            if (res.ok) {
-                showToast('Assigned ' + ifaceName + ' to zone ' + zoneName, 'success');
-            } else {
-                return res.text().then(function(txt) { throw new Error(txt); });
-            }
-        })
-        .catch(function(err) {
-            showToast('Failed to assign: ' + err.message, 'error');
-        });
-}
-</script>
 {% endblock %}