72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
import { cn } from "@/lib/utils"
|
|
import {
|
|
MAIL_BACKGROUND_PRESETS,
|
|
normalizeMailBackgroundId,
|
|
} from "@/lib/mail-settings/constants"
|
|
import type { MailBackgroundId } from "@/lib/mail-settings/types"
|
|
import { useMailSettingsStore } from "@/lib/stores/mail-settings-store"
|
|
|
|
export function ThemeSettingsDialog() {
|
|
const open = useMailSettingsStore((s) => s.themeDialogOpen)
|
|
const setOpen = useMailSettingsStore((s) => s.setThemeDialogOpen)
|
|
const backgroundId = useMailSettingsStore((s) => s.backgroundId)
|
|
const setBackgroundId = useMailSettingsStore((s) => s.setBackgroundId)
|
|
const activeBackgroundId = normalizeMailBackgroundId(backgroundId)
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogContent
|
|
overlayClassName="z-[70]"
|
|
className="z-[70] max-w-md gap-5 border-border bg-background sm:max-w-lg"
|
|
>
|
|
<DialogHeader>
|
|
<DialogTitle className="text-left text-base font-normal text-foreground">
|
|
Arrière-plan
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<section>
|
|
<div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
|
|
{MAIL_BACKGROUND_PRESETS.map((preset) => (
|
|
<button
|
|
key={preset.id}
|
|
type="button"
|
|
onClick={() => setBackgroundId(preset.id as MailBackgroundId)}
|
|
className={cn(
|
|
"flex flex-col items-center gap-1 rounded-lg p-1 transition-colors",
|
|
activeBackgroundId === preset.id &&
|
|
"ring-2 ring-[#1a73e8] ring-offset-1 ring-offset-background"
|
|
)}
|
|
title={preset.label}
|
|
>
|
|
<span
|
|
className="block h-14 w-full rounded-md border border-border bg-cover bg-center"
|
|
style={
|
|
preset.background === "none"
|
|
? { backgroundColor: "var(--app-canvas)" }
|
|
: {
|
|
backgroundColor: preset.fallbackColor,
|
|
background: preset.background,
|
|
}
|
|
}
|
|
/>
|
|
<span className="max-w-full truncate text-[10px] text-muted-foreground">
|
|
{preset.label}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|