feat(ui): replace the jump-to-date native picker with a custom calendar (LC-386) #396

Merged

longjacksonle merged 1 commit from feat/lc-386-jumpdate into main

2026-06-20 04:12:32 +02:00

longjacksonle commented

2026-06-20 04:12:07 +02:00

Owner

Closes LC-386. Part of the LC-383 room-polish-2 epic (the data/room2.png jump-to-date issue).

Problem

The jump-to-date popover used a native <input type="date"> and called showPicker(), so the browser's own calendar opened wherever it liked (top-left in room1.png, far from the icon) and clashed with the room search and the tooltip; the mm/dd/yyyy field looked out of place.

Fix: custom month-grid calendar

Built client-side by auto_scroll.html, fully under our control:

Prev/next month nav (disabled past the available range), a localized weekday header + month label (via Intl), day cells constrained to [min, max] of the loaded history with today marked, and real Today / Clear buttons.
The popover is anchored under the calendar icon with a token border, rounded-lg, shadow-lg, role="dialog", correct z-index, and dismisses on outside-click / Escape.
Picking a day keeps the exact same behavior as before: scroll to the first message on/after that day (lexical compare on data-lc-day) and flash it - no server round trip.

i18n / tests

Four new keys (today / clear / prev / next) added to en + es, interpolated into the script from the catalog.
Not part of the LC-77 message fixtures, so none needed regenerating.
./dev/cargo check, just build-css, just test, just test-saas - all green.

🤖 Generated with Claude Code

Closes LC-386. Part of the LC-383 room-polish-2 epic (the `data/room2.png` jump-to-date issue). ## Problem The jump-to-date popover used a native `<input type="date">` and called `showPicker()`, so the **browser's own calendar opened wherever it liked** (top-left in `room1.png`, far from the icon) and clashed with the room search and the tooltip; the `mm/dd/yyyy` field looked out of place. ## Fix: custom month-grid calendar Built client-side by `auto_scroll.html`, fully under our control: - Prev/next month nav (disabled past the available range), a **localized** weekday header + month label (via `Intl`), day cells constrained to `[min, max]` of the loaded history with **today** marked, and real **Today / Clear** buttons. - The popover is anchored under the calendar icon with a token border, `rounded-lg`, `shadow-lg`, `role="dialog"`, correct z-index, and dismisses on outside-click / Escape. - Picking a day keeps the **exact same** behavior as before: scroll to the first message on/after that day (lexical compare on `data-lc-day`) and flash it - no server round trip. ## i18n / tests - Four new keys (today / clear / prev / next) added to `en` + `es`, interpolated into the script from the catalog. - Not part of the LC-77 message fixtures, so none needed regenerating. - `./dev/cargo check`, `just build-css`, `just test`, `just test-saas` - all green. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

longjacksonle added 1 commit

2026-06-20 04:12:07 +02:00

feat(ui): replace the jump-to-date native picker with a custom calendar (LC-386)

check-secrets / Nosey parker (push) Successful in 3s

Details

check-secrets / TruffleHog (pull_request) Successful in 4s

Details

check-secrets / TruffleHog (push) Successful in 4s

Details

check-secrets / Nosey parker (pull_request) Successful in 5s

Details

check-secrets / Kingfisher (push) Successful in 6s

Details

check-secrets / Kingfisher (pull_request) Successful in 7s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

Check / clippy + fmt + tests (pull_request) Successful in 3m34s

Details

b29c1beaca

The jump-to-date popover used a native <input type="date"> and called showPicker(), so the browser's own calendar opened wherever it liked (top-left, far from the icon) and clashed with the room search and the tooltip; the mm/dd/yyyy field looked out of place.

Replace it with a compact custom month-grid calendar built client-side by auto_scroll.html: prev/next month nav (disabled past the available range), a localized weekday header + month label (via Intl), day cells constrained to [min,max] of the loaded history with today marked, and real Today / Clear buttons. The popover is anchored under the calendar icon with a token border, rounded-lg, and shadow-lg, role="dialog", correct z-index, and dismisses on outside-click / Escape. Picking a day keeps the exact same client-side behavior as before: scroll to the first message on/after that day (lexical compare on data-lc-day) and flash it - no server round trip.

Four new i18n keys (today / clear / prev / next) added to en + es, interpolated into the script from the catalog. The jump-to-date control is not part of the LC-77 message fixtures, so none needed regenerating.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>