diff --git a/app/globals.css b/app/globals.css
index 522f2b3..445a36a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -39,9 +39,48 @@
--sidebar-ring: oklch(0.708 0 0);
/** Fond chrome (layout mail : header, rails, sidebar). */
--app-canvas: #fafbfc;
+ --mail-surface: #ffffff;
+ --mail-surface-elevated: #ffffff;
+ --mail-surface-muted: #f1f3f4;
+ --mail-border: #dadce0;
+ --mail-border-subtle: #eceff1;
+ --mail-text: #3c4043;
+ --mail-text-strong: #202124;
+ --mail-text-muted: #5f6368;
+ --mail-hover: #f1f3f4;
+ --mail-active: #e8f0fe;
+ --mail-row-unread: #ffffff;
+ --mail-row-read: #f5f5f5;
+ --mail-row-selected: #e8f0fe;
+ --mail-row-active-split: #e8f0fe;
+ --mail-nav-selected: #d3e3fd;
+ --mail-nav-selected-fg: #202124;
+ --mail-nav-hover: #f1f3f4;
+ --mail-nav-drop: #fef7cd;
+ --mail-invitation: #e8f0fe;
}
.dark {
+ --app-canvas: #202124;
+ --mail-surface: #2d2e30;
+ --mail-surface-elevated: #35363a;
+ --mail-surface-muted: #3c4043;
+ --mail-border: #5f6368;
+ --mail-border-subtle: #3c4043;
+ --mail-text: #e8eaed;
+ --mail-text-strong: #ffffff;
+ --mail-text-muted: #9aa0a6;
+ --mail-hover: #3c4043;
+ --mail-active: #394457;
+ --mail-row-unread: #2d2e30;
+ --mail-row-read: #35363a;
+ --mail-row-selected: #394457;
+ --mail-row-active-split: #394457;
+ --mail-nav-selected: #394457;
+ --mail-nav-selected-fg: #e8eaed;
+ --mail-nav-hover: #3c4043;
+ --mail-nav-drop: #4a4428;
+ --mail-invitation: #2d3a4d;
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.145 0 0);
@@ -116,6 +155,12 @@
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-app-canvas: var(--app-canvas);
+ --color-mail-surface: var(--mail-surface);
+ --color-mail-surface-elevated: var(--mail-surface-elevated);
+ --color-mail-surface-muted: var(--mail-surface-muted);
+ --color-mail-border: var(--mail-border);
+ --color-mail-border-subtle: var(--mail-border-subtle);
+ --color-mail-invitation: var(--mail-invitation);
}
@layer base {
@@ -295,3 +340,262 @@ body {
animation: long-press-ack 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
transform-origin: center;
}
+
+/* ── Mail : fond décoratif plein écran (derrière toute l’UI) ── */
+html {
+ background-color: var(--mail-bg-fallback, var(--app-canvas));
+}
+
+html::before {
+ content: '';
+ position: fixed;
+ inset: 0;
+ z-index: -1;
+ pointer-events: none;
+ background-color: var(--mail-bg-fallback, transparent);
+ background-image: var(--mail-bg-layer, none);
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ opacity: 0;
+ transition: opacity 0.25s ease;
+}
+
+html[data-mail-background]:not([data-mail-background='none'])::before {
+ opacity: 1;
+}
+
+html[data-mail-background]:not([data-mail-background='none']) .ultimail-app {
+ background-color: transparent !important;
+}
+
+html[data-mail-background]:not([data-mail-background='none']) .ultimail-app :where(.bg-app-canvas) {
+ background-color: color-mix(in srgb, var(--app-canvas) 78%, transparent) !important;
+}
+
+html[data-mail-background]:not([data-mail-background='none'])
+ .ultimail-app
+ :where(.bg-mail-surface, .bg-white) {
+ background-color: color-mix(in srgb, var(--mail-surface) 88%, transparent) !important;
+}
+
+.ultimail-app {
+ position: relative;
+ isolation: isolate;
+}
+
+/* Lignes de liste */
+.bg-mail-row-unread {
+ background-color: var(--mail-row-unread);
+}
+.bg-mail-row-read {
+ background-color: var(--mail-row-read);
+}
+.bg-mail-row-selected {
+ background-color: var(--mail-row-selected);
+}
+.bg-mail-row-active-split {
+ background-color: var(--mail-row-active-split);
+}
+.bg-mail-nav-selected {
+ background-color: var(--mail-nav-selected);
+}
+.text-mail-nav-selected {
+ color: var(--mail-nav-selected-fg);
+}
+.bg-mail-nav-hover {
+ background-color: var(--mail-nav-hover);
+}
+.bg-mail-nav-drop {
+ background-color: var(--mail-nav-drop);
+}
+.bg-mail-invitation {
+ background-color: var(--mail-invitation);
+}
+
+/* ── Mail : mode sombre (surcharges ciblées dans le shell) ── */
+html.dark .ultimail-app {
+ color-scheme: dark;
+}
+
+html.dark .ultimail-app :where(.bg-white) {
+ background-color: var(--mail-surface) !important;
+}
+
+html.dark .ultimail-app :where(
+ .bg-\[\#f1f3f4\],
+ .bg-\[\#f8f9fa\],
+ .bg-\[\#fafbfc\],
+ .bg-\[\#edf2fc\],
+ .bg-\[\#eaf1fb\],
+ .bg-\[\#f6f9fe\],
+ .bg-\[\#f5f5f5\],
+ .bg-\[\#e8eaed\]
+) {
+ background-color: var(--mail-surface-muted) !important;
+}
+
+html.dark .ultimail-app :where(.bg-\[\#e8f0fe\]) {
+ background-color: var(--mail-active) !important;
+}
+
+html.dark .ultimail-app :where([class*='bg-white/']) {
+ background-color: color-mix(in srgb, var(--mail-surface) 82%, transparent) !important;
+}
+
+html.dark .ultimail-app :where(.bg-gray-200) {
+ background-color: var(--mail-surface-muted) !important;
+}
+
+html.dark .ultimail-app :where(.hover\:bg-\[\#f1f3f4\]:hover, .hover\:bg-\[\#f6f9fe\]:hover, .hover\:bg-gray-100:hover) {
+ background-color: var(--mail-hover) !important;
+}
+
+html.dark .ultimail-app :where(.border-gray-200, .border-\[\#dadce0\], .border-\[\#eceff1\]) {
+ border-color: var(--mail-border-subtle) !important;
+}
+
+html.dark .ultimail-app :where(.divide-gray-200 > :not(:last-child), .divide-\[\#eceff1\] > :not(:last-child)) {
+ border-color: var(--mail-border-subtle) !important;
+}
+
+html.dark .ultimail-app :where(.text-gray-900, .text-gray-800, .text-gray-700, .text-\[\#202124\], .text-\[\#3c4043\], .text-\[\#1f1f1f\]) {
+ color: var(--mail-text) !important;
+}
+
+html.dark .ultimail-app :where(.text-gray-600, .text-gray-500, .text-\[\#5f6368\], .text-\[\#444746\]) {
+ color: var(--mail-text-muted) !important;
+}
+
+html.dark .ultimail-app :where(.text-gray-400, .text-\[\#c2c2c2\]) {
+ color: #80868b !important;
+}
+
+html.dark .ultimail-app :where(.shadow-sm, .shadow-lg) {
+ --tw-shadow-color: rgb(0 0 0 / 0.35);
+}
+
+html.dark .ultimail-app :where(input, textarea, select) {
+ background-color: var(--mail-surface-muted);
+ color: var(--mail-text);
+ border-color: var(--mail-border-subtle);
+}
+
+html.dark .ultimail-app :where(.tiptap blockquote) {
+ border-left-color: var(--mail-border);
+ color: var(--mail-text-muted);
+}
+
+html.dark .ultimail-app :where(.tiptap code, .tiptap pre) {
+ background-color: var(--mail-surface-muted);
+}
+
+/* ── Dark : portails Radix & toasts (rendus hors .ultimail-app) ── */
+html.dark [data-slot='dropdown-menu-content'],
+html.dark [data-slot='dropdown-menu-sub-content'],
+html.dark [data-slot='context-menu-content'],
+html.dark [data-slot='context-menu-sub-content'],
+html.dark [data-slot='popover-content'],
+html.dark [data-slot='select-content'],
+html.dark [data-slot='menubar-content'] {
+ background-color: var(--popover) !important;
+ color: var(--popover-foreground) !important;
+ border-color: var(--border) !important;
+}
+
+html.dark [data-slot='dropdown-menu-item']:focus,
+html.dark [data-slot='dropdown-menu-item'][data-highlighted],
+html.dark [data-slot='dropdown-menu-sub-trigger']:focus,
+html.dark [data-slot='dropdown-menu-sub-trigger'][data-state='open'],
+html.dark [data-slot='context-menu-item']:focus,
+html.dark [data-slot='context-menu-item'][data-highlighted],
+html.dark [data-slot='context-menu-sub-trigger']:focus,
+html.dark [data-slot='context-menu-sub-trigger'][data-state='open'] {
+ background-color: var(--accent) !important;
+ color: var(--accent-foreground) !important;
+}
+
+html.dark [data-slot='dropdown-menu-separator'],
+html.dark [data-slot='context-menu-separator'] {
+ background-color: var(--border) !important;
+}
+
+html.dark .ultimail-app :where(.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover) {
+ background-color: var(--mail-nav-hover) !important;
+}
+
+html.dark .ultimail-app :where(.bg-\[\#d3e3fd\]) {
+ background-color: var(--mail-nav-selected) !important;
+}
+
+html.dark .ultimail-app :where(.bg-yellow-100) {
+ background-color: var(--mail-nav-drop) !important;
+}
+
+html.dark .ultimail-app :where(.text-\[#0f172a\], .text-\[#0b57d0\]) {
+ color: var(--foreground) !important;
+}
+
+html.dark .ultimail-app :where([data-slot='checkbox']) {
+ background-color: transparent;
+ border-color: #9aa0a6;
+}
+
+html.dark .ultimail-app :where([data-slot='checkbox'][data-state='checked']) {
+ background-color: #1a73e8;
+ border-color: #1a73e8;
+}
+
+/* ── Dark : fenêtre de composition ── */
+html.dark [data-compose-window] {
+ color: var(--foreground);
+}
+
+html.dark [data-compose-window] :where(.text-\[\#202124\], .text-\[\#3c4043\]) {
+ color: var(--foreground) !important;
+}
+
+html.dark [data-compose-window] :where(.text-\[\#5f6368\], .text-\[\#80868b\]) {
+ color: var(--muted-foreground) !important;
+}
+
+html.dark [data-compose-window] :where(.hover\:bg-\[\#f1f3f4\]:hover, .hover\:bg-\[\#f6f9fe\]:hover) {
+ background-color: var(--accent) !important;
+}
+
+html.dark [data-compose-window] :where(.bg-\[\#e8eaed\], .bg-\[\#e8f0fe\]) {
+ background-color: var(--accent) !important;
+ color: var(--accent-foreground) !important;
+}
+
+html.dark [data-compose-window] .compose-toolbar :where(.bg-\[\#e8eaed\]) {
+ background-color: var(--accent) !important;
+}
+
+/* Iframes d’aperçu mail : fond du navigateur, pas blanc par défaut */
+html.dark .ultimail-app iframe[title='Contenu du message'],
+html.dark .ultimail-app iframe[title='Sujet du message'] {
+ background: transparent !important;
+ color-scheme: dark;
+}
+
+/* ── Dark : panneau Contacts (formulaires) ── */
+html.dark :where([data-contacts-panel] .bg-white) {
+ background-color: var(--mail-surface) !important;
+}
+
+html.dark :where([data-contacts-panel] .text-\[\#1f1f1f\], [data-contacts-panel] .text-\[\#3c4043\]) {
+ color: var(--foreground) !important;
+}
+
+html.dark :where([data-contacts-panel] .text-\[\#5f6368\]) {
+ color: var(--muted-foreground) !important;
+}
+
+html.dark :where([data-contacts-panel] .hover\:bg-gray-100:hover, [data-contacts-panel] .hover\:bg-\[\#f5f5f5\]:hover) {
+ background-color: var(--accent) !important;
+}
+
+html.dark :where([data-contacts-panel] .border-gray-200, [data-contacts-panel] .border-gray-300) {
+ border-color: var(--border) !important;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index c250026..d7b36f2 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata, Viewport } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import { Analytics } from '@vercel/analytics/next'
import './globals.css'
+import { ThemeInitScript } from '@/components/theme-init-script'
const _geist = Geist({ subsets: ["latin"] });
const _geistMono = Geist_Mono({ subsets: ["latin"] });
@@ -27,8 +28,9 @@ export default function RootLayout({
children: React.ReactNode
}>) {
return (
-
-
+
+
+
{children}
{process.env.NODE_ENV === 'production' && }
diff --git a/app/mail/mail-app-shell.tsx b/app/mail/mail-app-shell.tsx
index a2b3306..187f249 100644
--- a/app/mail/mail-app-shell.tsx
+++ b/app/mail/mail-app-shell.tsx
@@ -7,13 +7,13 @@ import {
useLayoutEffect,
useMemo,
useState,
- type CSSProperties,
} from "react"
import { useIsXs } from "@/hooks/use-xs"
import { readTouchNavMatches, useTouchNav } from "@/hooks/use-touch-nav"
import { useMailSplitView } from "@/hooks/use-mail-split-view"
import { MobileBottomBar } from "@/components/gmail/mobile-bottom-bar"
-import { Toaster } from "sonner"
+import type { MailXsViewChrome } from "@/lib/mail-xs-view-chrome"
+import { MailToaster } from "@/components/gmail/mail-toaster"
import { useRouter, usePathname } from "next/navigation"
import { Sidebar } from "@/components/gmail/sidebar"
import { Header } from "@/components/gmail/header"
@@ -35,6 +35,9 @@ import {
type MailRouteState,
} from "@/lib/mail-url"
import { cn } from "@/lib/utils"
+import { ThemeProvider } from "@/components/theme-provider"
+import { MailThemeApplier } from "@/components/gmail/mail-theme-applier"
+import { QuickSettingsRoot } from "@/components/gmail/quick-settings/quick-settings-root"
function segmentsFromPathname(pathname: string | null): string[] | undefined {
if (!pathname?.startsWith("/mail")) return undefined
@@ -70,6 +73,7 @@ function MailAppInner() {
const [folderUnreadCounts, setFolderUnreadCounts] = useState<
Record
>({})
+ const [xsViewChrome, setXsViewChrome] = useState(null)
const navigateRoute = useCallback(
(patch: Partial) => {
@@ -125,7 +129,7 @@ function MailAppInner() {
{!sidebarCollapsed && touchNav && (
@@ -154,8 +158,10 @@ function MailAppInner() {
/>
@@ -169,6 +175,7 @@ function MailAppInner() {
onMailRouteNavigate={navigateRoute}
onSelectFolder={handleSelectFolder}
onFolderUnreadCountsChange={setFolderUnreadCounts}
+ onXsViewChromeChange={setXsViewChrome}
/>
@@ -186,6 +193,7 @@ function MailAppInner() {
setSidebarCollapsed((c) => !c)}
+ xsViewChrome={xsViewChrome}
/>
) : null}
@@ -211,6 +219,7 @@ export function MailAppShell({
}, [])
return (
+
@@ -224,24 +233,14 @@ export function MailAppShell({
>
+
+
-
+
+
)
}
diff --git a/app/mail/settings/page.tsx b/app/mail/settings/page.tsx
new file mode 100644
index 0000000..b45002b
--- /dev/null
+++ b/app/mail/settings/page.tsx
@@ -0,0 +1,10 @@
+export default function MailSettingsPage() {
+ return (
+
+
Paramètres
+
+ Page en cours de construction.
+
+
+ )
+}
diff --git a/components/gmail/account-avatar.tsx b/components/gmail/account-avatar.tsx
new file mode 100644
index 0000000..832f8cb
--- /dev/null
+++ b/components/gmail/account-avatar.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { useState } from "react"
+import type { UserAccount } from "@/lib/accounts/types"
+import { avatarColor, senderInitial } from "@/lib/sender-display"
+import { cn } from "@/lib/utils"
+
+interface AccountAvatarProps {
+ account: UserAccount
+ size?: "sm" | "md" | "lg"
+ className?: string
+}
+
+const sizeClasses = {
+ sm: "size-8 text-sm",
+ md: "size-10 text-base",
+ lg: "size-20 text-3xl",
+} as const
+
+export function AccountAvatar({
+ account,
+ size = "md",
+ className,
+}: AccountAvatarProps) {
+ const [imageFailed, setImageFailed] = useState(false)
+ const initial = senderInitial(account.displayName)
+ const color = avatarColor(account.displayName)
+
+ if (account.avatarUrl && !imageFailed) {
+ return (
+
setImageFailed(true)}
+ />
+ )
+ }
+
+ return (
+
+ {initial}
+
+ )
+}
diff --git a/components/gmail/account-switcher-dropdown.tsx b/components/gmail/account-switcher-dropdown.tsx
new file mode 100644
index 0000000..36cd2af
--- /dev/null
+++ b/components/gmail/account-switcher-dropdown.tsx
@@ -0,0 +1,219 @@
+"use client"
+
+import { useEffect, useRef, type RefObject } from "react"
+import { Icon, addCollection } from "@iconify/react"
+import { icons as mdiIcons } from "@iconify-json/mdi"
+import { Camera, ChevronDown, ChevronUp, LogOut, Plus, X } from "lucide-react"
+import { AccountAvatar } from "@/components/gmail/account-avatar"
+import { Button } from "@/components/ui/button"
+import { MOCK_USER_ACCOUNTS, STORAGE_USAGE } from "@/lib/accounts/mock-accounts"
+import type { UserAccount } from "@/lib/accounts/types"
+import {
+ useAccountStore,
+ useActiveAccount,
+} from "@/lib/stores/account-store"
+addCollection(mdiIcons)
+
+interface AccountSwitcherDropdownProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ /** Clicks inside this node (e.g. avatar trigger) do not close the panel. */
+ containerRef: RefObject
+}
+
+function AccountRow({
+ account,
+ onSelect,
+}: {
+ account: UserAccount
+ onSelect: () => void
+}) {
+ return (
+
+ )
+}
+
+export function AccountSwitcherDropdown({
+ open,
+ onOpenChange,
+ containerRef,
+}: AccountSwitcherDropdownProps) {
+ const panelRef = useRef(null)
+ const activeAccount = useActiveAccount()
+ const activeAccountId = useAccountStore((s) => s.activeAccountId)
+ const otherAccountsExpanded = useAccountStore((s) => s.otherAccountsExpanded)
+ const setActiveAccount = useAccountStore((s) => s.setActiveAccount)
+ const toggleOtherAccountsExpanded = useAccountStore(
+ (s) => s.toggleOtherAccountsExpanded,
+ )
+ const signOutAll = useAccountStore((s) => s.signOutAll)
+
+ const otherAccounts = MOCK_USER_ACCOUNTS.filter((a) => a.id !== activeAccountId)
+
+ useEffect(() => {
+ if (!open) return
+ function handleClickOutside(event: MouseEvent) {
+ if (
+ containerRef.current &&
+ !containerRef.current.contains(event.target as Node)
+ ) {
+ onOpenChange(false)
+ }
+ }
+ function handleEscape(event: KeyboardEvent) {
+ if (event.key === "Escape") onOpenChange(false)
+ }
+ document.addEventListener("mousedown", handleClickOutside)
+ document.addEventListener("keydown", handleEscape)
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside)
+ document.removeEventListener("keydown", handleEscape)
+ }
+ }, [open, onOpenChange, containerRef])
+
+ if (!open) return null
+
+ const handleSelectAccount = (id: string) => {
+ setActiveAccount(id)
+ onOpenChange(false)
+ }
+
+ return (
+
+ {/* Current account header */}
+
+
+ {activeAccount.email}
+
+
+
+
+
+
+ Bonjour {activeAccount.firstName} !
+
+
+
+
+
+ {/* Other accounts + actions */}
+
+
+
+
+ {otherAccountsExpanded && (
+
+ {otherAccounts.map((account) => (
+
handleSelectAccount(account.id)}
+ />
+ ))}
+
+ )}
+
+
+
+
+
+
+
+ {/* Storage */}
+
+
+
+ {STORAGE_USAGE.percentUsed} % utilisé(s) sur {STORAGE_USAGE.totalLabel}
+
+
+
+ {/* Footer links */}
+
+
+ ·
+
+
+
+
+ )
+}
diff --git a/components/gmail/calendar-invitation-preview.tsx b/components/gmail/calendar-invitation-preview.tsx
index c865352..cf0cd37 100644
--- a/components/gmail/calendar-invitation-preview.tsx
+++ b/components/gmail/calendar-invitation-preview.tsx
@@ -11,6 +11,7 @@ import {
} from "@/lib/calendar-invitation"
import { ensureVcLogosCollection } from "@/lib/register-vc-logos"
import { cn } from "@/lib/utils"
+import { MAIL_INVITATION_CARD_CLASS } from "@/lib/mail-chrome-classes"
function attendeeDisplayList(inv: ParsedCalendarInvitation): {
organizerLine?: string
@@ -40,7 +41,7 @@ const RSVP_BTN =
"rounded-full bg-[#1a73e8] px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-[#1557b0]"
const RSVP_SECONDARY =
- "rounded-full border border-[#dadce0] bg-[#e8f0fe] px-4 py-2 text-sm font-medium text-[#1a73e8] transition-colors hover:bg-[#d2e3fc]"
+ "rounded-full border border-border bg-mail-surface px-4 py-2 text-sm font-medium text-primary transition-colors hover:bg-accent"
export function CalendarInvitationPreview({
invitation,
@@ -63,35 +64,35 @@ export function CalendarInvitationPreview({
return (
-
+
-
+
{invitation.summary}
{organizerLine && (
-
{organizerLine}
+
{organizerLine}
)}
{othersLine && (
-
-
+
+
{othersLine}
)}
-
+
-
-
Dans votre agenda
+
+
Dans votre agenda
Aucun autre événement à cette date
@@ -122,14 +123,14 @@ export function CalendarInvitationPreview({
-
+
D’après cet e-mail
Correct ?
diff --git a/components/gmail/compact-inbox-category-tabs.tsx b/components/gmail/compact-inbox-category-tabs.tsx
index 8436783..c7a09b2 100644
--- a/components/gmail/compact-inbox-category-tabs.tsx
+++ b/components/gmail/compact-inbox-category-tabs.tsx
@@ -3,6 +3,9 @@
import { memo, useEffect, useLayoutEffect, useRef, useState } from "react"
import { Icon } from "@iconify/react"
import { inboxTabActiveAccentColor } from "@/lib/inbox-category-tabs"
+import {
+ MAIL_INBOX_CATEGORY_TAB_CONTENT_DARK_CLASS,
+} from "@/lib/mail-chrome-classes"
import { inboxTabShowsInactiveMeta } from "@/lib/mail-url"
import { cn } from "@/lib/utils"
@@ -17,7 +20,7 @@ const TAB_ICON_CLASS = "h-4 w-4 shrink-0"
function inboxTabBadgeDotClass(badgeColor: string) {
return cn(
- "absolute -right-0.5 -top-0.5 size-2 rounded-full ring-2 ring-white",
+ "absolute -right-0.5 -top-0.5 size-2 rounded-full ring-2 ring-mail-surface",
badgeColor
)
}
@@ -130,7 +133,7 @@ export const CompactInboxCategoryTabs = memo(function CompactInboxCategoryTabs({
"relative z-[1] flex min-h-10 cursor-pointer items-center justify-center px-1",
"transition-colors duration-200 motion-reduce:transition-none",
isActive ? "shrink-0 flex-none" : "min-w-0 flex-1 overflow-hidden",
- !isActive && "hover:bg-[#f1f3f4]"
+ !isActive && "hover:bg-mail-nav-hover"
)}
>
{isActive ? (
{tab.label}
diff --git a/components/gmail/compose-modal.tsx b/components/gmail/compose-modal.tsx
index 6da9082..fd4efc3 100644
--- a/components/gmail/compose-modal.tsx
+++ b/components/gmail/compose-modal.tsx
@@ -81,6 +81,14 @@ import {
import { toast } from "sonner"
import { showPendingSendToast } from "@/lib/pending-send-toast"
import { cn, getNextLocalWallClockDate } from "@/lib/utils"
+import {
+ MAIL_COMPOSE_MENU_SELECTED_CLASS,
+ MAIL_COMPOSE_POPOVER_CLASS,
+ MAIL_COMPOSE_TITLEBAR_CLASS,
+ MAIL_ICON_BTN,
+ MAIL_MENU_SURFACE_CLASS,
+} from "@/lib/mail-chrome-classes"
+import { useTheme } from "next-themes"
import {
DropdownMenu,
DropdownMenuContent,
@@ -101,13 +109,14 @@ import data from "@emoji-mart/data"
const LazyPicker = lazy(() => import("@emoji-mart/react"))
function EmojiPicker({ onSelect }: { onSelect: (emoji: { native: string }) => void }) {
+ const { resolvedTheme } = useTheme()
return (
- Chargement…
}>
+
Chargement… }>
{showSuggestions && suggestions.length > 0 && (
-
+
{suggestions.map((s, idx) => (