feat: add share and download functionality to StreakTracker

[Kritika200520]

Summary

This PR adds a new "Share" feature to the StreakTracker widget, allowing users to effortlessly generate and download a high-quality PNG image of their coding streaks. This removes the friction of manually taking screenshots and helps users easily share their DevTrack stats on platforms like Twitter or LinkedIn!

Closes #<304>

Type of Change

• Bug fix
• New feature
• Documentation update
• Refactor / code cleanup

Changes Made

• Added a new stylish SHARE button with a download icon inside the StreakTracker header, positioned neatly next to the copy-to-clipboard button.
• Integrated html-to-image via toPng to capture the StreakTracker container programmatically.
• Implemented an isDownloading state that shows a smooth spinner animation inside the button while the image generates.
• Handled the automated download mechanism, saving the generated image cleanly as devtrack-streak.png.

How to Test

Steps for the reviewer to verify this works:

1. Pull down the branch and run npm install to install html-to-image.
2. Start the server with npm run dev and navigate to a dashboard page with the StreakTracker widget.
3. Click the new blue "SHARE" button in the StreakTracker header.
4. Verify that the button shows a loading spinner briefly, and that a file named devtrack-streak.png is automatically downloaded.
5. Open the downloaded image to verify that the styling (Light/Dark mode) matches the live component exactly.

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff

[vercel]

@Kritika200520 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

[Priyanshu-byte-coder]

Download/share functionality is clean. One fix needed:

Hardcoded colors on the download button
bg-[#5b6ef6], hover:bg-[#4b5ee6], focus:ring-[#5b6ef6]/50 — use CSS vars consistent with the rest of the component:

className="... bg-[var(--accent)] text-[var(--accent-foreground)] hover:opacity-90 focus:ring-[var(--accent)]/50 ..."

Also rebase on main — StreakTracker.tsx has been modified by other merged PRs since this branch was created.

[Kritika200520]

i made the changes and rebased please review it

[Priyanshu-byte-coder]

1. containerRef captures action buttons — ref on outermost div means downloaded PNG includes SHARE/Copy buttons. Move ref to child div wrapping only stats content. 2. aria-label says Share but action is download — change to Download streak stats as image. 3. Hardcoded spinner — border-white/30 border-t-white invisible in light mode. Use border-[var(--accent-foreground)]/30.