From 0e06d4c5dcc7a45b36fc3486c43b4ca3642eadc5 Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Wed, 26 Nov 2025 15:24:33 +0000
Subject: [PATCH] feat: push URL state when sorting/paging tables

---
 templates/partials/roast_list.html   | 26 +++++++++++++-------------
 templates/partials/roaster_list.html | 24 ++++++++++++------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/templates/partials/roast_list.html b/templates/partials/roast_list.html
index 268ab8f..80d4364 100644
--- a/templates/partials/roast_list.html
+++ b/templates/partials/roast_list.html
@@ -20,7 +20,7 @@
             type="button"
             class="inline-flex items-center gap-1 rounded-full border border-amber-400 px-3 py-1 font-semibold transition hover:border-amber-500 hover:text-amber-800 disabled:cursor-not-allowed disabled:border-amber-200 disabled:text-amber-300"
             {% if roasts.has_previous() %}
-            data-on:click="@get('{{ navigator.fragment_page_href(roasts.previous_page().unwrap()) }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
+            data-on:click="history.pushState(null, '', '{{ navigator.page_href(roasts.previous_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(roasts.previous_page().unwrap())|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
             {% else %}
             disabled
             {% endif %}
@@ -39,7 +39,7 @@
             type="button"
             class="inline-flex items-center gap-1 rounded-full border border-amber-400 px-3 py-1 font-semibold transition hover:border-amber-500 hover:text-amber-800 disabled:cursor-not-allowed disabled:border-amber-200 disabled:text-amber-300"
             {% if roasts.has_next() %}
-            data-on:click="@get('{{ navigator.fragment_page_href(roasts.next_page().unwrap()) }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
+            data-on:click="history.pushState(null, '', '{{ navigator.page_href(roasts.next_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(roasts.next_page().unwrap())|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
             {% else %}
             disabled
             {% endif %}
@@ -52,13 +52,13 @@
           <span>Rows</span>
           <select
             class="rounded-md border border-amber-300 bg-white px-2 py-1 text-xs font-semibold text-amber-800 transition hover:border-amber-400"
-            data-on:change="@get(evt.target.selectedOptions[0].dataset.href, {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
+            data-on:change="history.pushState(null, '', evt.target.selectedOptions[0].dataset.url); @get(evt.target.selectedOptions[0].dataset.href, {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
           >
-            <option value="5" data-href="{{ navigator.fragment_rows_href("5") }}" {% if roasts.is_page_size(5) %}selected{% endif %}>5</option>
-            <option value="10" data-href="{{ navigator.fragment_rows_href("10") }}" {% if roasts.is_page_size(10) %}selected{% endif %}>10</option>
-            <option value="20" data-href="{{ navigator.fragment_rows_href("20") }}" {% if roasts.is_page_size(20) %}selected{% endif %}>20</option>
-            <option value="50" data-href="{{ navigator.fragment_rows_href("50") }}" {% if roasts.is_page_size(50) %}selected{% endif %}>50</option>
-            <option value="all" data-href="{{ navigator.fragment_rows_href("all") }}" {% if roasts.is_showing_all() %}selected{% endif %}>All</option>
+            <option value="5" data-href="{{ navigator.fragment_rows_href("5")|safe }}" data-url="{{ navigator.rows_href("5")|safe }}" {% if roasts.is_page_size(5) %}selected{% endif %}>5</option>
+            <option value="10" data-href="{{ navigator.fragment_rows_href("10")|safe }}" data-url="{{ navigator.rows_href("10")|safe }}" {% if roasts.is_page_size(10) %}selected{% endif %}>10</option>
+            <option value="20" data-href="{{ navigator.fragment_rows_href("20")|safe }}" data-url="{{ navigator.rows_href("20")|safe }}" {% if roasts.is_page_size(20) %}selected{% endif %}>20</option>
+            <option value="50" data-href="{{ navigator.fragment_rows_href("50")|safe }}" data-url="{{ navigator.rows_href("50")|safe }}" {% if roasts.is_page_size(50) %}selected{% endif %}>50</option>
+            <option value="all" data-href="{{ navigator.fragment_rows_href("all")|safe }}" data-url="{{ navigator.rows_href("all")|safe }}" {% if roasts.is_showing_all() %}selected{% endif %}>All</option>
           </select>
         </label>
       </div>
