fix(frontend): handle copy repo clipboard failures

Author: kali

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>
   );
 }