feat: add manual Sync Data refresh button to dashboard header (#2406)

[aaniya22]

Summary

Adds a manual "Sync Data" refresh button to the dashboard header's top-right control area. Clicking it clears the client-side metrics cache and re-fetches fresh data via router.refresh(), without a full browser page reload or loss of component state.

Closes #2406

---

Type of Change

• ✨ New feature (non-breaking change that adds functionality)

---

What Changed

• Added src/components/SyncDataButton.tsx — a RefreshCw icon button (lucide-react) that dispatches the existing devtrack:sync window event (already used elsewhere to invalidate the client-side metrics cache) and calls router.refresh() to re-fetch server data
• Applies Tailwind's animate-spin to the icon while syncing is in progress, with a toast confirmation on success/failure
• Wired the button into both the desktop control row and the mobile dropdown in src/components/DashboardHeader.tsx, alongside the existing KeyboardShortcuts control

---

How to Test

1. Load the dashboard
2. Click the new refresh icon button in the top-right control area (desktop) or open the mobile menu and click it there
3. Confirm the icon spins briefly, a "Dashboard data synced" toast appears, and metrics refresh without a full page reload or loss of scroll position
4. Confirm clicking repeatedly while syncing is disabled (button disabled state) doesn't trigger duplicate requests

Expected result: Fresh dashboard data loads in place, with clear visual feedback during the sync.

---

Checklist

• Linked the related issue above
• Self-reviewed my own diff
• No unnecessary console.log, debug code, or commented-out blocks
• npm run build passes locally
• No TypeScript errors (npm run type-check)
• Added or updated tests where applicable
• Updated documentation / comments if behavior changed

---

Accessibility (UI changes only)

• Keyboard navigation works correctly
• Color contrast meets WCAG AA standard
• ARIA labels / roles added where needed (aria-label="Sync dashboard data")
• Tested on mobile / responsive layout

---

Additional Context

Reused the existing devtrack:sync event and client cache invalidation pattern already present in DashboardHeader.tsx rather than introducing a new caching mechanism.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[aaniya22]

The 2 failing tests (in ProfileQrModal.test.tsx and ShortcutsModal.test.tsx) are pre-existing failures on main, unrelated to this PR. I verified by running the same test files directly against main before my changes — they fail there too with identical errors. Nothing in this PR touches those files. Flagging here in case it's worth tracking as a separate issue.