@@ -76,7 +76,7 @@
               <button
                 type="button"
                 class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
-                data-on:click="@get('{{ navigator.fragment_sort_href("created-at") }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
+                data-on:click="history.pushState(null, '', '{{ navigator.sort_href("created-at")|safe }}'); @get('{{ navigator.fragment_sort_href("created-at")|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
               >
                 <span>Added</span>
                 {% if created_sorted %}
@@ -99,7 +99,7 @@
               <button
                 type="button"
                 class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
-                data-on:click="@get('{{ navigator.fragment_sort_href("name") }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
+                data-on:click="history.pushState(null, '', '{{ navigator.sort_href("name")|safe }}'); @get('{{ navigator.fragment_sort_href("name")|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
               >
                 <span>Roast</span>
                 {% if name_sorted %}
@@ -122,7 +122,7 @@
               <button
                 type="button"
                 class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
-                data-on:click="@get('{{ navigator.fragment_sort_href("roaster") }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
+                data-on:click="history.pushState(null, '', '{{ navigator.sort_href("roaster")|safe }}'); @get('{{ navigator.fragment_sort_href("roaster")|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
               >
                 <span>Roaster</span>
                 {% if roaster_sorted %}
@@ -145,7 +145,7 @@
               <button
                 type="button"
                 class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
-                data-on:click="@get('{{ navigator.fragment_sort_href("origin") }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
+                data-on:click="history.pushState(null, '', '{{ navigator.sort_href("origin")|safe }}'); @get('{{ navigator.fragment_sort_href("origin")|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
               >
                 <span>Origin</span>
                 {% if origin_sorted %}
@@ -168,7 +168,7 @@
               <button
                 type="button"
                 class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
-                data-on:click="@get('{{ navigator.fragment_sort_href("producer") }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
+                data-on:click="history.pushState(null, '', '{{ navigator.sort_href("producer")|safe }}'); @get('{{ navigator.fragment_sort_href("producer")|safe }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
               >
                 <span>Producer</span>
                 {% if producer_sorted %}
diff --git a/templates/partials/roaster_list.html b/templates/partials/roaster_list.html
index b8dafaf..5cabe92 100644
--- a/templates/partials/roaster_list.html
+++ b/templates/partials/roaster_list.html
@@ -22,7 +22,7 @@
             type="button"
             class="inline-flex items-center gap-1 rounded-full border border-amber-400 px-3 py-1 font-semibold transition hover:border-amber-500 hover:text-amber-800 disabled:cursor-not-allowed disabled:border-amber-200 disabled:text-amber-300"
             {% if roasters.has_previous() %}
-            data-on:click="@get('{{ navigator.fragment_page_href(roasters.previous_page().unwrap()) }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
+            data-on:click="history.pushState(null, '', '{{ navigator.page_href(roasters.previous_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(roasters.previous_page().unwrap())|safe }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
             {% else %}
             disabled
             {% endif %}
@@ -41,7 +41,7 @@
             type="button"
             class="inline-flex items-center gap-1 rounded-full border border-amber-400 px-3 py-1 font-semibold transition hover:border-amber-500 hover:text-amber-800 disabled:cursor-not-allowed disabled:border-amber-200 disabled:text-amber-300"
             {% if roasters.has_next() %}
-            data-on:click="@get('{{ navigator.fragment_page_href(roasters.next_page().unwrap()) }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
+            data-on:click="history.pushState(null, '', '{{ navigator.page_href(roasters.next_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(roasters.next_page().unwrap())|safe }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
             {% else %}
             disabled
             {% endif %}
