Day at a Glance: time-aware enhancement#10
Conversation
Rebuilt experiment with full 9am-5pm workday schedule (8 events, no gaps). Added dynamic now-line that tracks current time with 60s interval updates, partial color fill on the current hour's event bar using CSS linear-gradient, and auto-dimming of past hour rows. - Replaced static events with workday tasks (standup, deep work, sprint planning, lunch, design review, docs, client call, code review) - Added 4 new color classes (pink, green, teal, orange, indigo) - Today's date displayed in header - Fixed hydration mismatch by deferring time state to useEffect - Added checkbox accessibility (role, aria-checked, keyboard support) - Removed dead .now-time CSS rule Fixes #9 Co-Authored-By: Claude <noreply@anthropic.com>
Moved day-at-a-glance to first position in both the design experiments gallery and README with updated date (Feb 12) and description reflecting the time-aware enhancement. Added step 5 to shipit skill: when shipping work that modifies an existing experiment, re-sort it to the top of both listing files with updated date and description. Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 3 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
This is the final PR Bugbot will review for you during this billing cycle
Your free Bugbot reviews will reset on March 11
Details
You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
| setCurrentMinute(minute); | ||
|
|
||
| if (hour >= 9 && hour < 17) { | ||
| setNowPosition((hour - 9) * 100 + (minute / 60) * 100 + 2); |
There was a problem hiding this comment.
Now-line and fill use different scales
Medium Severity
nowPosition is computed with a 100px-per-hour scale, but the current-hour split in barStyle uses fillPct across the 80px .event-bar. This makes the now-line drift away from the gradient boundary, especially near hour start/end, so the two indicators no longer represent the same time.
Additional Locations (1)
| ); | ||
|
|
||
| updateTime(); | ||
| const interval = setInterval(updateTime, 60000); |
There was a problem hiding this comment.
Clock updates drift from real minute boundaries
Medium Severity
setInterval(updateTime, 60000) runs relative to mount time, not wall-clock minute boundaries. If the page loads mid-minute, currentHour and currentMinute stay stale until the next interval tick, so now-line, current-event split, and past/future styling can be wrong for up to almost a minute each hour.
Additional Locations (1)
| month: 'short', | ||
| day: 'numeric', | ||
| }) | ||
| ); |
There was a problem hiding this comment.
Date label becomes stale after midnight
Low Severity
todayDate is set once in useEffect and never refreshed. If the page remains open across midnight, the displayed date in today-date no longer matches the actual day while the rest of the timeline continues updating.
Additional Locations (1)
Adds use_sticky_comment: true so the review summary appears as a visible PR comment instead of being buried in the check details tab. Co-Authored-By: Claude <noreply@anthropic.com>
1 participant
Summary
Test plan
🤖 Generated with Claude Code
Note
Medium Risk
Moderate UI behavior change that introduces time-based state and interval updates in a client component; main risk is visual/logic regressions (now-line position, past/current styling, hydration).
Overview
Updates the
Day at a Glanceexperiment to be time-aware. The timeline is rebuilt around a 9–5 events array, computes the current time on a 60s interval, renders a dynamicnow-line, dims past rows, and uses an inlinelinear-gradientto partially fill the current hour’s bar.Adds accessibility to the interactive checkboxes (keyboard +
role/aria-checked) and updates styling to support the expanded color set plus a new header date label.Reorders/refreshes the experiment listing and copy in
README.mdandapp/design-experiments/page.tsx, logs the milestone indocs/01-progress.md, and tweaks the Claude review workflow to use sticky PR comments (.github/workflows/claude.yml).Written by Cursor Bugbot for commit 2226891. This will update automatically on new commits. Configure here.