From cf13c523d0b0c84e10a08fc6d7e6d10394b24838 Mon Sep 17 00:00:00 2001
From: Peter <limacopiter@gmail.com>
Date: Mon, 23 Mar 2026 12:11:35 -0500
Subject: [PATCH] fix: preserve details open state across htmx swaps

When ignoring or restoring items (packages/maintainers), htmx replaces
the suggestion element, causing all <details> sections to revert to
their default collapsed state. This is disruptive when working through
multiple ignored items in a row.

Add a small script that listens to htmx:beforeSwap to record which
<details> elements (by ID) are currently open, then restores the open
attribute on matching elements after htmx:afterSwap completes.

Approach inspired by @kizmonavt (bigskysoftware/htmx#2195).

Fixes #913
---
 src/shared/templates/base.html | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/shared/templates/base.html b/src/shared/templates/base.html
index 67252b491..872d94860 100644
--- a/src/shared/templates/base.html
+++ b/src/shared/templates/base.html
@@ -122,5 +122,26 @@ <h1>
       </p>
     </footer>
     <script src="/static/htmx.min.js"></script>
+    <script>
+      // Preserve the open/closed state of <details> elements across htmx swaps.
+      // Without this, expanded "Ignored packages" or "Ignored maintainers"
+      // sections collapse every time an item is ignored or restored.
+      // See: https://github.com/NixOS/nix-security-tracker/issues/913
+      // Approach inspired by @kizmonavt: https://github.com/bigskysoftware/htmx/issues/2195
+      (function () {
+        var openDetails = [];
+        document.addEventListener("htmx:beforeSwap", function (event) {
+          var target = event.detail.target;
+          openDetails = Array.from(target.querySelectorAll("details[open][id]"))
+            .map(function (el) { return el.id; });
+        });
+        document.addEventListener("htmx:afterSwap", function () {
+          openDetails.forEach(function (id) {
+            var el = document.getElementById(id);
+            if (el) el.setAttribute("open", "");
+          });
+        });
+      })();
+    </script>
   </body>
 </html>