fix(frontend): wait for clipboard write before showing copied state (JhaSourav07#2259)

## Description

Fixes JhaSourav07#2255

## Pillar

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

## What changed

The landing page copy handler was marking the badge markdown as copied
immediately after calling `navigator.clipboard.writeText`. Since
`writeText` returns a Promise, a rejected clipboard write could still
show the `Copied` state and open the success guide.

This PR makes the handler wait for the clipboard write to finish before
updating the UI. If the browser rejects the write, the page leaves the
copy state unset instead of showing a false success.

I also added a regression test that mocks
`navigator.clipboard.writeText` to reject and verifies the success UI is
not shown.

## Visual Preview

N/A - this is a copy-state behavior fix.

## Local verification

- `npm run test -- app/page.test.tsx` passed
- `npm run test -- app/customize/components/ThemeQuickPresets.test.tsx`
passed after that test timed out once during the full suite run
- `npm run format:check` passed
- `npm run lint` passed with existing warnings only
- `npm run typecheck` passed

## 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] 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/page.test.tsx

@@ -274,6 +274,26 @@ describe('LandingPage', () => {
     });
   });
 
+  it('does not show copied state when clipboard write fails', async () => {
+    vi.mocked(navigator.clipboard.writeText).mockRejectedValueOnce(new Error('Permission denied'));
+
+    render(<LandingPage />);
+    const input = screen.getByPlaceholderText('Enter GitHub Username') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'jhasourav07' } });
+
+    const copyButton = screen.getByText('Copy Link').closest('button');
+    fireEvent.click(copyButton!);
+
+    await waitFor(() => {
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+        expect.stringContaining('/api/streak?user=jhasourav07')
+      );
+    });
+
+    expect(screen.queryByText('Copied')).toBeNull();
+    expect(screen.queryByText('Your Monolith is Ready - Deploy It in 4 Steps')).toBeNull();
+  });
+
   it('disables Copy Link button when username is empty', () => {
     render(<LandingPage />);
 

app/page.tsx

@@ -104,13 +104,18 @@ export default function LandingPage() {
     badgeResult?.username === debouncedUsername && badgeResult?.status === 'loaded';
   const badgeError = badgeResult?.username === debouncedUsername && badgeResult?.status === 'error';
 
-  const copyToClipboard = () => {
+  const copyToClipboard = async () => {
     if (trimmedUsername.length === 0) return;
 
+    try {
+      await navigator.clipboard.writeText(markdown);
+    } catch {
+      setCopied(false);
+      return;
+    }
+
     trackUser(trimmedUsername);
     addSearch(trimmedUsername);
-
-    navigator.clipboard.writeText(markdown);
     setCopied(true);
     setTimeout(() => {
       guideRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });