Update shadcn/ui components to latest version and fix dialog backdrop blur

[ArjunCodess]

fixes #1891

Description

Updated shadcn/ui components to the latest version with modern import patterns and fixed several UI issues. Changed from legacy import { Component as ComponentPrimitive } from 'radix-ui' to import * as ComponentPrimitive from "@radix-ui/react-component" across all UI components. Fixed the create email component backdrop blur functionality and added tooltip support for keyboard shortcuts. Preserved custom modifications in complex components like the calendar while updating the core component structure.

---

Type of Change

• [x] 🐛 Bug fix (non-breaking change which fixes an issue)
• [x] 🎨 UI/UX improvement
• [x] ⚡ Performance improvement

Areas Affected

• [x] User Interface/Experience
• [x] Development Workflow

Testing Done

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

Security Considerations

• [x] No sensitive data is exposed

Checklist

• [x] I have read the CONTRIBUTING document
• [x] My code follows the project's style guidelines
• [x] I have performed a self-review of my code
• [x] My changes generate no new warnings
• [x] All tests pass locally

Additional Notes

This migration addresses the outdated shadcn components throughout the codebase. Key improvements include fixing the dialogue backdrop blur issue in the create email component and adding proper tooltip functionality for keyboard shortcuts. Components with extensive customisations (like the calendar) were carefully preserved while updating the underlying primitives. The new import pattern offers improved tree-shaking and enhanced TypeScript support.

Screenshots/Recordings

• Create email component now has proper backdrop blur functionality

• Tooltips display correctly for keyboard shortcuts

• All UI components maintain existing functionality

---

By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.

---

Summary by cubic

Migrated all shadcn/ui components to the latest version with modern Radix imports for better a11y, focus states, and consistency. Removed the legacy radix-ui package and fixed overlay/backdrop issues (e.g., Dialog, Drawer).

• Refactors

  • Replaced all 'radix-ui' imports with @radix-ui/react-* and updated shadcn patterns.
  • Unified focus rings, transitions, and sizes across components (Accordion, Command, Dropdown, Select, etc.).
  • Dialog/Drawer/Sheet use consistent overlays (black/80), add close buttons, and smoother animations; resolves dialog backdrop blur.
  • Simplified Button (removed isLoading/loadingText), adjusted sizes, and switched to @radix-ui/react-slot.
  • CSS tweaks: new --sidebar token and base layer applying bg/foreground and outline defaults.
  • Dependencies: added individual @radix-ui/react-* packages, bumped react-day-picker to 9.9.0, pinned zod, and updated lockfile.

• Migration

  • Update imports from 'radix-ui' to '@radix-ui/react-...'.
  • Replace any Button usages of isLoading/loadingText; remove references to dropped Badge variants (important, promotions, personal, updates, forums).
  • Avatar is now rounded-full by default; override if you need square avatars.

Summary by CodeRabbit

• Style

  • Unified dialog overlays with an in-content close button; refreshed visuals for buttons, inputs, selects, tabs, switches, and menus.
  • Circular avatars, improved transitions (accordion, progress), updated skeleton color, and sidebar light/dark theme variables.
  • More consistent spacing, sizes, and scrollable dropdowns/menus.

• Refactor

  • Migrated to modular Radix components and standardized slot-based APIs.
  • Removed legacy props (e.g., dialog overlay flag); simplified Button (no built-in loading state).
  • Scroll areas now always render scrollbars.

• Chores

  • Replaced umbrella radix-ui with scoped packages; upgraded react-day-picker.
  • Pinned zod version.

[coderabbitai[bot]]

[!NOTE]

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

