From c45410b5e5170eb09c0221cd171584b3ceb209a0 Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Tue, 28 Oct 2025 18:02:27 +0000
Subject: [PATCH] Refactor category search form to enhance usability with
 advanced filters and improved loading indicators

---
 atlas/templates/atlas/categories_list.html | 127 ++++++++++++---------
 1 file changed, 74 insertions(+), 53 deletions(-)

diff --git a/atlas/templates/atlas/categories_list.html b/atlas/templates/atlas/categories_list.html
index 48643a84..c2eca1d9 100644
--- a/atlas/templates/atlas/categories_list.html
+++ b/atlas/templates/atlas/categories_list.html
@@ -19,62 +19,83 @@
             #category-search-loading.htmx-request { display: inline-block; }
             </style>
 
-            <form method="get" class="d-flex align-items-center" action="" id="category-search-form">
-                <div class="me-3">
-                    <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" id="type-conditions" name="types" value="conditions" checked
-                               hx-get="{% url 'atlas:categories_search_partial' %}"
-                               hx-target="#category-search-results"
-                               hx-swap="innerHTML"
-                               hx-include="#category-search-form"
-                               hx-indicator="#category-search-loading" />
-                        <label class="form-check-label" for="type-conditions">Conditions</label>
-                    </div>
-                    <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" id="type-findings" name="types" value="findings" checked
-                               hx-get="{% url 'atlas:categories_search_partial' %}"
-                               hx-target="#category-search-results"
-                               hx-swap="innerHTML"
-                               hx-include="#category-search-form"
-                               hx-indicator="#category-search-loading" />
-                        <label class="form-check-label" for="type-findings">Findings</label>
-                    </div>
-                    <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" id="type-structures" name="types" value="structures" checked
-                               hx-get="{% url 'atlas:categories_search_partial' %}"
-                               hx-target="#category-search-results"
-                               hx-swap="innerHTML"
-                               hx-include="#category-search-form"
-                               hx-indicator="#category-search-loading" />
-                        <label class="form-check-label" for="type-structures">Structures</label>
-                    </div>
-                    <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" id="type-subspecialties" name="types" value="subspecialties" checked
-                               hx-get="{% url 'atlas:categories_search_partial' %}"
-                               hx-target="#category-search-results"
-                               hx-swap="innerHTML"
-                               hx-include="#category-search-form"
-                               hx-indicator="#category-search-loading" />
-                        <label class="form-check-label" for="type-subspecialties">Subspecialties</label>
-                    </div>
-                    <div class="form-check form-check-inline">
-                        <input class="form-check-input" type="checkbox" id="type-presentations" name="types" value="presentations" checked
-                               hx-get="{% url 'atlas:categories_search_partial' %}"
-                               hx-target="#category-search-results"
-                               hx-swap="innerHTML"
-                               hx-include="#category-search-form"
-                               hx-indicator="#category-search-loading" />
-                        <label class="form-check-label" for="type-presentations">Presentations</label>
+            <form method="get" class="d-flex flex-column" action="" id="category-search-form">
+                <div class="d-flex align-items-center">
+                    <input id="category-search-input" type="search" name="q" placeholder="Search all categories (conditions, findings, structures...)" value="{{ query|default:'' }}" class="form-control me-2" 
+                                 hx-get="{% url 'atlas:categories_search_partial' %}"
+                                 hx-trigger="keyup changed delay:500ms"
+                                 hx-target="#category-search-results"
+                                 hx-swap="innerHTML"
+                                 hx-include="#category-search-form"
+                                 hx-indicator="#category-search-loading" />
+
+                    {# Spinner shown while HTMX request is in-flight (selector matched by hx-indicator) #}
+                    <div id="category-search-loading" role="status" aria-hidden="true" class="ms-2">
+                        <span class="spinner-border spinner-border-sm text-primary" aria-hidden="true"></span>
+                        <span class="visually-hidden">Loading...</span>
                     </div>
+
+                    <button class="btn btn-primary ms-2" type="submit">Search</button>
                 </div>
 
-                <input id="category-search-input" type="search" name="q" placeholder="Search all categories (conditions, findings, structures...)" value="{{ query|default:'' }}" class="form-control me-2" 
-                             hx-get="{% url 'atlas:categories_search_partial' %}"
-                             hx-trigger="keyup changed delay:500ms"
-                             hx-target="#category-search-results"
-                             hx-swap="innerHTML"
-                             hx-include="#category-search-form"
-                             hx-indicator="#category-search-loading" />
+                {# Collapsed advanced filters block - defaults to collapsed #}
+                <div class="mt-2">
+                    <button class="btn btn-link p-0" type="button" data-bs-toggle="collapse" data-bs-target="#category-filters" aria-expanded="false" aria-controls="category-filters">
+                        Advanced filters ▾
+                    </button>
+
+                    <div class="collapse mt-2" id="category-filters">
+                        <div class="card card-body">
+                            <div class="d-flex flex-wrap gap-2">
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" id="type-conditions" name="types" value="conditions" checked
+                                           hx-get="{% url 'atlas:categories_search_partial' %}"
+                                           hx-target="#category-search-results"
+                                           hx-swap="innerHTML"
+                                           hx-include="#category-search-form"
+                                           hx-indicator="#category-search-loading" />
+                                    <label class="form-check-label" for="type-conditions">Conditions</label>
+                                </div>
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" id="type-findings" name="types" value="findings" checked
+                                           hx-get="{% url 'atlas:categories_search_partial' %}"
+                                           hx-target="#category-search-results"
+                                           hx-swap="innerHTML"
+                                           hx-include="#category-search-form"
+                                           hx-indicator="#category-search-loading" />
+                                    <label class="form-check-label" for="type-findings">Findings</label>
+                                </div>
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" id="type-structures" name="types" value="structures" checked
+                                           hx-get="{% url 'atlas:categories_search_partial' %}"
+                                           hx-target="#category-search-results"
+                                           hx-swap="innerHTML"
+                                           hx-include="#category-search-form"
+                                           hx-indicator="#category-search-loading" />
+                                    <label class="form-check-label" for="type-structures">Structures</label>
+                                </div>
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" id="type-subspecialties" name="types" value="subspecialties" checked
+                                           hx-get="{% url 'atlas:categories_search_partial' %}"
+                                           hx-target="#category-search-results"
+                                           hx-swap="innerHTML"
+                                           hx-include="#category-search-form"
+                                           hx-indicator="#category-search-loading" />
+                                    <label class="form-check-label" for="type-subspecialties">Subspecialties</label>
+                                </div>
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" id="type-presentations" name="types" value="presentations" checked
+                                           hx-get="{% url 'atlas:categories_search_partial' %}"
+                                           hx-target="#category-search-results"
+                                           hx-swap="innerHTML"
+                                           hx-include="#category-search-form"
+                                           hx-indicator="#category-search-loading" />
+                                    <label class="form-check-label" for="type-presentations">Presentations</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
 
                 {# Spinner shown while HTMX request is in-flight (selector matched by hx-indicator) #}
                 <div id="category-search-loading" role="status" aria-hidden="true" class="ms-2">