From c01000f06e44c1eeaff2689fd49ef4b90dd02432 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 15 Dec 2025 10:42:58 +0000
Subject: [PATCH] Refactor resource search functionality: replace inline form
 with a dedicated search panel and improve result handling

---
 atlas/templates/atlas/case_display_block.html |  30 +----
 atlas/templates/atlas/index.html              | 122 +++++++++---------
 .../atlas/partials/resource_search_panel.html |  41 ++++++
 .../resource_search_widget_results.html       |  68 +++++-----
 4 files changed, 138 insertions(+), 123 deletions(-)
 create mode 100644 atlas/templates/atlas/partials/resource_search_panel.html

diff --git a/atlas/templates/atlas/case_display_block.html b/atlas/templates/atlas/case_display_block.html
index 08826e78..177ee772 100755
--- a/atlas/templates/atlas/case_display_block.html
+++ b/atlas/templates/atlas/case_display_block.html
@@ -205,35 +205,7 @@
             <h5>Resources</h5>
 
             <div class="mb-2">
-                <form id="resource-search-form" class="row g-2" hx-get="{% url 'atlas:resource_search_widget' %}" hx-target="#resource-search-results" hx-swap="innerHTML" hx-trigger="keyup changed delay:500ms from:#resource-search-q">
-                    <input type="hidden" name="case_id" value="{{ case.pk }}" />
-                    <div class="col-auto" style="flex: 1 1 300px;">
-                        <input type="search" id="resource-search-q" name="q" class="form-control form-control-sm" placeholder="Search resources by name, description or URL" />
-                    </div>
-                    <div class="col-auto">
-                        <select name="site" class="form-select form-select-sm">
-                            <option value="">All sites</option>
-                            {% for s in site_queryset %}
-                                <option value="{{ s.pk }}">{{ s.name }}</option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                    <div class="col-auto">
-                        <select name="subspecialty" class="form-select form-select-sm">
-                            <option value="">All subspecialties</option>
-                            {% for sp in subspecialty_queryset %}
-                                <option value="{{ sp.pk }}">{{ sp.name }}</option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                    <div class="col-auto">
-                        <div class="form-check form-check-inline">
-                            <input class="form-check-input" type="checkbox" id="resource-open-access-{{ case.pk }}" name="open_access" value="1">
-                            <label class="form-check-label small" for="resource-open-access-{{ case.pk }}">Open</label>
-                        </div>
-                    </div>
-                </form>
-                <div id="resource-search-results" class="mt-2"></div>
+                {% include 'atlas/partials/resource_search_panel.html' %}
             </div>
 
             <div>
diff --git a/atlas/templates/atlas/index.html b/atlas/templates/atlas/index.html
index 6ca62ada..c616633b 100644
--- a/atlas/templates/atlas/index.html
+++ b/atlas/templates/atlas/index.html
@@ -1,77 +1,77 @@
 {% extends 'atlas/base.html' %}
 
 {% block content %}
-<div class="container my-4">
-    <div class="row">
-        <div class="col-12">
-            <h2 class="mb-3">Atlas</h2>
-        </div>
-    </div>
-
-    <div class="row">
-        <div class="col-12 col-md-8">
-            <div class="card mb-3">
-                <div class="card-body">
-                    <h5 class="card-title">Collections</h5>
-                    <p class="card-text">Quick access to collections you can view or take.</p>
-                    <a href="{% url 'atlas:user_collections' %}" class="btn btn-primary">Collections to view / take</a>
-                </div>
-            </div>
-
-            <div class="card">
-                <div class="card-body">
-                    <h5 class="card-title">My cases / collections</h5>
-                    <p>View my <a href="{% url 'atlas:case_view' %}?author={{ request.user.id }}">cases</a> or <a href="{% url 'atlas:collection_view' %}?author={{ request.user.id }}">my collections</a>.</p>
-                    <p>
-                        <a href="{% url 'atlas:user_uploads' %}" class="btn btn-outline-secondary">
-                            <i class="bi bi-cloud-arrow-up me-1"></i> Uploads awaiting import
-                        </a>
-                    </p>
-                </div>
+    <div class="container my-4">
+        <div class="row">
+            <div class="col-12">
+                <h2 class="mb-3">Atlas</h2>
             </div>
         </div>
 
