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; 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 = ({ export const TaskContextMenu = ({
task: _task, task: _task,
isPinned, isPinned,
@ -35,7 +112,6 @@ export const TaskContextMenu = ({
onDelete, onDelete,
children, children,
}: TaskContextMenuProps): React.JSX.Element => { }: TaskContextMenuProps): React.JSX.Element => {
const { t } = useAppTranslation('common');
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
return ( return (
@ -44,57 +120,15 @@ export const TaskContextMenu = ({
<div className="w-full">{children}</div> <div className="w-full">{children}</div>
</ContextMenuTrigger> </ContextMenuTrigger>
{open ? ( {open ? (
<ContextMenuContent onCloseAutoFocus={(e) => e.preventDefault()}> <TaskContextMenuLazyContent
<ContextMenuItem onSelect={onTogglePin}> isPinned={isPinned}
{isPinned ? ( isArchived={isArchived}
<> onTogglePin={onTogglePin}
<PinOff className="size-3.5 shrink-0" /> onToggleArchive={onToggleArchive}
<span>{t('taskContextMenu.unpin')}</span> onMarkUnread={onMarkUnread}
</> onRename={onRename}
) : ( onDelete={onDelete}
<> />
<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>
) : null} ) : null}
</ContextMenu> </ContextMenu>
); );