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

@@ -592,57 +592,6 @@
     <div class="toast-container" id="toast-container"></div>
 
     <script src="https://unpkg.com/htmx.org@2.0.4"></script>
-    <script>
-        function showToast(message, type, duration) {
-            duration = duration || 4000;
-            var container = document.getElementById('toast-container');
-            if (!container) return;
-            var toast = document.createElement('div');
-            toast.className = 'toast toast-' + type;
-            toast.textContent = message;
-            container.appendChild(toast);
-            requestAnimationFrame(function() { toast.classList.add('show'); });
-            setTimeout(function() {
-                toast.classList.remove('show');
-                setTimeout(function() { toast.remove(); }, 300);
-            }, duration);
-        }
-
-        function openModal(id) {
-            var el = document.getElementById(id);
-            if (el) el.classList.add('active');
-        }
-
-        function closeModal(id) {
-            var el = document.getElementById(id);
-            if (el) el.classList.remove('active');
-        }
-
-        function switchTab(tabName) {
-            document.querySelectorAll('.tab-content').forEach(function(el) { el.classList.remove('active'); });
-            document.querySelectorAll('.tab').forEach(function(el) { el.classList.remove('active'); });
-            document.getElementById('tab-' + tabName).classList.add('active');
-            var clickedTab = document.querySelector('.tab[data-tab="' + tabName + '"]');
-            if (clickedTab) clickedTab.classList.add('active');
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            document.querySelectorAll('.htmx-on-success').forEach(function(el) {
-                var msg = el.getAttribute('data-success') || 'Operation successful';
-                var type = el.getAttribute('data-type') || 'success';
-                el.addEventListener('htmx:afterRequest', function(evt) {
-                    if (evt.detail && evt.detail.successful) {
-                        showToast(msg, type);
-                    }
-                });
-            });
-        });
-
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'Escape') {
-                document.querySelectorAll('.modal-overlay.active').forEach(function(el) { el.classList.remove('active'); });
-            }
-        });
-    </script>
+    <script src="/static/app.js"></script>
 </body>
 </html>