-        <div class="col-12 col-md-4">
-            <div class="card">
-                <div class="card-body">
-                    <h6 class="card-subtitle mb-2 text-muted">Quick links</h6>
-                    <ul class="list-unstyled mb-0">
-                        <li><a href="{% url 'atlas:user_collections' %}">Collections to view / take</a></li>
-                        <li><a href="{% url 'atlas:case_view' %}?author={{ request.user.id }}">My cases</a></li>
-                        <li><a href="{% url 'atlas:collection_view' %}?author={{ request.user.id }}">My collections</a></li>
-                        <li><a href="{% url 'atlas:user_uploads' %}">Uploads awaiting import</a></li>
-                    </ul>
+        <div class="row">
+            <div class="col-12 col-md-8">
+                <div class="card mb-3">
+                    <div class="card-body">
+                        <h5 class="card-title">Collections</h5>
+                        <p class="card-text">Quick access to collections you can view or take.</p>
+                        <a href="{% url 'atlas:user_collections' %}" class="btn btn-primary">Collections to view / take</a>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">My cases / collections</h5>
+                        <p>View my <a href="{% url 'atlas:case_view' %}?author={{ request.user.id }}">cases</a> or <a href="{% url 'atlas:collection_view' %}?author={{ request.user.id }}">my collections</a>.</p>
+                        <p>
+                            <a href="{% url 'atlas:user_uploads' %}" class="btn btn-outline-secondary">
+                                <i class="bi bi-cloud-arrow-up me-1"></i> Uploads awaiting import
+                            </a>
+                        </p>
+                    </div>
                 </div>
             </div>
-            <div class="card mb-3">
-                <div class="card-body">
-                    <h5 class="card-title">Search cases</h5>
-                    <div class="mb-2">
-                        <div class="input-group">
-                            <input class="form-control" id="case-search-input" name="q" type="search"
-                                placeholder="Search cases by title or description"
-                                hx-get="{% url 'atlas:case_search_partial' %}"
-                                hx-trigger="input changed delay:500ms, keyup[key=='Enter']"
-                                hx-target="#case-search-results"
-                                hx-indicator="#case-search-indicator" />
-                            <span class="input-group-text" id="case-search-indicator" aria-hidden="true">
-                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                <span class="visually-hidden">Loading</span>
-                            </span>
+
+            <div class="col-12 col-md-4">
+                <div class="card">
+                    <div class="card-body">
+                        <h6 class="card-subtitle mb-2 text-muted">Quick links</h6>
+                        <ul class="list-unstyled mb-0">
+                            <li><a href="{% url 'atlas:user_collections' %}">Collections to view / take</a></li>
+                            <li><a href="{% url 'atlas:case_view' %}?author={{ request.user.id }}">My cases</a></li>
+                            <li><a href="{% url 'atlas:collection_view' %}?author={{ request.user.id }}">My collections</a></li>
+                            <li><a href="{% url 'atlas:user_uploads' %}">Uploads awaiting import</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="card mb-3">
+                    <div class="card-body">
+                        <h5 class="card-title">Search cases</h5>
+                        <div class="mb-2">
+                            <div class="input-group">
+                                <input class="form-control" id="case-search-input" name="q" type="search"
+                                       placeholder="Search cases by title or description"
+                                       hx-get="{% url 'atlas:case_search_partial' %}"
+                                       hx-trigger="input changed delay:500ms, keyup[key=='Enter']"
+                                       hx-target="#case-search-results"
+                                       hx-indicator="#case-search-indicator" />
+                                <span class="input-group-text" id="case-search-indicator" aria-hidden="true">
+                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                                    <span class="visually-hidden">Loading</span>
+                                </span>
+                            </div>
+                        </div>
+                        <style>
+                        /* Hide indicator by default; HTMX will add the `htmx-request` class during requests */
+                            #case-search-indicator { display: none; }
+                            #case-search-indicator.htmx-request { display: inline-flex; align-items: center; }
+                        </style>
+                        <div id="case-search-results">
+                            {% include 'atlas/partials/_case_search_results.html' with cases=None %}
                         </div>
                     </div>
