diff --git a/apps/mail/app/(routes)/settings/connections/page.tsx b/apps/mail/app/(routes)/settings/connections/page.tsx index 018a3c271a..0447f1940c 100644 --- a/apps/mail/app/(routes)/settings/connections/page.tsx +++ b/apps/mail/app/(routes)/settings/connections/page.tsx @@ -170,7 +170,7 @@ export default function ConnectionsPage() { - + {m['pages.settings.connections.disconnectTitle']()} diff --git a/apps/mail/app/(routes)/settings/danger-zone/page.tsx b/apps/mail/app/(routes)/settings/danger-zone/page.tsx index 75a787f26e..b5b4cd16bd 100644 --- a/apps/mail/app/(routes)/settings/danger-zone/page.tsx +++ b/apps/mail/app/(routes)/settings/danger-zone/page.tsx @@ -76,7 +76,7 @@ function DeleteAccountDialog() { - + {m['pages.settings.dangerZone.title']()} {m['pages.settings.dangerZone.description']()} diff --git a/apps/mail/app/globals.css b/apps/mail/app/globals.css index 9d1b982cc0..b0212c4a28 100644 --- a/apps/mail/app/globals.css +++ b/apps/mail/app/globals.css @@ -77,6 +77,7 @@ --subtleBlack: #1F1F1F; --skyBlue: #0066FF; --shinyGray: #A1A1A1; + --sidebar: hsl(0 0% 98%); } .dark { @@ -114,6 +115,7 @@ --sidebar-border: hsl(240 3.7% 15.9%); --sidebar-ring: hsl(217.2 91.2% 59.8%); --panel: hsl(240 3.7% 10.2%); + --sidebar: hsl(240 5.9% 10%); } @theme inline { @@ -137,14 +139,14 @@ --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); - + /* Chart colors */ --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); - + /* Static colors */ --color-darkBackground: var(--darkBackground); --color-lightBackground: var(--lightBackground); @@ -160,7 +162,7 @@ --color-subtleBlack: var(--subtleBlack); --color-skyBlue: var(--skyBlue); --color-shinyGray: var(--shinyGray); - + /* sidebar colors */ --color-sidebar: var(--sidebar-background); --color-sidebar-foreground: var(--sidebar-foreground); @@ -170,7 +172,7 @@ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); - + /* Border radius */ --radius-lg: var(--radius); --radius-md: calc(var(--radius) - 2px); @@ -234,7 +236,6 @@ --animate-blink: blink 0.8s ease-in-out infinite; } - /* Add scrollbar styling */ @utility style-scrollbar { @apply scrollbar scrollbar-w-0 scrollbar-thumb-accent/40 scrollbar-track-transparent hover:scrollbar-thumb-accent scrollbar-thumb-rounded-full; @@ -473,3 +474,14 @@ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } +/* + ---break--- +*/ +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/apps/mail/components/connection/add.tsx b/apps/mail/components/connection/add.tsx index b91b89bb1c..bfcddcb6ba 100644 --- a/apps/mail/components/connection/add.tsx +++ b/apps/mail/components/connection/add.tsx @@ -64,7 +64,7 @@ export const AddConnectionDialog = ({ )} - + {m['pages.settings.connections.connectEmail']()} diff --git a/apps/mail/components/context/command-palette-context.tsx b/apps/mail/components/context/command-palette-context.tsx index e9f41c670a..252c8d038e 100644 --- a/apps/mail/components/context/command-palette-context.tsx +++ b/apps/mail/components/context/command-palette-context.tsx @@ -53,7 +53,7 @@ import { Label } from '@/components/ui/label'; import { Input } from '@/components/ui/input'; import { Badge } from '@/components/ui/badge'; import { format, subDays } from 'date-fns'; -import { VisuallyHidden } from 'radix-ui'; +import { VisuallyHidden } from '@radix-ui/react-visually-hidden'; import { m } from '@/paraglide/messages'; import { Pencil2 } from '../icons/icons'; import { Button } from '../ui/button'; @@ -65,7 +65,7 @@ type CommandPaletteContext = { clearAllFilters: () => void; }; -interface CommandItem { +interface CommandItemType { title: string; icon?: ComponentType<{ size?: number; strokeWidth?: number; className?: string }>; url?: string; @@ -644,13 +644,13 @@ export function CommandPalette({ children }: { children: React.ReactNode }) { const allCommands = useMemo(() => { type CommandGroup = { group: string; - items: CommandItem[]; + items: CommandItemType[]; }; - const searchCommands: CommandItem[] = []; - const mailCommands: CommandItem[] = []; - const settingsCommands: CommandItem[] = []; - const otherCommands: Record = {}; + const searchCommands: CommandItemType[] = []; + const mailCommands: CommandItemType[] = []; + const settingsCommands: CommandItemType[] = []; + const otherCommands: Record = {}; mailCommands.push({ title: 'Compose Email', @@ -713,7 +713,7 @@ export function CommandPalette({ children }: { children: React.ReactNode }) { section?.sections.forEach((group) => { group.items.forEach((navItem) => { if (navItem.disabled) return; - const item: CommandItem = { + const item: CommandItemType = { title: navItem.title, icon: navItem.icon, url: navItem.url, @@ -1885,10 +1885,10 @@ export function CommandPalette({ children }: { children: React.ReactNode }) { setOpen(isOpen ? 'true' : null); }} > - + {m['common.commandPalette.title']()} {m['common.commandPalette.description']()} - + {renderView()} {children} diff --git a/apps/mail/components/context/label-sidebar-context.tsx b/apps/mail/components/context/label-sidebar-context.tsx index d98ca528e2..c329a3bba6 100644 --- a/apps/mail/components/context/label-sidebar-context.tsx +++ b/apps/mail/components/context/label-sidebar-context.tsx @@ -72,7 +72,7 @@ export function LabelSidebarContextMenu({ children, labelId, hide }: LabelSideba - + {m['common.labels.deleteLabelConfirm']()} diff --git a/apps/mail/components/create/create-email.tsx b/apps/mail/components/create/create-email.tsx index c37368fe33..a2f2d24311 100644 --- a/apps/mail/components/create/create-email.tsx +++ b/apps/mail/components/create/create-email.tsx @@ -1,6 +1,5 @@ import { useUndoSend, type EmailData, deserializeFiles } from '@/hooks/use-undo-send'; import { useActiveConnection } from '@/hooks/use-connections'; -import { Dialog, DialogClose } from '@/components/ui/dialog'; import { useEmailAliases } from '@/hooks/use-email-aliases'; import { cleanEmailAddresses } from '@/lib/email-utils'; @@ -15,7 +14,6 @@ import { useEffect, useMemo, useState } from 'react'; import type { Attachment } from '@/types'; import { useQueryState } from 'nuqs'; -import { X } from '../icons/icons'; import posthog from 'posthog-js'; import { toast } from 'sonner'; import './prosemirror.css'; @@ -176,14 +174,6 @@ export function CreateEmail({ // Cast draft to our extended type that includes CC and BCC const typedDraft = draft as unknown as DraftType; - const handleDialogClose = (open: boolean) => { - setIsComposeOpen(open ? 'true' : null); - if (!open) { - setDraftId(null); - clearUndoData(); - } - }; - const base64ToFile = (base64: string, filename: string, mimeType: string): File | null => { try { const byteString = atob(base64); @@ -204,70 +194,48 @@ export function CreateEmail({ .filter((file): file is File => file !== null); return ( - <> - -
-
- - - +
+ {isDraftLoading ? ( +
+
+
+

Loading draft...

- {isDraftLoading ? ( -
-
-
-

Loading draft...

-
-
- ) : ( - e.replace(/[<>]/g, '')) || - processInitialEmails(initialTo) - } - initialCc={ - undoEmailData?.cc || - typedDraft?.cc?.map((e: string) => e.replace(/[<>]/g, '')) || - processInitialEmails(initialCc) - } - initialBcc={ - undoEmailData?.bcc || - typedDraft?.bcc?.map((e: string) => e.replace(/[<>]/g, '')) || - processInitialEmails(initialBcc) - } - onClose={() => { - setThreadId(null); - setActiveReplyId(null); - setIsComposeOpen(null); - setDraftId(null); - clearUndoData(); - }} - initialAttachments={undoEmailData?.attachments || files} - initialSubject={ - undoEmailData?.subject || - typedDraft?.subject || - initialSubject - } - autofocus={false} - settingsLoading={settingsLoading} - /> - )}
-
- + ) : ( + e.replace(/[<>]/g, '')) || + processInitialEmails(initialTo) + } + initialCc={ + undoEmailData?.cc || + typedDraft?.cc?.map((e: string) => e.replace(/[<>]/g, '')) || + processInitialEmails(initialCc) + } + initialBcc={ + undoEmailData?.bcc || + typedDraft?.bcc?.map((e: string) => e.replace(/[<>]/g, '')) || + processInitialEmails(initialBcc) + } + onClose={() => { + setThreadId(null); + setActiveReplyId(null); + setIsComposeOpen(null); + setDraftId(null); + clearUndoData(); + }} + initialAttachments={undoEmailData?.attachments || files} + initialSubject={undoEmailData?.subject || typedDraft?.subject || initialSubject} + autofocus={false} + settingsLoading={settingsLoading} + /> + )} + ); } diff --git a/apps/mail/components/create/email-composer.tsx b/apps/mail/components/create/email-composer.tsx index abf143448e..d8376c5dfe 100644 --- a/apps/mail/components/create/email-composer.tsx +++ b/apps/mail/components/create/email-composer.tsx @@ -648,13 +648,20 @@ export function EmailComposer({ Bcc {onClose && ( - + + + + + +

Close (ESC)

+
+
)} @@ -1005,7 +1012,7 @@ export function EmailComposer({ - + Discard message? @@ -1025,7 +1032,7 @@ export function EmailComposer({ - + Attachment Warning diff --git a/apps/mail/components/create/template-button.tsx b/apps/mail/components/create/template-button.tsx index 671436d0f5..cf699196f5 100644 --- a/apps/mail/components/create/template-button.tsx +++ b/apps/mail/components/create/template-button.tsx @@ -254,7 +254,7 @@ const TemplateButtonComponent: React.FC = ({ - + Save as Template diff --git a/apps/mail/components/labels/label-dialog.tsx b/apps/mail/components/labels/label-dialog.tsx index 5fda153b25..02296e9b53 100644 --- a/apps/mail/components/labels/label-dialog.tsx +++ b/apps/mail/components/labels/label-dialog.tsx @@ -93,7 +93,7 @@ export function LabelDialog({ return ( {trigger && {trigger}} - + {editingLabel ? m['common.labels.editLabel']() : m['common.mail.createNewLabel']()} diff --git a/apps/mail/components/magicui/file-tree.tsx b/apps/mail/components/magicui/file-tree.tsx index 98606f0a4c..c2c692a393 100644 --- a/apps/mail/components/magicui/file-tree.tsx +++ b/apps/mail/components/magicui/file-tree.tsx @@ -14,7 +14,7 @@ import { import { ScrollArea } from '@/components/ui/scroll-area'; import { Button } from '@/components/ui/button'; import { FileIcon } from 'lucide-react'; -import { Accordion } from 'radix-ui'; +import * as Accordion from '@radix-ui/react-accordion'; import { cn } from '@/lib/utils'; type TreeViewElement = { diff --git a/apps/mail/components/mail/mail-display.tsx b/apps/mail/components/mail/mail-display.tsx index 3410c57707..f9fc61fdb7 100644 --- a/apps/mail/components/mail/mail-display.tsx +++ b/apps/mail/components/mail/mail-display.tsx @@ -561,7 +561,7 @@ const MoreAboutPerson = ({ return ( - + More about {cleanNameDisplay(person.name)} @@ -634,7 +634,7 @@ const MoreAboutQuery = ({ return ( - + Search Results diff --git a/apps/mail/components/onboarding.tsx b/apps/mail/components/onboarding.tsx index ed707f73be..dcf525de1a 100644 --- a/apps/mail/components/onboarding.tsx +++ b/apps/mail/components/onboarding.tsx @@ -72,10 +72,7 @@ export function OnboardingDialog({ return ( - +
{steps[currentStep] && steps[currentStep].video && (
diff --git a/apps/mail/components/responsive-modal.tsx b/apps/mail/components/responsive-modal.tsx index 9fba45e3e4..fa6f74ecba 100644 --- a/apps/mail/components/responsive-modal.tsx +++ b/apps/mail/components/responsive-modal.tsx @@ -6,7 +6,7 @@ import { DialogTitle, } from '@/components/ui/dialog'; import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer'; -import { VisuallyHidden } from 'radix-ui'; +import { VisuallyHidden } from '@radix-ui/react-visually-hidden'; import { type ReactElement } from 'react'; // import { useMedia } from 'react-use'; diff --git a/apps/mail/components/setup-phone.tsx b/apps/mail/components/setup-phone.tsx index b254d58442..3199b2b639 100644 --- a/apps/mail/components/setup-phone.tsx +++ b/apps/mail/components/setup-phone.tsx @@ -105,7 +105,7 @@ export const SetupInboxDialog = () => { - + Set up your Inbox assistant diff --git a/apps/mail/components/ui/accordion.tsx b/apps/mail/components/ui/accordion.tsx index 1b59ab5115..c2c1872208 100644 --- a/apps/mail/components/ui/accordion.tsx +++ b/apps/mail/components/ui/accordion.tsx @@ -1,4 +1,6 @@ -import { Accordion as AccordionPrimitive } from 'radix-ui'; +'use client'; + +import * as AccordionPrimitive from '@radix-ui/react-accordion'; import { ChevronDown } from 'lucide-react'; import * as React from 'react'; @@ -22,7 +24,7 @@ const AccordionTrigger = React.forwardRef< svg]:rotate-180', + 'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', className, )} {...props} @@ -40,7 +42,7 @@ const AccordionContent = React.forwardRef< >(({ className, children, ...props }, ref) => (
{children}
diff --git a/apps/mail/components/ui/alert.tsx b/apps/mail/components/ui/alert.tsx index 1573d4b4da..fbb31be414 100644 --- a/apps/mail/components/ui/alert.tsx +++ b/apps/mail/components/ui/alert.tsx @@ -1,7 +1,8 @@ import { cva, type VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; import * as React from 'react'; +import { cn } from '@/lib/utils'; + const alertVariants = cva( 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', { diff --git a/apps/mail/components/ui/app-sidebar.tsx b/apps/mail/components/ui/app-sidebar.tsx index 46d0c4f05c..1d212ea7f3 100644 --- a/apps/mail/components/ui/app-sidebar.tsx +++ b/apps/mail/components/ui/app-sidebar.tsx @@ -1,8 +1,6 @@ import { Dialog, DialogContent, - DialogDescription, - DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader } from '@/components/ui/sidebar'; @@ -196,9 +194,6 @@ function ComposeButton() { }; return ( - - - - - + + diff --git a/apps/mail/components/ui/avatar.tsx b/apps/mail/components/ui/avatar.tsx index 7feb9dfdde..b0ec97bff3 100644 --- a/apps/mail/components/ui/avatar.tsx +++ b/apps/mail/components/ui/avatar.tsx @@ -1,14 +1,17 @@ -import { Avatar as AvatarPrimitive } from 'radix-ui'; -import { cn } from '@/lib/utils'; +'use client'; + +import * as AvatarPrimitive from '@radix-ui/react-avatar'; import * as React from 'react'; +import { cn } from '@/lib/utils'; + const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); @@ -32,7 +35,10 @@ const AvatarFallback = React.forwardRef< >(({ className, ...props }, ref) => ( )); diff --git a/apps/mail/components/ui/badge.tsx b/apps/mail/components/ui/badge.tsx index 3044947326..4a80911395 100644 --- a/apps/mail/components/ui/badge.tsx +++ b/apps/mail/components/ui/badge.tsx @@ -4,21 +4,16 @@ import * as React from 'react'; import { cn } from '@/lib/utils'; const badgeVariants = cva( - 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', + 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', { variants: { variant: { - default: 'border-transparent bg-primary text-primary-foreground ', + default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80', outline: 'text-foreground', - important: 'border-0 text-amber-700 dark:text-amber-500 ', - promotions: 'border-0 text-red-700 dark:text-red-500 ', - personal: 'border-0 text-green-700 dark:text-green-500 ', - updates: 'border-0 text-purple-700 dark:text-purple-500 ', - forums: 'border-transparent text-blue-500 dark:text-blue-400', }, }, defaultVariants: { diff --git a/apps/mail/components/ui/button.tsx b/apps/mail/components/ui/button.tsx index 2ba3b6b7a4..485f6a00ca 100644 --- a/apps/mail/components/ui/button.tsx +++ b/apps/mail/components/ui/button.tsx @@ -1,32 +1,33 @@ import { cva, type VariantProps } from 'class-variance-authority'; -import { Slot } from 'radix-ui'; +import { Slot } from '@radix-ui/react-slot'; import * as React from 'react'; import { cn } from '@/lib/utils'; const buttonVariants = cva( - 'inline-flex items-center justify-center cursor-pointer gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 aria-busy:cursor-progress', + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { - default: 'bg-primary text-primary-foreground hover:bg-primary/90', - destructive: 'bg-logout text-destructive-foreground hover:bg-logout/90', - outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', - secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', - ghost: 'hover:bg-accent hover:text-accent-foreground', - link: 'text-primary underline-offset-4 hover:underline', - main: 'bg-muted text-primary', + default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90', + destructive: + 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', + outline: + 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', + secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80', + ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', + link: 'text-primary underline-offset-4 hover:underline',main: 'bg-muted text-primary', // A button that resembles a dropdownItem dropdownItem: 'select-none gap-2 rounded-sm text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent', }, size: { dropdownItem: 'px-2 py-1.5', - default: 'h-10 px-4 py-2', - sm: 'h-9 rounded-md px-3', + default: 'h-9 px-4 py-2 has-[>svg]:px-3', + sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', xs: 'h-8 rounded-md px-2', - lg: 'h-11 rounded-md px-8', - icon: 'h-10 w-10', + lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', + icon: 'size-9', }, }, defaultVariants: { @@ -36,50 +37,25 @@ const buttonVariants = cva( }, ); -export interface ButtonProps - extends React.ButtonHTMLAttributes, - VariantProps { - asChild?: boolean; - isLoading?: boolean; - loadingText?: string; -} +function Button({ + className, + variant, + size, + asChild = false, + ...props +}: React.ComponentProps<'button'> & + VariantProps & { + asChild?: boolean; + }) { + const Comp = asChild ? Slot : 'button'; -const Button = React.forwardRef( - ( - { - className, - variant, - size, - asChild = false, - isLoading = false, - loadingText, - children, - ...props - }, - ref, - ) => { - const Comp = asChild ? Slot.Slot : 'button'; - return ( - - {isLoading ? ( - <> - - {loadingText || children} - - ) : ( - children - )} - - ); - }, -); -Button.displayName = 'Button'; + return ( + + ); +} export { Button, buttonVariants }; diff --git a/apps/mail/components/ui/checkbox.tsx b/apps/mail/components/ui/checkbox.tsx index 50bef6d2cb..5022a357f3 100644 --- a/apps/mail/components/ui/checkbox.tsx +++ b/apps/mail/components/ui/checkbox.tsx @@ -1,4 +1,6 @@ -import { Checkbox as CheckboxPrimitive } from 'radix-ui'; +'use client'; + +import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; import { Check } from 'lucide-react'; import * as React from 'react'; diff --git a/apps/mail/components/ui/collapsible.tsx b/apps/mail/components/ui/collapsible.tsx index da83ed1053..86ab87d88e 100644 --- a/apps/mail/components/ui/collapsible.tsx +++ b/apps/mail/components/ui/collapsible.tsx @@ -1,4 +1,6 @@ -import { Collapsible as CollapsiblePrimitive } from 'radix-ui'; +'use client'; + +import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'; const Collapsible = CollapsiblePrimitive.Root; diff --git a/apps/mail/components/ui/command.tsx b/apps/mail/components/ui/command.tsx index 2cbca53c1b..8787f6c725 100644 --- a/apps/mail/components/ui/command.tsx +++ b/apps/mail/components/ui/command.tsx @@ -1,15 +1,13 @@ -import { - Dialog, - DialogContent, - DialogDescription, - DialogTitle, - type DialogProps, -} from '@/components/ui/dialog'; +'use client'; + +import { type DialogProps } from '@radix-ui/react-dialog'; import { Command as CommandPrimitive } from 'cmdk'; -import { Search } from '../icons/icons'; -import { cn } from '@/lib/utils'; +import { Search } from 'lucide-react'; import * as React from 'react'; +import { Dialog, DialogContent } from '@/components/ui/dialog'; +import { cn } from '@/lib/utils'; + const Command = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef @@ -17,7 +15,7 @@ const Command = React.forwardRef< { return ( - Command - Command - - + + {children} @@ -46,12 +39,12 @@ const CommandInput = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( -
- +
+ (({ className, ...props }, ref) => ( )); @@ -90,7 +83,7 @@ const CommandGroup = React.forwardRef< ) => { return ( - ); @@ -144,11 +133,11 @@ CommandShortcut.displayName = 'CommandShortcut'; export { Command, CommandDialog, + CommandInput, + CommandList, CommandEmpty, CommandGroup, - CommandInput, CommandItem, - CommandList, - CommandSeparator, CommandShortcut, + CommandSeparator, }; diff --git a/apps/mail/components/ui/context-menu.tsx b/apps/mail/components/ui/context-menu.tsx index eeaf302870..1e18c4a925 100644 --- a/apps/mail/components/ui/context-menu.tsx +++ b/apps/mail/components/ui/context-menu.tsx @@ -1,4 +1,6 @@ -import { ContextMenu as ContextMenuPrimitive } from 'radix-ui'; +'use client'; + +import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'; import { Check, ChevronRight, Circle } from 'lucide-react'; import * as React from 'react'; @@ -25,7 +27,7 @@ const ContextMenuSubTrigger = React.forwardRef< ) { + return ; +} -type DialogOverlayProps = React.ComponentPropsWithoutRef & { - showOverlay?: boolean; -}; +function DialogTrigger({ ...props }: React.ComponentProps) { + return ; +} -const DialogOverlay = React.forwardRef< - React.ElementRef, - DialogOverlayProps ->(({ className, showOverlay = false, ...props }, ref) => ( - -)); -DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; +function DialogPortal({ ...props }: React.ComponentProps) { + return ; +} -interface DialogContentProps - extends React.ComponentPropsWithoutRef { - showOverlay?: boolean; +function DialogClose({ ...props }: React.ComponentProps) { + return ; } -const DialogContent = React.forwardRef< - React.ElementRef, - DialogContentProps ->(({ className, children, showOverlay = false, ...props }, ref) => ( - - - ) { + return ( + - {children} - - -)); -DialogContent.displayName = DialogPrimitive.Content.displayName; + /> + ); +} -const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => ( -
-); -DialogHeader.displayName = 'DialogHeader'; +function DialogContent({ + className, + children, + showCloseButton = true, + ...props +}: React.ComponentProps & { + showCloseButton?: boolean; +}) { + return ( + + + + {children} + {showCloseButton && ( + + + Close + + )} + + + ); +} -const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => ( -
-); -DialogFooter.displayName = 'DialogFooter'; +function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) { + return ( +
+ ); +} -const DialogTitle = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -DialogTitle.displayName = DialogPrimitive.Title.displayName; +function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) { + return ( +
+ ); +} -const DialogDescription = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -DialogDescription.displayName = DialogPrimitive.Description.displayName; +function DialogTitle({ className, ...props }: React.ComponentProps) { + return ( + + ); +} -export type DialogProps = DialogPrimitive.DialogProps; +function DialogDescription({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} export { Dialog, - DialogPortal, - DialogOverlay, DialogClose, - DialogTrigger, DialogContent, - DialogHeader, + DialogDescription, DialogFooter, + DialogHeader, + DialogOverlay, + DialogPortal, DialogTitle, - DialogDescription, + DialogTrigger, }; diff --git a/apps/mail/components/ui/drawer.tsx b/apps/mail/components/ui/drawer.tsx index ab7c1ea4c5..14342d70a4 100644 --- a/apps/mail/components/ui/drawer.tsx +++ b/apps/mail/components/ui/drawer.tsx @@ -1,3 +1,5 @@ +'use client'; + import { Drawer as DrawerPrimitive } from 'vaul'; import * as React from 'react'; @@ -21,7 +23,11 @@ const DrawerOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - + )); DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName; @@ -34,12 +40,12 @@ const DrawerContent = React.forwardRef< -
+
{children} diff --git a/apps/mail/components/ui/dropdown-menu.tsx b/apps/mail/components/ui/dropdown-menu.tsx index ecced39426..3854b27de5 100644 --- a/apps/mail/components/ui/dropdown-menu.tsx +++ b/apps/mail/components/ui/dropdown-menu.tsx @@ -1,5 +1,7 @@ -import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui'; -import { Check, Circle } from 'lucide-react'; +'use client'; + +import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; +import { Check, ChevronRight, Circle } from 'lucide-react'; import * as React from 'react'; import { cn } from '@/lib/utils'; @@ -25,13 +27,14 @@ const DropdownMenuSubTrigger = React.forwardRef< {children} + )); DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName; @@ -43,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef< , - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ ...props }, ref) => { const { error, formItemId, formDescriptionId, formMessageId } = useFormField(); return ( - >(({ className, children, ...props }, ref) => { const { error, formMessageId } = useFormField(); - const body = error ? String(error?.message) : children; + const body = error ? String(error?.message ?? '') : children; if (!body) { return null; diff --git a/apps/mail/components/ui/input.tsx b/apps/mail/components/ui/input.tsx index abca9743f6..32f9f12658 100644 --- a/apps/mail/components/ui/input.tsx +++ b/apps/mail/components/ui/input.tsx @@ -2,21 +2,20 @@ import * as React from 'react'; import { cn } from '@/lib/utils'; -const Input = React.forwardRef>( - ({ className, type, ...props }, ref) => { - return ( - - ); - }, -); -Input.displayName = 'Input'; +function Input({ className, type, ...props }: React.ComponentProps<'input'>) { + return ( + + ); +} export { Input }; diff --git a/apps/mail/components/ui/label.tsx b/apps/mail/components/ui/label.tsx index a3968bf5b9..452a45b81d 100644 --- a/apps/mail/components/ui/label.tsx +++ b/apps/mail/components/ui/label.tsx @@ -1,5 +1,7 @@ +'use client'; + import { cva, type VariantProps } from 'class-variance-authority'; -import { Label as LabelPrimitive } from 'radix-ui'; +import * as LabelPrimitive from '@radix-ui/react-label'; import * as React from 'react'; import { cn } from '@/lib/utils'; diff --git a/apps/mail/components/ui/nav-user.tsx b/apps/mail/components/ui/nav-user.tsx index 2d6a372c5c..a874c795a7 100644 --- a/apps/mail/components/ui/nav-user.tsx +++ b/apps/mail/components/ui/nav-user.tsx @@ -202,7 +202,7 @@ export function NavUser() {
, React.ComponentPropsWithoutRef @@ -35,7 +36,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName; const NavigationMenuItem = NavigationMenuPrimitive.Item; const navigationMenuTriggerStyle = cva( - 'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent', + 'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent', ); const NavigationMenuTrigger = React.forwardRef< @@ -49,7 +50,7 @@ const NavigationMenuTrigger = React.forwardRef< > {children}{' '}