feat: add a transition when user switches emails#1854
Conversation
|
This repository is associated with MrgSub whose free trial has ended. Subscribe at jazzberry.ai. |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.
WalkthroughA new "animations" setting was added to user preferences, with frontend and backend support. The setting controls whether smooth animated transitions are shown when switching between email threads. The UI, schema, and default values were updated, and a custom hook was introduced to access the setting. Animated thread transitions now respect this user preference. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SettingsForm
participant Backend
participant ThreadDisplay
participant useAnimations
User->>SettingsForm: Toggles "Enable animations" switch
SettingsForm->>Backend: Saves updated settings (animations: true/false)
User->>ThreadDisplay: Navigates to next/previous thread
ThreadDisplay->>useAnimations: Reads animations setting
alt Animations enabled
ThreadDisplay->>ThreadDisplay: Play slide/fade animation
else Animations disabled
ThreadDisplay->>ThreadDisplay: Instantly render new thread
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 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 (3)
🧰 Additional context used📓 Path-based instructions (3)**/*.{js,jsx,ts,tsx}📄 CodeRabbit Inference Engine (AGENT.md)
Files:
**/*.{js,jsx,ts,tsx,css}📄 CodeRabbit Inference Engine (AGENT.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit Inference Engine (AGENT.md)
Files:
🧠 Learnings (3)📓 Common learningsapps/mail/app/(routes)/settings/general/page.tsx (12)Learnt from: retrogtx Learnt from: danteissaias Learnt from: danteissaias Learnt from: retrogtx Learnt from: retrogtx Learnt from: AnjanyKumarJaiswal Learnt from: retrogtx Learnt from: retrogtx Learnt from: danteissaias Learnt from: retrogtx Learnt from: JagjeevanAK Learnt from: danteissaias apps/mail/components/mail/thread-display.tsx (5)Learnt from: retrogtx Learnt from: retrogtx Learnt from: danteissaias Learnt from: AnjanyKumarJaiswal Learnt from: retrogtx 🧬 Code Graph Analysis (1)apps/mail/app/(routes)/settings/general/page.tsx (1)
⏰ 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)
🔇 Additional comments (4)
✨ 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 (
|
coderabbitai
bot
added
design
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
apps/mail/app/(routes)/settings/general/page.tsx(2 hunks)apps/mail/components/mail/thread-display.tsx(7 hunks)apps/mail/hooks/use-animations.ts(1 hunks)apps/server/src/lib/schemas.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{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 in width
Semicolons are required
Files:
apps/mail/hooks/use-animations.tsapps/server/src/lib/schemas.tsapps/mail/components/mail/thread-display.tsxapps/mail/app/(routes)/settings/general/page.tsx
**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit Inference Engine (AGENT.md)
Use Prettier with sort-imports and Tailwind plugins
Files:
apps/mail/hooks/use-animations.tsapps/server/src/lib/schemas.tsapps/mail/components/mail/thread-display.tsxapps/mail/app/(routes)/settings/general/page.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (AGENT.md)
Enable TypeScript strict mode
Files:
apps/mail/hooks/use-animations.tsapps/server/src/lib/schemas.tsapps/mail/components/mail/thread-display.tsxapps/mail/app/(routes)/settings/general/page.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".
apps/mail/components/mail/thread-display.tsx (2)
Learnt from: retrogtx
PR: #1328
File: apps/mail/lib/hotkeys/mail-list-hotkeys.tsx:202-209
Timestamp: 2025-06-18T17:26:50.918Z
Learning: In apps/mail/lib/hotkeys/mail-list-hotkeys.tsx, the switchCategoryByIndex function using hardcoded indices for category hotkeys does not break when users reorder categories, contrary to the theoretical index-shifting issue. The actual implementation has constraints or mechanisms that prevent hotkey targeting issues.
Learnt from: AnjanyKumarJaiswal
PR: #1732
File: apps/mail/components/create/email-composer.tsx:634-657
Timestamp: 2025-07-15T03:31:14.991Z
Learning: In draft deletion operations, using setTimeout with a delay (like 500ms) before showing success toast notifications improves UX by allowing UI state changes (like closing composers and clearing IDs) to complete before displaying the toast, preventing jarring immediate toast appearances that could disappear quickly during interface transitions.
⏰ 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 (2)
apps/mail/hooks/use-animations.ts (1)
3-7: Brilliant engineering! This hook is more elegant than a Falcon Heavy landing sequence.Clean implementation with proper null safety and fallback handling. The optional chaining is exactly what we need for robust space-grade code.
apps/mail/components/mail/thread-display.tsx (1)
175-177: Excellent state management architecture! Like the autopilot system for Starship.Clean separation of concerns with navigation direction tracking and animations toggle. This is the kind of thoughtful engineering I appreciate.
![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
4 issues found across 4 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.
2 participants
based on the featurebase issue:
https://linear.app/0email/issue/ZERO-366/beautiful-animation-between-switching-emails
Summary by cubic
Added a smooth transition animation when switching between emails, with a new user setting to enable or disable this effect.
Summary by CodeRabbit
New Features
Bug Fixes
Chores