Problem
The copy icon SVG path and clipboard operations are duplicated across the codebase instead of using the centralized CopyButton component.
Authoritative source exists but is underused
packages/review-editor/components/CopyButton.tsx — has both CopyIcon and CheckIcon internal components, two variants (overlay/inline), proper state management. Only used in 3 files.
Duplication scope
- 12 instances of the copy icon SVG path (
M8 16H6a2 2 0 01-2-2V6...) hardcoded inline
- 23 instances of the checkmark icon SVG path (
M5 13l4 4L19 7) hardcoded inline
- 15+ files with their own
navigator.clipboard.writeText() + manual useState + setTimeout implementations
Files with inline copy icon (should use CopyButton or shared icon)
| File |
Instances |
packages/editor/App.tsx |
1 |
packages/review-editor/components/ReviewSidebar.tsx |
1 |
packages/review-editor/components/PRCommentsTab.tsx |
1 |
packages/review-editor/components/FileTree.tsx |
1 |
packages/review-editor/components/FileHeader.tsx |
1 |
packages/ui/components/AnnotationToolbar.tsx |
1 |
packages/ui/components/Viewer.tsx |
2 |
packages/ui/components/ExportModal.tsx |
2 |
packages/ui/components/AnnotationPanel.tsx |
1 |
No shared icon system
- No
packages/ui/icons/ or packages/shared/icons/ directory
- No exported icon components (only specialized ones like
GitHubIcon, GitLabIcon)
- Inconsistent icon sizes across usages:
w-3, w-3.5, w-4
- Inconsistent "Copied" timeout durations: 1500ms vs 2000ms
Proposed solution
- Extract shared icons — create
packages/ui/icons/ with exported CopyIcon, CheckIcon, and other commonly reused SVGs
- Promote CopyButton — move from
packages/review-editor/ to packages/ui/components/ so both editor and review-editor can import it
- Create
useCopyToClipboard hook — centralize the clipboard + copied state + timeout pattern
- Refactor all inline usages — replace hardcoded SVGs and clipboard operations with shared components/hooks
- Establish icon size convention — standardize on
w-3 h-3 for inline actions, w-4 h-4 for standalone buttons
Problem
The copy icon SVG path and clipboard operations are duplicated across the codebase instead of using the centralized
CopyButtoncomponent.Authoritative source exists but is underused
packages/review-editor/components/CopyButton.tsx— has bothCopyIconandCheckIconinternal components, two variants (overlay/inline), proper state management. Only used in 3 files.Duplication scope
M8 16H6a2 2 0 01-2-2V6...) hardcoded inlineM5 13l4 4L19 7) hardcoded inlinenavigator.clipboard.writeText()+ manualuseState+setTimeoutimplementationsFiles with inline copy icon (should use CopyButton or shared icon)
packages/editor/App.tsxpackages/review-editor/components/ReviewSidebar.tsxpackages/review-editor/components/PRCommentsTab.tsxpackages/review-editor/components/FileTree.tsxpackages/review-editor/components/FileHeader.tsxpackages/ui/components/AnnotationToolbar.tsxpackages/ui/components/Viewer.tsxpackages/ui/components/ExportModal.tsxpackages/ui/components/AnnotationPanel.tsxNo shared icon system
packages/ui/icons/orpackages/shared/icons/directoryGitHubIcon,GitLabIcon)w-3,w-3.5,w-4Proposed solution
packages/ui/icons/with exportedCopyIcon,CheckIcon, and other commonly reused SVGspackages/review-editor/topackages/ui/components/so both editor and review-editor can import ituseCopyToClipboardhook — centralize the clipboard + copied state + timeout patternw-3 h-3for inline actions,w-4 h-4for standalone buttons