From 8e92385c5616e03b0e6fb450edb015c2d598c654 Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Tue, 3 Feb 2026 12:17:03 +0000
Subject: [PATCH] feat(search): add search input and reposition pagination in
 templates

Add search_header macro with Datastar-driven live search and debounced
input. Move pagination controls from above to below tables. Add
pagination-controls class for mobile hiding. Add infinite scroll
sentinel divs and data attributes to all list partials.
---
 templates/partials/bag_list.html     | 10 ++++++++--
 templates/partials/brew_list.html    | 12 ++++++++++--
 templates/partials/gear_list.html    | 10 ++++++++--
 templates/partials/roast_list.html   | 10 ++++++++--
 templates/partials/roaster_list.html | 10 ++++++++--
 templates/partials/table.html        | 20 +++++++++++++++++---
 6 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/templates/partials/bag_list.html b/templates/partials/bag_list.html
index e55a3b4..cb853eb 100644
--- a/templates/partials/bag_list.html
+++ b/templates/partials/bag_list.html
@@ -93,8 +93,10 @@
 
   <section>
     <h2 class="text-2xl font-bold mb-4 text-stone-800">History</h2>
-    <div class="rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm">
-      {% call table::pagination_header(bags, navigator, "#bag-list") %}
+    <div class="rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm"
+      {% if bags.has_next() %}data-infinite-scroll data-next-url="{{ navigator.fragment_page_href(bags.next_page().unwrap())|safe }}" data-target="#bag-list"{% endif %}
+    >
+      {% call table::search_header(navigator, "#bag-list") %}
 
       <div class="overflow-x-auto">
         <table class="responsive-table min-w-full divide-y divide-amber-200 text-left text-sm text-stone-700">
@@ -122,6 +124,10 @@
           </tbody>
         </table>
       </div>
+      {% call table::pagination_header(bags, navigator, "#bag-list") %}
+      {% if bags.has_next() %}
+      <div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
+      {% endif %}
     </div>
   </section>
 </div>
diff --git a/templates/partials/brew_list.html b/templates/partials/brew_list.html
index 83f30d3..358ca8b 100644
--- a/templates/partials/brew_list.html
+++ b/templates/partials/brew_list.html
@@ -1,8 +1,10 @@
 {% import "partials/table.html" as table %}
 
 <div id="brew-list" class="space-y-4" data-star-scope="brews">
-  <div class="rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm">
-    {% call table::pagination_header(brews, navigator, "#brew-list") %}
+  <div class="rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm"
+    {% if brews.has_next() %}data-infinite-scroll data-next-url="{{ navigator.fragment_page_href(brews.next_page().unwrap())|safe }}" data-target="#brew-list"{% endif %}
+  >
+    {% call table::search_header(navigator, "#brew-list") %}
 
     <div class="overflow-x-auto">
       <table class="responsive-table min-w-full divide-y divide-amber-200 text-left text-sm text-stone-700">
@@ -106,5 +108,11 @@
       No brews logged yet. Start by logging your first cup!
     </div>
     {% endif %}
+
+    {% call table::pagination_header(brews, navigator, "#brew-list") %}
+
+    {% if brews.has_next() %}
+    <div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
+    {% endif %}
   </div>
 </div>
diff --git a/templates/partials/gear_list.html b/templates/partials/gear_list.html
index ec740a7..c4d4cf2 100644
--- a/templates/partials/gear_list.html
+++ b/templates/partials/gear_list.html
@@ -9,8 +9,10 @@
     {% endif %}
   </div>
   {% else %}
-  <div class="rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm">
-    {% call table::pagination_header(gear, navigator, "#gear-list") %}
+  <div class="rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm"
+    {% if gear.has_next() %}data-infinite-scroll data-next-url="{{ navigator.fragment_page_href(gear.next_page().unwrap())|safe }}" data-target="#gear-list"{% endif %}
+  >
+    {% call table::search_header(navigator, "#gear-list") %}
 
     <div class="overflow-x-auto">
       <table class="responsive-table min-w-full divide-y divide-amber-200 text-left text-sm text-stone-700">
@@ -62,6 +64,10 @@
         </tbody>
       </table>
     </div>
+    {% call table::pagination_header(gear, navigator, "#gear-list") %}
+    {% if gear.has_next() %}
+    <div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
+    {% endif %}
   </div>
   {% endif %}
 </div>
