Implement case search functionality and enhance case addition UI in collection view

atlas/templates/atlas/add_case_to_collection.html

@@ -1,14 +1,9 @@
-<span id="add-case-form">
-    This form allows you to add an existing case to the collection. You may find it easier to do this from the individual case pages or the <a href="{% url 'atlas:case_view' %}">case overview view</a> which allows you to add multiple cases at once.
-<form hx-post="{% url 'atlas:add_case_to_collection' collection.id %}" hx-target="#full-question-list" hx-swap="beforeend">
-    {% csrf_token %}
-    <label for="case">Select Case to add:</label>
-    <select name="case" id="case">
-        {% for case in cases %}
-            <option value="{{ case.id }}">{{ case.title }}</option>
-        {% endfor %}
-    </select>
-    <button type="submit">Add</button>
-    <button _="on click remove #add-case-form">Cancel</button>
-</form>
-</span>
+<div id="add-case-form" class="p-2 border rounded">
+    <p class="mb-2">Add an existing case to this collection. You can also use the case overview view to add multiple cases at once: <a href="{% url 'atlas:case_view' %}">case overview</a>.</p>
+
+    {% include 'atlas/partials/case_search_widget.html' %}
+
+    <div class="mt-2">
+        <button class="btn btn-sm btn-secondary" _="on click remove #add-case-form">Close</button>
+    </div>
+</div>

atlas/templates/atlas/partials/case_search_results.html

@@ -0,0 +1,20 @@
+{% if cases and cases.exists %}
+  <div class="list-group">
+    {% for case in cases %}
+      <div class="list-group-item d-flex justify-content-between align-items-center">
+        <div class="flex-fill me-3">
+          <div class="fw-semibold">{{ case.title }}</div>
+          <div class="small text-muted">{% if case.description %}{{ case.description|truncatechars:100 }}{% endif %}</div>
+        </div>
+
+  <form class="m-0" hx-post="{% url 'atlas:add_case_to_collection' collection.pk %}" hx-target="#full-question-list" hx-swap="beforeend">
+          {% csrf_token %}
+          <input type="hidden" name="case" value="{{ case.pk }}">
+          <button type="submit" class="btn btn-sm btn-primary">Add</button>
+        </form>
+      </div>
+    {% endfor %}
+  </div>
+{% else %}
+  <div class="text-muted small">No cases found.</div>
+{% endif %}

atlas/templates/atlas/partials/case_search_widget.html

@@ -0,0 +1,11 @@
+<div class="case-search-widget">
+  <label for="case-search-input" class="form-label">Search cases</label>
+  <input id="case-search-input" name="q" class="form-control" type="search"
+    placeholder="Type to search cases..."
+    hx-get="{% url 'atlas:case_search' %}?collection={{ collection.pk }}"
+    hx-target="#case-search-results"
+    hx-trigger="keyup changed delay:400ms"
+    autocomplete="off">
+
+  <div id="case-search-results" class="mt-2"></div>
+</div>