Refactor resource search functionality: replace inline form with a dedicated search panel and improve result handling

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>

atlas/templates/atlas/index.html

@@ -1,7 +1,7 @@
 {% extends 'atlas/base.html' %}
 
 {% block content %}
-<div class="container my-4">
+    <div class="container my-4">
         <div class="row">
             <div class="col-12">
                 <h2 class="mb-3">Atlas</h2>
@@ -72,6 +72,6 @@
                 </div>
             </div>
         </div>
-</div>
+    </div>
 
 {% endblock %}

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>

atlas/templates/atlas/partials/resource_search_widget_results.html

@@ -1,4 +1,5 @@
 {% if results %}
+  <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 }}">
@@ -32,6 +33,7 @@
     <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 %}