diff --git a/templates/partials/roast_list.html b/templates/partials/roast_list.html
index bbe9a38..9a390c3 100644
--- a/templates/partials/roast_list.html
+++ b/templates/partials/roast_list.html
@@ -8,8 +8,10 @@
     <p class="text-center">No roasts recorded yet. Use the form above to add your first roast.</p>
   </div>
   {% else %}
-  <section class="rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm">
-    {% call table::pagination_header(roasts, navigator, "#roast-list") %}
+  <section class="rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm"
+    {% if roasts.has_next() %}data-infinite-scroll data-next-url="{{ navigator.fragment_page_href(roasts.next_page().unwrap())|safe }}" data-target="#roast-list"{% endif %}
+  >
+    {% call table::search_header(navigator, "#roast-list") %}
     <div class="overflow-x-auto">
       <table class="responsive-table min-w-full divide-y divide-amber-200 text-left text-sm text-stone-700">
         <thead class="bg-amber-200/60 text-xs font-semibold tracking-wide text-amber-900">
@@ -91,6 +93,10 @@
         </tbody>
       </table>
     </div>
+    {% call table::pagination_header(roasts, navigator, "#roast-list") %}
+    {% if roasts.has_next() %}
+    <div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
+    {% endif %}
   </section>
   {% endif %}
 </div>
diff --git a/templates/partials/roaster_list.html b/templates/partials/roaster_list.html
index 5a67c72..418d645 100644
--- a/templates/partials/roaster_list.html
+++ b/templates/partials/roaster_list.html
@@ -10,8 +10,10 @@
     </p>
   </div>
   {% else %}
-  <section class="rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm">
-    {% call table::pagination_header(roasters, navigator, "#roaster-list") %}
+  <section class="rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm"
+    {% if roasters.has_next() %}data-infinite-scroll data-next-url="{{ navigator.fragment_page_href(roasters.next_page().unwrap())|safe }}" data-target="#roaster-list"{% endif %}
+  >
+    {% call table::search_header(navigator, "#roaster-list") %}
     <div class="overflow-x-auto">
       <table class="responsive-table min-w-full divide-y divide-amber-200 text-left text-sm text-stone-700">
         <thead class="bg-amber-200/60 text-xs font-semibold tracking-wide text-amber-900">
@@ -98,6 +100,10 @@
         </tbody>
       </table>
     </div>
+    {% call table::pagination_header(roasters, navigator, "#roaster-list") %}
+    {% if roasters.has_next() %}
+    <div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
+    {% endif %}
   </section>
   {% endif %}
 </div>
diff --git a/templates/partials/table.html b/templates/partials/table.html
index 86abe4b..de0b1ff 100644
--- a/templates/partials/table.html
+++ b/templates/partials/table.html
@@ -1,11 +1,25 @@
+{% macro search_header(navigator, target_selector) %}
+    <div class="border-b border-amber-200/70 px-4 py-3">
+      <input
+        type="search"
+        placeholder="Search..."
+        value="{{ navigator.search_value() }}"
+        class="input-field w-full text-sm"
+        data-search-url="{{ navigator.path()|safe }}?{{ navigator.search_query_base()|safe }}&q="
+        data-on:input__debounce.300ms="history.pushState(null, '', el.dataset.searchUrl + el.value); @get(el.dataset.searchUrl + el.value, {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
+        {% if navigator.has_search() %}data-init="el.focus(); el.selectionStart = el.value.length"{% endif %}
+      />
+    </div>
+{% endmacro %}
+
 {% macro pagination_header(items, navigator, target_selector) %}
     <div
-      class="flex flex-col gap-3 border-b border-amber-200/70 px-4 py-3 text-xs text-stone-600 sm:flex-row sm:items-center sm:justify-between"
+      class="pagination-controls flex flex-wrap items-center justify-between gap-x-3 border-t border-amber-200/70 px-4 py-1.5 text-xs leading-none text-stone-600"
     >
-      <p>
+      <span>
         Showing {{ items.start_index() }}&ndash;{{ items.end_index() }} of {{ items.total }}
         results
-      </p>
+      </span>
       <div class="flex flex-wrap items-center gap-3">
         <div class="flex items-center gap-2">
           <button