fix(frontend): handle copy repo clipboard failures (JhaSourav07#2984)

## Description

Fixes JhaSourav07#2983

## Pillar

- [x] 🛠️ Other (Bug fix, refactoring, docs)

## What changed

`CopyRepoButton` previously awaited
`navigator.clipboard.writeText(repoUrl)` without catching failures. If
the browser rejected the clipboard write, the async click handler failed
and the button gave no feedback.

This PR adds an explicit copy state:

- `Copied!` is shown only after the clipboard write resolves
- `Copy failed` is shown briefly when the clipboard write rejects
- the button returns to `Copy URL` after the same short reset window

I also added focused tests for both successful and rejected clipboard
writes while keeping the existing render-scaling coverage.

## Visual Preview

N/A - small button state behavior fix.

## Local verification

- `npm run test --
app/components/CopyRepoButton.massive-scaling.test.tsx` passed
- `npm run format:check` passed
- `npm run lint` passed with one existing warning outside this change
- `npm run typecheck` passed
- `npm run test` passed: 119 files, 1775 passed, 1 expected fail
- `npm run build` still fails locally with the existing opaque webpack
error; no file-level diagnostics were emitted, and recent CI production
builds for this repo have passed despite the same local behavior

## GSSoC 2026

This issue and PR are raised under GSSoC 2026. Please add the relevant
GSSoC/level labels if they do not sync from the issue automatically.

## Checklist before requesting a review:

- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
- [x] I have run `npm run format` / `npm run format:check` and `npm run
lint` locally.
- [x] I have run `npm run test` locally.
- [x] My commits follow the Conventional Commits format.
- [x] I have updated `README.md` if I added a new theme or URL
parameter.
- [x] I have starred the repo.
- [x] I have made sure that I have only one commit to merge in this PR.
- [x] The SVG output matches the CommitPulse quality standard.

Author: JhaSourav07

app/components/CopyRepoButton.massive-scaling.test.tsx

@@ -1,11 +1,20 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, it, expect, vi } from 'vitest';
 import CopyRepoButton from './CopyRepoButton';
 
 vi.mock('lucide-react', () => ({
   Copy: () => <svg data-testid="copy-icon" />,
 }));
 
+beforeEach(() => {
+  vi.clearAllMocks();
+  Object.assign(navigator, {
+    clipboard: {
+      writeText: vi.fn().mockResolvedValue(undefined),
+    },
+  });
+});
+
 describe('CopyRepoButton Massive Scaling', () => {
   it('renders 100 buttons without crashing', () => {
     render(
@@ -63,4 +72,35 @@ describe('CopyRepoButton Massive Scaling', () => {
       }
     }).not.toThrow();
   });
+
+  it('shows copied state after a successful clipboard write', async () => {
+    render(<CopyRepoButton />);
+
+    fireEvent.click(screen.getByRole('button', { name: /copy url/i }));
+
+    await waitFor(() => {
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+        'https://github.com/JhaSourav07/commitpulse'
+      );
+    });
+
+    expect(screen.getByText('Copied!')).toBeDefined();
+  });
+
+  it('shows an error state when clipboard write fails', async () => {
+    vi.mocked(navigator.clipboard.writeText).mockRejectedValueOnce(new Error('Permission denied'));
+
+    render(<CopyRepoButton />);
+
+    fireEvent.click(screen.getByRole('button', { name: /copy url/i }));
+
+    await waitFor(() => {
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+        'https://github.com/JhaSourav07/commitpulse'
+      );
+    });
+
+    expect(screen.queryByText('Copied!')).toBeNull();
+    expect(screen.getByText('Copy failed')).toBeDefined();
+  });
 });

app/components/CopyRepoButton.tsx

@@ -4,18 +4,19 @@ import { useState } from 'react';
 import { Copy } from 'lucide-react';
 
 export default function CopyRepoButton() {
-  const [copied, setCopied] = useState(false);
+  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'error'>('idle');
 
   const repoUrl = 'https://github.com/JhaSourav07/commitpulse';
 
   const handleCopy = async () => {
-    await navigator.clipboard.writeText(repoUrl);
+    try {
+      await navigator.clipboard.writeText(repoUrl);
+      setCopyState('copied');
+    } catch {
+      setCopyState('error');
+    }
 
-    setCopied(true);
-
-    setTimeout(() => {
-      setCopied(false);
-    }, 2000);
+    setTimeout(() => setCopyState('idle'), 2000);
   };
 
   return (
@@ -24,7 +25,7 @@ export default function CopyRepoButton() {
       className="inline-flex items-center gap-2 rounded-2xl border border-black/10 bg-white/60 px-8 py-4 font-semibold transition-all duration-300 hover:scale-105 dark:border-white/10 dark:bg-white/5"
     >
       <Copy className="h-5 w-5" />
-      {copied ? 'Copied!' : 'Copy URL'}
+      {copyState === 'copied' ? 'Copied!' : copyState === 'error' ? 'Copy failed' : 'Copy URL'}
     </button>
   );
 }