-                    <style>
-                        /* Hide indicator by default; HTMX will add the `htmx-request` class during requests */
-                        #case-search-indicator { display: none; }
-                        #case-search-indicator.htmx-request { display: inline-flex; align-items: center; }
-                    </style>
-                    <div id="case-search-results">
-                        {% include 'atlas/partials/_case_search_results.html' with cases=None %}
-                    </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/atlas/templates/atlas/partials/resource_search_panel.html b/atlas/templates/atlas/partials/resource_search_panel.html
new file mode 100644
index 00000000..dbe54cb0
--- /dev/null
+++ b/atlas/templates/atlas/partials/resource_search_panel.html
@@ -0,0 +1,41 @@
+<div id="resource-search-panel" class="mb-2">
+  <div id="resource-search-form" class="row g-2">
+    <input type="hidden" name="case_id" value="{{ case.pk }}" />
+    <div class="col-auto" style="flex: 1 1 300px;">
+      <input type="search" id="resource-search-q" name="q" class="form-control form-control-sm" placeholder="Search resources by name, description or URL"
+             hx-get="{% url 'atlas:resource_search_widget' %}"
+                hx-trigger="input changed delay:500ms, keyup[key=='Enter']"
+             hx-target="#resource-search-results"
+             hx-swap="innerHTML"
+             hx-include="#resource-search-panel"
+                hx-indicator=".htmx-indicator">
+    </div>
+    <div class="htmx-indicator col-auto">
+    <img src="/img/bars.svg" alt=""/> Searching...
+   </div>
+    <div class="col-auto">
+      <select name="site" class="form-select form-select-sm">
+        <option value="">All sites</option>
+        {% for s in site_queryset %}
+          <option value="{{ s.pk }}">{{ s.name }}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div class="col-auto">
+      <select name="subspecialty" class="form-select form-select-sm">
+        <option value="">All subspecialties</option>
+        {% for sp in subspecialty_queryset %}
+          <option value="{{ sp.pk }}">{{ sp.name }}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div class="col-auto">
+      <div class="form-check form-check-inline">
+        <input class="form-check-input" type="checkbox" id="resource-open-access-{{ case.pk }}" name="open_access" value="1">
+        <label class="form-check-label small" for="resource-open-access-{{ case.pk }}">Open</label>
+      </div>
+    </div>
+  </div>
+
+  <div id="resource-search-results" class="mt-2"></div>
+</div>
diff --git a/atlas/templates/atlas/partials/resource_search_widget_results.html b/atlas/templates/atlas/partials/resource_search_widget_results.html
index 9c19cd24..787ba4de 100644
--- a/atlas/templates/atlas/partials/resource_search_widget_results.html
+++ b/atlas/templates/atlas/partials/resource_search_widget_results.html
@@ -1,37 +1,39 @@
 {% if results %}
-  <ul class="list-unstyled mb-0" id="resource_search_results_list_{{ field }}">
-    {% for item in results %}
-      <li class="py-1 d-flex justify-content-between align-items-center" data-resource-id="{{ item.id }}">
-        <div class="flex-grow-1">
-          <a href="{% url 'atlas:resource_detail' item.pk %}" target="_blank">{{ item.name|escape }}</a>
-          <div class="small text-muted">{{ item.get_display|safe }}</div>
-        </div>
-        <div class="d-flex gap-2">
-          <button
-            type="button"
-            class="btn btn-sm btn-success resource-attach-btn"
-            hx-post="{% url 'atlas:case_attach_resource' pk=case_id %}"
-            hx-vals='{"resource_id": "{{ item.id }}", "pre_review": "0"}'
-            hx-swap="outerHTML"
-            hx-target="#case-resources-list">
-            Attach
-          </button>
-          <button
-            type="button"
-            class="btn btn-sm btn-outline-success resource-attach-pre-btn"
-            hx-post="{% url 'atlas:case_attach_resource' pk=case_id %}"
-            hx-vals='{"resource_id": "{{ item.id }}", "pre_review": "1"}'
-            hx-swap="outerHTML"
-            hx-target="#case-resources-list">
-            Attach (pre)
-          </button>
-        </div>
-      </li>
-    {% endfor %}
-  </ul>
-  <div class="mt-2 text-end">
-    <small class="text-muted">{{ results|length }} results</small>
+  <div id="resource-search-results" hx-swap-oob="true">
+    <ul class="list-unstyled mb-0" id="resource_search_results_list_{{ field }}">
+      {% for item in results %}
+        <li class="py-1 d-flex justify-content-between align-items-center" data-resource-id="{{ item.id }}">
+          <div class="flex-grow-1">
+            <a href="{% url 'atlas:resource_detail' item.pk %}" target="_blank">{{ item.name|escape }}</a>
+            <div class="small text-muted">{{ item.get_display|safe }}</div>
+          </div>
+          <div class="d-flex gap-2">
+            <button
+              type="button"
+              class="btn btn-sm btn-success resource-attach-btn"
+              hx-post="{% url 'atlas:case_attach_resource' pk=case_id %}"
+              hx-vals='{"resource_id": "{{ item.id }}", "pre_review": "0"}'
+              hx-swap="outerHTML"
+              hx-target="#case-resources-list">
+              Attach
+            </button>
+            <button
+              type="button"
+              class="btn btn-sm btn-outline-success resource-attach-pre-btn"
+              hx-post="{% url 'atlas:case_attach_resource' pk=case_id %}"
+              hx-vals='{"resource_id": "{{ item.id }}", "pre_review": "1"}'
+              hx-swap="outerHTML"
+              hx-target="#case-resources-list">
+              Attach (pre)
+            </button>
+          </div>
+        </li>
+      {% endfor %}
+    </ul>
+    <div class="mt-2 text-end">
+      <small class="text-muted">{{ results|length }} results</small>
+    </div>
   </div>
 {% else %}
-  <div><em>No resources found</em></div>
+  <div id="resource-search-results" hx-swap-oob="true"><em>No resources found</em></div>
 {% endif %}