@@ -54,13 +54,13 @@
           <span>Rows</span>
           <select
             class="rounded-md border border-amber-300 bg-white px-2 py-1 text-xs font-semibold text-amber-800 transition hover:border-amber-400"
-            data-on:change="@get(evt.target.selectedOptions[0].dataset.href, {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
+            data-on:change="history.pushState(null, '', evt.target.selectedOptions[0].dataset.url); @get(evt.target.selectedOptions[0].dataset.href, {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
           >
-            <option value="5" data-href="{{ navigator.fragment_rows_href("5") }}" {% if roasters.is_page_size(5) %}selected{% endif %}>5</option>
-            <option value="10" data-href="{{ navigator.fragment_rows_href("10") }}" {% if roasters.is_page_size(10) %}selected{% endif %}>10</option>
-            <option value="20" data-href="{{ navigator.fragment_rows_href("20") }}" {% if roasters.is_page_size(20) %}selected{% endif %}>20</option>
-            <option value="50" data-href="{{ navigator.fragment_rows_href("50") }}" {% if roasters.is_page_size(50) %}selected{% endif %}>50</option>
-            <option value="all" data-href="{{ navigator.fragment_rows_href("all") }}" {% if roasters.is_showing_all() %}selected{% endif %}>All</option>
+            <option value="5" data-href="{{ navigator.fragment_rows_href("5")|safe }}" data-url="{{ navigator.rows_href("5")|safe }}" {% if roasters.is_page_size(5) %}selected{% endif %}>5</option>
+            <option value="10" data-href="{{ navigator.fragment_rows_href("10")|safe }}" data-url="{{ navigator.rows_href("10")|safe }}" {% if roasters.is_page_size(10) %}selected{% endif %}>10</option>
+            <option value="20" data-href="{{ navigator.fragment_rows_href("20")|safe }}" data-url="{{ navigator.rows_href("20")|safe }}" {% if roasters.is_page_size(20) %}selected{% endif %}>20</option>
+            <option value="50" data-href="{{ navigator.fragment_rows_href("50")|safe }}" data-url="{{ navigator.rows_href("50")|safe }}" {% if roasters.is_page_size(50) %}selected{% endif %}>50</option>
+            <option value="all" data-href="{{ navigator.fragment_rows_href("all")|safe }}" data-url="{{ navigator.rows_href("all")|safe }}" {% if roasters.is_showing_all() %}selected{% endif %}>All</option>
           </select>
         </label>
       </div>
@@ -78,7 +78,7 @@
               <button
                 type="button"
                 class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
-                data-on:click="@get('{{ navigator.fragment_sort_href("created-at") }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
+                data-on:click="history.pushState(null, '', '{{ navigator.sort_href("created-at")|safe }}'); @get('{{ navigator.fragment_sort_href("created-at")|safe }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
               >
                 <span>Added</span>
                 {% if created_sorted %}
@@ -101,7 +101,7 @@
               <button
                 type="button"
                 class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
-                data-on:click="@get('{{ navigator.fragment_sort_href("name") }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
+                data-on:click="history.pushState(null, '', '{{ navigator.sort_href("name")|safe }}'); @get('{{ navigator.fragment_sort_href("name")|safe }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
               >
                 <span>Name</span>
                 {% if name_sorted %}
@@ -124,7 +124,7 @@
               <button
                 type="button"
                 class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
-                data-on:click="@get('{{ navigator.fragment_sort_href("country") }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
+                data-on:click="history.pushState(null, '', '{{ navigator.sort_href("country")|safe }}'); @get('{{ navigator.fragment_sort_href("country")|safe }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
               >
                 <span>Country</span>
                 {% if country_sorted %}
@@ -147,7 +147,7 @@
               <button
                 type="button"
                 class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
-                data-on:click="@get('{{ navigator.fragment_sort_href("city") }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
+                data-on:click="history.pushState(null, '', '{{ navigator.sort_href("city")|safe }}'); @get('{{ navigator.fragment_sort_href("city")|safe }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
               >
                 <span>City</span>
                 {% if city_sorted %}