# Email Content Prefetching and Processing Optimization
## Description
This PR improves email loading performance by implementing prefetching and caching of processed email HTML content. It splits the email processing logic into two parts:
1. Server-side preprocessing that handles sanitization and structure
2. Client-side processing that applies theme-specific styling and image loading preferences
The changes also add prefetching of the latest message in a thread to improve perceived loading speed when users open emails.
---
## Type of Change
- [x] ⚡ Performance improvement
- [x] 🎨 UI/UX improvement
## Areas Affected
- [x] Email Integration (Gmail, IMAP, etc.)
- [x] User Interface/Experience
- [x] Performance Optimization
## Testing Done
- [x] Manual testing performed
- [x] Cross-browser testing (if UI changes)
## Checklist
- [x] I have performed a self-review of my code
- [x] My changes generate no new warnings
- [x] My code follows the project's style guidelines
## Additional Notes
The email processing logic has been refactored to:
1. Separate heavy sanitization work (which can be done once) from theme/preference application
2. Cache processed content with a 30-minute stale time and 1-hour garbage collection time
3. Respect user preferences for external image loading and trusted senders
4. Apply theme-specific styling based on user settings or system preference
This should significantly improve the perceived performance when opening emails, especially for threads with complex HTML content.
---
_By submitting this pull request, I confirm that my contribution is made under the terms of the project's license._
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **New Features**
* Improved email thread view by displaying the latest non-draft message.
* Enhanced email content processing to apply user settings and theme preferences, including external image loading and dark/light mode support.
* **Bug Fixes**
* More accurate handling of external images and theme styling in emails based on user preferences.
* **Chores**
* Updated internal configuration for local development environment.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
fixes email padding and removed the title from the email preview
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **Style**
* Added horizontal padding to the mail content area for improved layout.
* **Bug Fixes**
* Enhanced email content sanitization by refining allowed HTML tags and attributes, and removing specific inline styles for cleaner display.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
# READ CAREFULLY THEN REMOVE
Remove bullet points that are not relevant.
PLEASE REFRAIN FROM USING AI TO WRITE YOUR CODE AND PR DESCRIPTION. IF YOU DO USE AI TO WRITE YOUR CODE PLEASE PROVIDE A DESCRIPTION AND REVIEW IT CAREFULLY. MAKE SURE YOU UNDERSTAND THE CODE YOU ARE SUBMITTING USING AI.
- Pull requests that do not follow these guidelines will be closed without review or comment.
- If you use AI to write your PR description your pr will be close without review or comment.
- If you are unsure about anything, feel free to ask for clarification.
## Description
Please provide a clear description of your changes.
---
## Type of Change
Please delete options that are not relevant.
- [ ] 🐛 Bug fix (non-breaking change which fixes an issue)
- [ ] ✨ New feature (non-breaking change which adds functionality)
- [ ] 💥 Breaking change (fix or feature with breaking changes)
- [ ] 📝 Documentation update
- [ ] 🎨 UI/UX improvement
- [ ] 🔒 Security enhancement
- [ ] ⚡ Performance improvement
## Areas Affected
Please check all that apply:
- [ ] Email Integration (Gmail, IMAP, etc.)
- [ ] User Interface/Experience
- [ ] Authentication/Authorization
- [ ] Data Storage/Management
- [ ] API Endpoints
- [ ] Documentation
- [ ] Testing Infrastructure
- [ ] Development Workflow
- [ ] Deployment/Infrastructure
## Testing Done
Describe the tests you've done:
- [ ] Unit tests added/updated
- [ ] Integration tests added/updated
- [ ] Manual testing performed
- [ ] Cross-browser testing (if UI changes)
- [ ] Mobile responsiveness verified (if UI changes)
## Security Considerations
For changes involving data or authentication:
- [ ] No sensitive data is exposed
- [ ] Authentication checks are in place
- [ ] Input validation is implemented
- [ ] Rate limiting is considered (if applicable)
## Checklist
- [ ] I have read the [CONTRIBUTING](https://github.com/Mail-0/Zero/blob/staging/.github/CONTRIBUTING.md) document
- [ ] My code follows the project's style guidelines
- [ ] I have performed a self-review of my code
- [ ] I have commented my code, particularly in complex areas
- [ ] I have updated the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix/feature works
- [ ] All tests pass locally
- [ ] Any dependent changes are merged and published
## Additional Notes
Add any other context about the pull request here.
## Screenshots/Recordings
Add screenshots or recordings here if applicable.
---
_By submitting this pull request, I confirm that my contribution is made under the terms of the project's license._
# Replace iFrame with Shadow DOM for Email Content Rendering
## Description
Replaced the `MailIframe` component with a new `MailContent` component that uses Shadow DOM instead of iframes for rendering email content. This approach provides better security isolation while maintaining styling control and performance. The implementation uses DOMPurify for sanitization and includes proper handling of external images, trusted senders, and theme adaptation.
## Type of Change
- ✨ New feature (non-breaking change which adds functionality)
- 🔒 Security enhancement
- ⚡ Performance improvement
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **New Features**
* Introduced a new email content viewer that securely displays HTML emails with improved security, style isolation, and theme support.
* Added user controls to manage image loading and trust email senders directly from the email view.
* **Refactor**
* Replaced the previous email iframe viewer with the new secure content viewer, streamlining functionality and enhancing user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
