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

@@ -9,7 +9,7 @@
     </div>
     <div class="flex gap-2">
         <button class="btn btn-primary" onclick="openModal('add-domain-modal')">+ Add Domain</button>
-        <button class="btn btn-outline" hx-post="/api/proxy/reload" hx-swap="none" class="htmx-on-success" data-success="Nginx reloaded">Apply Changes (Reload Nginx)</button>
+        <button class="btn btn-outline" hx-post="/api/proxy/apply" hx-swap="none" hx-on::after-request="if(evt.detail.successful) showSuccessToast('Nginx reloaded')">Apply Changes (Reload Nginx)</button>
     </div>
 </div>
 
@@ -25,7 +25,7 @@
                 <th style="width:140px;">Actions</th>
             </tr>
         </thead>
-        <tbody>
+        <tbody id="domain-rows">
             {% for domain in (domains or []) %}
             <tr>
                 <td><strong>{{ domain.get('domain', 'unknown') }}</strong></td>
@@ -56,8 +56,8 @@
                 <td>
                     <div class="flex gap-2">
                         <button class="btn btn-sm btn-outline" onclick='openEditDomainModal('{{ domain.get("domain", "") }}', {{ domain | tojson | safe }})'>Edit</button>
-                        <form hx-delete="/api/proxy/domains/{{ domain.get('domain', '') }}" hx-swap="none" class="htmx-on-success" data-success="Domain removed" onsuccess="setTimeout(function(){ location.reload(); }, 300);">
-                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Remove proxy for {{ domain.domain }}?')">Delete</button>
+                        <form hx-delete="/api/proxy/domains/{{ domain.get('domain', '') }}" hx-swap="none" hx-confirm="Remove proxy for {{ domain.domain }}?" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/proxy/domains', document.getElementById('domain-rows'), renderDomains); showSuccessToast('Domain removed'); }">
+                            <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                         </form>
                     </div>
                 </td>
@@ -76,7 +76,7 @@
 <div class="modal-overlay" id="add-domain-modal" onclick="if(event.target===this) closeModal('add-domain-modal')">
     <div class="modal">
         <h2>Add Proxy Domain</h2>
-        <form hx-post="/api/proxy/domains" hx-swap="none" class="htmx-on-success" data-success="Domain added" onsuccess="setTimeout(function(){closeModal('add-domain-modal'); location.reload();}, 300);">
+        <form hx-post="/api/proxy/domains" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ closeModal('add-domain-modal'); refreshTable('/api/proxy/domains', document.getElementById('domain-rows'), renderDomains); showSuccessToast('Domain added'); }">
             <div class="form-group">
                 <label for="new-domain">Domain</label>
                 <input type="text" id="new-domain" name="domain" placeholder="example.com" required>
@@ -108,7 +108,7 @@
 <div class="modal-overlay" id="edit-domain-modal" onclick="if(event.target===this) closeModal('edit-domain-modal')">
     <div class="modal">
         <h2>Edit Proxy Domain</h2>
-        <form id="edit-domain-form" hx-swap="none" class="htmx-on-success" data-success="Domain updated" onsuccess="setTimeout(function(){closeModal('edit-domain-modal'); location.reload();}, 300);">
+        <form id="edit-domain-form" hx-post="/api/proxy/domains" hx-swap="none" hx-encoding="json" hx-on::after-request="if(evt.detail.successful){ closeModal('edit-domain-modal'); refreshTable('/api/proxy/domains', document.getElementById('domain-rows'), renderDomains); showSuccessToast('Domain updated'); }">
             <input type="hidden" id="edit-original-domain" name="original_domain">
             <div class="form-group">
                 <label for="edit-domain">Domain</label>
@@ -144,9 +144,6 @@ function openEditDomainModal(domainName, d) {
     document.getElementById('edit-backend-host').value = d.backend_host || '';
     document.getElementById('edit-backend-port').value = d.backend_port || '';
     document.getElementById('edit-protocol').value = d.protocol || 'http';
-    var form = document.getElementById('edit-domain-form');
-    var target = '/api/proxy/domains/' + encodeURIComponent(d.domain);
-    form.setAttribute('hx-put', target);
     openModal('edit-domain-modal');
 }
 </script>