From b6cd16854299360d7beaf3792bf9f3a902db86ec Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sun, 19 Apr 2026 00:01:52 -0400
Subject: [PATCH] Clean up suppressions.html: standardise pill attribute and
 remove inline onclick
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename data-dur → data-duration to match index.html/app.js convention
- Replace onclick="removeSuppression({{ s.id }})" with data-action="remove-sup" data-sup-id delegation
- Scope pill delegation to #create-suppression-form to avoid cross-page conflicts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 templates/suppressions.html | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/templates/suppressions.html b/templates/suppressions.html
index 62fe3ed..f4f4635 100644
--- a/templates/suppressions.html
+++ b/templates/suppressions.html
@@ -51,11 +51,11 @@
           <div class="lt-form-group">
             <label class="lt-label">Duration</label>
             <div class="duration-pills">
-              <button type="button" class="pill" data-dur="30">30 min</button>
-              <button type="button" class="pill" data-dur="60">1 hr</button>
-              <button type="button" class="pill" data-dur="240">4 hr</button>
-              <button type="button" class="pill" data-dur="480">8 hr</button>
-              <button type="button" class="pill pill-manual active" data-dur="">Manual ∞</button>
+              <button type="button" class="pill" data-duration="30">30 min</button>
+              <button type="button" class="pill" data-duration="60">1 hr</button>
+              <button type="button" class="pill" data-duration="240">4 hr</button>
+              <button type="button" class="pill" data-duration="480">8 hr</button>
+              <button type="button" class="pill pill-manual active" data-duration="">Manual ∞</button>
             </div>
             <input type="hidden" id="s-expires" name="expires_minutes" value="">
             <div class="lt-field-hint" id="s-dur-hint">Persists until manually removed.</div>
@@ -96,7 +96,7 @@
           <td class="ts-cell">{{ s.created_at }}</td>
           <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
           <td>
-            <button class="lt-btn lt-btn-danger lt-btn-sm" onclick="removeSuppression({{ s.id }})">Remove</button>
+            <button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="{{ s.id }}">Remove</button>
           </td>
         </tr>
         {% endfor %}
@@ -228,10 +228,14 @@
   }
 
   document.addEventListener('click', e => {
-    const pill = e.target.closest('.pill[data-dur]');
-    if (!pill) return;
-    const val = pill.dataset.dur;
-    setDur(val ? parseInt(val) : null, pill);
+    const pill = e.target.closest('#create-suppression-form .pill[data-duration]');
+    if (pill) {
+      const val = pill.dataset.duration;
+      setDur(val ? parseInt(val) : null, pill);
+      return;
+    }
+    const removeBtn = e.target.closest('[data-action="remove-sup"]');
+    if (removeBtn) removeSuppression(parseInt(removeBtn.dataset.supId));
   });
 </script>
 {% endblock %}