fix(ui): align multi-file patch interactions

This commit is contained in:
Bohdan Triapitsyn
2026-08-02 21:32:27 +03:00
parent 89399ec1c2
commit 75832876fa
@@ -2198,12 +2198,17 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
<div
className={cn(
'group/tool flex gap-1.5 pr-2 pl-px py-1.5 rounded-xl',
isMultiFileApplyPatch ? 'flex-wrap items-start' : 'items-center cursor-pointer',
isMultiFileApplyPatch ? 'flex-wrap items-start cursor-pointer' : 'items-center cursor-pointer',
)}
onClick={isMultiFileApplyPatch ? undefined : handleMainClick}
onKeyDown={isMultiFileApplyPatch ? undefined : handleMainKeyDown}
role={isMultiFileApplyPatch ? undefined : 'button'}
tabIndex={isMultiFileApplyPatch ? undefined : 0}
onClick={isMultiFileApplyPatch ? () => onToggle(part.id) : handleMainClick}
onKeyDown={isMultiFileApplyPatch ? (event) => {
if (event.target !== event.currentTarget) return;
if (event.key !== 'Enter' && event.key !== ' ') return;
event.preventDefault();
onToggle(part.id);
} : handleMainKeyDown}
role="button"
tabIndex={0}
>
<div className={cn('flex gap-1.5', isMultiFileApplyPatch ? 'w-full min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5' : 'items-center flex-shrink-0')}>
{isMultiFileApplyPatch ? (
@@ -2215,11 +2220,26 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
aria-expanded={isExpanded}
aria-label={displayName}
title={displayName}
onClick={() => onToggle(part.id)}
onClick={(event) => {
event.stopPropagation();
onToggle(part.id);
}}
>
{isExpanded
? <Icon name="arrow-down-s" className="h-3.5 w-3.5" />
: getToolIcon(normalizedPartTool || part.tool)}
<span className="relative h-3.5 w-3.5 flex-shrink-0">
<span className={cn(
'absolute inset-0 flex items-center justify-center transition-opacity',
isExpanded ? 'opacity-0' : 'group-hover/tool:opacity-0',
)}>
{getToolIcon(normalizedPartTool || part.tool)}
</span>
<Icon
name={isExpanded ? 'arrow-down-s' : 'arrow-right-s'}
className={cn(
'absolute inset-0 h-3.5 w-3.5 transition-opacity',
isExpanded ? 'opacity-100' : 'opacity-0 group-hover/tool:opacity-100',
)}
/>
</span>
<MinDurationShineText
active={Boolean(isActive && !isError)}
minDurationMs={300}