Skip to content

refactor: consolidate duplicated copy/clipboard icons and operations #486

@backnotprop

Description

@backnotprop

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

  1. Extract shared icons — create packages/ui/icons/ with exported CopyIcon, CheckIcon, and other commonly reused SVGs
  2. Promote CopyButton — move from packages/review-editor/ to packages/ui/components/ so both editor and review-editor can import it
  3. Create useCopyToClipboard hook — centralize the clipboard + copied state + timeout pattern
  4. Refactor all inline usages — replace hardcoded SVGs and clipboard operations with shared components/hooks
  5. Establish icon size convention — standardize on w-3 h-3 for inline actions, w-4 h-4 for standalone buttons

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions