"Show Best Time" toggle for TuMeet #3330
Conversation
- Added a toggle to show only the best available times based on user availability. - Updated components to support best times status tracking and display. - Refactored related components to integrate the new feature seamlessly. - Improved user experience with tooltips and alerts for better clarity on best times functionality.
🔧 Biome Check ReportIssues Found: 0📊 Analysis Summary
🔍 Issue Breakdown
🎉 All Issues Resolved!Your code is now 100% clean! Great job! 🏆
🤖 Auto-generated by Biome Check workflow • Last updated: 7/24/2025, 12:38:27 PM
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
WalkthroughThis update introduces a "Show Only Best Times" feature to the Meet Together plan UI, propagating new props and logic through several React components to enable filtering and highlighting of time slots with maximum user availability. Type definitions and UI elements are updated accordingly, alongside minor refactors and import adjustments. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PlanDetailsClient
participant AllAvailabilities
participant DatePlanner
participant DayPlanners
participant DayPlanner
participant PreviewDayTime
User->>PlanDetailsClient: Toggle "Show Only Best Times"
PlanDetailsClient->>AllAvailabilities: showBestTimes, onBestTimesStatusByDateAction
AllAvailabilities->>DatePlanner: showBestTimes, onBestTimesStatusByDateAction
DatePlanner->>DayPlanners: showBestTimes, onBestTimesStatusByDateAction
DayPlanners->>DayPlanner: showBestTimes, globalMaxAvailable, onBestTimesStatus
DayPlanner->>PreviewDayTime: showBestTimes, globalMaxAvailable, onBestTimesStatus
PreviewDayTime-->>DayPlanner: Notify if best times found
DayPlanner-->>DayPlanners: Notify if best times found
DayPlanners-->>PlanDetailsClient: Update bestTimesStatusByDate
PlanDetailsClient-->>User: Show/hide warning or update UI
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (6)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (5)
⏰ 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). (6)
✨ 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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @VNOsST, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request introduces a significant new feature to the TuMeet application: a 'Show Best Time' toggle. This allows users to quickly identify optimal meeting slots by highlighting periods when the most participants are available. The changes involve adding new UI elements, implementing complex client-side logic for best time calculation and visualization, and passing state through several nested components to support this functionality. A new utility function for best time calculation has also been added.
Highlights
- Core Feature: "Show Best Time" Toggle: A new UI toggle has been added to the plan details page, allowing users to filter the availability view to show only the 'best times' for a meeting. This feature is designed to help identify optimal meeting slots by highlighting periods with maximum participant availability.
- Client-Side Best Time Calculation & Visualization: The
PreviewDayTimecomponent now includes sophisticated client-side logic to identify and visually highlight time slots where the maximum number of participants are available. This calculation focuses on finding the longest contiguous blocks of 15-minute slots that meet a minimum availability threshold (more than 2 people). - Conditional Feature Behavior & User Experience: The 'Show Best Time' feature is automatically disabled when user-specific filters are active, as the concept of 'best time' is most relevant for group availability. Additionally, a clear warning message is displayed if no 'best times' are found for a plan, guiding users on how to proceed. A detailed tooltip explains the feature's criteria.
- New Utility for Best Time Calculation: A new
getBestMeetingTimeshelper function has been added totimeblock-helper.tsto programmatically determine optimal meeting slots based on user availability and time ranges. This utility is currently separate from the client-side highlighting logic implemented inPreviewDayTime. - Component Prop Drilling for State Management: The
showBestTimesstate and related callbacks (onBestTimesStatus,onBestTimesStatusByDateAction) are now passed down through multiple nested components (AllAvailabilities,DatePlanner,DayPlanners,DayPlanner,DayTime) to enable the feature's functionality and update parent components on best time status.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #3330 +/- ##
========================================
Coverage 1.49% 1.49%
========================================
Files 1918 1918
Lines 248066 248295 +229
Branches 2598 2602 +4
========================================
+ Hits 3711 3718 +7
- Misses 242789 243011 +222
Partials 1566 1566 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Code Review
This pull request introduces a "Show Best Time" toggle to the meeting plan page, adding logic to calculate and highlight the best time slots based on user availability. The changes span multiple components to pass down props and state for this new feature.
My review focuses on improving code quality and performance by addressing several points:
- React Best Practices: There are opportunities to fix side effects in render functions, optimize component re-rendering by memoizing callbacks, and correct
useEffectdependency arrays. - UI/Logic Consistency: I've noted a minor UI style regression and a mismatch between a tooltip's description and the underlying implementation logic.
- Code Health: There appears to be some unused code in a helper file that could be removed.
Addressing these suggestions will improve the feature's stability, performance, and maintainability.
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/day-planners.tsx
Outdated
Show resolved
Hide resolved
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/plan-details-client.tsx
Outdated
Show resolved
Hide resolved
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/preview-day-time.tsx
Outdated
Show resolved
Hide resolved
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/account-badge.tsx
Outdated
Show resolved
Hide resolved
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/day-planners.tsx
Outdated
Show resolved
Hide resolved
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/day-planners.tsx
Outdated
Show resolved
Hide resolved
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/preview-day-time.tsx
Outdated
Show resolved
Hide resolved
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ |
![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
♻️ Duplicate comments (8)
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/account-badge.tsx (1)
20-20: Gradient no longer visible –text-transparentclass was removedRemoving
text-transparentprevents the gradient applied viabg-clip-textfrom showing through the glyphs; the text will render solid white instead of the intended gradient. Please restore the class.- <span className={`bg-linear-to-r bg-clip-text text-white`}> + <span className={`bg-linear-to-r bg-clip-text text-transparent text-white`}>apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/day-planners.tsx (3)
4-4: ImportuseCallbackis added but not used.The
useCallbackhook is imported but not utilized in the code. Based on past review comments, it should be used to memoize thehandleBestTimesStatusfunction.
31-36: UsingJSON.stringify()in useEffect dependency is an anti-pattern.This can lead to performance issues as it forces string conversion on every render and may cause unnecessary effect re-runs.
38-43: ThehandleBestTimesStatusfunction should be memoized.This function is recreated on every render, which combined with the inline function on line 85-87 causes unnecessary re-renders of child components.
apps/web/src/utils/timeblock-helper.ts (1)
457-525: ThegetBestMeetingTimesfunction appears to be unused.This function is not called anywhere in the PR. The logic for finding best times is implemented directly in the
PreviewDayTimecomponent. Consider removing this unused code to prevent dead code accumulation.Additionally, the current implementation has high time complexity O(dates × slots × timeblocks × users) which would need optimization if used.
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/plan-details-client.tsx (1)
53-55: State setter called directly in component render body.Calling
setShowBestTimesdirectly in the render phase is a React anti-pattern that can cause unexpected re-renders and potential infinite loops. This should be wrapped in auseEffecthook.apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/preview-day-time.tsx (2)
74-74: Logic inconsistency with tooltip text.The code checks
maxAvailable >= 2but the tooltip states "more than 2 people", which would require> 2. This inconsistency should be resolved.
109-114: Incomplete dependency array in useEffect.The
onBestTimesStatusfunction should be included in the dependency array to avoid stale closures and ensure the effect runs with the latest version of the callback.
🧹 Nitpick comments (2)
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/all-availabilities.tsx (1)
39-39: Remove unnecessary comment.The "Existing UI" comment appears to be a development artifact and should be removed.
- {/* Existing UI */}apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/preview-day-time.tsx (1)
13-13: Use named import for consistency.Since only
useEffectis used from React, consider using a named import for consistency with other imports.-import React from 'react'; +import { useEffect } from 'react';And update line 109:
- React.useEffect(() => { + useEffect(() => {Also applies to: 109-109
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/account-badge.tsx(1 hunks)apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/all-availabilities.tsx(3 hunks)apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/date-planner.tsx(2 hunks)apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/day-planner.tsx(2 hunks)apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/day-planners.tsx(3 hunks)apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/day-time.tsx(2 hunks)apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/edit-plan-dialog.tsx(3 hunks)apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/plan-details-client.tsx(3 hunks)apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/preview-day-time.tsx(4 hunks)apps/web/src/utils/timeblock-helper.ts(1 hunks)packages/types/src/supabase.ts(22 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/all-availabilities.tsx (1)
packages/types/src/primitives/MeetTogetherPlan.ts (1)
MeetTogetherPlan(1-13)
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/day-time.tsx (1)
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/preview-day-time.tsx (1)
PreviewDayTime(15-276)
⏰ 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). (1)
- GitHub Check: Deploy-Preview
🔇 Additional comments (12)
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/date-planner.tsx (2)
16-17: LGTM! Clean prop additions with proper types.The new props are well-typed with appropriate defaults and follow consistent naming conventions.
Also applies to: 25-26
89-90: LGTM! Proper prop forwarding to child component.The props are cleanly forwarded to
DayPlannerswithout unnecessary transformation.apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/edit-plan-dialog.tsx (3)
74-74: LGTM! Improved form reactivity.Using
form.watch('name')instead ofform.getValues('name')ensures the component re-renders when the name field changes, making the submit button state more responsive.
181-181: LGTM! Consistent with the watched field approach.The condition now properly uses the watched value for reactive updates.
195-195: LGTM! Better DOM structure with asChild.Adding
asChildtoAlertDialogTriggerprevents unnecessary wrapper elements in the DOM.apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/day-planner.tsx (2)
14-15: LGTM! Consistent prop additions following established patterns.The new props are properly typed with appropriate defaults and follow the same naming conventions used in related components.
Also applies to: 23-24
49-50: LGTM! Clean prop forwarding to DayTime component.The props are properly forwarded to the child component without unnecessary transformation.
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/day-time.tsx (2)
7-7: LGTM! Proper prop handling with selective forwarding.The new props are correctly typed and the selective forwarding makes architectural sense - only the preview mode needs best times functionality.
Also applies to: 16-17
19-20: LGTM! Clean conditional rendering with appropriate prop forwarding.Correctly forwards the
onBestTimesStatuscallback only toPreviewDayTimesince the editable mode doesn't need best times functionality.apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/all-availabilities.tsx (2)
12-13: LGTM! Consistent prop additions following the established pattern.The new props are properly typed with appropriate defaults and maintain consistency with the broader feature implementation.
Also applies to: 17-18
76-77: LGTM! Clean prop forwarding to DatePlanner.The props are properly forwarded to the child component, completing the prop drilling chain for the best times feature.
packages/types/src/supabase.ts (1)
9340-9927: Property reordering changes look good - no functional impact.These changes reorder properties within database function type definitions without altering their types or semantics. Property order doesn't affect TypeScript functionality, so these changes are safe from a technical perspective.
The reordering appears to be for consistency and maintainability purposes, which aligns with supporting the broader "Show Only Best Times" feature implementation.
apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/plan-details-client.tsx
Outdated
Show resolved
Hide resolved
- Added logic to calculate global maximum availability based on user timeblocks. - Updated DayPlanner, DayPlanners, DayTime, and PreviewDayTime components to accept and utilize the globalMaxAvailable prop. - Enhanced best times functionality to leverage the computed global max availability for improved user experience.
Summary by CodeRabbit
New Features
Style
Bug Fixes
Chores