feat(timeline): add day-jump toolbar with dated labels by chiptus · Pull Request #202 · chiptus/UpLine

chiptus · 2026-07-14T18:43:06Z

Adds a slim sticky toolbar above the Timeline strip with one button per festival day (weekday + date, e.g. "Thu 13"). Tapping a day writes scrollTo and smooth-scrolls the strip to that day's first set, via a new jumpTo(moment: Date) returned from useTimelineScrollSync.

Design notes: the day list comes from the unfiltered scheduleDays (from useScheduleData) so it reflects the actual festival-timezone days; when a day filter is active only that day's button renders (nav operates on what's rendered, never filters). The jump target is the day's earliest set start (falling back to festival-timezone midnight for a dayless day) since that's what a viewer actually wants centered. jumpTo writes scrollTo immediately via history replace and relies on the existing scroll debounce to settle on the same value once the smooth-scroll animation finishes — no new suppression state needed.

Stacked on #192 (claude/188-192-scrollto-url-state) — this PR's diff is scoped to the day-jump toolbar; #192's changes will disappear from the diff once that PR merges.

Closes #193

Verification

Open the timeline: a sticky toolbar renders above the strip with one button per festival day, labeled e.g. "Sat 12", "Sun 13", "Mon 14".
Click a day button: the strip smooth-scrolls to that day's first set and the URL gains a scrollTo param.
Apply a day filter (e.g. via the existing day select): only that day's button remains in the toolbar.
Scroll the toolbar does not visually collide with the sticky time-axis date labels in TimeScale.tsx.
pnpm run lint, pnpm run typecheck, and pnpm vitest run all pass.

Generated by Claude Code

Extract timeToOffset/offsetToTime as the single place the 2px/minute timeline scale lives; TimeScale and set positioning now consume them instead of re-deriving the 2/120 constants. Closes #191

differenceInMinutes truncates to whole minutes, so timeToOffset and offsetToTime did not round-trip for sub-minute moments. Base the conversion on epoch milliseconds; output is unchanged for whole-minute inputs. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AziTqr3f12fxALYD6jhrW8

Add a scrollTo search param that captures the moment centered in the Timeline viewport. A pure resolveTimelineMountMoment precedence function (scrollTo -> day filter -> festival start) decides where to center on mount; useTimelineScrollSync owns that one-time centering plus debounced (~300ms), 5-minute-rounded, history-replace writes on user scroll. useTimelineUrlState now selects its filter params with structural sharing so scrollTo writes don't recompute the filtered schedule. Closes #192 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AziTqr3f12fxALYD6jhrW8

…' into claude/188-192-scrollto-url-state

Sticky toolbar above the Timeline strip with one button per festival day (weekday + date, e.g. "Thu 13"). Tapping a day writes scrollTo and smooth-scrolls to that day's first set, via a new jumpTo(moment) on useTimelineScrollSync. When a day filter is active, only that day's button renders. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AziTqr3f12fxALYD6jhrW8

qodo-code-review · 2026-07-14T18:43:10Z

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

vercel · 2026-07-14T18:43:12Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
upline	Ready	Preview, Comment	Jul 16, 2026 2:23pm

Position-based suppression of programmatic scroll events (a browser may fire more than one per scrollLeft write), and the back-restore e2e half now skips explicitly instead of silently passing when no set link is rendered. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AziTqr3f12fxALYD6jhrW8

…e' into claude/188-193-day-jump-toolbar

When a day jump clamps at the strip start (first festival day), the requested moment is unreachable and the debounced post-scroll write would silently replace scrollTo with a different value. Write the clamped center moment up front so the URL never drifts; e2e now asserts write stability and covers the first-day clamp. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AziTqr3f12fxALYD6jhrW8

Also drops a redundant schema comment, per review. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AziTqr3f12fxALYD6jhrW8

chiptus · 2026-07-15T19:37:25Z

 *   - On user scroll: after the scroll settles (~300ms), writes the moment
 *     now centered in the viewport back to the URL (history replace),
 *     rounded to 5-minute granularity.
+ *   - On demand, via the returned `jumpTo(moment)`: writes `scrollTo`


This comment is way too long. What can we do to simplify it? Is that code very complex that requires a long comment?

