fix: localize special-folder names by JMAP role #404

components/email/email-context-menu.tsx

@@ -34,6 +34,7 @@ import {
   XCircle,
 } from "lucide-react";
 import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
+import { localizeMailboxName } from "@/lib/mailbox-label";
 import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
 
 interface Position {
@@ -143,6 +144,7 @@ export function EmailContextMenu({
   onRescheduleScheduled,
 }: EmailContextMenuProps) {
   const t = useTranslations("context_menu");
+  const tSidebar = useTranslations("sidebar");
   const _tColor = useTranslations("email_viewer.color_tag");
   const emailKeywords = useSettingsStore((state) => state.emailKeywords);
   const isUnread = !email.keywords?.$seen;
@@ -302,12 +304,13 @@ export function EmailContextMenu({
               return nodes.map((node) => {
                 const Icon = getMailboxIcon(node.role);
                 const isTarget = moveTargetIds.has(node.id);
+                const nodeLabel = localizeMailboxName(node.role, node.name, (k) => tSidebar(`mailboxes.${k}`));
                 return (
                   <div key={node.id}>
                     {isTarget ? (
                       <ContextMenuItem
                         icon={Icon}
-                        label={node.name}
+                        label={nodeLabel}
                         onClick={() =>
                           handleAction(() =>
                             showBatchActions
@@ -319,7 +322,7 @@ export function EmailContextMenu({
                     ) : (
                       <div className="px-3 py-1.5 text-sm flex items-center gap-2 text-muted-foreground">
                         <Icon className="w-4 h-4 flex-shrink-0" />
-                        <span>{node.name}</span>
+                        <span>{nodeLabel}</span>
                       </div>
                     )}
                     {node.children.length > 0 && (

components/layout/sidebar.tsx

@@ -37,6 +37,7 @@ import {
   MailOpen,
 } from "lucide-react";
 import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
+import { localizeMailboxName } from "@/lib/mailbox-label";
 import { Mailbox } from "@/lib/jmap/types";
 import { useContextMenu } from "@/hooks/use-context-menu";
 import { MailboxContextMenu, type MailboxContextTarget } from "./mailbox-context-menu";
@@ -439,12 +440,14 @@ function MailboxTreeItem({
   onContextMenu?: (e: React.MouseEvent, node: MailboxNode) => void;
 }) {
   const tNotifications = useTranslations('notifications');
+  const tSidebar = useTranslations('sidebar');
   const hasChildren = node.children.length > 0;
   const isExpanded = expandedFolders.has(node.id);
   const Icon = getIconForMailbox(node.role, node.name, hasChildren, isExpanded, node.isShared, node.id);
   const isVirtualNode = node.id.startsWith('shared-');
   const isSelected = selectedMailbox === node.id;
   const roleKey = resolveRoleKey(node.role, node.name);
+  const label = localizeMailboxName(node.role, node.name, (k) => tSidebar(`mailboxes.${k}`));
 
   const { isDragging: globalDragging } = useDragDropContext();
   const { dropHandlers, isValidDropTarget, isInvalidDropTarget } = useMailboxDrop({
@@ -471,7 +474,7 @@ function MailboxTreeItem({
     <>
       <SidebarRow
         icon={<Icon className={getIconClass(isSelected, isVirtualNode, colorful, roleKey)} />}
-        label={node.name}
+        label={label}
         depth={node.depth}
         isSelected={isSelected}
         isVirtual={isVirtualNode}