116 lines
4.0 KiB
TypeScript
116 lines
4.0 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, MailThemeMode } from "@/lib/mail-settings/types"
|
|
import { useMailSettingsStore } from "@/lib/stores/mail-settings-store"
|
|
|
|
const THEME_OPTIONS: { id: MailThemeMode; label: string; previewClass: string }[] =
|
|
[
|
|
{ id: "light", label: "Clair", previewClass: "bg-white" },
|
|
{ id: "dark", label: "Sombre", previewClass: "bg-[#202124]" },
|
|
{
|
|
id: "system",
|
|
label: "Système",
|
|
previewClass:
|
|
"bg-gradient-to-br from-white from-50% to-[#202124] to-50%",
|
|
},
|
|
]
|
|
|
|
export function ThemeSettingsDialog() {
|
|
const open = useMailSettingsStore((s) => s.themeDialogOpen)
|
|
const setOpen = useMailSettingsStore((s) => s.setThemeDialogOpen)
|
|
const themeMode = useMailSettingsStore((s) => s.themeMode)
|
|
const backgroundId = useMailSettingsStore((s) => s.backgroundId)
|
|
const setThemeMode = useMailSettingsStore((s) => s.setThemeMode)
|
|
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">
|
|
Thème
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<section>
|
|
<h3 className="mb-3 text-sm font-medium text-foreground">Mode</h3>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{THEME_OPTIONS.map((opt) => (
|
|
<button
|
|
key={opt.id}
|
|
type="button"
|
|
onClick={() => setThemeMode(opt.id)}
|
|
className={cn(
|
|
"rounded-lg border-2 p-2.5 text-left transition-colors",
|
|
themeMode === opt.id
|
|
? "border-primary bg-accent/60"
|
|
: "border-border hover:border-muted-foreground/50 hover:bg-accent/40"
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"mb-2 h-14 rounded-md border border-border",
|
|
opt.previewClass
|
|
)}
|
|
/>
|
|
<span className="text-sm text-foreground">{opt.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h3 className="mb-3 text-sm font-medium text-foreground">
|
|
Arrière-plan
|
|
</h3>
|
|
<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>
|
|
)
|
|
}
|