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

@@ -11,7 +11,7 @@
 
 <div class="card mb-4">
     <h3>Add Rule</h3>
-    <form hx-post="/api/firewall/rules" hx-swap="none" class="htmx-on-success" data-success="Rule added" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
+    <form hx-post="/api/firewall/rich-rules" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/firewall/config', document.getElementById('rules-container'), renderRules); showSuccessToast('Rule added'); }">
         <div class="inline-form">
             <div class="form-group">
                 <label for="rule-zone">Zone</label>
@@ -34,6 +34,7 @@
     </div>
 </div>
 
+<div id="rules-container">
 {% if rules or False %}
 {% for zone_name, zone_rules in rules.items() %}
 <div class="card">
@@ -49,12 +50,13 @@
         </thead>
         <tbody>
             {% for rule in zone_rules %}
+            {% set rule_obj = rule if rule is mapping else {'id': None, 'rule': rule} %}
             <tr>
                 <td class="text-muted">{{ loop.index }}</td>
-                <td style="font-family:monospace;font-size:12px;word-break:break-all;">{{ rule }}</td>
+                <td hx-disable style="font-family:monospace;font-size:12px;word-break:break-all;">{{ rule_obj.rule }}</td>
                 <td>
-                    <form hx-delete="/api/firewall/rules/{{ zone_name | urlencode }}/{{ loop.index0 }}" hx-swap="none" class="htmx-on-success" data-success="Rule removed" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
-                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Remove this rule?')">Remove</button>
+                    <form hx-delete="/api/firewall/rich-rules/{{ zone_name | urlencode }}/{{ rule_obj.id }}" hx-swap="none" hx-confirm="Remove rule {{ rule_obj.rule[:50] }}?" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/firewall/config', document.getElementById('rules-container'), renderRules); showSuccessToast('Rule removed'); }">
+                        <button type="submit" class="btn btn-sm btn-danger">Remove</button>
                     </form>
                 </td>
             </tr>
@@ -71,6 +73,7 @@
     <div class="text-muted text-sm">No rules loaded. Add rules using the form above, or ensure the zones API is providing rule data.</div>
 </div>
 {% endif %}
+</div>
 
 {% if not (zones or []) %}
 <div class="card" style="border-color:var(--warning);">