perf(renderer): defer task context menu translations

This commit is contained in:
777genius 2026-05-31 07:59:04 +03:00
parent 68d07f56ad
commit 36f69f5ae4

View file

@ -24,6 +24,83 @@ export interface TaskContextMenuProps {
children: React.ReactNode;
}
type TaskContextMenuContentProps = Pick<
TaskContextMenuProps,
| 'isPinned'
| 'isArchived'
| 'onTogglePin'
| 'onToggleArchive'
| 'onMarkUnread'
| 'onRename'
| 'onDelete'
>;
const TaskContextMenuLazyContent = ({
isPinned,
isArchived,
onTogglePin,
onToggleArchive,
onMarkUnread,
onRename,
onDelete,
}: TaskContextMenuContentProps): React.JSX.Element => {
const { t } = useAppTranslation('common');
return (
<ContextMenuContent onCloseAutoFocus={(e) => e.preventDefault()}>
<ContextMenuItem onSelect={onTogglePin}>
{isPinned ? (
<>
<PinOff className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.unpin')}</span>
</>
) : (
<>
<Pin className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.pin')}</span>
</>
)}
</ContextMenuItem>
<ContextMenuItem onSelect={onRename}>
<Pencil className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.rename')}</span>
</ContextMenuItem>
<ContextMenuItem onSelect={onMarkUnread}>
<Mail className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.markUnread')}</span>
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem onSelect={onToggleArchive}>
{isArchived ? (
<>
<ArchiveRestore className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.unarchive')}</span>
</>
) : (
<>
<Archive className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.archive')}</span>
</>
)}
</ContextMenuItem>
{onDelete && (
<>
<ContextMenuSeparator />
<ContextMenuItem onSelect={onDelete} className="text-red-400 focus:text-red-400">
<Trash2 className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.deleteTask')}</span>
</ContextMenuItem>
</>
)}
</ContextMenuContent>
);
};
export const TaskContextMenu = ({
task: _task,
isPinned,
@ -35,7 +112,6 @@ export const TaskContextMenu = ({
onDelete,
children,
}: TaskContextMenuProps): React.JSX.Element => {
const { t } = useAppTranslation('common');
const [open, setOpen] = useState(false);
return (
@ -44,57 +120,15 @@ export const TaskContextMenu = ({
<div className="w-full">{children}</div>
</ContextMenuTrigger>
{open ? (
<ContextMenuContent onCloseAutoFocus={(e) => e.preventDefault()}>
<ContextMenuItem onSelect={onTogglePin}>
{isPinned ? (
<>
<PinOff className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.unpin')}</span>
</>
) : (
<>
<Pin className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.pin')}</span>
</>
)}
</ContextMenuItem>
<ContextMenuItem onSelect={onRename}>
<Pencil className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.rename')}</span>
</ContextMenuItem>
<ContextMenuItem onSelect={onMarkUnread}>
<Mail className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.markUnread')}</span>
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem onSelect={onToggleArchive}>
{isArchived ? (
<>
<ArchiveRestore className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.unarchive')}</span>
</>
) : (
<>
<Archive className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.archive')}</span>
</>
)}
</ContextMenuItem>
{onDelete && (
<>
<ContextMenuSeparator />
<ContextMenuItem onSelect={onDelete} className="text-red-400 focus:text-red-400">
<Trash2 className="size-3.5 shrink-0" />
<span>{t('taskContextMenu.deleteTask')}</span>
</ContextMenuItem>
</>
)}
</ContextMenuContent>
<TaskContextMenuLazyContent
isPinned={isPinned}
isArchived={isArchived}
onTogglePin={onTogglePin}
onToggleArchive={onToggleArchive}
onMarkUnread={onMarkUnread}
onRename={onRename}
onDelete={onDelete}
/>
) : null}
</ContextMenu>
);