feat: add visual feedback to copy button in task actions#11403
feat: add visual feedback to copy button in task actions#11403omagoduck wants to merge 2 commits intoRooCodeInc:mainfrom
Conversation
The copy button now shows a checkmark for 2 seconds after copying to provide visual feedback. Fixes RooCodeInc#11401
omagoduck
requested review from
cte,
daniel-lxs,
hannesrudolph,
jr and
mrubens
as code owners
dosubot
bot
added
size:XS
Both items from the previous review have been addressed. The import now uses
Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues. |
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| import { ShareButton } from "./ShareButton" | ||
| import { CloudTaskButton } from "./CloudTaskButton" | ||
| import { CopyIcon, DownloadIcon, Trash2Icon, FileJsonIcon, MessageSquareCodeIcon } from "lucide-react" | ||
| import { Check, CopyIcon, DownloadIcon, Trash2Icon, FileJsonIcon, MessageSquareCodeIcon } from "lucide-react" |
There was a problem hiding this comment.
Check breaks the naming convention used by every other icon in this import (CopyIcon, DownloadIcon, Trash2Icon, etc.). lucide-react exports CheckIcon as an alias, so switching to it keeps the line consistent and makes it easier to scan.
| import { Check, CopyIcon, DownloadIcon, Trash2Icon, FileJsonIcon, MessageSquareCodeIcon } from "lucide-react" | |
| import { CheckIcon, CopyIcon, DownloadIcon, Trash2Icon, FileJsonIcon, MessageSquareCodeIcon } from "lucide-react" |
Fix it with Roo Code or mention @roomote and request a fix.
| {item?.task && ( | ||
| <LucideIconButton | ||
| icon={CopyIcon} | ||
| icon={showCopyFeedback ? Check : CopyIcon} |
There was a problem hiding this comment.
Corresponding update to match the CheckIcon rename in the import.
| icon={showCopyFeedback ? Check : CopyIcon} | |
| icon={showCopyFeedback ? CheckIcon : CopyIcon} |
Fix it with Roo Code or mention @roomote and request a fix.
| const [deleteTaskId, setDeleteTaskId] = useState<string | null>(null) | ||
| const { t } = useTranslation() | ||
| const { copyWithFeedback } = useCopyToClipboard() | ||
| const { copyWithFeedback, showCopyFeedback } = useCopyToClipboard() |
There was a problem hiding this comment.
The icon swap is the core behavior of this PR but there is no test covering it. TaskActions.spec.tsx already has thorough coverage for copy, delete, export, and share -- adding a test that mocks useCopyToClipboard to return showCopyFeedback: true and asserts that the button's rendered icon changes would keep parity. The issue investigation also called this out explicitly.
Fix it with Roo Code or mention @roomote and request a fix.
- Fix Check icon import name from Check to CheckIcon for consistency in TaskActions.tsx - Add test to verify check icon is shown when showCopyFeedback is true - Mock useCopyToClipboard hook in TaskActions.spec.tsx to test copy button functionality This change resolves the import inconsistency and adds a test to ensure the copy button correctly shows a check icon after successful copy.
dosubot
bot
added
size:M
1 participant
The copy button now shows a checkmark for 2 seconds after copying to provide visual feedback. Fixes #11401
Related GitHub Issue
Closes: #11401
Roo Code Task Context (Optional)
Description
This add visual feedback on clicking copy button on main task box.
Test Procedure
I tested it manually by using the extension.
Pre-Submission Checklist
Screenshots / Videos
Before:
Screen.Recording.2026-02-11.195125.mp4
After:
Screen.Recording.2026-02-11.195017.mp4
Documentation Updates
[x] No documentation updates are required.
Additional Notes
No additional notes.
Get in Touch
al_bayazid