[!IMPORTANT]

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Refactors UI to migrate from the monolithic radix-ui import to scoped @radix-ui/* packages, overhauls Dialog and Sheet APIs, simplifies Button/Input/Separator/Skeleton, updates ScrollArea signature, tweaks Command components, removes DialogContent’s showOverlay usage across call sites, adjusts global CSS variables/base, and updates dependencies including Radix packages and zod pin.

Changes

Cohort / File(s)	Summary of changes
Dialog API overhaul apps/mail/components/ui/dialog.tsx	Rewrote Dialog to explicit functional components with data-slot attributes; removed showOverlay prop; added always-present overlay and optional close button; updated exports (Dialog, Trigger, Portal, Overlay, Content, Close, Header, Footer, Title, Description).
DialogContent usage cleanup apps/mail/app/(routes)/settings/connections/page.tsx, .../settings/danger-zone/page.tsx, apps/mail/components/connection/add.tsx, .../context/label-sidebar-context.tsx, .../create/email-composer.tsx, .../create/template-button.tsx, .../labels/label-dialog.tsx, .../mail/mail-display.tsx, .../onboarding.tsx, .../setup-phone.tsx, .../ui/pricing-dialog.tsx, .../ui/prompts-dialog.tsx	Removed DialogContent showOverlay prop at all call sites; rely on new Dialog overlay behavior.
Radix package migration apps/mail/components/ui/accordion.tsx, .../alert.tsx, .../avatar.tsx, .../checkbox.tsx, .../collapsible.tsx, .../context-menu.tsx, .../dropdown-menu.tsx, .../label.tsx, .../navigation-menu.tsx, .../popover.tsx, .../progress.tsx, .../radio-group.tsx, .../select.tsx, .../separator.tsx, .../switch.tsx, .../tabs.tsx, .../toggle.tsx, .../toggle-group.tsx, .../tooltip.tsx, apps/mail/components/magicui/file-tree.tsx, apps/mail/components/responsive-modal.tsx, apps/mail/components/ui/sidebar.tsx, apps/mail/components/ui/pricing-switch.tsx, apps/mail/components/ui/form.tsx	Switched imports from radix-ui to scoped @radix-ui/react-* packages; minor class and accessibility tweaks; added 'use client' where needed; updated Slot/VisuallyHidden imports/usage.
Button/Input/Separator/Skeleton refactors apps/mail/components/ui/button.tsx, .../input.tsx, .../separator.tsx, .../skeleton.tsx	Button simplified (removed loading props/UI, switched to Slot/asChild, updated variants). Input converted to function, new classes, no ref. Separator simplified to function, no ref, data-slot added. Skeleton signature to React.ComponentProps<'div'>, bg change to accent, data-slot added.
Command components apps/mail/components/ui/command.tsx, apps/mail/components/context/command-palette-context.tsx	Command dialog/layout restyled; added exports: CommandInput, CommandList, CommandSeparator; switched Search icon; minor radius/spacing changes. Renamed CommandItem type to CommandItemType; fixed VisuallyHidden import/usage.
Sheet API refactor apps/mail/components/ui/sheet.tsx	Replaced variant-based content with side-driven SheetContent; added composed Portal/Overlay and internal close button; added data-slot attributes; removed exported SheetPortal/SheetOverlay; converted Root/Trigger/Close to wrappers.
ScrollArea API change apps/mail/components/ui/scroll-area.tsx	Removed custom props (hideScrollbar); switched to Radix-derived props; always render ScrollBar; updated padding utilities; maintained exports.
CSS variables/base apps/mail/app/globals.css	Added --sidebar CSS variable for light/dark; updated base layer: simplified body styles; added universal border/outline styles.
Package/dependency updates apps/mail/package.json, pnpm-workspace.yaml	Replaced radix-ui with multiple @radix-ui/react-* deps; upgraded react-day-picker to 9.9.0; pinned zod to 3.25.67 in workspace catalog.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant App
  participant Dialog as Dialog (Radix)
  participant Overlay as Overlay (always-on)
  participant Content as DialogContent

  User->>App: Click DialogTrigger
  App->>Dialog: open=true
  Dialog->>Overlay: Render fixed overlay
  Dialog->>Content: Render content (showCloseButton?)
  alt Close via button
    User->>Content: Click Close (X)
    Content->>Dialog: onClose()
    Dialog-->>Overlay: Unmount
    Dialog-->>Content: Unmount
  else Click outside / Esc
    User->>Dialog: Dismiss
    Dialog-->>Overlay: Unmount
    Dialog-->>Content: Unmount
  end

sequenceDiagram
  autonumber
  actor User
  participant App
  participant Sheet as Sheet Root
  participant SOverlay as SheetOverlay
  participant SContent as SheetContent (side=top|right|bottom|left)

  User->>App: Click SheetTrigger
  App->>Sheet: open=true
  Sheet->>SOverlay: Render backdrop
  Sheet->>SContent: Slide-in from side
  User->>SContent: Interact
  User->>SContent: Click Close (X) / overlay / Esc
  SContent->>Sheet: onClose()
  Sheet-->>SOverlay: Unmount
  Sheet-->>SContent: Slide-out & unmount

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

Possibly related PRs

• Mail-0/Zero#1480 — Also changes apps/mail/components/ui/button.tsx, but in the opposite direction (adds loading props/UI).
• Mail-0/Zero#407 — Modifies apps/mail/components/ui/dialog.tsx; overlaps with this Dialog API overhaul.
• Mail-0/Zero#816 — Touched DialogContent showOverlay usage; this PR removes that prop across call sites.

Suggested labels

design, high priority

Suggested reviewers

• ahmetskilinc
• MrgSub
• nizzyabi

Poem

New slots ignite, the overlays glide,
Radix reborn, components unified.
Buttons trimmed, inputs lean—clean flight,
Sheets slide in from left or right.
CSS whispers: sidebar light.
Ship it fast—tonight’s the night. 🚀

✨ Finishing Touches

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

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.
  • 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.
• 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 the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore or @coderabbit 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

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• 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.