Improve the "Copy" Button in the AI Setup Guide

[Vedant1703]

The AI Setup Guide page (/repo/[owner]/[repo]/setup) shows installation steps with copy-to-clipboard buttons for each command. However, the current "Copy" button has two problems:

1. It's invisible by default — it's hidden with opacity-0 and only appears on hover. On mobile devices, hover doesn't exist, so the button is completely inaccessible.
2. No feedback — when clicked, there's no visual confirmation that the text was actually copied.

---

📍 File to Change

frontend/app/(auth)/repo/[owner]/[repo]/setup/page.tsx

---

🔍 Current Problem (around line 124)

<Button
  className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity text-xs h-8 px-2"
  onClick={() => navigator.clipboard.writeText(step.command)}
>
  Copy
</Button>

The opacity-0 group-hover:opacity-100 makes the button invisible on mobile and easy to miss on desktop.

---

✅ What To Do

1. Make the button always visible — remove opacity-0 group-hover:opacity-100
2. Add a "Copied!" feedback state — after clicking, briefly show ✓ Copied for ~2 seconds

Suggested implementation:

// Add state at the top of the component:
const [copiedIndex, setCopiedIndex] = useState<number | null>(null);

// Updated copy button inside the map:
<Button
  className="absolute top-2 right-2 text-xs h-8 px-2 transition-colors"
  onClick={() => {
    navigator.clipboard.writeText(step.command);
    setCopiedIndex(i);
    setTimeout(() => setCopiedIndex(null), 2000);
  }}
>
  {copiedIndex === i ? '✓ Copied!' : 'Copy'}
</Button>

---

🏁 Acceptance Criteria

• The "Copy" button is always visible (not hidden behind hover)
• After clicking, the button text changes to "✓ Copied!" for ~2 seconds
• The button then reverts back to "Copy" automatically
• Works on mobile devices (no hover dependency)
• Each code block tracks its copied state independently (copying step 2 doesn't affect step 1's button)

---

💡 Technical Hints

• Add const [copiedIndex, setCopiedIndex] = useState<number | null>(null); inside SetupGuidePage
• The installation steps are rendered in a .map((step, i) => ...) — use i as the index to track per-step copy state
• navigator.clipboard.writeText() is already used — just wrap it in the state update
• setTimeout with 2000ms is the standard pattern for transient feedback

---

🚀 Getting Started

1. Fork the repository
2. Create a branch: git checkout -b fix/issue-4-copy-button-ux
3. Edit frontend/app/(auth)/repo/[owner]/[repo]/setup/page.tsx
4. Run locally: cd frontend && npm run dev
5. Open a Pull Request!