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/zones.html

@@ -10,7 +10,7 @@
     <button class="btn btn-primary" onclick="openModal('create-zone-modal')">+ Create Zone</button>
 </div>
 
-<div class="card-grid">
+<div id="zone-grid" class="card-grid">
     {% for zone in (zones or []) %}
     <div class="card" style="position:relative;">
         <div style="display:flex;justify-content:space-between;align-items:flex-start;">
@@ -45,7 +45,7 @@
         </div>
 
         <div style="display:flex;justify-content:flex-end;gap:6px;margin-top:12px;">
-            <form method="POST" action="/api/firewall/zones/{{ zone.get('name', '') }}/delete" hx-post="/api/firewall/zones/{{ zone.get('name', '') }}/delete" hx-swap="none" onsubmit="return confirm('Delete zone {{ zone.name }}? This will affect traffic to its interfaces.');" class="htmx-on-success" data-success="Zone deleted">
+            <form hx-delete="/api/firewall/zones/{{ zone.get('name', '') }}" hx-swap="none" hx-confirm="Delete zone {{ zone.name }}? This will affect traffic to its interfaces." hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/firewall/zones', document.getElementById('zone-grid'), renderZones); showSuccessToast('Zone deleted'); }">
                 <button type="submit" class="btn btn-sm btn-danger">Delete</button>
             </form>
         </div>
@@ -62,7 +62,7 @@
 <div class="modal-overlay" id="create-zone-modal" onclick="if(event.target===this) closeModal('create-zone-modal')">
     <div class="modal">
         <h2>Create Zone</h2>
-        <form hx-post="/api/firewall/zones" hx-swap="none" class="htmx-on-success" data-success="Zone created" onsuccess="setTimeout(function(){closeModal('create-zone-modal');},500); location.reload();">
+        <form hx-post="/api/firewall/zones" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ closeModal('create-zone-modal'); refreshTable('/api/firewall/zones', document.getElementById('zone-grid'), renderZones); showSuccessToast('Zone created'); }">
             <div class="form-group">
                 <label for="zone-name">Zone Name</label>
                 <input type="text" id="zone-name" name="name" placeholder="e.g., trusted, dmz, external" required>