feat(web): add smooth scrolling and enhance installation component

[Odunsih1]

• Add smooth scrolling behavior to html element
• Update Installation component to support multiple copy buttons with individual feedback
• Improve UI consistency for package manager installation commands

---

Summary by cubic

Adds smooth scrolling site-wide and upgrades the Installation component with per-command copy buttons and clear feedback. Improves UI consistency for npm, pnpm, and yarn instructions.

• New Features

  • Smooth scrolling via CSS on the html element.
  • Copy buttons for npm, pnpm, and yarn with individual “Copied!” feedback.
  • Consistent command UI with headers, borders, and monospace styling.

• Dependencies

  • Cleaned up package-lock by removing redundant peer flags (no behavior change).

^{Written for commit 745ce6d. Summary will update on new commits.}

[vercel]

@Odunsih1 is attempting to deploy a commit to the Akinkunmi Team on Vercel.

A member of the Team first needs to authorize it.

[cubic-dev-ai]

1 issue found across 3 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="web/src/components/Installation.tsx">

<violation number="1" location="web/src/components/Installation.tsx:9">
P2: Earlier copy timeouts can clear `copiedId` after a newer copy, making the “Copied!” feedback disappear too soon when clicking multiple buttons quickly.</violation>
</file>

---

Since this is your first cubic review, here's how it works:

• cubic automatically reviews your code and comments on bugs and improvements
• Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
• Ask questions if you need clarification on any suggestion

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Earlier copy timeouts can clear copiedId after a newer copy, making the “Copied!” feedback disappear too soon when clicking multiple buttons quickly.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At web/src/components/Installation.tsx, line 9:

<comment>Earlier copy timeouts can clear `copiedId` after a newer copy, making the “Copied!” feedback disappear too soon when clicking multiple buttons quickly.</comment>

<file context>
@@ -1,12 +1,12 @@
+  const handleCopy = (text: string, id: string) => {
+    navigator.clipboard.writeText(text);
+    setCopiedId(id);
+    setTimeout(() => setCopiedId(null), 2000);
   };
 
</file context>

Suggested change

	setTimeout(() => setCopiedId(null), 2000);
	setTimeout(() => setCopiedId(prev => (prev === id ? null : prev)), 2000);