ultisuite-client/components/gmail/quick-settings/quick-settings-panel.tsx
R3D347HR4Y b95948f980 feat: refactor mail and account settings structure for improved navigation and layout
- Updated routing for mail settings to redirect to the new settings layout.
- Introduced new account layout and section components for better organization.
- Replaced hardcoded paths with constants for account and mail settings to enhance maintainability.
- Removed deprecated mail settings layout and integrated it into the new settings structure.
- Enhanced user experience by streamlining navigation between account and mail settings.
2026-06-16 11:32:58 +02:00

72 lines
2.6 KiB
TypeScript

"use client"
import Link from "next/link"
import { X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
import { MailSettingsFields } from "@/components/gmail/mail-settings-fields"
import { useMailSettingsStore } from "@/lib/stores/mail-settings-store"
import { MAIL_SETTINGS_BASE_PATH } from "@/lib/mail-settings/settings-nav"
import { cn } from "@/lib/utils"
export function QuickSettingsPanel() {
const open = useMailSettingsStore((s) => s.quickSettingsOpen)
const themeDialogOpen = useMailSettingsStore((s) => s.themeDialogOpen)
const setOpen = useMailSettingsStore((s) => s.setQuickSettingsOpen)
const setThemeDialogOpen = useMailSettingsStore((s) => s.setThemeDialogOpen)
return (
<Sheet open={open} onOpenChange={(next) => !next && setOpen(false)}>
<SheetContent
side="right"
hideClose
overlayClassName={cn("bg-black/20", themeDialogOpen && "hidden")}
aria-label="Configuration rapide"
aria-describedby={undefined}
className="w-full gap-0 border-border bg-mail-surface p-0 text-foreground sm:max-w-[360px]"
onInteractOutside={(e) => {
if (themeDialogOpen) e.preventDefault()
}}
onEscapeKeyDown={(e) => {
if (themeDialogOpen) e.preventDefault()
}}
>
<header className="flex shrink-0 items-center justify-between gap-2 px-4 pt-5 pb-3">
<SheetTitle className="text-base font-normal text-foreground dark:text-white">
Configuration rapide
</SheetTitle>
<Button
type="button"
variant="ghost"
size="icon"
className="size-9 text-muted-foreground"
aria-label="Fermer"
onClick={() => setOpen(false)}
>
<X className="size-5" />
</Button>
</header>
<div className="min-h-0 flex-1 overflow-y-auto">
<div className="px-4 pb-4">
<Button
variant="outline"
className="h-10 w-full rounded-full border-[#1a73e8] text-[#1a73e8] hover:bg-[#e8f0fe]/50 dark:border-[#9aa0a6] dark:text-white dark:hover:bg-[#3c4043]/50"
asChild
>
<Link href={MAIL_SETTINGS_BASE_PATH} onClick={() => setOpen(false)}>
Voir tous les paramètres
</Link>
</Button>
</div>
<MailSettingsFields
variant="panel"
onOpenThemeDialog={() => setThemeDialogOpen(true)}
/>
</div>
</SheetContent>
</Sheet>
)
}