70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { X } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { MailSettingsFields } from "@/components/gmail/mail-settings-fields"
|
|
import { useMailSettingsStore } from "@/lib/stores/mail-settings-store"
|
|
|
|
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)
|
|
|
|
if (!open) return null
|
|
|
|
return (
|
|
<>
|
|
{!themeDialogOpen && (
|
|
<button
|
|
type="button"
|
|
className="fixed inset-0 z-[60] bg-black/20"
|
|
aria-label="Fermer la configuration rapide"
|
|
onClick={() => setOpen(false)}
|
|
/>
|
|
)}
|
|
<aside
|
|
role="dialog"
|
|
aria-label="Configuration rapide"
|
|
className="fixed right-0 top-0 z-[61] flex h-full w-full max-w-[360px] flex-col border-l border-border bg-mail-surface shadow-lg"
|
|
>
|
|
<header className="flex shrink-0 items-center justify-between gap-2 px-4 pt-5 pb-3">
|
|
<h1 className="text-base font-normal text-foreground">
|
|
Configuration rapide
|
|
</h1>
|
|
<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"
|
|
asChild
|
|
>
|
|
<Link href="/mail/settings" onClick={() => setOpen(false)}>
|
|
Voir tous les paramètres
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<MailSettingsFields
|
|
variant="panel"
|
|
onOpenThemeDialog={() => setThemeDialogOpen(true)}
|
|
/>
|
|
</div>
|
|
</aside>
|
|
</>
|
|
)
|
|
}
|