From 924040f3562502699d924caff4b34516a6beb87d Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Mon, 21 Sep 2026 16:30:23 -0700 Subject: History: the page number is a picker — jump straight to any page. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01Tmfg8k5f3TbNJS34qiqHAp --- src/app.js | 6 +++++- src/style.css | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) (limited to 'src') 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; -- cgit v1.2.3