95 lines
2.3 KiB
TypeScript
95 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import { Fragment, useMemo } from "react"
|
|
import type { FolderTreeNode } from "@/lib/sidebar-nav-maps"
|
|
import { breadcrumbSegmentsForVisitKey } from "@/lib/mail-folder-display"
|
|
import { resolveMailNavIcon } from "@/lib/mail-nav-icons"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
type MailFolderStackIndicatorProps = {
|
|
currentKey: string
|
|
folderTree: FolderTreeNode[]
|
|
folderIdToLabel: Record<string, string>
|
|
className?: string
|
|
}
|
|
|
|
function MailNavIconGlyph({
|
|
visitKey,
|
|
folderTree,
|
|
}: {
|
|
visitKey: string
|
|
folderTree: FolderTreeNode[]
|
|
}) {
|
|
const resolved = useMemo(
|
|
() => resolveMailNavIcon(visitKey, folderTree),
|
|
[visitKey, folderTree]
|
|
)
|
|
|
|
if (resolved.kind === "folder-dot") {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"inline-block size-4 shrink-0 rounded-sm",
|
|
resolved.colorClass
|
|
)}
|
|
aria-hidden
|
|
/>
|
|
)
|
|
}
|
|
|
|
const { Icon } = resolved
|
|
return (
|
|
<Icon
|
|
className="size-4 shrink-0 text-[#5f6368]"
|
|
strokeWidth={1.5}
|
|
aria-hidden
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function MailFolderStackIndicator({
|
|
currentKey,
|
|
folderTree,
|
|
folderIdToLabel,
|
|
className,
|
|
}: MailFolderStackIndicatorProps) {
|
|
const segments = useMemo(
|
|
() => breadcrumbSegmentsForVisitKey(currentKey, folderTree, folderIdToLabel),
|
|
[currentKey, folderTree, folderIdToLabel]
|
|
)
|
|
|
|
const ariaLabel = segments.join(" · ")
|
|
|
|
return (
|
|
<div
|
|
role="status"
|
|
aria-live="polite"
|
|
aria-label={`Boîte actuelle : ${ariaLabel}`}
|
|
className={cn(
|
|
"flex max-w-[min(360px,calc(100vw-1rem))] items-center gap-2.5",
|
|
"border-t border-r border-[#dadce0]/90",
|
|
"bg-white/78 px-3.5 py-2.5 text-sm font-medium leading-snug text-[#3c4043]",
|
|
"rounded-tr-2xl shadow-sm backdrop-blur-md",
|
|
className
|
|
)}
|
|
>
|
|
<MailNavIconGlyph visitKey={currentKey} folderTree={folderTree} />
|
|
<span className="flex min-w-0 items-center gap-1.5">
|
|
{segments.map((seg, i) => (
|
|
<Fragment key={`${seg}-${i}`}>
|
|
{i > 0 ? (
|
|
<span
|
|
className="shrink-0 text-xs leading-none text-[#9aa0a6]"
|
|
aria-hidden
|
|
>
|
|
·
|
|
</span>
|
|
) : null}
|
|
<span className="truncate">{seg}</span>
|
|
</Fragment>
|
|
))}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|