diff --git a/components/layout/mailbox-context-menu.tsx b/components/layout/mailbox-context-menu.tsx index da5da81b..0f497d96 100644 --- a/components/layout/mailbox-context-menu.tsx +++ b/components/layout/mailbox-context-menu.tsx @@ -11,8 +11,10 @@ import { } from "@/components/ui/context-menu"; import { CheckCheck, + ChevronRight, MailOpen, Mails, + MoreHorizontal, Trash2, FolderPlus, Pencil, @@ -39,13 +41,32 @@ function truncateSegment(name: string): string { : name; } -function shortenPath(fullPath: string): string { - if (fullPath.length <= MAX_PATH_LENGTH) return fullPath; +function renderPathSegments(segments: string[]): React.ReactNode { + return ( + + {segments.map((seg, i) => ( + + {i > 0 && } + {seg === "…" ? : {seg}} + + ))} + + ); +} + +function renderShortenedPath(fullPath: string): React.ReactNode { const segments = fullPath.split(PATH_SEPARATOR); - if (segments.length <= 2) return segments.map(truncateSegment).join(PATH_SEPARATOR); - const first = truncateSegment(segments[0]); - const last = truncateSegment(segments[segments.length - 1]); - return `${first}${PATH_SEPARATOR}…${PATH_SEPARATOR}${last}`; + if (fullPath.length <= MAX_PATH_LENGTH) { + return renderPathSegments(segments); + } + if (segments.length <= 2) { + return renderPathSegments(segments.map(truncateSegment)); + } + return renderPathSegments([ + truncateSegment(segments[0]), + "…", + truncateSegment(segments[segments.length - 1]), + ]); } interface MailboxContextMenuProps { @@ -130,12 +151,11 @@ export function MailboxContextMenu({ const canRemoveItems = mailbox.myRights?.mayRemoveItems !== false; const fullPath = getMailboxPath(mailbox, mailboxes); - const displayPath = shortenPath(fullPath); return ( - {displayPath} + {renderShortenedPath(fullPath)}