2103 lines
72 KiB
TypeScript
2103 lines
72 KiB
TypeScript
"use client"
|
||
|
||
import {
|
||
Inbox,
|
||
Star,
|
||
Clock,
|
||
ClockArrowUp,
|
||
Send,
|
||
FileText,
|
||
Tag,
|
||
ChevronDown,
|
||
ChevronRight,
|
||
Pencil,
|
||
ShoppingCart,
|
||
MapPin,
|
||
Share2,
|
||
Bell,
|
||
MessageSquare,
|
||
BadgePercent,
|
||
Plus,
|
||
Bot,
|
||
Folder,
|
||
MoreVertical,
|
||
Sparkles,
|
||
Newspaper,
|
||
LayoutGrid,
|
||
Rss,
|
||
CreditCard,
|
||
Mail,
|
||
ShieldAlert,
|
||
Check,
|
||
} from "lucide-react"
|
||
import { cn, formatCount } from "@/lib/utils"
|
||
import { readXsMatches } from "@/hooks/use-xs"
|
||
import { useState, useRef, useEffect, useMemo, type ReactNode, type CSSProperties } from "react"
|
||
import { useEmailDropTarget } from "@/lib/drag-context"
|
||
import { useComposeActions } from "@/lib/compose-context"
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuLabel,
|
||
DropdownMenuSeparator,
|
||
DropdownMenuSub,
|
||
DropdownMenuSubContent,
|
||
DropdownMenuSubTrigger,
|
||
DropdownMenuTrigger,
|
||
} from "@/components/ui/dropdown-menu"
|
||
import { type FolderTreeNode } from "@/lib/sidebar-nav-data"
|
||
import { folderMoveParentOptions, useSidebarNav } from "@/lib/sidebar-nav-context"
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Icon, addCollection } from "@iconify/react"
|
||
import { icons as mdiIcons } from "@iconify-json/mdi"
|
||
import { UltiMailLogo } from "@/components/ultimail-logo"
|
||
|
||
addCollection(mdiIcons)
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select"
|
||
import {
|
||
ContextMenu,
|
||
ContextMenuContent,
|
||
ContextMenuItem,
|
||
ContextMenuLabel,
|
||
ContextMenuSeparator,
|
||
ContextMenuSub,
|
||
ContextMenuSubContent,
|
||
ContextMenuSubTrigger,
|
||
ContextMenuTrigger,
|
||
} from "@/components/ui/context-menu"
|
||
|
||
/** Retourne les ids des parents à ouvrir pour afficher `targetId`, ou null. */
|
||
function ancestorFolderIdsForTarget(
|
||
nodes: FolderTreeNode[],
|
||
targetId: string,
|
||
chain: string[] = []
|
||
): string[] | null {
|
||
for (const n of nodes) {
|
||
if (n.id === targetId) return chain
|
||
if (n.children?.length) {
|
||
const found = ancestorFolderIdsForTarget(n.children, targetId, [...chain, n.id])
|
||
if (found) return found
|
||
}
|
||
}
|
||
return null
|
||
}
|
||
|
||
function folderSubtreeContainsId(node: FolderTreeNode, targetId: string): boolean {
|
||
if (node.id === targetId) return true
|
||
return node.children?.some((c) => folderSubtreeContainsId(c, targetId)) ?? false
|
||
}
|
||
|
||
interface SidebarProps {
|
||
selectedFolder: string
|
||
onSelectFolder: (folder: string) => void
|
||
collapsed: boolean
|
||
/** Nombre de messages non lus par id de ligne (boîte, catégorie, dossier, libellé). */
|
||
folderUnreadCounts?: Record<string, number>
|
||
}
|
||
|
||
const mainItems = [
|
||
{ id: "inbox", label: "Boîte de réception", icon: Inbox },
|
||
{ id: "starred", label: "Messages suivis", icon: Star },
|
||
{ id: "snoozed", label: "En attente", icon: Clock },
|
||
{ id: "important", label: "Important", icon: Tag },
|
||
{ id: "sent", label: "Messages envoyés", icon: Send },
|
||
{ id: "drafts", label: "Brouillons", icon: FileText },
|
||
{ id: "scheduled", label: "Planifié", icon: ClockArrowUp },
|
||
{ id: "spam", label: "Indésirables", icon: ShieldAlert },
|
||
]
|
||
|
||
const categoryItemsSource = [
|
||
{ id: "purchases", label: "Achats", icon: ShoppingCart },
|
||
{ id: "travel", label: "Déplacements", icon: MapPin },
|
||
{ id: "social", label: "Réseaux sociaux", icon: Share2 },
|
||
{ id: "notifications", label: "Notifications", icon: Bell },
|
||
{ id: "updates", label: "Mises à jour", icon: Sparkles },
|
||
{ id: "forums", label: "Forums", icon: MessageSquare },
|
||
{ id: "finance", label: "Finance", icon: CreditCard },
|
||
{ id: "promotions", label: "Promotions", icon: BadgePercent },
|
||
]
|
||
|
||
/** Ids catégories : menu ⋮ (Afficher / Masquer) du survol. */
|
||
const CATEGORY_MENU_IDS = new Set(categoryItemsSource.map((c) => c.id))
|
||
|
||
/** Catégories affichées sous « Plus » uniquement (Mises à jour, Finance, …). */
|
||
const CATEGORY_IDS_IN_PLUS_ONLY = new Set<string>(["updates", "finance"])
|
||
|
||
/** Liens secondaires sous la liste (jusqu’à Gérer les abonnements). */
|
||
const sidebarSecondaryActions = [
|
||
{ id: "customize-inbox", label: "Personnaliser la zone de réception", icon: LayoutGrid },
|
||
{ id: "manage-sections", label: "Gérer les sections", icon: Newspaper },
|
||
{ id: "manage-news", label: "Gérer les actualités", icon: Rss },
|
||
{ id: "manage-subscriptions", label: "Gérer les abonnements", icon: Mail },
|
||
] as const
|
||
|
||
const hasPlusOnlyExtras =
|
||
categoryItemsSource.some((c) => CATEGORY_IDS_IN_PLUS_ONLY.has(c.id)) ||
|
||
sidebarSecondaryActions.length > 0
|
||
|
||
/** Pastilles sous-menu « Couleur du libellé » (démo UI). */
|
||
const LABEL_MENU_COLOR_SWATCHES = [
|
||
"bg-gray-500",
|
||
"bg-red-400",
|
||
"bg-orange-400",
|
||
"bg-amber-500",
|
||
"bg-yellow-400",
|
||
"bg-lime-500",
|
||
"bg-emerald-500",
|
||
"bg-teal-500",
|
||
"bg-blue-500",
|
||
"bg-indigo-500",
|
||
"bg-purple-500",
|
||
"bg-pink-500",
|
||
] as const
|
||
|
||
function LabelMenuOptionWithCheck({
|
||
checked,
|
||
onPick,
|
||
children,
|
||
}: {
|
||
checked: boolean
|
||
onPick: () => void
|
||
children: ReactNode
|
||
}) {
|
||
return (
|
||
<DropdownMenuItem
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
onPick()
|
||
}}
|
||
className="mx-1 flex cursor-pointer items-center justify-between gap-3 px-3 py-2 text-sm text-gray-800 focus:bg-gray-100"
|
||
>
|
||
<span className="min-w-0 flex-1 text-left">{children}</span>
|
||
<span
|
||
className="flex size-4 shrink-0 items-center justify-center"
|
||
aria-hidden={!checked}
|
||
>
|
||
{checked ? (
|
||
<Check className="size-4 text-gray-900" strokeWidth={2} aria-hidden />
|
||
) : null}
|
||
</span>
|
||
</DropdownMenuItem>
|
||
)
|
||
}
|
||
|
||
function ContextLabelMenuOptionWithCheck({
|
||
checked,
|
||
onPick,
|
||
children,
|
||
}: {
|
||
checked: boolean
|
||
onPick: () => void
|
||
children: ReactNode
|
||
}) {
|
||
return (
|
||
<ContextMenuItem
|
||
onClick={() => onPick()}
|
||
className="mx-1 flex cursor-pointer items-center justify-between gap-3 px-3 py-2 text-sm"
|
||
>
|
||
<span className="min-w-0 flex-1 text-left">{children}</span>
|
||
<span
|
||
className="flex size-4 shrink-0 items-center justify-center"
|
||
aria-hidden={!checked}
|
||
>
|
||
{checked ? (
|
||
<Check className="size-4 text-gray-900" strokeWidth={2} aria-hidden />
|
||
) : null}
|
||
</span>
|
||
</ContextMenuItem>
|
||
)
|
||
}
|
||
|
||
function folderParentSelectOptions(tree: FolderTreeNode[]): {
|
||
value: string
|
||
label: string
|
||
}[] {
|
||
const out: { value: string; label: string }[] = [
|
||
{ value: "__root__", label: "Racine" },
|
||
]
|
||
const walk = (nodes: FolderTreeNode[], depth: number) => {
|
||
for (const n of nodes) {
|
||
out.push({
|
||
value: n.id,
|
||
label: `${"\u2003".repeat(depth * 2)}${n.label}`,
|
||
})
|
||
if (n.children?.length) walk(n.children, depth + 1)
|
||
}
|
||
}
|
||
walk(tree, 0)
|
||
return out
|
||
}
|
||
|
||
type CategoryNavSourceItem = (typeof categoryItemsSource)[number]
|
||
|
||
/** Pill à droite seulement quand le fond d’accent est visible (évite frange sur fond neutre). */
|
||
function navRowRoundedWhenActive(active: boolean) {
|
||
return active ? "rounded-r-full" : "rounded-r-none hover:rounded-r-full"
|
||
}
|
||
|
||
/** Colonne droite : compteur et ⋮ partagent le même emplacement (style Gmail). */
|
||
function SidebarOverflowColumn({
|
||
unread,
|
||
menuOpen,
|
||
hoverGroup,
|
||
isSelected,
|
||
hasUnread,
|
||
className,
|
||
children,
|
||
}: {
|
||
unread: number
|
||
menuOpen: boolean
|
||
hoverGroup: "folderrow" | "labelrow" | "catnav"
|
||
isSelected?: boolean
|
||
hasUnread?: boolean
|
||
className?: string
|
||
children: ReactNode
|
||
}) {
|
||
const countHoverHide = `group-hover/${hoverGroup}:opacity-0`
|
||
const menuHoverShow = `group-hover/${hoverGroup}:opacity-100 [&:has(button:focus-visible)]:opacity-100`
|
||
|
||
return (
|
||
<div className={cn("relative h-8 w-8 shrink-0", className)}>
|
||
{unread > 0 && (
|
||
<span
|
||
className={cn(
|
||
"pointer-events-none absolute inset-0 flex items-center justify-center text-xs tabular-nums leading-none transition-opacity duration-150",
|
||
isSelected && "font-medium",
|
||
hasUnread && !isSelected && "font-semibold",
|
||
menuOpen ? "opacity-0" : cn("opacity-100", countHoverHide)
|
||
)}
|
||
>
|
||
{formatCount(unread)}
|
||
</span>
|
||
)}
|
||
<div
|
||
className={cn(
|
||
"absolute inset-0 flex items-center justify-center transition-opacity duration-150",
|
||
menuOpen ? "opacity-100" : cn("opacity-0", menuHoverShow)
|
||
)}
|
||
>
|
||
{children}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const sidebarOverflowMenuButtonClass =
|
||
"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-gray-600 outline-none hover:bg-black/8 focus-visible:ring-2 focus-visible:ring-ring/50"
|
||
|
||
function CategoryNavRow({
|
||
item,
|
||
isSelected,
|
||
isExpanded,
|
||
unreadCount,
|
||
onSelectFolder,
|
||
onHideCategory,
|
||
onShowCategory,
|
||
variant = "listed",
|
||
}: {
|
||
item: CategoryNavSourceItem
|
||
isSelected: boolean
|
||
isExpanded: boolean
|
||
unreadCount: number
|
||
onSelectFolder: (id: string) => void
|
||
onHideCategory: (id: string) => void
|
||
onShowCategory: (id: string) => void
|
||
variant?: "listed" | "hidden"
|
||
}) {
|
||
const { isOver, dropHandlers } = useEmailDropTarget(item.id, item.label)
|
||
const [menuOpen, setMenuOpen] = useState(false)
|
||
const menuTriggerRef = useRef<HTMLButtonElement>(null)
|
||
const isHiddenRow = variant === "hidden"
|
||
const showCategoryMenu = CATEGORY_MENU_IDS.has(item.id) && isExpanded
|
||
const hasUnread = unreadCount > 0
|
||
|
||
const handleMenuOpenChange = (open: boolean) => {
|
||
setMenuOpen(open)
|
||
if (!open) {
|
||
queueMicrotask(() => menuTriggerRef.current?.blur())
|
||
}
|
||
}
|
||
|
||
if (isHiddenRow) {
|
||
return (
|
||
<div
|
||
{...dropHandlers}
|
||
className={cn(
|
||
"flex h-8 w-full min-w-0 shrink-0 items-center pl-6 pr-2 text-gray-500 transition-colors",
|
||
isOver ? "rounded-r-full" : "rounded-r-none",
|
||
isOver && "bg-yellow-100 text-gray-900"
|
||
)}
|
||
>
|
||
<button
|
||
type="button"
|
||
onClick={() => onSelectFolder(item.id)}
|
||
className="flex h-8 min-w-0 flex-1 items-center gap-4 rounded-r-none py-0 pr-1 text-left outline-none hover:rounded-r-full hover:bg-gray-50"
|
||
>
|
||
<item.icon className="h-5 w-5 shrink-0 opacity-70" />
|
||
<div className="flex min-w-0 flex-1 items-baseline gap-4">
|
||
<span
|
||
className={cn(
|
||
"min-w-0 flex-1 truncate text-sm leading-5",
|
||
hasUnread && "font-semibold text-gray-900"
|
||
)}
|
||
>
|
||
{item.label}
|
||
</span>
|
||
{unreadCount > 0 && (
|
||
<span
|
||
className={cn(
|
||
"shrink-0 text-xs tabular-nums leading-none text-gray-700",
|
||
hasUnread && "font-semibold"
|
||
)}
|
||
>
|
||
{formatCount(unreadCount)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</button>
|
||
<DropdownMenu open={menuOpen} onOpenChange={handleMenuOpenChange}>
|
||
<DropdownMenuTrigger asChild>
|
||
<button
|
||
ref={menuTriggerRef}
|
||
type="button"
|
||
className={sidebarOverflowMenuButtonClass}
|
||
aria-label={`Options pour ${item.label}`}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<MoreVertical className="h-4 w-4" />
|
||
</button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end" className="min-w-40">
|
||
<DropdownMenuItem
|
||
onClick={() => {
|
||
onShowCategory(item.id)
|
||
setMenuOpen(false)
|
||
}}
|
||
>
|
||
Afficher
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem disabled className="text-gray-400">
|
||
Masquer
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div
|
||
{...dropHandlers}
|
||
className={cn(
|
||
"group/catnav flex h-8 w-full min-w-0 shrink-0 cursor-pointer items-center pl-6 pr-2 transition-colors",
|
||
navRowRoundedWhenActive(isSelected || isOver),
|
||
isSelected
|
||
? "bg-[#d3e3fd] text-gray-900 font-medium"
|
||
: isOver
|
||
? "bg-yellow-100 text-gray-900"
|
||
: hasUnread
|
||
? "text-gray-900 hover:bg-gray-100"
|
||
: "text-gray-700 hover:bg-gray-100"
|
||
)}
|
||
>
|
||
<button
|
||
type="button"
|
||
onClick={() => onSelectFolder(item.id)}
|
||
title={!isExpanded ? item.label : undefined}
|
||
className={cn(
|
||
"flex h-8 min-w-0 flex-1 cursor-pointer items-center gap-4 py-0 text-left outline-none",
|
||
showCategoryMenu ? "pr-1" : "pr-3"
|
||
)}
|
||
>
|
||
<item.icon
|
||
className={cn(
|
||
"h-5 w-5 shrink-0",
|
||
hasUnread && !isSelected && "text-gray-900"
|
||
)}
|
||
/>
|
||
{isExpanded && (
|
||
<div className="flex min-w-0 flex-1 items-baseline gap-4">
|
||
<span
|
||
className={cn(
|
||
"min-w-0 flex-1 truncate text-sm leading-5",
|
||
hasUnread && !isSelected && "font-semibold text-gray-900"
|
||
)}
|
||
>
|
||
{item.label}
|
||
</span>
|
||
{!showCategoryMenu && unreadCount > 0 && (
|
||
<span
|
||
className={cn(
|
||
"shrink-0 text-xs tabular-nums leading-none",
|
||
isSelected && "font-medium",
|
||
hasUnread && !isSelected && "font-semibold"
|
||
)}
|
||
>
|
||
{formatCount(unreadCount)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
</button>
|
||
{showCategoryMenu && (
|
||
<SidebarOverflowColumn
|
||
unread={unreadCount}
|
||
menuOpen={menuOpen}
|
||
hoverGroup="catnav"
|
||
isSelected={isSelected}
|
||
hasUnread={hasUnread}
|
||
>
|
||
<DropdownMenu open={menuOpen} onOpenChange={handleMenuOpenChange}>
|
||
<DropdownMenuTrigger asChild>
|
||
<button
|
||
ref={menuTriggerRef}
|
||
type="button"
|
||
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="min-w-40">
|
||
<DropdownMenuItem disabled className="text-gray-400">
|
||
Afficher
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
onClick={() => {
|
||
onHideCategory(item.id)
|
||
setMenuOpen(false)
|
||
}}
|
||
>
|
||
Masquer
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</SidebarOverflowColumn>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export function Sidebar({
|
||
selectedFolder,
|
||
onSelectFolder,
|
||
collapsed,
|
||
folderUnreadCounts = {},
|
||
}: SidebarProps) {
|
||
const { openCompose } = useComposeActions()
|
||
const [hoverExpanded, setHoverExpanded] = useState(false)
|
||
const [navMoreOpen, setNavMoreOpen] = useState(false)
|
||
const [expandedFolderIds, setExpandedFolderIds] = useState<Set<string>>(() => new Set())
|
||
const [hiddenCategoryIds, setHiddenCategoryIds] = useState<Set<string>>(() => new Set())
|
||
const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null)
|
||
const sidebarRef = useRef<HTMLElement>(null)
|
||
|
||
const isExpanded = !collapsed || hoverExpanded
|
||
|
||
const {
|
||
folderTree,
|
||
labelRows,
|
||
folderIdToLabel,
|
||
addFolder,
|
||
addLabelRowFromSidebar,
|
||
getNavItemPrefs,
|
||
setNavItemSidebarVisibility,
|
||
setNavItemMessageVisibility,
|
||
updateFolderOrLabelColor,
|
||
renameFolderOrLabel,
|
||
removeFolderOrLabelRow,
|
||
moveFolder,
|
||
addSubfolder,
|
||
addChildLabelRow,
|
||
} = useSidebarNav()
|
||
|
||
const visibleNavLabelRows = useMemo(() => {
|
||
return labelRows.filter((row) => {
|
||
const p = getNavItemPrefs(row.id)
|
||
if (p.sidebar === "hide") return false
|
||
if (
|
||
p.sidebar === "showUnread" &&
|
||
(folderUnreadCounts[row.id] ?? 0) === 0
|
||
) {
|
||
return false
|
||
}
|
||
return true
|
||
})
|
||
}, [labelRows, getNavItemPrefs, folderUnreadCounts])
|
||
|
||
const validNavFolderIds = useMemo(() => {
|
||
const s = new Set<string>()
|
||
for (const i of mainItems) s.add(i.id)
|
||
for (const c of categoryItemsSource) s.add(c.id)
|
||
for (const k of Object.keys(folderIdToLabel)) s.add(k)
|
||
return s
|
||
}, [folderIdToLabel])
|
||
|
||
useEffect(() => {
|
||
if (!validNavFolderIds.has(selectedFolder)) {
|
||
onSelectFolder("inbox")
|
||
}
|
||
}, [validNavFolderIds, selectedFolder, onSelectFolder])
|
||
|
||
const [folderDialogOpen, setFolderDialogOpen] = useState(false)
|
||
const [labelDialogOpen, setLabelDialogOpen] = useState(false)
|
||
const [newFolderName, setNewFolderName] = useState("")
|
||
const [newFolderParent, setNewFolderParent] = useState("__root__")
|
||
const [newLabelName, setNewLabelName] = useState("")
|
||
const newFolderNameInputRef = useRef<HTMLInputElement>(null)
|
||
const newLabelNameInputRef = useRef<HTMLInputElement>(null)
|
||
|
||
const folderParentOptions = useMemo(
|
||
() => folderParentSelectOptions(folderTree),
|
||
[folderTree]
|
||
)
|
||
|
||
const { primaryVisibleCategories, plusOnlyVisibleCategories } = useMemo(() => {
|
||
const vis = categoryItemsSource.filter((c) => !hiddenCategoryIds.has(c.id))
|
||
return {
|
||
primaryVisibleCategories: vis.filter((c) => !CATEGORY_IDS_IN_PLUS_ONLY.has(c.id)),
|
||
plusOnlyVisibleCategories: vis.filter((c) => CATEGORY_IDS_IN_PLUS_ONLY.has(c.id)),
|
||
}
|
||
}, [hiddenCategoryIds])
|
||
|
||
const hiddenCategoryItems = useMemo(
|
||
() => categoryItemsSource.filter((c) => hiddenCategoryIds.has(c.id)),
|
||
[hiddenCategoryIds]
|
||
)
|
||
|
||
const visibleMainItems = useMemo(() => {
|
||
const scheduledTotal = folderUnreadCounts.scheduled ?? 0
|
||
if (scheduledTotal > 0) return mainItems
|
||
return mainItems.filter((item) => item.id !== "scheduled")
|
||
}, [folderUnreadCounts.scheduled])
|
||
|
||
const hideCategory = (id: string) => {
|
||
setHiddenCategoryIds((prev) => {
|
||
const next = new Set(prev)
|
||
next.add(id)
|
||
return next
|
||
})
|
||
}
|
||
|
||
const showCategory = (id: string) => {
|
||
setHiddenCategoryIds((prev) => {
|
||
const next = new Set(prev)
|
||
next.delete(id)
|
||
return next
|
||
})
|
||
}
|
||
|
||
const toggleFolderExpanded = (id: string) => {
|
||
setExpandedFolderIds((prev) => {
|
||
const next = new Set(prev)
|
||
if (next.has(id)) next.delete(id)
|
||
else next.add(id)
|
||
return next
|
||
})
|
||
}
|
||
|
||
const handleSubmitNewFolder = () => {
|
||
const name = newFolderName.trim()
|
||
if (!name) return
|
||
const parentId = newFolderParent === "__root__" ? null : newFolderParent
|
||
addFolder(parentId, name)
|
||
setNewFolderName("")
|
||
setFolderDialogOpen(false)
|
||
}
|
||
|
||
const handleSubmitNewLabel = () => {
|
||
const name = newLabelName.trim()
|
||
if (!name) return
|
||
addLabelRowFromSidebar(name)
|
||
setNewLabelName("")
|
||
setLabelDialogOpen(false)
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (hiddenCategoryIds.has(selectedFolder)) {
|
||
onSelectFolder("inbox")
|
||
}
|
||
}, [hiddenCategoryIds, selectedFolder, onSelectFolder])
|
||
|
||
useEffect(() => {
|
||
if (selectedFolder !== "scheduled") return
|
||
if ((folderUnreadCounts.scheduled ?? 0) > 0) return
|
||
onSelectFolder("inbox")
|
||
}, [folderUnreadCounts.scheduled, selectedFolder, onSelectFolder])
|
||
|
||
useEffect(() => {
|
||
if (CATEGORY_IDS_IN_PLUS_ONLY.has(selectedFolder) && !navMoreOpen) {
|
||
setNavMoreOpen(true)
|
||
}
|
||
}, [selectedFolder, navMoreOpen])
|
||
|
||
useEffect(() => {
|
||
const ancestors = ancestorFolderIdsForTarget(folderTree, selectedFolder)
|
||
if (ancestors?.length) {
|
||
setExpandedFolderIds((prev) => {
|
||
const next = new Set(prev)
|
||
ancestors.forEach((id) => next.add(id))
|
||
return next
|
||
})
|
||
}
|
||
}, [selectedFolder])
|
||
|
||
const handleMouseEnter = () => {
|
||
if (readXsMatches()) return
|
||
if (collapsed) {
|
||
hoverTimeoutRef.current = setTimeout(() => {
|
||
setHoverExpanded(true)
|
||
}, 300)
|
||
}
|
||
}
|
||
|
||
const handleMouseLeave = () => {
|
||
if (hoverTimeoutRef.current) {
|
||
clearTimeout(hoverTimeoutRef.current)
|
||
hoverTimeoutRef.current = null
|
||
}
|
||
if (readXsMatches()) return
|
||
setHoverExpanded(false)
|
||
}
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
if (hoverTimeoutRef.current) {
|
||
clearTimeout(hoverTimeoutRef.current)
|
||
}
|
||
}
|
||
}, [])
|
||
|
||
/** Inset rows from sidebar right edge (padding works with w-full; margin-right often clips under overflow-x-hidden). */
|
||
const navRailInset = "pr-3.5"
|
||
|
||
/** Same row geometry collapsed / expanded / hover so icons never jump (h-8, pl-6 icon column). */
|
||
const NavItem = ({
|
||
item,
|
||
isSelected,
|
||
unreadCount,
|
||
}: {
|
||
item: { id: string; label: string; icon: React.ElementType }
|
||
isSelected: boolean
|
||
unreadCount: number
|
||
}) => {
|
||
const { isOver, dropHandlers } = useEmailDropTarget(item.id, item.label)
|
||
const hasUnread = unreadCount > 0
|
||
return (
|
||
<button
|
||
onClick={() => onSelectFolder(item.id)}
|
||
title={!isExpanded ? item.label : undefined}
|
||
{...dropHandlers}
|
||
className={cn(
|
||
"flex h-8 w-full min-w-0 shrink-0 cursor-pointer items-center gap-4 pl-6 pr-3 transition-colors",
|
||
navRowRoundedWhenActive(isSelected || isOver),
|
||
isSelected
|
||
? "bg-[#d3e3fd] text-gray-900 font-medium"
|
||
: isOver
|
||
? "bg-yellow-100 text-gray-900"
|
||
: hasUnread
|
||
? "text-gray-900 hover:bg-gray-100"
|
||
: "text-gray-700 hover:bg-gray-100"
|
||
)}
|
||
>
|
||
<item.icon
|
||
className={cn(
|
||
"h-5 w-5 shrink-0",
|
||
hasUnread && !isSelected && "text-gray-900"
|
||
)}
|
||
/>
|
||
{isExpanded && (
|
||
<div className="flex min-w-0 flex-1 items-baseline gap-4">
|
||
<span
|
||
className={cn(
|
||
"min-w-0 flex-1 truncate text-left text-sm leading-5",
|
||
hasUnread && !isSelected && "font-semibold text-gray-900"
|
||
)}
|
||
>
|
||
{item.label}
|
||
</span>
|
||
{unreadCount > 0 && (
|
||
<span
|
||
className={cn(
|
||
"shrink-0 text-xs tabular-nums leading-none",
|
||
isSelected && "font-medium",
|
||
hasUnread && !isSelected && "font-semibold"
|
||
)}
|
||
>
|
||
{formatCount(unreadCount)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
</button>
|
||
)
|
||
}
|
||
|
||
const FolderRowExpanded = ({
|
||
node,
|
||
depth,
|
||
}: {
|
||
node: FolderTreeNode
|
||
depth: number
|
||
}) => {
|
||
const { isOver, dropHandlers } = useEmailDropTarget(node.id, node.label)
|
||
const hasChildren = !!(node.children?.length)
|
||
const isBranchOpen = expandedFolderIds.has(node.id)
|
||
const dotClass = node.color ?? "bg-gray-400"
|
||
const isSelected = selectedFolder === node.id
|
||
const unread = folderUnreadCounts[node.id] ?? 0
|
||
const hasUnread = unread > 0
|
||
const isStickyBranch = hasChildren && isBranchOpen
|
||
const stickyTopPx = 32 + depth * 32
|
||
const [menuOpen, setMenuOpen] = useState(false)
|
||
const menuTriggerRef = useRef<HTMLButtonElement>(null)
|
||
const [renameOpen, setRenameOpen] = useState(false)
|
||
const [renameDraft, setRenameDraft] = useState(node.label)
|
||
const [moveOpen, setMoveOpen] = useState(false)
|
||
const [moveParent, setMoveParent] = useState("__root__")
|
||
const [subfolderOpen, setSubfolderOpen] = useState(false)
|
||
const [subfolderName, setSubfolderName] = useState("")
|
||
const folderRenameInputRef = useRef<HTMLInputElement>(null)
|
||
const subfolderNameInputRef = useRef<HTMLInputElement>(null)
|
||
|
||
useEffect(() => {
|
||
setRenameDraft(node.label)
|
||
}, [node.label])
|
||
|
||
const handleMenuOpenChange = (open: boolean) => {
|
||
setMenuOpen(open)
|
||
if (!open) {
|
||
queueMicrotask(() => menuTriggerRef.current?.blur())
|
||
}
|
||
}
|
||
|
||
const prefs = getNavItemPrefs(node.id)
|
||
const moveTargets = useMemo(
|
||
() => folderMoveParentOptions(folderTree, node.id),
|
||
[folderTree, node.id]
|
||
)
|
||
|
||
const folderMenuSurface =
|
||
"min-w-[240px] border-gray-200 bg-white p-0 py-1.5 shadow-md"
|
||
|
||
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(
|
||
"mx-1 cursor-pointer rounded-sm px-2 py-2 text-gray-800 focus:bg-gray-100 data-[state=open]:bg-gray-100",
|
||
subKind === "context" && "flex items-center gap-2"
|
||
)}
|
||
>
|
||
<span className="flex size-5 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white">
|
||
<span
|
||
className={cn(
|
||
"block size-3 rounded-sm border border-black/10",
|
||
dotClass
|
||
)}
|
||
aria-hidden
|
||
/>
|
||
</span>
|
||
<span className="flex-1 text-left text-sm">Couleur du dossier</span>
|
||
</SubTr>
|
||
<SubCo className="min-w-[180px] border-gray-200 bg-white p-2 shadow-md">
|
||
<div className="grid grid-cols-6 gap-1.5">
|
||
{LABEL_MENU_COLOR_SWATCHES.map((sw) => (
|
||
<button
|
||
key={sw}
|
||
type="button"
|
||
title={sw}
|
||
onClick={() => {
|
||
updateFolderOrLabelColor(node.id, sw)
|
||
setMenuOpen(false)
|
||
}}
|
||
className={cn(
|
||
"size-6 rounded-full border border-black/10 outline-none ring-offset-1 hover:ring-2 hover:ring-gray-400 focus-visible:ring-2 focus-visible:ring-gray-500",
|
||
sw
|
||
)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</SubCo>
|
||
</Sub>
|
||
)
|
||
}
|
||
|
||
const rowClass = cn(
|
||
"group/folderrow flex h-8 w-full min-w-0 shrink-0 cursor-default items-center gap-2 pr-3 text-sm",
|
||
isSelected || isOver ? "rounded-r-full" : "rounded-r-none",
|
||
isStickyBranch && "sticky border-b border-gray-200/70",
|
||
isStickyBranch && !isSelected && "bg-app-canvas",
|
||
isSelected && "bg-[#d3e3fd] font-medium text-gray-900",
|
||
!isSelected && hasUnread && "text-gray-900",
|
||
isOver && "bg-yellow-100 text-gray-900"
|
||
)
|
||
const rowStyle: CSSProperties = {
|
||
paddingLeft: 24 + depth * 16,
|
||
...(isStickyBranch ? { top: stickyTopPx, zIndex: 30 - depth } : {}),
|
||
}
|
||
|
||
const overflowMenu = (
|
||
<SidebarOverflowColumn
|
||
unread={unread}
|
||
menuOpen={menuOpen}
|
||
hoverGroup="folderrow"
|
||
isSelected={isSelected}
|
||
hasUnread={hasUnread}
|
||
className={cn(!isExpanded && "hidden", "mr-[-11px]")}
|
||
>
|
||
<DropdownMenu open={menuOpen} onOpenChange={handleMenuOpenChange}>
|
||
<DropdownMenuTrigger asChild>
|
||
<button
|
||
ref={menuTriggerRef}
|
||
type="button"
|
||
className={cn(sidebarOverflowMenuButtonClass, isSelected && "text-gray-900")}
|
||
aria-label={`Options pour ${node.label}`}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<MoreVertical className="h-4 w-4" />
|
||
</button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end" className={folderMenuSurface}>
|
||
{colorSub("dropdown")}
|
||
<DropdownMenuSeparator className="my-1.5 bg-gray-200" />
|
||
<DropdownMenuLabel className="px-3 py-1 text-[11px] font-normal normal-case tracking-normal text-gray-500">
|
||
Dans la liste des dossiers
|
||
</DropdownMenuLabel>
|
||
<LabelMenuOptionWithCheck
|
||
checked={prefs.sidebar === "show"}
|
||
onPick={() => setNavItemSidebarVisibility(node.id, "show")}
|
||
>
|
||
Afficher
|
||
</LabelMenuOptionWithCheck>
|
||
<LabelMenuOptionWithCheck
|
||
checked={prefs.sidebar === "showUnread"}
|
||
onPick={() => setNavItemSidebarVisibility(node.id, "showUnread")}
|
||
>
|
||
Afficher si messages non lus
|
||
</LabelMenuOptionWithCheck>
|
||
<LabelMenuOptionWithCheck
|
||
checked={prefs.sidebar === "hide"}
|
||
onPick={() => setNavItemSidebarVisibility(node.id, "hide")}
|
||
>
|
||
Masquer
|
||
</LabelMenuOptionWithCheck>
|
||
<DropdownMenuSeparator className="my-1.5 bg-gray-200" />
|
||
<DropdownMenuLabel className="px-3 py-1 text-[11px] font-normal normal-case tracking-normal text-gray-500">
|
||
Dans la liste des messages
|
||
</DropdownMenuLabel>
|
||
<LabelMenuOptionWithCheck
|
||
checked={prefs.messages === "show"}
|
||
onPick={() => setNavItemMessageVisibility(node.id, "show")}
|
||
>
|
||
Afficher
|
||
</LabelMenuOptionWithCheck>
|
||
<LabelMenuOptionWithCheck
|
||
checked={prefs.messages === "hide"}
|
||
onPick={() => setNavItemMessageVisibility(node.id, "hide")}
|
||
>
|
||
Masquer
|
||
</LabelMenuOptionWithCheck>
|
||
<DropdownMenuSeparator className="my-1.5 bg-gray-200" />
|
||
<DropdownMenuItem
|
||
className="mx-1 cursor-pointer px-3 py-2 text-sm text-gray-800 focus:bg-gray-100"
|
||
onClick={() => {
|
||
setRenameDraft(node.label)
|
||
setRenameOpen(true)
|
||
setMenuOpen(false)
|
||
}}
|
||
>
|
||
Renommer…
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
className="mx-1 cursor-pointer px-3 py-2 text-sm text-gray-800 focus:bg-gray-100"
|
||
onClick={() => {
|
||
setMoveParent("__root__")
|
||
setMoveOpen(true)
|
||
setMenuOpen(false)
|
||
}}
|
||
>
|
||
Déplacer…
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
className="mx-1 cursor-pointer px-3 py-2 text-sm text-gray-800 focus:bg-gray-100"
|
||
onClick={() => {
|
||
setSubfolderName("")
|
||
setSubfolderOpen(true)
|
||
setMenuOpen(false)
|
||
}}
|
||
>
|
||
Nouveau sous-dossier…
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
variant="destructive"
|
||
className="mx-1 cursor-pointer px-3 py-2 text-sm focus:bg-red-50"
|
||
onClick={() => {
|
||
removeFolderOrLabelRow(node.id)
|
||
setMenuOpen(false)
|
||
}}
|
||
>
|
||
Supprimer le dossier
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</SidebarOverflowColumn>
|
||
)
|
||
|
||
return (
|
||
<>
|
||
<ContextMenu>
|
||
<ContextMenuTrigger asChild>
|
||
<div {...dropHandlers} className={rowClass} style={rowStyle}>
|
||
{hasChildren ? (
|
||
<button
|
||
type="button"
|
||
className={cn(
|
||
"flex h-8 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-gray-600 outline-none hover:bg-black/5 focus-visible:ring-2 focus-visible:ring-ring/50",
|
||
isSelected && "text-gray-900"
|
||
)}
|
||
aria-expanded={isBranchOpen}
|
||
aria-label={
|
||
isBranchOpen
|
||
? `Replier le dossier ${node.label}`
|
||
: `Déplier le dossier ${node.label}`
|
||
}
|
||
onClick={(e) => {
|
||
e.preventDefault()
|
||
toggleFolderExpanded(node.id)
|
||
}}
|
||
>
|
||
<ChevronRight
|
||
className={cn(
|
||
"h-4 w-4 shrink-0 transition-transform duration-200",
|
||
isBranchOpen && "rotate-90"
|
||
)}
|
||
/>
|
||
</button>
|
||
) : (
|
||
<span
|
||
className="inline-flex h-8 w-5 shrink-0 items-center justify-center"
|
||
aria-hidden
|
||
/>
|
||
)}
|
||
<button
|
||
type="button"
|
||
onClick={() => onSelectFolder(node.id)}
|
||
className={cn(
|
||
"flex h-8 min-w-0 flex-1 cursor-pointer items-center gap-3 py-0 pr-1 text-left transition-colors",
|
||
!isSelected &&
|
||
!isOver &&
|
||
"rounded-r-none hover:rounded-r-full hover:bg-gray-100",
|
||
isSelected
|
||
? "text-gray-900"
|
||
: isOver
|
||
? "text-gray-900"
|
||
: "text-gray-700"
|
||
)}
|
||
>
|
||
<span className="flex h-5 w-5 shrink-0 items-center justify-center">
|
||
<span className={cn("block h-3 w-3 rounded-sm", dotClass)} />
|
||
</span>
|
||
<div className="flex min-w-0 flex-1 items-baseline gap-3">
|
||
<span className="min-w-0 flex-1 truncate leading-5">
|
||
<span
|
||
className={cn(
|
||
hasUnread && !isSelected && "font-semibold text-gray-900"
|
||
)}
|
||
>
|
||
{node.label}
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</button>
|
||
{overflowMenu}
|
||
</div>
|
||
</ContextMenuTrigger>
|
||
<ContextMenuContent className={folderMenuSurface}>
|
||
{colorSub("context")}
|
||
<ContextMenuSeparator className="my-1.5 bg-gray-200" />
|
||
<ContextMenuLabel className="px-3 py-1 text-[11px] font-normal normal-case tracking-normal text-gray-500">
|
||
Dans la liste des dossiers
|
||
</ContextMenuLabel>
|
||
<ContextLabelMenuOptionWithCheck
|
||
checked={prefs.sidebar === "show"}
|
||
onPick={() => setNavItemSidebarVisibility(node.id, "show")}
|
||
>
|
||
Afficher
|
||
</ContextLabelMenuOptionWithCheck>
|
||
<ContextLabelMenuOptionWithCheck
|
||
checked={prefs.sidebar === "showUnread"}
|
||
onPick={() => setNavItemSidebarVisibility(node.id, "showUnread")}
|
||
>
|
||
Afficher si non lus
|
||
</ContextLabelMenuOptionWithCheck>
|
||
<ContextLabelMenuOptionWithCheck
|
||
checked={prefs.sidebar === "hide"}
|
||
onPick={() => setNavItemSidebarVisibility(node.id, "hide")}
|
||
>
|
||
Masquer
|
||
</ContextLabelMenuOptionWithCheck>
|
||
<ContextMenuSeparator className="my-1.5 bg-gray-200" />
|
||
<ContextMenuLabel className="px-3 py-1 text-[11px] font-normal normal-case tracking-normal text-gray-500">
|
||
Dans la liste des messages
|
||
</ContextMenuLabel>
|
||
<ContextLabelMenuOptionWithCheck
|
||
checked={prefs.messages === "show"}
|
||
onPick={() => setNavItemMessageVisibility(node.id, "show")}
|
||
>
|
||
Afficher
|
||
</ContextLabelMenuOptionWithCheck>
|
||
<ContextLabelMenuOptionWithCheck
|
||
checked={prefs.messages === "hide"}
|
||
onPick={() => setNavItemMessageVisibility(node.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(node.label)
|
||
setRenameOpen(true)
|
||
}}
|
||
>
|
||
Renommer…
|
||
</ContextMenuItem>
|
||
<ContextMenuItem
|
||
className="mx-1 cursor-pointer px-3 py-2 text-sm"
|
||
onClick={() => {
|
||
setMoveParent("__root__")
|
||
setMoveOpen(true)
|
||
}}
|
||
>
|
||
Déplacer…
|
||
</ContextMenuItem>
|
||
<ContextMenuItem
|
||
className="mx-1 cursor-pointer px-3 py-2 text-sm"
|
||
onClick={() => {
|
||
setSubfolderName("")
|
||
setSubfolderOpen(true)
|
||
}}
|
||
>
|
||
Nouveau sous-dossier…
|
||
</ContextMenuItem>
|
||
<ContextMenuItem
|
||
variant="destructive"
|
||
className="mx-1 cursor-pointer px-3 py-2 text-sm"
|
||
onClick={() => removeFolderOrLabelRow(node.id)}
|
||
>
|
||
Supprimer le dossier
|
||
</ContextMenuItem>
|
||
</ContextMenuContent>
|
||
</ContextMenu>
|
||
|
||
<Dialog open={renameOpen} onOpenChange={setRenameOpen}>
|
||
<DialogContent
|
||
className="sm:max-w-md"
|
||
showCloseButton
|
||
onOpenAutoFocus={(e) => {
|
||
e.preventDefault()
|
||
window.requestAnimationFrame(() =>
|
||
folderRenameInputRef.current?.focus()
|
||
)
|
||
}}
|
||
>
|
||
<DialogHeader>
|
||
<DialogTitle>Renommer le dossier</DialogTitle>
|
||
<DialogDescription>Nouveau nom pour « {node.label} ».</DialogDescription>
|
||
</DialogHeader>
|
||
<Input
|
||
ref={folderRenameInputRef}
|
||
value={renameDraft}
|
||
onChange={(e) => setRenameDraft(e.target.value)}
|
||
autoComplete="off"
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault()
|
||
renameFolderOrLabel(node.id, renameDraft)
|
||
setRenameOpen(false)
|
||
}
|
||
}}
|
||
/>
|
||
<DialogFooter>
|
||
<Button variant="outline" type="button" onClick={() => setRenameOpen(false)}>
|
||
Annuler
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
onClick={() => {
|
||
renameFolderOrLabel(node.id, renameDraft)
|
||
setRenameOpen(false)
|
||
}}
|
||
>
|
||
Enregistrer
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
<Dialog open={moveOpen} onOpenChange={setMoveOpen}>
|
||
<DialogContent className="sm:max-w-md" showCloseButton>
|
||
<DialogHeader>
|
||
<DialogTitle>Déplacer le dossier</DialogTitle>
|
||
<DialogDescription>Choisissez le dossier parent.</DialogDescription>
|
||
</DialogHeader>
|
||
<Select value={moveParent} onValueChange={setMoveParent}>
|
||
<SelectTrigger className="w-full min-w-0" size="sm">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent position="popper" className="max-h-72">
|
||
{moveTargets.map((o) => (
|
||
<SelectItem key={o.value} value={o.value}>
|
||
{o.label}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
<DialogFooter>
|
||
<Button variant="outline" type="button" onClick={() => setMoveOpen(false)}>
|
||
Annuler
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
onClick={() => {
|
||
moveFolder(
|
||
node.id,
|
||
moveParent === "__root__" ? null : moveParent
|
||
)
|
||
setMoveOpen(false)
|
||
}}
|
||
>
|
||
Déplacer
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
<Dialog open={subfolderOpen} onOpenChange={setSubfolderOpen}>
|
||
<DialogContent
|
||
className="sm:max-w-md"
|
||
showCloseButton
|
||
onOpenAutoFocus={(e) => {
|
||
e.preventDefault()
|
||
window.requestAnimationFrame(() =>
|
||
subfolderNameInputRef.current?.focus()
|
||
)
|
||
}}
|
||
>
|
||
<DialogHeader>
|
||
<DialogTitle>Nouveau sous-dossier</DialogTitle>
|
||
<DialogDescription>Sous « {node.label} ».</DialogDescription>
|
||
</DialogHeader>
|
||
<Input
|
||
ref={subfolderNameInputRef}
|
||
value={subfolderName}
|
||
onChange={(e) => setSubfolderName(e.target.value)}
|
||
placeholder="Nom du dossier"
|
||
autoComplete="off"
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault()
|
||
addSubfolder(node.id, subfolderName)
|
||
setSubfolderOpen(false)
|
||
}
|
||
}}
|
||
/>
|
||
<DialogFooter>
|
||
<Button variant="outline" type="button" onClick={() => setSubfolderOpen(false)}>
|
||
Annuler
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
onClick={() => {
|
||
addSubfolder(node.id, subfolderName)
|
||
setSubfolderOpen(false)
|
||
}}
|
||
>
|
||
Créer
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</>
|
||
)
|
||
}
|
||
|
||
const renderExpandedFolderSubtree = (
|
||
nodes: FolderTreeNode[],
|
||
depth: number
|
||
): ReactNode =>
|
||
nodes
|
||
.filter((node) => {
|
||
const p = getNavItemPrefs(node.id)
|
||
if (p.sidebar === "hide") return false
|
||
if (
|
||
p.sidebar === "showUnread" &&
|
||
(folderUnreadCounts[node.id] ?? 0) === 0
|
||
) {
|
||
return false
|
||
}
|
||
return true
|
||
})
|
||
.map((node) => {
|
||
const isBranchOpen = expandedFolderIds.has(node.id)
|
||
const kids = node.children
|
||
return (
|
||
/* Limite le sticky au sous-arbre (évite l’empilement hors contexte). */
|
||
<div key={node.id} className="min-w-0">
|
||
<FolderRowExpanded node={node} depth={depth} />
|
||
{kids?.length && isBranchOpen ? (
|
||
<div className="min-w-0">
|
||
{renderExpandedFolderSubtree(kids, depth + 1)}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
)
|
||
})
|
||
|
||
const FolderButtonCollapsed = ({ node }: { node: FolderTreeNode }) => {
|
||
const { isOver, dropHandlers } = useEmailDropTarget(node.id, node.label)
|
||
const dotClass = node.color ?? "bg-gray-400"
|
||
const isHighlighted = folderSubtreeContainsId(node, selectedFolder)
|
||
const unread = folderUnreadCounts[node.id] ?? 0
|
||
const hasUnread = unread > 0
|
||
return (
|
||
<button
|
||
type="button"
|
||
title={
|
||
!isExpanded
|
||
? unread > 0
|
||
? `${node.label} — ${unread} non lus`
|
||
: node.label
|
||
: undefined
|
||
}
|
||
onClick={() => onSelectFolder(node.id)}
|
||
{...dropHandlers}
|
||
className={cn(
|
||
"relative flex h-8 w-full min-w-0 shrink-0 cursor-pointer items-center gap-4 pl-6 pr-3 text-sm transition-colors",
|
||
navRowRoundedWhenActive(isHighlighted || isOver),
|
||
isHighlighted
|
||
? "bg-[#d3e3fd] text-gray-900 font-medium"
|
||
: isOver
|
||
? "bg-yellow-100 text-gray-900"
|
||
: hasUnread
|
||
? "text-gray-900 hover:bg-gray-100"
|
||
: "text-gray-700 hover:bg-gray-100"
|
||
)}
|
||
>
|
||
<span className="relative flex h-5 w-5 shrink-0 items-center justify-center">
|
||
{hasUnread && (
|
||
<span
|
||
className={cn(
|
||
"absolute block h-3 w-3 rounded-sm opacity-75 animate-ping",
|
||
dotClass
|
||
)}
|
||
aria-hidden
|
||
/>
|
||
)}
|
||
<span className={cn("relative block h-3 w-3 rounded-sm", dotClass)} />
|
||
</span>
|
||
</button>
|
||
)
|
||
}
|
||
|
||
const LabelItemRow = ({
|
||
item,
|
||
unreadCount,
|
||
isExpanded: labelRowExpanded,
|
||
}: {
|
||
item: { id: string; label: string; color: string; count?: number }
|
||
unreadCount: number
|
||
isExpanded: boolean
|
||
}) => {
|
||
const { isOver, dropHandlers } = useEmailDropTarget(item.id, item.label)
|
||
const isSelected = selectedFolder === item.id
|
||
const hasUnread = unreadCount > 0
|
||
const [menuOpen, setMenuOpen] = 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)
|
||
|
||
useEffect(() => {
|
||
setRenameDraft(item.label)
|
||
}, [item.label])
|
||
|
||
const handleMenuOpenChange = (open: boolean) => {
|
||
setMenuOpen(open)
|
||
if (!open) {
|
||
queueMicrotask(() => menuTriggerRef.current?.blur())
|
||
}
|
||
}
|
||
|
||
const prefs = getNavItemPrefs(item.id)
|
||
const labelDotClass = item.color ?? "bg-gray-400"
|
||
const labelMenuSurface =
|
||
"min-w-[240px] border-gray-200 bg-white p-0 py-1.5 shadow-md"
|
||
|
||
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(
|
||
"mx-1 cursor-pointer rounded-sm px-2 py-2 text-gray-800 focus:bg-gray-100 data-[state=open]:bg-gray-100",
|
||
subKind === "context" && "flex items-center gap-2"
|
||
)}
|
||
>
|
||
<span className="flex size-5 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white">
|
||
<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="min-w-[180px] border-gray-200 bg-white p-2 shadow-md">
|
||
<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(
|
||
"size-6 rounded-full border border-black/10 outline-none ring-offset-1 hover:ring-2 hover:ring-gray-400 focus-visible:ring-2 focus-visible:ring-gray-500",
|
||
sw
|
||
)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</SubCo>
|
||
</Sub>
|
||
)
|
||
}
|
||
|
||
const rowClass = cn(
|
||
"group/labelrow flex h-8 w-full min-w-0 shrink-0 cursor-default items-center pl-6 pr-2 transition-colors",
|
||
navRowRoundedWhenActive(isSelected || isOver),
|
||
isSelected
|
||
? "bg-[#d3e3fd] text-gray-900 font-medium"
|
||
: isOver
|
||
? "bg-yellow-100 text-gray-900"
|
||
: hasUnread
|
||
? "text-gray-900 hover:bg-gray-100"
|
||
: "text-gray-700 hover:bg-gray-100"
|
||
)
|
||
|
||
const overflowMenu = labelRowExpanded ? (
|
||
<SidebarOverflowColumn
|
||
unread={unreadCount}
|
||
menuOpen={menuOpen}
|
||
hoverGroup="labelrow"
|
||
isSelected={isSelected}
|
||
hasUnread={hasUnread}
|
||
className="mr-[-7px]"
|
||
>
|
||
<DropdownMenu open={menuOpen} onOpenChange={handleMenuOpenChange}>
|
||
<DropdownMenuTrigger asChild>
|
||
<button
|
||
ref={menuTriggerRef}
|
||
type="button"
|
||
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="my-1.5 bg-gray-200" />
|
||
<DropdownMenuLabel className="px-3 py-1 text-[11px] font-normal normal-case tracking-normal text-gray-500">
|
||
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="my-1.5 bg-gray-200" />
|
||
<DropdownMenuLabel className="px-3 py-1 text-[11px] font-normal normal-case tracking-normal text-gray-500">
|
||
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="my-1.5 bg-gray-200" />
|
||
<DropdownMenuItem
|
||
className="mx-1 cursor-pointer px-3 py-2 text-sm text-gray-800 focus:bg-gray-100"
|
||
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-red-50"
|
||
onClick={() => {
|
||
removeFolderOrLabelRow(item.id)
|
||
setMenuOpen(false)
|
||
}}
|
||
>
|
||
Supprimer le libellé
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
className="mx-1 cursor-pointer px-3 py-2 text-sm text-gray-800 focus:bg-gray-100"
|
||
onClick={() => {
|
||
setSublabelName("")
|
||
setSublabelOpen(true)
|
||
setMenuOpen(false)
|
||
}}
|
||
>
|
||
Ajouter un sous-libellé
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</SidebarOverflowColumn>
|
||
) : null
|
||
|
||
return (
|
||
<>
|
||
<ContextMenu>
|
||
<ContextMenuTrigger asChild>
|
||
<div {...dropHandlers} className={rowClass}>
|
||
<button
|
||
type="button"
|
||
title={!labelRowExpanded ? item.label : undefined}
|
||
onClick={() => 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",
|
||
labelRowExpanded ? "pr-1" : "pr-3"
|
||
)}
|
||
>
|
||
<span className="flex h-5 w-5 shrink-0 items-center justify-center">
|
||
<span
|
||
className={cn("block h-3 w-3 rounded-sm", item.color ?? "bg-gray-400")}
|
||
/>
|
||
</span>
|
||
{labelRowExpanded && (
|
||
<span
|
||
className={cn(
|
||
"min-w-0 flex-1 truncate text-sm leading-5",
|
||
hasUnread && !isSelected && "font-semibold text-gray-900"
|
||
)}
|
||
>
|
||
{item.label}
|
||
</span>
|
||
)}
|
||
</button>
|
||
{overflowMenu}
|
||
</div>
|
||
</ContextMenuTrigger>
|
||
<ContextMenuContent className={labelMenuSurface}>
|
||
{colorSub("context")}
|
||
<ContextMenuSeparator className="my-1.5 bg-gray-200" />
|
||
<ContextMenuLabel className="px-3 py-1 text-[11px] font-normal normal-case tracking-normal text-gray-500">
|
||
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="my-1.5 bg-gray-200" />
|
||
<ContextMenuLabel className="px-3 py-1 text-[11px] font-normal normal-case tracking-normal text-gray-500">
|
||
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>
|
||
|
||
<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>
|
||
</>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<aside
|
||
ref={sidebarRef}
|
||
onMouseEnter={handleMouseEnter}
|
||
onMouseLeave={handleMouseLeave}
|
||
className={cn(
|
||
"absolute left-0 top-0 bottom-0 flex flex-col overflow-hidden bg-app-canvas transition-[width,transform] duration-200 z-40",
|
||
isExpanded ? "w-60" : "w-[68px]",
|
||
hoverExpanded && "shadow-xl border-r border-gray-200",
|
||
!collapsed && "max-sm:z-50 max-sm:shadow-xl max-sm:border-r max-sm:border-gray-200",
|
||
collapsed && "max-sm:-translate-x-full max-sm:pointer-events-none"
|
||
)}
|
||
>
|
||
<div className="flex shrink-0 items-center justify-between px-4 pt-4 pb-4 sm:hidden">
|
||
<UltiMailLogo className="min-h-8" />
|
||
<Button variant="ghost" size="icon" className="size-9 shrink-0 text-gray-600" aria-label="Réglages">
|
||
<Icon icon="mdi:cog" className="size-5 shrink-0" aria-hidden />
|
||
</Button>
|
||
</div>
|
||
|
||
<div
|
||
className={cn(
|
||
"hidden shrink-0 bg-app-canvas z-10 pt-1 pb-3 pl-2 sm:flex",
|
||
isExpanded ? "pr-3.5" : "pr-2"
|
||
)}
|
||
>
|
||
<button
|
||
type="button"
|
||
title={!isExpanded ? "Nouveau message" : undefined}
|
||
aria-label={!isExpanded ? "Nouveau message" : undefined}
|
||
onClick={openCompose}
|
||
className={cn(
|
||
"inline-flex h-[52px] min-w-0 shrink-0 cursor-pointer items-center rounded-2xl border border-gray-200 bg-white text-sm font-medium text-gray-700 shadow-sm outline-none transition-[box-shadow,background-color,border-color,color] duration-200 hover:bg-gray-50 hover:text-gray-900 hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 [&_svg]:pointer-events-none [&_svg]:size-5 [&_svg]:shrink-0",
|
||
isExpanded
|
||
? "w-auto max-w-full justify-start gap-3 self-start pl-4 pr-8"
|
||
: "w-[52px] justify-center px-0 py-0"
|
||
)}
|
||
>
|
||
<Pencil className="size-5 shrink-0" />
|
||
{isExpanded && (
|
||
<span className="min-w-0 truncate text-sm font-medium">
|
||
Nouveau message
|
||
</span>
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
<div
|
||
className={cn(
|
||
"min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
|
||
"[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
|
||
)}
|
||
>
|
||
{/* Boîte principale + catégories (hors « Plus »), puis Plus / Moins, puis extras. */}
|
||
<nav className={cn("flex min-h-full flex-col", navRailInset)}>
|
||
{visibleMainItems.map((item) => (
|
||
<NavItem
|
||
key={item.id}
|
||
item={item}
|
||
isSelected={selectedFolder === item.id}
|
||
unreadCount={folderUnreadCounts[item.id] ?? 0}
|
||
/>
|
||
))}
|
||
{primaryVisibleCategories.map((item) => (
|
||
<CategoryNavRow
|
||
key={item.id}
|
||
item={item}
|
||
isSelected={selectedFolder === item.id}
|
||
isExpanded={isExpanded}
|
||
unreadCount={folderUnreadCounts[item.id] ?? 0}
|
||
onSelectFolder={onSelectFolder}
|
||
onHideCategory={hideCategory}
|
||
onShowCategory={showCategory}
|
||
/>
|
||
))}
|
||
|
||
{hasPlusOnlyExtras && (
|
||
<button
|
||
type="button"
|
||
title={!isExpanded ? (navMoreOpen ? "Moins" : "Plus") : undefined}
|
||
aria-expanded={navMoreOpen}
|
||
aria-label={
|
||
!isExpanded
|
||
? navMoreOpen
|
||
? "Moins d’entrées"
|
||
: "Plus d’entrées"
|
||
: undefined
|
||
}
|
||
onClick={() =>
|
||
setNavMoreOpen((wasOpen) => {
|
||
if (!wasOpen) return true
|
||
if (CATEGORY_IDS_IN_PLUS_ONLY.has(selectedFolder)) {
|
||
onSelectFolder("inbox")
|
||
return false
|
||
}
|
||
return false
|
||
})
|
||
}
|
||
className={cn(
|
||
"flex h-8 w-full shrink-0 cursor-pointer items-center gap-4 pl-6 pr-3 text-gray-700 transition-colors hover:bg-gray-100",
|
||
navRowRoundedWhenActive(false)
|
||
)}
|
||
>
|
||
<ChevronDown
|
||
className={cn(
|
||
"h-5 w-5 shrink-0 transition-transform duration-200",
|
||
navMoreOpen && "rotate-180"
|
||
)}
|
||
/>
|
||
{isExpanded && (
|
||
<span className="text-sm">{navMoreOpen ? "Moins" : "Plus"}</span>
|
||
)}
|
||
</button>
|
||
)}
|
||
|
||
{navMoreOpen && (
|
||
<>
|
||
{plusOnlyVisibleCategories.map((item) => (
|
||
<CategoryNavRow
|
||
key={item.id}
|
||
item={item}
|
||
isSelected={selectedFolder === item.id}
|
||
isExpanded={isExpanded}
|
||
unreadCount={folderUnreadCounts[item.id] ?? 0}
|
||
onSelectFolder={onSelectFolder}
|
||
onHideCategory={hideCategory}
|
||
onShowCategory={showCategory}
|
||
/>
|
||
))}
|
||
{isExpanded && (
|
||
<div className="mt-1 flex flex-col gap-px">
|
||
{sidebarSecondaryActions.map((a) => {
|
||
const ActionIcon = a.icon
|
||
return (
|
||
<button
|
||
key={a.id}
|
||
type="button"
|
||
className="flex min-h-8 w-full cursor-pointer items-center gap-2 rounded-md py-1.5 pl-6 pr-3 text-left text-xs text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-800"
|
||
>
|
||
<ActionIcon className="h-3.5 w-3.5 shrink-0 opacity-70" aria-hidden />
|
||
<span className="min-w-0 leading-snug">{a.label}</span>
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
{isExpanded && hiddenCategoryItems.length > 0 && (
|
||
<div className="mt-2 pt-2">
|
||
<div className="mb-1 pl-6 pr-3 text-[11px] font-medium uppercase tracking-wide text-gray-500">
|
||
Masquées
|
||
</div>
|
||
{hiddenCategoryItems.map((item) => (
|
||
<CategoryNavRow
|
||
key={item.id}
|
||
item={item}
|
||
isSelected={false}
|
||
isExpanded={isExpanded}
|
||
unreadCount={folderUnreadCounts[item.id] ?? 0}
|
||
onSelectFolder={onSelectFolder}
|
||
onHideCategory={hideCategory}
|
||
onShowCategory={showCategory}
|
||
variant="hidden"
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* Dossiers (hiérarchie : chevron = replier / déplier uniquement) */}
|
||
<div className="mt-3 pt-1">
|
||
<div
|
||
className="sticky top-0 z-31 flex h-8 w-full min-w-0 shrink-0 items-center gap-2 bg-app-canvas pl-6 pr-3"
|
||
title={!isExpanded ? "Dossiers" : undefined}
|
||
>
|
||
<Folder className="h-5 w-5 shrink-0 text-gray-600" aria-hidden />
|
||
{isExpanded && (
|
||
<span className="min-w-0 flex-1 truncate text-left text-sm font-medium text-gray-700">
|
||
Dossiers
|
||
</span>
|
||
)}
|
||
{isExpanded && (
|
||
<button
|
||
type="button"
|
||
className="flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-full text-gray-500 hover:bg-gray-100 hover:text-gray-700"
|
||
aria-label="Ajouter un dossier"
|
||
title="Ajouter un dossier"
|
||
onClick={() => {
|
||
setNewFolderParent("__root__")
|
||
setNewFolderName("")
|
||
setFolderDialogOpen(true)
|
||
}}
|
||
>
|
||
<Plus className="h-5 w-5 shrink-0" />
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{isExpanded
|
||
? renderExpandedFolderSubtree(folderTree, 0)
|
||
: folderTree.map((node) => (
|
||
<FolderButtonCollapsed key={node.id} node={node} />
|
||
))}
|
||
</div>
|
||
|
||
{/* Labels */}
|
||
<div className="mt-3 pt-1">
|
||
<div
|
||
className="sticky top-0 z-31 flex h-8 w-full min-w-0 shrink-0 items-center gap-2 bg-app-canvas pl-6 pr-3"
|
||
title={!isExpanded ? "Libellés" : undefined}
|
||
>
|
||
<Tag className="h-5 w-5 shrink-0 text-gray-600" aria-hidden />
|
||
{isExpanded && (
|
||
<span className="min-w-0 flex-1 truncate text-left text-sm font-medium text-gray-700">
|
||
Libellés
|
||
</span>
|
||
)}
|
||
{isExpanded && (
|
||
<button
|
||
type="button"
|
||
className="flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-full text-gray-500 hover:bg-gray-100 hover:text-gray-700"
|
||
aria-label="Ajouter un libellé"
|
||
title="Ajouter un libellé"
|
||
onClick={() => {
|
||
setNewLabelName("")
|
||
setLabelDialogOpen(true)
|
||
}}
|
||
>
|
||
<Plus className="h-5 w-5 shrink-0" />
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{visibleNavLabelRows.map((item) => (
|
||
<LabelItemRow
|
||
key={item.id}
|
||
item={item}
|
||
unreadCount={folderUnreadCounts[item.id] ?? 0}
|
||
isExpanded={isExpanded}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
{/* Sortbot */}
|
||
<div className={cn(
|
||
"z-30 mt-auto bg-app-canvas pt-2",
|
||
"max-sm:pb-16 sm:sticky sm:bottom-0 sm:border-t sm:border-gray-200 sm:pb-3"
|
||
)}>
|
||
<button
|
||
type="button"
|
||
title={!isExpanded ? "Sortbot" : undefined}
|
||
className={cn(
|
||
"flex h-8 w-full shrink-0 cursor-pointer items-center gap-4 pl-6 pr-3 text-sm text-gray-700 transition-colors hover:bg-gray-100",
|
||
navRowRoundedWhenActive(false)
|
||
)}
|
||
>
|
||
<Bot className="h-5 w-5 shrink-0 text-gray-600" aria-hidden />
|
||
{isExpanded && <span>Sortbot</span>}
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<Dialog open={folderDialogOpen} onOpenChange={setFolderDialogOpen}>
|
||
<DialogContent
|
||
className="sm:max-w-md"
|
||
showCloseButton
|
||
onOpenAutoFocus={(e) => {
|
||
e.preventDefault()
|
||
window.requestAnimationFrame(() =>
|
||
newFolderNameInputRef.current?.focus()
|
||
)
|
||
}}
|
||
>
|
||
<DialogHeader>
|
||
<DialogTitle>Nouveau dossier</DialogTitle>
|
||
<DialogDescription>
|
||
Choisissez l’emplacement (racine ou dossier parent) puis le nom.
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="grid gap-3 py-1">
|
||
<div className="grid gap-2">
|
||
<Label htmlFor="new-folder-parent">Emplacement</Label>
|
||
<Select value={newFolderParent} onValueChange={setNewFolderParent}>
|
||
<SelectTrigger id="new-folder-parent" className="w-full min-w-0" size="sm">
|
||
<SelectValue placeholder="Parent" />
|
||
</SelectTrigger>
|
||
<SelectContent position="popper" className="max-h-72">
|
||
{folderParentOptions.map((o) => (
|
||
<SelectItem key={o.value} value={o.value}>
|
||
{o.label}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="grid gap-2">
|
||
<Label htmlFor="new-folder-name">Nom</Label>
|
||
<Input
|
||
id="new-folder-name"
|
||
ref={newFolderNameInputRef}
|
||
value={newFolderName}
|
||
onChange={(e) => setNewFolderName(e.target.value)}
|
||
placeholder="Mon dossier"
|
||
autoComplete="off"
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault()
|
||
handleSubmitNewFolder()
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button
|
||
variant="outline"
|
||
type="button"
|
||
onClick={() => setFolderDialogOpen(false)}
|
||
>
|
||
Annuler
|
||
</Button>
|
||
<Button type="button" onClick={handleSubmitNewFolder}>
|
||
Créer
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
<Dialog open={labelDialogOpen} onOpenChange={setLabelDialogOpen}>
|
||
<DialogContent
|
||
className="sm:max-w-md"
|
||
showCloseButton
|
||
onOpenAutoFocus={(e) => {
|
||
e.preventDefault()
|
||
window.requestAnimationFrame(() =>
|
||
newLabelNameInputRef.current?.focus()
|
||
)
|
||
}}
|
||
>
|
||
<DialogHeader>
|
||
<DialogTitle>Nouveau libellé</DialogTitle>
|
||
<DialogDescription>
|
||
Nom affiché dans la barre latérale et utilisé sur les messages.
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="grid gap-2 py-1">
|
||
<Label htmlFor="new-label-name">Nom</Label>
|
||
<Input
|
||
id="new-label-name"
|
||
ref={newLabelNameInputRef}
|
||
value={newLabelName}
|
||
onChange={(e) => setNewLabelName(e.target.value)}
|
||
placeholder="Libellé"
|
||
autoComplete="off"
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault()
|
||
handleSubmitNewLabel()
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button
|
||
variant="outline"
|
||
type="button"
|
||
onClick={() => setLabelDialogOpen(false)}
|
||
>
|
||
Annuler
|
||
</Button>
|
||
<Button type="button" onClick={handleSubmitNewLabel}>
|
||
Créer
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</aside>
|
||
)
|
||
}
|