Redesign mail UI

[nizzyabi]

UI Redesign for Mail Interface

Description

This PR implements a comprehensive redesign of the mail interface with significant improvements to the visual design, layout, and user experience. The changes include a cleaner thread display, improved navigation controls, enhanced mobile responsiveness, and better visual hierarchy throughout the mail application.

Key improvements:

• Redesigned mail thread display with rounded corners and clearer visual separation
• Enhanced thread navigation with intuitive controls for moving between emails
• Improved mobile and desktop layouts with better responsive behavior
• Redesigned category and label selection interfaces
• Updated color scheme and styling for better dark/light mode support
• New account management dropdown with improved user switching

Type of Change

• [x] 🎨 UI/UX improvement
• [x] ⚡ Performance improvement

Areas Affected

• [x] User Interface/Experience

Testing Done

• [x] Manual testing performed
• [x] Mobile responsiveness verified (if UI changes)

Checklist

• [x] I have performed a self-review of my code
• [x] My changes generate no new warnings

Screenshots/Recordings

N/A

Summary by CodeRabbit

• New Features

  • Introduced new icons, including a megaphone icon, for enhanced visual elements.
  • Added dedicated components for thread avatars, selectors, metadata, and mobile thread actions, improving customization and responsiveness.
  • Enhanced account, label, and category selection with new dropdowns and user account switching features.
  • Added thread navigation buttons and improved bulk action bar with tooltips for better usability.

• UI Improvements

  • Refined mail display, mail list, and thread display layouts for improved responsiveness and visual consistency across devices.
  • Updated styles for sidebars, scrollbars, and panels, including theme-aware colors and spacing adjustments.
  • Improved mail content rendering and theming by replacing iframes with direct HTML injection and adaptive text colors.
  • Simplified and modernized action buttons and navigation elements.

• Bug Fixes

  • Resolved visual inconsistencies in buttons, containers, and scroll areas.
  • Improved fallback handling for avatars and icons.

• Refactor

  • Restructured mail list and thread components for clearer separation of concerns and maintainability.
  • Commented out unused sidebar and label/folder sections to streamline the interface.

[coderabbitai[bot]]

"""

Walkthrough

This update introduces major UI and UX refactoring across the mail application. It restructures mail thread and message displays, enhances navigation, account, label, and category selection components, and updates styling for improved responsiveness and clarity. Several sidebar and label sections are commented out, and a new megaphone icon is added.

Changes

File(s)	Change Summary
apps/mail/app/(routes)/mail/layout.tsx	Commented out the <AppSidebar /> component in MailLayout, disabling its rendering without removing code.
apps/mail/components/icons/icons.tsx	Added a new exported MegaPhone React component rendering a megaphone SVG icon; removed fillOpacity from Inbox icon.
apps/mail/components/mail/mail-display.tsx	Refactored and restyled the email display layout, replaced detailed first email header with empty container, updated styling classes for badges, buttons, containers, and popovers, and adjusted collapse behavior styling.
apps/mail/components/mail/mail-list.tsx	Major refactor: split thread rendering into distinct desktop and mobile layouts, updated bulk selection logic, removed hover event dispatch, improved accessibility with tooltips, and streamlined UI structure.
apps/mail/components/mail/mail.tsx	Extensive UI/UX enhancements: added thread actions/navigation, improved account/label/category selection with new dropdowns, redesigned bulk select actions with tooltips, and updated layout and responsiveness.
apps/mail/components/mail/thread-display.tsx	Updated icon imports, simplified HTML escaping, restructured scrollable areas with a single ScrollArea, restyled containers and buttons, and improved mobile responsiveness.
apps/mail/components/ui/ai-sidebar.tsx	Adjusted sidebar panel styling by removing margins and rounded corners, set height to full viewport height, and cleaned up duplicated class names.
apps/mail/components/ui/nav-main.tsx	Commented out the collapsible labels/folders section in NavMain, disabling its rendering without removing code.
apps/mail/components/ui/scroll-area.tsx	Hid the scrollbar thumb element by adding the hidden CSS class, keeping structure but making it invisible.
apps/mail/components/mail/mail-iframe.tsx	Changed background colors to theme tokens, replaced iframe rendering with a div using dangerouslySetInnerHTML, updated styling for theme-aware text colors, and removed iframe height state.
apps/mail/components/mail/thread-components.tsx	Added new React components for thread avatar, selector, metadata, and mobile thread actions with tooltips and conditional rendering based on thread state and view mode.
apps/mail/components/ui/button.tsx	Updated "secondary" button variant styling to use different background colors for light/dark modes and changed hover effect to opacity change.
apps/mail/components/ui/command.tsx	Changed background colors of Command and DialogContent components to explicit hex color #171717 instead of CSS classes.
apps/mail/components/ui/dialog.tsx	Removed backdrop-blur-sm from overlay, added border styling to dialog content, and changed dark background color to solid #171717.
apps/mail/components/ui/separator.tsx	Added dark mode background color dark:bg-[#262626] to separator component.
apps/mail/components/ui/tooltip.tsx	Completely rewrote tooltip component: removed variant logic and custom SVG arrow, simplified to a single style with fixed classes, added data-slot attributes, changed default sideOffset from 4 to 0, and wrapped Tooltip with TooltipProvider.
apps/mail/tailwind.config.ts	Updated color palette: darkened darkBackground, added new semantic colors for foregrounds, tints, and borders.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant MailUI
    participant AccountManager
    participant LabelManager
    participant CategoryManager
    participant ThreadActions

    User->>MailUI: Selects account/label/category or thread
    MailUI->>AccountManager: Switch account (if needed)
    MailUI->>LabelManager: Update label filters (if needed)
    MailUI->>CategoryManager: Update category filters (if needed)
    MailUI->>ThreadActions: Perform thread action (star, archive, etc.)
    ThreadActions-->>MailUI: Optimistically update UI
    MailUI-->>User: Render updated mail list/thread display

Possibly related PRs

• Mail-0/Zero#498: Adds thread moving functions and context menu integration, related to thread management features in this PR.
• Mail-0/Zero#1390: Opposite refactor of mail iframe rendering, switching from div to iframe, directly related to mail-iframe.tsx changes here.
• Mail-0/Zero#616: Modifies the Thread component in mail-list.tsx focusing on JSX and styling, directly related to this PR's mail list refactor.

Suggested labels

design

Suggested reviewers

• ahmetskilinc
• MrgSub

Poem

A rabbit hops through code so bright,
Refactoring mail with all its might.
Labels and threads, now clear as day,
Sidebars tucked gently out of the way.
A megaphone icon joins the fun—
New layouts shine, the work is done!
🐇✨📬 """

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[nizzyabi]

• #1366 👈 (View in Graphite)
• staging

This stack of pull requests is managed by Graphite. Learn more about stacking.

[cloudflare-workers-and-pages[bot]]

Deploying zero-prod with    Cloudflare Pages

Latest commit:	d838f6f
Status:	🚫  Build failed.

View logs

[cloudflare-workers-and-pages[bot]]

Deploying zero-staging with    Cloudflare Pages

Latest commit:	d838f6f
Status:	🚫  Build failed.

View logs

[github-actions[bot]]

This PR has merge conflicts and has been open for more than 3 days. It will be automatically closed. Please resolve the conflicts and reopen the PR if you'd like to continue working on it.