695 lines
24 KiB
TypeScript
695 lines
24 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useRef, useEffect, type DragEvent } from "react"
|
|
import { MoreVertical } from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
import { useEmailDropTarget } from "@/lib/drag-context"
|
|
import {
|
|
MAIL_SIDEBAR_COLOR_PICKER_CLASS,
|
|
MAIL_SIDEBAR_COLOR_SWATCH_RING_CLASS,
|
|
MAIL_SIDEBAR_MENU_PLAIN_ITEM_CLASS,
|
|
MAIL_SIDEBAR_MENU_SEPARATOR_CLASS,
|
|
MAIL_SIDEBAR_MENU_SUB_TRIGGER_CLASS,
|
|
MAIL_SIDEBAR_MENU_SURFACE_CLASS,
|
|
} from "@/lib/mail-chrome-classes"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import {
|
|
ContextMenu,
|
|
ContextMenuContent,
|
|
ContextMenuItem,
|
|
ContextMenuLabel,
|
|
ContextMenuSeparator,
|
|
ContextMenuSub,
|
|
ContextMenuSubContent,
|
|
ContextMenuSubTrigger,
|
|
ContextMenuTrigger,
|
|
} from "@/components/ui/context-menu"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Button } from "@/components/ui/button"
|
|
import { isSystemNavLabelId } from "@/lib/sidebar-nav-data"
|
|
import type {
|
|
LabelInMessageListVisibility,
|
|
LabelListSidebarVisibility,
|
|
NavItemPrefs,
|
|
} from "@/lib/sidebar-nav-context"
|
|
import {
|
|
readSidebarNavDragData,
|
|
resolveNavDropPlacement,
|
|
setSidebarNavDragData,
|
|
} from "@/lib/sidebar-nav-dnd"
|
|
import { LABEL_MENU_COLOR_SWATCHES } from "@/components/gmail/sidebar/sidebar-nav-constants"
|
|
import {
|
|
SidebarNavOptionsSheet,
|
|
SidebarNavSheetAction,
|
|
SidebarNavSheetCheckOption,
|
|
SidebarNavSheetColorPicker,
|
|
SidebarNavSheetDivider,
|
|
SidebarNavSheetSectionLabel,
|
|
} from "@/components/gmail/sidebar/sidebar-nav-options-sheet"
|
|
import { useSidebarTouchOptionsMenu } from "@/components/gmail/sidebar/use-sidebar-touch-options"
|
|
import {
|
|
LabelMenuOptionWithCheck,
|
|
ContextLabelMenuOptionWithCheck,
|
|
navRowRoundedWhenActive,
|
|
SidebarNavDragHandle,
|
|
SidebarNavIconSlot,
|
|
SidebarOverflowColumn,
|
|
sidebarOverflowMenuButtonClass,
|
|
navRowActivate,
|
|
} from "@/components/gmail/sidebar/sidebar-nav-primitives"
|
|
import type { SidebarNavDragBindings } from "@/components/gmail/sidebar/sidebar-nav-drag-bindings"
|
|
|
|
export type SidebarLabelItemRowProps = SidebarNavDragBindings & {
|
|
item: { id: string; label: string; color: string; count?: number }
|
|
unreadCount: number
|
|
isExpanded: boolean
|
|
selectedFolder: string
|
|
touchNav: boolean
|
|
onSelectFolder: (id: string) => void
|
|
getNavItemPrefs: (id: string) => Required<Pick<NavItemPrefs, "sidebar" | "messages">>
|
|
setNavItemSidebarVisibility: (id: string, v: LabelListSidebarVisibility) => void
|
|
setNavItemMessageVisibility: (id: string, v: LabelInMessageListVisibility) => void
|
|
updateFolderOrLabelColor: (id: string, color: string) => void
|
|
renameFolderOrLabel: (id: string, name: string) => void
|
|
removeFolderOrLabelRow: (id: string) => void
|
|
addChildLabelRow: (parentId: string, name: string) => void
|
|
}
|
|
|
|
export function SidebarLabelItemRow({
|
|
item,
|
|
unreadCount,
|
|
isExpanded: labelRowExpanded,
|
|
selectedFolder,
|
|
touchNav,
|
|
onSelectFolder,
|
|
getNavItemPrefs,
|
|
setNavItemSidebarVisibility,
|
|
setNavItemMessageVisibility,
|
|
updateFolderOrLabelColor,
|
|
renameFolderOrLabel,
|
|
removeFolderOrLabelRow,
|
|
addChildLabelRow,
|
|
navDragRef,
|
|
navDropPlacementRef,
|
|
beginNavDrag,
|
|
clearNavDrag,
|
|
updateNavDropTarget,
|
|
clearNavDropTarget,
|
|
commitNavDrop,
|
|
}: SidebarLabelItemRowProps) {
|
|
const { isOver, dropHandlers } = useEmailDropTarget(item.id, item.label)
|
|
const isSelected = selectedFolder === item.id
|
|
const hasUnread = unreadCount > 0
|
|
const [menuOpen, setMenuOpen] = useState(false)
|
|
const [contextMenuOpen, setContextMenuOpen] = useState(false)
|
|
const menuTriggerRef = useRef<HTMLButtonElement>(null)
|
|
const [renameOpen, setRenameOpen] = useState(false)
|
|
const [renameDraft, setRenameDraft] = useState(item.label)
|
|
const [sublabelOpen, setSublabelOpen] = useState(false)
|
|
const [sublabelName, setSublabelName] = useState("")
|
|
const labelRenameInputRef = useRef<HTMLInputElement>(null)
|
|
const sublabelNameInputRef = useRef<HTMLInputElement>(null)
|
|
const canDragLabel = labelRowExpanded && !isSystemNavLabelId(item.id)
|
|
const { sheetOpen, setSheetOpen, touchRowProps, touchRowClassName, closeSheet } =
|
|
useSidebarTouchOptionsMenu(touchNav && labelRowExpanded)
|
|
|
|
useEffect(() => {
|
|
setRenameDraft(item.label)
|
|
}, [item.label])
|
|
|
|
const handleMenuOpenChange = (open: boolean) => {
|
|
setMenuOpen(open)
|
|
if (!open) {
|
|
queueMicrotask(() => menuTriggerRef.current?.blur())
|
|
}
|
|
}
|
|
|
|
const rowHoverHeld =
|
|
!isSelected && !isOver && (contextMenuOpen || menuOpen || sheetOpen)
|
|
|
|
const prefs = getNavItemPrefs(item.id)
|
|
const labelDotClass = item.color ?? "bg-gray-400"
|
|
const labelMenuSurface =
|
|
MAIL_SIDEBAR_MENU_SURFACE_CLASS
|
|
|
|
const colorSub = (subKind: "dropdown" | "context") => {
|
|
const Sub = subKind === "dropdown" ? DropdownMenuSub : ContextMenuSub
|
|
const SubTr =
|
|
subKind === "dropdown" ? DropdownMenuSubTrigger : ContextMenuSubTrigger
|
|
const SubCo =
|
|
subKind === "dropdown" ? DropdownMenuSubContent : ContextMenuSubContent
|
|
return (
|
|
<Sub>
|
|
<SubTr
|
|
className={cn(
|
|
MAIL_SIDEBAR_MENU_SUB_TRIGGER_CLASS,
|
|
subKind === "context" && "flex items-center gap-2"
|
|
)}
|
|
>
|
|
<span className="flex size-5 shrink-0 items-center justify-center rounded-full border border-border bg-mail-surface">
|
|
<span
|
|
className={cn(
|
|
"block size-3 rounded-sm border border-black/10",
|
|
labelDotClass
|
|
)}
|
|
aria-hidden
|
|
/>
|
|
</span>
|
|
<span className="flex-1 text-left text-sm">Couleur du libellé</span>
|
|
</SubTr>
|
|
<SubCo className={MAIL_SIDEBAR_COLOR_PICKER_CLASS}>
|
|
<div className="grid grid-cols-6 gap-1.5">
|
|
{LABEL_MENU_COLOR_SWATCHES.map((sw) => (
|
|
<button
|
|
key={sw}
|
|
type="button"
|
|
title={sw}
|
|
onClick={() => {
|
|
updateFolderOrLabelColor(item.id, sw)
|
|
setMenuOpen(false)
|
|
}}
|
|
className={cn(
|
|
cn(
|
|
"size-6 rounded-full border border-black/10 outline-none ring-offset-1 hover:ring-2",
|
|
MAIL_SIDEBAR_COLOR_SWATCH_RING_CLASS
|
|
),
|
|
sw
|
|
)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</SubCo>
|
|
</Sub>
|
|
)
|
|
}
|
|
|
|
const rowClass = cn(
|
|
"group/labelrow relative flex h-8 w-full min-w-0 shrink-0 cursor-default items-center pl-6 pr-2 transition-colors",
|
|
navRowRoundedWhenActive(isSelected || isOver || rowHoverHeld),
|
|
isSelected
|
|
? "bg-mail-nav-selected text-mail-nav-selected font-medium"
|
|
: isOver
|
|
? "bg-mail-nav-drop text-foreground"
|
|
: rowHoverHeld
|
|
? "bg-mail-nav-hover text-foreground"
|
|
: hasUnread
|
|
? "text-gray-900 hover:bg-mail-nav-hover"
|
|
: "text-gray-700 hover:bg-mail-nav-hover",
|
|
touchRowClassName
|
|
)
|
|
|
|
const onLabelRowDragEnter = (e: DragEvent) => {
|
|
const active = navDragRef.current
|
|
if (active?.kind === "label" && active.id !== item.id) {
|
|
e.preventDefault()
|
|
return
|
|
}
|
|
dropHandlers.onDragEnter(e)
|
|
}
|
|
|
|
const onLabelRowDragOver = (e: DragEvent) => {
|
|
const active = navDragRef.current
|
|
if (active?.kind === "label") {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
if (active.id === item.id) return
|
|
e.dataTransfer.dropEffect = "move"
|
|
updateNavDropTarget(
|
|
e.currentTarget as HTMLElement,
|
|
resolveNavDropPlacement(e, false)
|
|
)
|
|
return
|
|
}
|
|
dropHandlers.onDragOver(e)
|
|
}
|
|
|
|
const onLabelRowDragLeave = (e: DragEvent) => {
|
|
if (navDragRef.current?.kind === "label") {
|
|
const rt = e.relatedTarget as Node | null
|
|
if (rt && e.currentTarget instanceof Node && e.currentTarget.contains(rt)) return
|
|
clearNavDropTarget(e.currentTarget as HTMLElement)
|
|
return
|
|
}
|
|
dropHandlers.onDragLeave(e)
|
|
}
|
|
|
|
const onLabelRowDrop = (e: DragEvent) => {
|
|
const payload = readSidebarNavDragData(e, navDragRef.current)
|
|
if (payload?.kind === "label") {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
const placement = navDropPlacementRef.current ?? resolveNavDropPlacement(e, false)
|
|
if (placement !== "inside") {
|
|
commitNavDrop(payload, item.id, placement, "label")
|
|
} else {
|
|
clearNavDrag()
|
|
}
|
|
return
|
|
}
|
|
dropHandlers.onDrop(e)
|
|
}
|
|
|
|
const onLabelDragHandleStart = (e: DragEvent<HTMLSpanElement>) => {
|
|
const payload = { kind: "label" as const, id: item.id }
|
|
setSidebarNavDragData(e, payload)
|
|
const rowEl = (e.currentTarget as HTMLElement).closest("[data-nav-row]") as HTMLElement | null
|
|
beginNavDrag(payload, rowEl)
|
|
}
|
|
|
|
const overflowMenu = labelRowExpanded ? (
|
|
<SidebarOverflowColumn
|
|
unread={unreadCount}
|
|
menuOpen={menuOpen || sheetOpen}
|
|
hoverGroup="labelrow"
|
|
isSelected={isSelected}
|
|
hasUnread={hasUnread}
|
|
className="mr-[-7px]"
|
|
showMenuButton={!touchNav}
|
|
>
|
|
{!touchNav && (
|
|
<DropdownMenu open={menuOpen} onOpenChange={handleMenuOpenChange}>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
ref={menuTriggerRef}
|
|
type="button"
|
|
draggable={false}
|
|
className={cn(sidebarOverflowMenuButtonClass, isSelected && "text-gray-900")}
|
|
aria-label={`Options pour ${item.label}`}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<MoreVertical className="h-4 w-4" />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className={labelMenuSurface}>
|
|
{colorSub("dropdown")}
|
|
<DropdownMenuSeparator className={MAIL_SIDEBAR_MENU_SEPARATOR_CLASS} />
|
|
<DropdownMenuLabel className="px-3 py-1 text-[11px] font-normal normal-case tracking-normal text-muted-foreground">
|
|
Dans la liste des libellés
|
|
</DropdownMenuLabel>
|
|
<LabelMenuOptionWithCheck
|
|
checked={prefs.sidebar === "show"}
|
|
onPick={() => setNavItemSidebarVisibility(item.id, "show")}
|
|
>
|
|
Afficher
|
|
</LabelMenuOptionWithCheck>
|
|
<LabelMenuOptionWithCheck
|
|
checked={prefs.sidebar === "showUnread"}
|
|
onPick={() => setNavItemSidebarVisibility(item.id, "showUnread")}
|
|
>
|
|
Afficher si messages non lus
|
|
</LabelMenuOptionWithCheck>
|
|
<LabelMenuOptionWithCheck
|
|
checked={prefs.sidebar === "hide"}
|
|
onPick={() => setNavItemSidebarVisibility(item.id, "hide")}
|
|
>
|
|
Masquer
|
|
</LabelMenuOptionWithCheck>
|
|
<DropdownMenuSeparator className={MAIL_SIDEBAR_MENU_SEPARATOR_CLASS} />
|
|
<DropdownMenuLabel className="px-3 py-1 text-[11px] font-normal normal-case tracking-normal text-muted-foreground">
|
|
Dans la liste des messages
|
|
</DropdownMenuLabel>
|
|
<LabelMenuOptionWithCheck
|
|
checked={prefs.messages === "show"}
|
|
onPick={() => setNavItemMessageVisibility(item.id, "show")}
|
|
>
|
|
Afficher
|
|
</LabelMenuOptionWithCheck>
|
|
<LabelMenuOptionWithCheck
|
|
checked={prefs.messages === "hide"}
|
|
onPick={() => setNavItemMessageVisibility(item.id, "hide")}
|
|
>
|
|
Masquer
|
|
</LabelMenuOptionWithCheck>
|
|
<DropdownMenuSeparator className={MAIL_SIDEBAR_MENU_SEPARATOR_CLASS} />
|
|
<DropdownMenuItem
|
|
className={MAIL_SIDEBAR_MENU_PLAIN_ITEM_CLASS}
|
|
onClick={() => {
|
|
setRenameDraft(item.label)
|
|
setRenameOpen(true)
|
|
setMenuOpen(false)
|
|
}}
|
|
>
|
|
Renommer…
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
variant="destructive"
|
|
className="mx-1 cursor-pointer px-3 py-2 text-sm focus:bg-destructive/15"
|
|
onClick={() => {
|
|
removeFolderOrLabelRow(item.id)
|
|
setMenuOpen(false)
|
|
}}
|
|
>
|
|
Supprimer le libellé
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
className={MAIL_SIDEBAR_MENU_PLAIN_ITEM_CLASS}
|
|
onClick={() => {
|
|
setSublabelName("")
|
|
setSublabelOpen(true)
|
|
setMenuOpen(false)
|
|
}}
|
|
>
|
|
Ajouter un sous-libellé
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
</SidebarOverflowColumn>
|
|
) : null
|
|
|
|
const labelOptionsSheet = touchNav && labelRowExpanded && (
|
|
<SidebarNavOptionsSheet
|
|
open={sheetOpen}
|
|
onOpenChange={setSheetOpen}
|
|
title={item.label}
|
|
colorDotClass={labelDotClass}
|
|
>
|
|
<SidebarNavSheetColorPicker
|
|
title="Couleur du libellé"
|
|
dotClass={labelDotClass}
|
|
swatches={LABEL_MENU_COLOR_SWATCHES}
|
|
onPick={(sw) => {
|
|
updateFolderOrLabelColor(item.id, sw)
|
|
closeSheet()
|
|
}}
|
|
/>
|
|
<SidebarNavSheetDivider />
|
|
<SidebarNavSheetSectionLabel>Dans la liste des libellés</SidebarNavSheetSectionLabel>
|
|
<SidebarNavSheetCheckOption
|
|
checked={prefs.sidebar === "show"}
|
|
onPick={() => {
|
|
setNavItemSidebarVisibility(item.id, "show")
|
|
closeSheet()
|
|
}}
|
|
>
|
|
Afficher
|
|
</SidebarNavSheetCheckOption>
|
|
<SidebarNavSheetCheckOption
|
|
checked={prefs.sidebar === "showUnread"}
|
|
onPick={() => {
|
|
setNavItemSidebarVisibility(item.id, "showUnread")
|
|
closeSheet()
|
|
}}
|
|
>
|
|
Afficher si messages non lus
|
|
</SidebarNavSheetCheckOption>
|
|
<SidebarNavSheetCheckOption
|
|
checked={prefs.sidebar === "hide"}
|
|
onPick={() => {
|
|
setNavItemSidebarVisibility(item.id, "hide")
|
|
closeSheet()
|
|
}}
|
|
>
|
|
Masquer
|
|
</SidebarNavSheetCheckOption>
|
|
<SidebarNavSheetDivider />
|
|
<SidebarNavSheetSectionLabel>Dans la liste des messages</SidebarNavSheetSectionLabel>
|
|
<SidebarNavSheetCheckOption
|
|
checked={prefs.messages === "show"}
|
|
onPick={() => {
|
|
setNavItemMessageVisibility(item.id, "show")
|
|
closeSheet()
|
|
}}
|
|
>
|
|
Afficher
|
|
</SidebarNavSheetCheckOption>
|
|
<SidebarNavSheetCheckOption
|
|
checked={prefs.messages === "hide"}
|
|
onPick={() => {
|
|
setNavItemMessageVisibility(item.id, "hide")
|
|
closeSheet()
|
|
}}
|
|
>
|
|
Masquer
|
|
</SidebarNavSheetCheckOption>
|
|
<SidebarNavSheetDivider />
|
|
<SidebarNavSheetAction
|
|
onClick={() => {
|
|
setRenameDraft(item.label)
|
|
setRenameOpen(true)
|
|
closeSheet()
|
|
}}
|
|
>
|
|
Renommer…
|
|
</SidebarNavSheetAction>
|
|
<SidebarNavSheetAction
|
|
destructive
|
|
onClick={() => {
|
|
removeFolderOrLabelRow(item.id)
|
|
closeSheet()
|
|
}}
|
|
>
|
|
Supprimer le libellé
|
|
</SidebarNavSheetAction>
|
|
<SidebarNavSheetAction
|
|
onClick={() => {
|
|
setSublabelName("")
|
|
setSublabelOpen(true)
|
|
closeSheet()
|
|
}}
|
|
>
|
|
Ajouter un sous-libellé
|
|
</SidebarNavSheetAction>
|
|
</SidebarNavOptionsSheet>
|
|
)
|
|
|
|
const labelRowEl = (
|
|
<div
|
|
data-nav-row
|
|
{...touchRowProps}
|
|
onDragEnter={onLabelRowDragEnter}
|
|
onDragOver={onLabelRowDragOver}
|
|
onDragLeave={onLabelRowDragLeave}
|
|
onDrop={onLabelRowDrop}
|
|
className={rowClass}
|
|
>
|
|
{canDragLabel ? (
|
|
<SidebarNavDragHandle
|
|
label={item.label}
|
|
onDragStart={onLabelDragHandleStart}
|
|
onDragEnd={clearNavDrag}
|
|
/>
|
|
) : null}
|
|
<div
|
|
role="button"
|
|
tabIndex={0}
|
|
title={!labelRowExpanded ? item.label : undefined}
|
|
onClick={() => onSelectFolder(item.id)}
|
|
onKeyDown={(e) => navRowActivate(e, () => onSelectFolder(item.id))}
|
|
className={cn(
|
|
"flex h-8 min-w-0 flex-1 cursor-pointer items-center gap-4 py-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
|
|
labelRowExpanded ? "pr-1" : "pr-3"
|
|
)}
|
|
>
|
|
<SidebarNavIconSlot showUnreadDot={hasUnread}>
|
|
<span
|
|
className={cn("block h-3 w-3 rounded-sm", item.color ?? "bg-gray-400")}
|
|
/>
|
|
</SidebarNavIconSlot>
|
|
{labelRowExpanded && (
|
|
<span
|
|
className={cn(
|
|
"min-w-0 flex-1 truncate text-sm leading-5",
|
|
hasUnread && !isSelected && "font-semibold text-gray-900"
|
|
)}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{overflowMenu}
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<>
|
|
{touchNav ? (
|
|
labelRowEl
|
|
) : (
|
|
<ContextMenu onOpenChange={setContextMenuOpen}>
|
|
<ContextMenuTrigger asChild>{labelRowEl}</ContextMenuTrigger>
|
|
<ContextMenuContent className={labelMenuSurface}>
|
|
{colorSub("context")}
|
|
<ContextMenuSeparator className={MAIL_SIDEBAR_MENU_SEPARATOR_CLASS} />
|
|
<ContextMenuLabel className="px-3 py-1 text-[11px] font-normal normal-case tracking-normal text-muted-foreground">
|
|
Dans la liste des libellés
|
|
</ContextMenuLabel>
|
|
<ContextLabelMenuOptionWithCheck
|
|
checked={prefs.sidebar === "show"}
|
|
onPick={() => setNavItemSidebarVisibility(item.id, "show")}
|
|
>
|
|
Afficher
|
|
</ContextLabelMenuOptionWithCheck>
|
|
<ContextLabelMenuOptionWithCheck
|
|
checked={prefs.sidebar === "showUnread"}
|
|
onPick={() => setNavItemSidebarVisibility(item.id, "showUnread")}
|
|
>
|
|
Afficher si non lus
|
|
</ContextLabelMenuOptionWithCheck>
|
|
<ContextLabelMenuOptionWithCheck
|
|
checked={prefs.sidebar === "hide"}
|
|
onPick={() => setNavItemSidebarVisibility(item.id, "hide")}
|
|
>
|
|
Masquer
|
|
</ContextLabelMenuOptionWithCheck>
|
|
<ContextMenuSeparator className={MAIL_SIDEBAR_MENU_SEPARATOR_CLASS} />
|
|
<ContextMenuLabel className="px-3 py-1 text-[11px] font-normal normal-case tracking-normal text-muted-foreground">
|
|
Dans la liste des messages
|
|
</ContextMenuLabel>
|
|
<ContextLabelMenuOptionWithCheck
|
|
checked={prefs.messages === "show"}
|
|
onPick={() => setNavItemMessageVisibility(item.id, "show")}
|
|
>
|
|
Afficher
|
|
</ContextLabelMenuOptionWithCheck>
|
|
<ContextLabelMenuOptionWithCheck
|
|
checked={prefs.messages === "hide"}
|
|
onPick={() => setNavItemMessageVisibility(item.id, "hide")}
|
|
>
|
|
Masquer
|
|
</ContextLabelMenuOptionWithCheck>
|
|
<ContextMenuSeparator className="my-1.5 bg-gray-200" />
|
|
<ContextMenuItem
|
|
className="mx-1 cursor-pointer px-3 py-2 text-sm"
|
|
onClick={() => {
|
|
setRenameDraft(item.label)
|
|
setRenameOpen(true)
|
|
}}
|
|
>
|
|
Renommer…
|
|
</ContextMenuItem>
|
|
<ContextMenuItem
|
|
variant="destructive"
|
|
className="mx-1 cursor-pointer px-3 py-2 text-sm"
|
|
onClick={() => removeFolderOrLabelRow(item.id)}
|
|
>
|
|
Supprimer le libellé
|
|
</ContextMenuItem>
|
|
<ContextMenuItem
|
|
className="mx-1 cursor-pointer px-3 py-2 text-sm"
|
|
onClick={() => {
|
|
setSublabelName("")
|
|
setSublabelOpen(true)
|
|
}}
|
|
>
|
|
Ajouter un sous-libellé
|
|
</ContextMenuItem>
|
|
</ContextMenuContent>
|
|
</ContextMenu>
|
|
)}
|
|
{labelOptionsSheet}
|
|
|
|
<Dialog open={renameOpen} onOpenChange={setRenameOpen}>
|
|
<DialogContent
|
|
className="sm:max-w-md"
|
|
showCloseButton
|
|
onOpenAutoFocus={(e) => {
|
|
e.preventDefault()
|
|
window.requestAnimationFrame(() =>
|
|
labelRenameInputRef.current?.focus()
|
|
)
|
|
}}
|
|
>
|
|
<DialogHeader>
|
|
<DialogTitle>Renommer le libellé</DialogTitle>
|
|
<DialogDescription>Nouveau nom pour « {item.label} ».</DialogDescription>
|
|
</DialogHeader>
|
|
<Input
|
|
ref={labelRenameInputRef}
|
|
value={renameDraft}
|
|
onChange={(e) => setRenameDraft(e.target.value)}
|
|
autoComplete="off"
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault()
|
|
renameFolderOrLabel(item.id, renameDraft)
|
|
setRenameOpen(false)
|
|
}
|
|
}}
|
|
/>
|
|
<DialogFooter>
|
|
<Button variant="outline" type="button" onClick={() => setRenameOpen(false)}>
|
|
Annuler
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
onClick={() => {
|
|
renameFolderOrLabel(item.id, renameDraft)
|
|
setRenameOpen(false)
|
|
}}
|
|
>
|
|
Enregistrer
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={sublabelOpen} onOpenChange={setSublabelOpen}>
|
|
<DialogContent
|
|
className="sm:max-w-md"
|
|
showCloseButton
|
|
onOpenAutoFocus={(e) => {
|
|
e.preventDefault()
|
|
window.requestAnimationFrame(() =>
|
|
sublabelNameInputRef.current?.focus()
|
|
)
|
|
}}
|
|
>
|
|
<DialogHeader>
|
|
<DialogTitle>Sous-libellé</DialogTitle>
|
|
<DialogDescription>
|
|
Sera créé sous « {item.label} » (chemin type Parent/Enfant).
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<Input
|
|
ref={sublabelNameInputRef}
|
|
value={sublabelName}
|
|
onChange={(e) => setSublabelName(e.target.value)}
|
|
placeholder="Nom du sous-libellé"
|
|
autoComplete="off"
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault()
|
|
addChildLabelRow(item.id, sublabelName)
|
|
setSublabelOpen(false)
|
|
}
|
|
}}
|
|
/>
|
|
<DialogFooter>
|
|
<Button variant="outline" type="button" onClick={() => setSublabelOpen(false)}>
|
|
Annuler
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
onClick={() => {
|
|
addChildLabelRow(item.id, sublabelName)
|
|
setSublabelOpen(false)
|
|
}}
|
|
>
|
|
Créer
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|