From e2e0e374e6ddaab2b002913da1870b03ff973164 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 2 Mar 2026 11:15:23 +0000
Subject: [PATCH] Refactor series tags modal for improved structure and loading
 indication

---
 .../templates/atlas/partials/series_tags.html | 25 ++++++++++++++++++
 atlas/templates/atlas/user_uploads.html       | 26 +++++++++----------
 2 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/atlas/templates/atlas/partials/series_tags.html b/atlas/templates/atlas/partials/series_tags.html
index 7f315e5e..95ca55e3 100644
--- a/atlas/templates/atlas/partials/series_tags.html
+++ b/atlas/templates/atlas/partials/series_tags.html
@@ -1,5 +1,8 @@
 <div class="series-tags-fragment">
     <h6>Series DICOM tags (common across series)</h6>
+    <div class="mb-2">
+        <input id="series-tags-filter" class="form-control form-control-sm" type="search" placeholder="Filter tags (key or value)">
+    </div>
     {% if common_tags %}
         <table class="table table-sm">
             <tbody>
@@ -15,3 +18,25 @@
         <div class="text-muted">No consistent tags found across images in this series.</div>
     {% endif %}
 </div>
+
+<script>
+    (function () {
+        const input = document.getElementById('series-tags-filter');
+        if (!input) return;
+        input.addEventListener('input', function (e) {
+            const q = (e.target.value || '').trim().toLowerCase();
+            const table = document.querySelector('.series-tags-fragment table');
+            if (!table) return;
+            const rows = table.querySelectorAll('tbody tr');
+            rows.forEach(row => {
+                const key = (row.querySelector('th') && row.querySelector('th').textContent || '').toLowerCase();
+                const val = (row.querySelector('td') && row.querySelector('td').textContent || '').toLowerCase();
+                if (!q || key.indexOf(q) !== -1 || val.indexOf(q) !== -1) {
+                    row.style.display = '';
+                } else {
+                    row.style.display = 'none';
+                }
+            });
+        });
+    })();
+</script>
diff --git a/atlas/templates/atlas/user_uploads.html b/atlas/templates/atlas/user_uploads.html
index 1f51faa3..bdf98029 100644
--- a/atlas/templates/atlas/user_uploads.html
+++ b/atlas/templates/atlas/user_uploads.html
@@ -125,23 +125,23 @@
 
 
 <!-- Global modal used for HTMX-loaded fragments (e.g. series tags) -->
-<div class="modal fade" id="seriesTagsModal" tabindex="-1" aria-hidden="true">
-    <div class="modal-dialog modal-xl modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">Series DICOM Tags</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
+    <div class="modal fade" id="seriesTagsModal" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog modal-xl modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Series DICOM Tags</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
                 <!-- HTMX will swap content here -->
-                <div class="text-muted">Loading…</div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <div class="text-muted">Loading…</div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
             </div>
         </div>
     </div>
-</div>
 
     <script>
         // Show modal when HTMX swaps content into the modal body