feat(profile): add "Get README Badge" dialog with Markdown/HTML copy

[1-DARK]

Summary

Adds a Get README Badge button to the developer profile page (/user/[username]). It opens a modal where developers can preview their DevImpact score badge and copy a ready-to-use snippet for their GitHub profile README. Every embedded badge links back to the user's DevImpact profile, which creates a backlink to the project.

Closes #219

What changed

• Button: "Get README Badge" added to the action buttons in UserProfileClient, next to Compare and Copy link.
• Modal:
  • Live badge preview (Shields.io) that updates when the style changes.
  • Three style options: flat, flat-square and score color (red, orange, yellow, green or bright green, depending on the score).
  • Copy Markdown and Copy HTML buttons with a "Copied!" confirmation that lasts 2 seconds.
  • Closes on backdrop click, the Close button and the Escape key. Page scroll is locked while it is open.
  • Rendered through a portal with role="dialog" and aria-modal.
• Snippets: both wrap the badge image in a link to the user's profile page.
  • Markdown: [![DevImpact Score](badge-url)](profile-url)
  • HTML: <a href="profile-url"><img src="badge-url" alt="DevImpact Score" /></a>
• Responsive fix: the hero section now stacks until lg instead of sm, so the action buttons no longer get squeezed.
• i18n: new profile.* keys added to en.json and ar.json. Snippet inputs use dir="ltr" so URLs display correctly in RTL.

Files changed

• src/features/developer/components/user-profile-client.tsx
• src/locales/en.json
• src/locales/ar.json

Notes for reviewers

• The profile link in the snippet uses window.location.origin, so no new environment variable is needed. If you prefer a fixed production URL, I can switch it to a constant or env var.
• The badge shows the score at the time of copying. It does not update automatically when the score changes. A dynamic badge could be a follow-up using a /api/badge/[username] endpoint with the Shields endpoint format.
• If a Content-Security-Policy is added later, img-src must allow https://img.shields.io.

Screenshots

	English	Arabic
Button in profile header
Modal and live preview
Copied state

Testing

• ✅ npm run lint passes
• ✅ npm run build passes
• ✅ Style switching updates the preview, the Markdown snippet and the HTML snippet
• ✅ Copy Markdown and Copy HTML both work and show "Copied!"
• ✅ Pasted the Markdown into a GitHub README or gist: the badge renders and links to the profile
• ✅ Arabic layout checked (RTL, snippets stay LTR)
• ✅ Responsive check at phone, iPad mini and desktop widths
• ✅ Light and dark mode

Checklist

• ✅ The referred issue is not blocked currently
• ✅ All unit tests passed after changes were made

[vercel]

@1-DARK is attempting to deploy a commit to the osama's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for the pull request! ✅

A maintainer will review this soon. Please be patient while we take a look. 🙌

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
dev-impact	Ready	Preview	Oct 8, 2026 7:14pm UTC

[O2sa]

A couple of small changes I'd suggest before merging:

1. Remove the badgeCopied logic — currently badgeCopied is never updated because the copy function isn't used for it, so the badgeCopied state can never become true. Since the Markdown and HTML copy states are already handled separately, this extra state isn't needed.

2. Use an environment variable for the profile URL instead of window.location.origin. Since this URL will be copied into users' README files and should be a permanent/canonical link, relying on the current origin could generate links to preview or other deployment environments. I'd suggest using something like NEXT_PUBLIC_SITE_URL for the canonical DevImpact URL.

Other than these, the feature looks good.

[O2sa]

🎊 Welcome, @1-DARK! Your first contribution has been merged! 🚀

Thank you for helping improve the project! If you find this tool useful, please consider giving us a ⭐ star on GitHub—it helps more developers find our work and motivates us to keep improving!