feat(calendar): add day mode #337
Conversation
📝 WalkthroughWalkthroughThis PR introduces a new day calendar view feature that displays an hourly timeline with DST handling, date-picker sidebar, and occurrence/note management. It includes the new DayCalendar component, supporting page and routing, a shared useCurrentTime hook, and navigation buttons in existing month/week calendar views to link to the day view. Changes
Sequence DiagramsequenceDiagram
actor User
participant Calendar as Day Calendar UI
participant DatePicker as Date Picker<br/>(Sidebar)
participant Timeline as Hourly Timeline
participant Drawer as Note/Occurrence<br/>Drawer
User->>Calendar: Navigate to /calendar/day/:year/:month/:day
Calendar->>DatePicker: Sync focusedDate from URL (or use today)
Calendar->>Timeline: Fetch occurrences & notes for focused date
Calendar->>Timeline: Compute DST type & transition hour
Calendar->>Timeline: Group occurrences by hour & habit
Timeline->>Timeline: Mark skipped/duplicated hours (if DST)
Calendar->>Timeline: Render hourly slots (0-23) with occurrences
User->>DatePicker: Select different date
DatePicker->>Calendar: Update focusedDate & URL params
Calendar->>Timeline: Refresh occurrences for new date
User->>Timeline: Click "Add note" or "Log occurrence"
Timeline->>Drawer: Open note/occurrence drawer
User->>Drawer: Create/edit entry
Drawer->>Calendar: Save & refresh display
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
#190 Bundle Size — 1.84MiB (+0.53%).5d9e68e(current) vs ef0520a main#189(baseline) Warning Bundle contains 2 duplicate packages – View duplicate packages Bundle metrics
|
| Current #190 |
Baseline #189 |
|
|---|---|---|
 Initial JS |
1.09MiB(+0.72%) |
1.08MiB |
 Initial CSS |
0B |
0B |
 Cache Invalidation |
100% |
87.06% |
| Chunks |
8 |
8 |
| Assets |
9 |
9 |
| Modules |
6676(+0.04%) |
6673 |
| Duplicate Modules |
0 |
0 |
| Duplicate Code |
0% |
0% |
| Packages |
223 |
223 |
| Duplicate Packages |
2 |
2 |
Bundle size by type 2 changes 2 regressions
| Current #190 |
Baseline #189 |
|
|---|---|---|
| JS |
1.6MiB (+0.58%) |
1.59MiB |
| CSS |
242.75KiB (+0.22%) |
242.22KiB |
Bundle analysis report Branch feat/day-calendar Project dashboard
Generated by RelativeCI Documentation Report issue
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/components/calendar/DayCalendar.tsx`:
- Around line 67-71: Validate the URL params before constructing CalendarDate:
ensure year, month, day (the route params used to create paramsDate) are numeric
and within valid ranges (e.g., month 1–12, day 1–31 or use a month/day check) or
wrap the new CalendarDate(Number(year), Number(month), Number(day)) call in a
try-catch; on invalid input or exception, fall back to a safe value (e.g.,
today's date) or redirect to a canonical calendar route and log/handle the error
so CalendarDate construction in DayCalendar.tsx cannot throw for malformed
params.
🧹 Nitpick comments (2)
src/components/calendar/DayCalendar.tsx (1)
58-76: Potential infinite loop risk in URL parameter sync effect.Including
focusedDatein the dependency array while also callingsetFocusedDateinside the effect can cause unnecessary re-renders. WhenfocusedDateupdates, the effect runs again, even though the params haven't changed.Consider removing
focusedDatefrom the dependency array and using a ref or comparing only param values:♻️ Suggested refactor
React.useEffect(() => { const currentDay = today(timeZone); const { day = currentDay.day, month = currentDay.month, year = currentDay.year, } = params; const paramsDate = new CalendarDate( Number(year), Number(month), Number(day) ); - if (focusedDate.toString() !== paramsDate.toString()) { - setFocusedDate(toCalendarDate(paramsDate)); - } - }, [params, timeZone, focusedDate]); + setFocusedDate((prev) => { + if (prev.toString() !== paramsDate.toString()) { + return toCalendarDate(paramsDate); + } + return prev; + }); + }, [params, timeZone]);src/hooks/use-current-time.ts (1)
8-16: Consider synchronizing the interval with clock minutes.The current implementation starts the 60-second interval immediately on mount, which means the time could be up to 59 seconds out of sync if the component mounts mid-minute. For a current-time indicator, this might cause the indicator to appear misaligned briefly.
♻️ Optional: Sync to minute boundary
React.useEffect(() => { + // Update immediately at next minute boundary, then every 60s + const msUntilNextMinute = (60 - new Date().getSeconds()) * 1000; + const timeout = setTimeout(() => { + setNow(new Date()); + // Then set up the regular interval + }, msUntilNextMinute); + const interval = setInterval(() => { setNow(new Date()); }, 60_000); return () => { + clearTimeout(timeout); clearInterval(interval); }; }, []);This is a minor UX enhancement and can be deferred if not needed.
| const paramsDate = new CalendarDate( | ||
| Number(year), | ||
| Number(month), | ||
| Number(day) | ||
| ); |
There was a problem hiding this comment.
Consider validating URL parameters before constructing CalendarDate.
If a user manually enters invalid URL parameters (e.g., /calendar/day/2026/13/45), the CalendarDate constructor may throw an error. Adding basic validation or a try-catch would improve robustness.
🛡️ Suggested defensive handling
+ try {
const paramsDate = new CalendarDate(
Number(year),
Number(month),
Number(day)
);
+ setFocusedDate((prev) => {
+ if (prev.toString() !== paramsDate.toString()) {
+ return toCalendarDate(paramsDate);
+ }
+ return prev;
+ });
+ } catch {
+ // Invalid date params, keep current date
+ }🤖 Prompt for AI Agents
In `@src/components/calendar/DayCalendar.tsx` around lines 67 - 71, Validate the
URL params before constructing CalendarDate: ensure year, month, day (the route
params used to create paramsDate) are numeric and within valid ranges (e.g.,
month 1–12, day 1–31 or use a month/day check) or wrap the new
CalendarDate(Number(year), Number(month), Number(day)) call in a try-catch; on
invalid input or exception, fall back to a safe value (e.g., today's date) or
redirect to a canonical calendar route and log/handle the error so CalendarDate
construction in DayCalendar.tsx cannot throw for malformed params.
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.