94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { Check } from "lucide-react"
|
|
import type {
|
|
LabelInMessageListVisibility,
|
|
LabelListSidebarVisibility,
|
|
} from "@/lib/stores/nav-store"
|
|
|
|
function VisibilityOption({
|
|
checked,
|
|
onPick,
|
|
children,
|
|
}: {
|
|
checked: boolean
|
|
onPick: () => void
|
|
children: React.ReactNode
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onPick}
|
|
className={cn(
|
|
"flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
|
|
checked
|
|
? "bg-accent text-accent-foreground"
|
|
: "text-foreground hover:bg-accent/50"
|
|
)}
|
|
>
|
|
<span>{children}</span>
|
|
<span className="flex size-4 shrink-0 items-center justify-center" aria-hidden={!checked}>
|
|
{checked ? <Check className="size-4" strokeWidth={2} /> : null}
|
|
</span>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export function NavSidebarVisibilityFields({
|
|
listKind,
|
|
value,
|
|
onChange,
|
|
}: {
|
|
listKind: "labels" | "folders"
|
|
value: LabelListSidebarVisibility
|
|
onChange: (v: LabelListSidebarVisibility) => void
|
|
}) {
|
|
const section =
|
|
listKind === "labels"
|
|
? "Dans la liste des libellés"
|
|
: "Dans la liste des dossiers"
|
|
|
|
return (
|
|
<fieldset className="space-y-1">
|
|
<legend className="mb-1 text-xs font-medium text-muted-foreground">
|
|
{section}
|
|
</legend>
|
|
<VisibilityOption checked={value === "show"} onPick={() => onChange("show")}>
|
|
Afficher
|
|
</VisibilityOption>
|
|
<VisibilityOption
|
|
checked={value === "showUnread"}
|
|
onPick={() => onChange("showUnread")}
|
|
>
|
|
Afficher si messages non lus
|
|
</VisibilityOption>
|
|
<VisibilityOption checked={value === "hide"} onPick={() => onChange("hide")}>
|
|
Masquer
|
|
</VisibilityOption>
|
|
</fieldset>
|
|
)
|
|
}
|
|
|
|
export function NavMessageVisibilityFields({
|
|
value,
|
|
onChange,
|
|
}: {
|
|
value: LabelInMessageListVisibility
|
|
onChange: (v: LabelInMessageListVisibility) => void
|
|
}) {
|
|
return (
|
|
<fieldset className="space-y-1">
|
|
<legend className="mb-1 text-xs font-medium text-muted-foreground">
|
|
Dans la liste des messages
|
|
</legend>
|
|
<VisibilityOption checked={value === "show"} onPick={() => onChange("show")}>
|
|
Afficher
|
|
</VisibilityOption>
|
|
<VisibilityOption checked={value === "hide"} onPick={() => onChange("hide")}>
|
|
Masquer
|
|
</VisibilityOption>
|
|
</fieldset>
|
|
)
|
|
}
|