Add case search functionality with HTMX support and results partial

atlas/templates/atlas/index.html

@@ -10,6 +10,21 @@
 
         <div class="row">
             <div class="col-12 col-md-8">
+                <div class="card mb-3">
+                    <div class="card-body">
+                        <h5 class="card-title">Search cases</h5>
+                        <div class="mb-2">
+                            <input class="form-control" id="case-search-input" name="q" placeholder="Search cases by title or description"
+                                hx-get="{% url 'atlas:case_search_partial' %}"
+                                hx-trigger="keyup changed delay:500ms"
+                                hx-target="#case-search-results"
+                                hx-include="#case-search-input">
+                        </div>
+                        <div id="case-search-results" hx-swap-oob="true">
+                            {% include 'atlas/partials/_case_search_results.html' with cases=None %}
+                        </div>
+                    </div>
+                </div>
                 <div class="card mb-3">
                     <div class="card-body">
                         <h5 class="card-title">Collections</h5>

atlas/templates/atlas/partials/_case_search_results.html

@@ -0,0 +1,16 @@
+{# partial: list of cases for HTMX search results #}
+<div class="list-group">
+{% if cases and cases.exists %}
+  {% for case in cases %}
+    <a href="{% url 'atlas:case_detail' case.pk %}" class="list-group-item list-group-item-action">
+      <div class="d-flex w-100 justify-content-between">
+        <h6 class="mb-1">{{ case.title }}</h6>
+        <small class="text-muted">{{ case.created_date|date:"Y-m-d" }}</small>
+      </div>
+      <p class="mb-1 text-truncate">{{ case.description }}</p>
+    </a>
+  {% endfor %}
+{% else %}
+  <div class="list-group-item">No cases found</div>
+{% endif %}
+</div>