Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update introduces targeted enhancements and minor refactoring across several components in the mail application. Debug logging is added to settings and mail iframe components for improved traceability. Email address parsing and validation are refined in the Google mail driver to ensure clean recipient data. The logic for marking threads as read is streamlined, and asynchronous state mutations now use Changes
Sequence Diagram(s)sequenceDiagram
participant UI as User Interface
participant ThreadDisplay as Thread Display Component
participant API as API/Backend
UI->>ThreadDisplay: Open email thread
ThreadDisplay->>ThreadDisplay: Check unread emails
alt If unread emails exist
ThreadDisplay->>API: markAsRead(threadId, unreadEmailIds)
API-->>ThreadDisplay: Response
ThreadDisplay->>ThreadDisplay: Log reply and unread counts
ThreadDisplay->>API: mutateThread(), mutateStats() (allSettled)
else No unread emails
ThreadDisplay->>ThreadDisplay: Log reply and unread counts
end
Possibly related PRs
Suggested reviewers
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/mail/actions/settings.ts (1)
25-29: Added debug logging for settings validationThese debug logs provide visibility into the state of the
settingsobject before and after validation, which can help with troubleshooting validation issues.While this is useful for development, consider making these logs conditional based on environment to avoid cluttering production logs.
- console.log(settings, 'before'); + if (process.env.NODE_ENV !== 'production') console.log(settings, 'before'); - console.log(settings, 'after'); + if (process.env.NODE_ENV !== 'production') console.log(settings, 'after');apps/mail/components/mail/thread-display.tsx (1)
170-174: Added debug logging for email thread metricsThis log provides visibility into the number of total replies and unread emails, which helps with debugging thread rendering issues.
Consider making this log conditional based on environment or a debug flag to avoid cluttering production logs.
- console.log({ - totalReplies: emailData.totalReplies, - unreadEmails: unreadEmails.length, - }); + if (process.env.NODE_ENV !== 'production') { + console.log({ + totalReplies: emailData.totalReplies, + unreadEmails: unreadEmails.length, + }); + }apps/mail/components/mail/mail-iframe.tsx (1)
24-49: Consider removing debug console.log before productionThe useCallback optimization is great, but there's a console.log statement that should be removed before deploying to production.
const onTrustSender = useCallback( async (senderEmail: string) => { setImagesEnabled(true); - console.log(settings); + const existingSettings = settings ?? { ...defaultUserSettings, timezone: getBrowserTimezone(), };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/mail/actions/settings.ts(1 hunks)apps/mail/app/api/driver/google.ts(1 hunks)apps/mail/components/mail/mail-iframe.tsx(8 hunks)apps/mail/components/mail/thread-display.tsx(2 hunks)apps/mail/components/ui/nav-main.tsx(6 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/mail/components/mail/thread-display.tsx (1)
apps/mail/actions/mail.ts (1)
markAsRead(56-66)
🔇 Additional comments (11)
apps/mail/app/api/driver/google.ts (1)
271-284: Improved email address parsing logicThe changes improve the logic for parsing email addresses from the "to" recipients by properly handling email addresses that may include display names in angle brackets (e.g., "Display Name email@example.com").
This enhancement ensures that only the actual email address is extracted and validated before use, which helps prevent issues with malformed recipient data.
apps/mail/components/mail/thread-display.tsx (2)
174-182: Simplified thread marking logic and improved promise handlingThe code now only marks threads as read when there are unread emails, which is more efficient. Additionally, using
Promise.allSettledinstead ofPromise.allimproves reliability by ensuring both mutations complete regardless of errors.This change prevents partial updates of the UI state, which could lead to inconsistent displays.
230-230: Improved reliability in unread marking with Promise.allSettledChanging from
Promise.alltoPromise.allSettledensures that both mutation operations (stats and thread) complete even if one fails, improving the reliability of UI state updates.apps/mail/components/ui/nav-main.tsx (3)
14-17: Improved import organizationThe imports have been reordered for better grouping and readability.
182-227: Improved formatting and code structure in NavItem componentThe code formatting changes improve readability and consistency in the NavItem component, particularly in how refs are defined and how badge counts are displayed based on stats.
The conditional rendering with the stats check is now more clearly structured.
237-239: Improved formatting of Link componentThe Link component is now formatted with each attribute on its own line, which improves readability.
apps/mail/components/mail/mail-iframe.tsx (5)
9-9: Improved import organizationMoving the DOMPurify import earlier with other library imports improves code organization and readability.
16-16: Style consistency improvementAdded semicolon after useState for consistent code style.
103-103: Style consistency improvementAdded semicolon after setCspViolation for consistent code style.
262-263: Formatting improvements for better readabilityConsistent spacing and formatting throughout the component enhances code readability and maintainability.
Also applies to: 273-274, 279-280, 282-283, 287-288, 297-298, 302-303, 312-313, 324-325
340-341: Style consistency improvementAdded a proper newline at the end of the file follows best practices.
fix: random reply count in mail list
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/mail/components/mail/mail-list.tsx (1)
223-238: Improved tooltip display logic with consistent count values.The updated code replaces multiple random number calls with a single calculation that's used consistently throughout the component. This prevents the confusing scenario where the displayed count and tooltip text might show different values.
For better readability, consider extracting this tooltip component logic to a separate function outside the render path:
- {Math.random() > 0.5 && - (() => { - const count = Math.floor(Math.random() * 10) + 1; - return ( - <Tooltip> - <TooltipTrigger asChild> - <span className="rounded-md border border-dotted px-[5px] py-[1px] text-xs opacity-70"> - {count} - </span> - </TooltipTrigger> - <TooltipContent className="px-1 py-0 text-xs"> - {t('common.mail.replies', { count })} - </TooltipContent> - </Tooltip> - ); - })()} + {Math.random() > 0.5 && renderReplyCountTooltip()}Then add this function to the component:
const renderReplyCountTooltip = () => { const count = Math.floor(Math.random() * 10) + 1; return ( <Tooltip> <TooltipTrigger asChild> <span className="rounded-md border border-dotted px-[5px] py-[1px] text-xs opacity-70"> {count} </span> </TooltipTrigger> <TooltipContent className="px-1 py-0 text-xs"> {t('common.mail.replies', { count })} </TooltipContent> </Tooltip> ); };
Summary by CodeRabbit
Promise.allSettled.