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

@@ -21,7 +21,7 @@
                 <th style="width:120px;">Actions</th>
             </tr>
         </thead>
-        <tbody>
+        <tbody id="cert-rows">
             {% for cert in (certs or []) %}
             <tr>
                 <td><strong>{{ cert.get('domain', 'unknown') }}</strong></td>
@@ -38,7 +38,7 @@
                     {% endif %}
                 </td>
                 <td>
-                    <form hx-post="/api/certs/renew/{{ cert.get('domain', '') }}" hx-swap="none" class="htmx-on-success" data-success="Renewal started for {{ cert.domain }}" onsuccess="setTimeout(function(){ location.reload(); }, 2000);">
+                    <form hx-post="/api/certs/{{ cert.get('domain', '') }}/renew" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/certs/list', document.getElementById('cert-rows'), renderCerts); showSuccessToast('Renewal started for {{ cert.domain }}'); }">
                         <button type="submit" class="btn btn-sm btn-outline">Renew</button>
                     </form>
                 </td>
@@ -57,7 +57,7 @@
 <div class="modal-overlay" id="issue-cert-modal" onclick="if(event.target===this) closeModal('issue-cert-modal')">
     <div class="modal">
         <h2>Issue New Certificate</h2>
-        <form hx-post="/api/certs/issue" hx-swap="none" class="htmx-on-success" data-success="Certificate issuance started" onsuccess="setTimeout(function(){closeModal('issue-cert-modal'); location.reload();}, 500);">
+                <form hx-post="/api/certs/issue" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ closeModal('issue-cert-modal'); refreshTable('/api/certs/list', document.getElementById('cert-rows'), renderCerts); showSuccessToast('Certificate issuance started'); }">
             <div class="form-group">
                 <label for="cert-domain">Domain</label>
                 <input type="text" id="cert-domain" name="domain" placeholder="example.com" required>