History: the page number is a picker — jump straight to any page.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Tmfg8k5f3TbNJS34qiqHAp

2 files changed, 6 insertions, 1 deletions

diff --git a/src/app.js b/src/app.js
index 1baf9db..96f47f9 100644
--- a/src/app.js
+++ b/src/app.js
@@ -5201,7 +5201,11 @@ function pager(page, total, onPage) {
   if (pages <= 1) return null;
   return h('div', { class: 'row between', style: 'align-items:center;padding-top:10px' },
     h('button', { class: 'btn-sm', onClick: () => onPage((page - 1 + pages) % pages) }, t('prevPage')),
-    h('span', { class: 'small muted' }, t('pageXofY', { x: page + 1, y: pages })),
+    // the page number is a picker: forty pages is a long swipe to the middle
+    h('select', {
+      class: 'small muted page-pick', 'aria-label': t('pageXofY', { x: page + 1, y: pages }),
+      onChange: (e) => onPage(parseInt(e.target.value, 10) || 0),
+    }, ...Array.from({ length: pages }, (_, i) => h('option', { value: String(i), selected: i === page }, t('pageXofY', { x: i + 1, y: pages })))),
     h('button', { class: 'btn-sm', onClick: () => onPage((page + 1) % pages) }, t('nextPage'))
   );
 }
diff --git a/src/style.css b/src/style.css
index bd7a20a..1588956 100644
--- a/src/style.css
+++ b/src/style.css
@@ -188,6 +188,7 @@ input { scroll-margin-top: 12px; }
 .balance .split .v.pending { color: var(--accent-ink); }
 
 /* ---- tabs ---- */
+.page-pick { width: auto; padding: 6px 28px 6px 10px; font-size: 13px; border-radius: 9px; background-color: var(--paper); }
 .tabs { display: flex; gap: 4px; background: var(--tab-bg); border: 1px solid var(--tab-border); border-radius: 12px; padding: 4px; margin: 16px 0; }
 .tabs button {
   flex: 1; border: 0; background: transparent; padding: 9px 4px; border-radius: 9px;