hide/show filters

app/views/entries/_filters.html.erb

@@ -1,5 +1,5 @@
     <div class="flex flex-wrap gap-2">
-      <% base_params = { q: @query.presence, category: @category.presence, language: @language_code.presence, starts_with: @starts_with.presence }.compact %>
+      <% base_params = { q: @query, category: @category.presence, language: @language_code.presence, starts_with: @starts_with.presence }.compact %>
       <% all_category_params = base_params.except(:category) %>
       <%= link_to "All",
                   entries_path(all_category_params),
@@ -13,7 +13,7 @@
       <% end %>
     </div>
 
-    <div class="flex flex-wrap gap-2">
+    <div class="flex flex-wrap gap-2 mt-2">
       <% all_language_params = base_params.except(:language, :starts_with, :page) %>
       <%= link_to "All Languages",
                   entries_path(all_language_params),

app/views/entries/index.html.erb

@@ -29,24 +29,32 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
               </svg>
             </div>
-            <% if @query.present? %>
+            <div class="absolute inset-y-0 right-0 pr-4 flex items-center">
-              <div class="absolute inset-y-0 right-0 pr-4 flex items-center">
+              <button type="button"
-                <%= link_to "×",
+                      class="text-slate-400 hover:text-slate-600 text-2xl leading-none <%= @query.present? ? "" : "hidden" %>"
-                  entries_path(category: @category.presence, language: @language_code.presence, starts_with: @starts_with.presence),
+                      data-clear-search
-                  class: "text-slate-400 hover:text-slate-600 text-2xl leading-none",
+                      aria-label="Clear search"
-                  aria: { label: "Clear search" },
+                      onclick="const input=this.closest('form').querySelector('input[name=q]'); if(input){input.value='';} this.closest('form').requestSubmit();">
-                  data: { turbo_stream: true } %>
+                ×
-              </div>
+              </button>
-            <% end %>
+            </div>
             <%= form.text_field :q,
               value: @query,
               placeholder: "Search words, phrases, or biblical terms...",
               class: "block w-full pl-11 pr-10 mt-2 mb-2 py-4 bg-white border border-slate-200 rounded-2xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition",
-              oninput: "this.form.requestSubmit()" %>
+              oninput: "const clearBtn=this.form.querySelector('[data-clear-search]'); if(clearBtn){clearBtn.classList.toggle('hidden', this.value.length===0);} this.form.requestSubmit();" %>
           </div>
         <% end %>
 
-        <div id="entries_filters">
+        <button type="button"
+                class="text-xs font-semibold uppercase tracking-wider text-slate-500 hover:text-slate-700 inline-flex items-center"
+                aria-expanded="false"
+                aria-controls="entries_filters"
+                data-toggle-filters>
+          Show Filters
+        </button>
+
+        <div id="entries_filters" class="hidden">
           <%= render "entries/filters" %>
         </div>
       </div>
@@ -57,3 +65,19 @@
     </div>
   </div>
 </div>
+
+<script>
+  (function () {
+    const toggle = document.querySelector("[data-toggle-filters]");
+    const panel = document.getElementById("entries_filters");
+    if (!toggle || !panel) {
+      return;
+    }
+
+    toggle.addEventListener("click", function () {
+      const isHidden = panel.classList.toggle("hidden");
+      toggle.setAttribute("aria-expanded", (!isHidden).toString());
+      toggle.textContent = isHidden ? "Show Filters" : "Hide Filters";
+    });
+  })();
+</script>