chiptus · 2026-07-15T19:38:38Z

+
+const TIMEZONE = "Europe/Lisbon"; // UTC+1 in July (WEST)
+
+function buildDay(


Helpers in the bottom. Make sure for other prs too

chiptus · 2026-07-15T19:40:33Z

+import type { ScheduleDay } from "@/hooks/useScheduleData";
+
+/**
+ * The moment the timeline viewport should center on when jumping to a day


Review all comments in this pr, do we need the long comments?

chiptus · 2026-07-15T19:42:07Z

+        data-testid="timeline-scroll-container"
+        className="overflow-x-auto overflow-y-hidden pb-20"
+      >
+        {/* Time Scale */}


Remove comment

The browser clamps scrollLeft to the scrollable range, so the suppression ref must record the read-back value, not the requested target, for the scroll handler to recognize the mount event. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AziTqr3f12fxALYD6jhrW8

…e' into claude/188-193-day-jump-toolbar

Per review: shorter docblocks on the scroll-sync hook, toolbar, and day-jump helper; JSX section comments removed; test helpers moved below the cases. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AziTqr3f12fxALYD6jhrW8

…e' into claude/188-193-day-jump-toolbar # Conflicts: # src/hooks/useTimelineScrollSync.ts # src/hooks/useTimelineUrlState.ts # src/lib/timelineCalculator.test.ts # src/pages/EditionView/tabs/ScheduleTab/horizontal/TimelineContainer.tsx

claude added 5 commits July 14, 2026 18:20

refactor(timeline): geometry owns time-pixel mapping

8975e81

Extract timeToOffset/offsetToTime as the single place the 2px/minute timeline scale lives; TimeScale and set positioning now consume them instead of re-deriving the 2/120 constants. Closes #191

Merge remote-tracking branch 'origin/claude/188-191-timeline-geometry…

ae0fbf4

…' into claude/188-192-scrollto-url-state

vercel Bot deployed to Preview July 14, 2026 18:43 View deployment

claude added 2 commits July 14, 2026 18:46

Merge remote-tracking branch 'origin/claude/188-192-scrollto-url-stat…

e02e5b6

…e' into claude/188-193-day-jump-toolbar

vercel Bot deployed to Preview July 14, 2026 18:47 View deployment

vercel Bot deployed to Preview July 14, 2026 18:54 View deployment

test(timeline): drive debounce waits with playwright fake clock

1ede017

Also drops a redundant schema comment, per review. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AziTqr3f12fxALYD6jhrW8

chiptus commented Jul 15, 2026

View reviewed changes

claude added 3 commits July 15, 2026 19:43

Merge remote-tracking branch 'origin/claude/188-192-scrollto-url-stat…

c22ed66

…e' into claude/188-193-day-jump-toolbar

vercel Bot deployed to Preview July 15, 2026 19:47 View deployment

chiptus force-pushed the claude/188-192-scrollto-url-state branch from 5fcab7c to acf2265 Compare July 16, 2026 14:17

vercel Bot deployed to Preview July 16, 2026 14:23 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(timeline): add day-jump toolbar with dated labels#202

feat(timeline): add day-jump toolbar with dated labels#202
chiptus wants to merge 13 commits into
claude/188-192-scrollto-url-statefrom
claude/188-193-day-jump-toolbar

chiptus commented Jul 14, 2026

Uh oh!

qodo-code-review Bot commented Jul 14, 2026

Uh oh!

vercel Bot commented Jul 14, 2026 •

edited

Loading

Uh oh!

chiptus Jul 15, 2026

Uh oh!

chiptus Jul 15, 2026

Uh oh!

chiptus Jul 15, 2026

Uh oh!

chiptus Jul 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		const TIMEZONE = "Europe/Lisbon"; // UTC+1 in July (WEST)

		function buildDay(

Conversation

chiptus commented Jul 14, 2026

Verification

Uh oh!

qodo-code-review Bot commented Jul 14, 2026

Qodo reviews are paused for this user.

Uh oh!

vercel Bot commented Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chiptus Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

chiptus Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

chiptus Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

chiptus Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel Bot commented Jul 14, 2026 •

edited

Loading