Enhancement: Add Copy-to-Clipboard Button for GitHub Profile Links

[Pragzh]

Description:
Currently, users can view GitHub profile data, but there is no quick way to copy profile links, repository links, or usernames directly from the UI.

Suggested Enhancement

Add a modern copy-to-clipboard feature across profile and repository cards.

Features
Copy GitHub profile URL
Copy repository URL
Copy username with one click
Add tooltip feedback:
“Copy”
“Copied!”
Add smooth hover animation
Expected Outcome
Faster sharing experience
Improved usability
Cleaner interaction design
Better UX for contributors and recruiters
Possible Areas
Profile cards
Repository cards
Contributors section

[Pragzh]

@coderabbitai review

[coderabbitai]

@Pragzh, here's my review of issue #520:

---

Issue Review: Enhancement — Add Copy-to-Clipboard Button for GitHub Profile Links

👍 Strengths

• Well-scoped feature: The request clearly identifies what to copy (profile URL, repo URL, username) and where (profile cards, repo cards, contributors section).
• Good UX intent: Tooltip feedback ("Copy" → "Copied!") and hover animation are standard patterns that align with modern UI expectations.
• Practical use case: Speeds up sharing for recruiters, contributors, and users browsing profiles.

---

🔍 Suggestions to Strengthen the Issue

1. Acceptance Criteria — Consider adding a clear checklist so implementors know exactly when this is "done". For example:

   • A copy icon is visible on hover for profile URL, repo URL, and username fields
   • Clicking the icon copies the value to clipboard
   • Tooltip shows "Copy" on hover and "Copied!" for ~2 seconds after click, then reverts
   • Feature works on Chrome, Firefox, Safari (latest 2 versions)

2. Accessibility — Specify behavior for keyboard users and screen readers:

   • Should the copy button be focusable via Tab?
   • Should there be an aria-label like "Copy profile URL"?
   • Should an aria-live region announce "Copied!" for screen reader users?

3. Clipboard API Fallback — The modern Clipboard API (navigator.clipboard.writeText) is async and requires a secure context (HTTPS or localhost). A fallback using document.execCommand('copy') may be needed for older browsers. This should be noted.

4. Mobile/Touch Behavior — On mobile, hover states don't exist. Should the copy icon always be visible on touch devices?

5. Visual Design Guidance — A rough mockup or reference to an existing design system (if any) would help keep the implementation consistent.

6. Tooltip Timing — Specify how long the "Copied!" state should persist before reverting to "Copy" (e.g., 2 seconds is a common convention).

---

💡 Implementation Hint for Assignees

A minimal implementation pattern:

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    // Show "Copied!" tooltip for 2s, then revert
  } catch (err) {
    // Fallback for older browsers
    const el = document.createElement('textarea');
    el.value = text;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
  }
}

---

Overall, this is a valuable and achievable enhancement. Addressing the points above (especially accessibility and acceptance criteria) will make it easier for contributors to implement consistently. 🐇

[Pragzh]

@mehul-m-prajapati review this plz