feat: integrate AOSSIE-Org social share button in navbar

[amankv1234]

Description

This PR integrates the official AOSSIE-Org Social Share Button into the Chainvoice landing page (Navbar). The integration is kept extremely minimal with no unnecessary fallback or error handling logic.

• Added official CDN links (social-share-button.css & social-share-button.js) in index.html.
• Created a lightweight SocialShareButton.jsx wrapper component.
• Placed the share button in Navbar.jsx on the right side next to the "About" link and "Connect Wallet" button.
• Configured local environment checking to ensure the official Chainvoice URL (https://chainvoice.stability.nexus/) is copied even during local testing.

Related Issue

Fixes #174

UI Changes / Demo

(Please find the screenshots and demo video attached below showing the Social Share Button in action on the Navbar.)

Screenshots:

Demo Video:
https://drive.google.com/file/d/1L77SAgI1NdjTOYgf8DSFqQnuWJ3zVpC3/view?usp=sharing

Summary by CodeRabbit

• New Features
  • Added a social sharing button in the desktop navigation, making it easier to share the app or page.
  • Loaded the required sharing assets so the button displays and works correctly.
  • The share button uses the current page and title by default, with support for custom share details.

[coderabbitai]

Warning

Review limit reached

@amankv1234, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 46 minutes and 7 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: aa42af4f-92b8-40b3-a4de-86ba0527ba21

📥 Commits

Reviewing files that changed from the base of the PR and between a4902ea and 9560b44.

📒 Files selected for processing (1)

• frontend/src/components/SocialShareButton.jsx

Walkthrough

A SocialShareButton React component is added, wrapping the CDN-loaded window.SocialShareButton widget via useEffect with mount/unmount lifecycle. The CDN stylesheet and script are added to index.html, and the component is rendered in the desktop Navbar between the app-items and public-items sections.

Changes

Social Share Button Integration

Layer / File(s)	Summary
SocialShareButton component and CDN assets frontend/index.html, frontend/src/components/SocialShareButton.jsx	CDN stylesheet and deferred script added to page head. New React component uses useRef and useEffect to instantiate window.SocialShareButton with a derived share URL and title, and calls destroy() on unmount.
Navbar integration frontend/src/components/Navbar.jsx	Imports SocialShareButton and renders it inside a motion.div with fixed dark-theme props, placed between the app-items and public-items sections in the desktop nav.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

Typescript Lang

Poem

🐇 Hippity hop, a button appears,
Share Chainvoice far, spread it to peers!
A CDN link, a script tag too,
The navbar glows with something new.
Click and share — the rabbit approves! 🌟

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: integrating the social share button into the navbar.
Linked Issues check	✅ Passed	The PR adds the social-share button to the header/navbar in the expected area and keeps the integration lightweight, matching #174.
Out of Scope Changes check	✅ Passed	The changes are limited to the CDN assets, wrapper component, and navbar placement needed for the social-share button.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[amankv1234]

Hi @kpj2006,
I have successfully implemented the Social Share Button feature on the Chainvoice landing page and created the PR! 🎉

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/index.html`:
- Around line 37-38: The external SocialShareButton CSS and script references
are using mutable gh/.../src/... CDN paths, so update the assets in index.html
to pinned release or commit URLs and add integrity protection for the script and
stylesheet; if that is not feasible, self-host them instead. Keep the changes
localized to the existing link and script tags so the SocialShareButton includes
remain easy to locate.

In `@frontend/src/components/Navbar.jsx`:
- Around line 215-219: The SocialShareButton share copy is hard-coded in Navbar
and bypasses localization. Update the Navbar component to read the title and
description from the app’s i18n/resource files instead of inline English
strings, and pass those translated values into SocialShareButton. Use the
existing localization pattern used elsewhere in the app so the new share flow is
fully externalized.

In `@frontend/src/components/SocialShareButton.jsx`:
- Around line 7-26: The SocialShareButton widget is only initialized once, so
its url/title stay stale after client-side navigation in the persistent navbar.
Update the useEffect in SocialShareButton to depend on the current location (or
values derived from useLocation) and recreate the window.SocialShareButton
instance whenever the route changes, while keeping the cleanup destroy logic in
the effect.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 11f283fd-3eed-43e4-90de-110a56731c83

📥 Commits

Reviewing files that changed from the base of the PR and between a429f12 and a4902ea.

📒 Files selected for processing (3)

• frontend/index.html
• frontend/src/components/Navbar.jsx
• frontend/src/components/SocialShareButton.jsx