feat: simplify the date picking usage when a user schedules an email and remove premature "in the past" warning#1983
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughRefactors ScheduleSendPicker into a two-panel date/time flow with separate popovers and validation, syncing internal state to prop changes. Introduces a stateful Calendar with custom month/year controls and a new yearRange prop. Calendar public types updated; ScheduleSendPicker public props unchanged. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant SSP as ScheduleSendPicker
participant Cal as Calendar Popover
participant TI as Time Input Popover
participant P as Parent(onChange)
U->>SSP: Click "Send later"
SSP->>Cal: Open date popover
U->>Cal: Pick date
Cal-->>SSP: selectedDate
SSP->>TI: Open time popover
U->>TI: Enter HH:mm
TI-->>SSP: time
SSP->>SSP: Validate (not in past)
alt valid
SSP->>P: onChange(ISO datetime)
else invalid
SSP->>U: Toast: reject past time
end
sequenceDiagram
participant U as User
participant C as Calendar
participant DP as DayPicker
U->>C: Change month select
C->>C: setMonth(currentMonth, index)
C->>DP: update displayMonth
U->>C: Change year select
C->>C: setYear(currentMonth, year)
C->>DP: update displayMonth
U->>C: Click nav buttons
C->>C: add/subMonths
C->>DP: update displayMonth
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
coderabbitai
bot
added
design
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
cubic analysis
3 issues found across 2 files • Review in cubic
React with 👍 or 👎 to teach cubic. You can also tag @cubic-dev-ai to give feedback, ask questions, or re-run the review.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
apps/mail/components/create/schedule-send-picker.tsx(2 hunks)apps/mail/components/ui/calendar.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{css,js,ts,jsx,tsx,mdx}
📄 CodeRabbit Inference Engine (.cursor/rules/tailwind-css-v4.mdc)
**/*.{css,js,ts,jsx,tsx,mdx}: Chain variants together for composable variants (e.g.,group-has-data-potato:opacity-100).
Use new variants such asstarting,not-*,inert,nth-*,in-*,open(for:popover-open), and**for all descendants.
Do not use deprecated utilities likebg-opacity-*,text-opacity-*,border-opacity-*, anddivide-opacity-*; use the new syntax (e.g.,bg-black/50).
Use renamed utilities:shadow-smis nowshadow-xs,shadowis nowshadow-sm,drop-shadow-smis nowdrop-shadow-xs,drop-shadowis nowdrop-shadow-sm,blur-smis nowblur-xs,bluris nowblur-sm,rounded-smis nowrounded-xs,roundedis nowrounded-sm,outline-noneis nowoutline-hidden.
Usebg-(--brand-color)syntax for CSS variables in arbitrary values instead ofbg-[--brand-color].
Stacked variants now apply left-to-right instead of right-to-left.
Files:
apps/mail/components/ui/calendar.tsxapps/mail/components/create/schedule-send-picker.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (AGENT.md)
**/*.{js,jsx,ts,tsx}: Use 2-space indentation
Use single quotes
Limit lines to 100 characters
Semicolons are required
Files:
apps/mail/components/ui/calendar.tsxapps/mail/components/create/schedule-send-picker.tsx
**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit Inference Engine (AGENT.md)
Use Prettier with sort-imports and Tailwind plugins
Files:
apps/mail/components/ui/calendar.tsxapps/mail/components/create/schedule-send-picker.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (AGENT.md)
Enable TypeScript strict mode
Files:
apps/mail/components/ui/calendar.tsxapps/mail/components/create/schedule-send-picker.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: retrogtx
PR: Mail-0/Zero#1573
File: apps/mail/components/create/template-button.tsx:197-216
Timestamp: 2025-07-28T05:37:50.566Z
Learning: retrogtx prefers less nitpicky code review suggestions and may dismiss detailed accessibility/best practice recommendations with casual responses like "bro please".
📚 Learning: 2025-06-28T03:56:09.376Z
Learnt from: retrogtx
PR: Mail-0/Zero#1468
File: apps/server/src/trpc/routes/mail.ts:331-331
Timestamp: 2025-06-28T03:56:09.376Z
Learning: In apps/server/src/trpc/routes/mail.ts, the user indicated they are not using ISO format for the scheduleAt parameter, despite the frontend code showing toISOString() usage in the ScheduleSendPicker component.
Applied to files:
apps/mail/components/create/schedule-send-picker.tsx
🧬 Code Graph Analysis (2)
apps/mail/components/ui/calendar.tsx (2)
apps/mail/lib/utils.ts (1)
cn(56-56)apps/mail/components/icons/icons.tsx (2)
ChevronLeft(818-833)ChevronRight(835-850)
apps/mail/components/create/schedule-send-picker.tsx (4)
apps/mail/lib/utils.ts (1)
cn(56-56)apps/mail/components/ui/calendar.tsx (1)
Calendar(133-133)apps/mail/components/icons/icons.tsx (1)
Clock(1615-1632)apps/mail/components/ui/input.tsx (1)
Input(22-22)
🪛 Biome (2.1.2)
apps/mail/components/ui/calendar.tsx
[error] 76-82: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
[error] 115-121: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: cubic · AI code reviewer
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (1)
apps/mail/components/create/schedule-send-picker.tsx (1)
138-208: Clean implementation of the two-panel flowThis is exactly what we need - separate, focused controls for date and time. Like having separate controls for steering and acceleration. The Cancel button properly cleans up state too. Ship it!
…nd picker and calendar components
|
@MrgSub this is done btw |
3 participants
Summary by cubic
Simplified the email scheduling flow by splitting date and time selection, and removed the early "in the past" warning to make scheduling clearer.
Summary by CodeRabbit
New Features
Bug Fixes