feat: add refresh button to each dashboard widget

[Tannuu18]

Summary

Adds per-widget refresh controls to dashboard cards so users can reload individual widgets without refreshing the full page.

Closes #179

Type of Change

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

Changes Made

• Added a refresh icon button in the header (top-right) for:
  StreakTracker
  ContributionGraph
  PRMetrics
  TopRepos
• Wired each refresh button to re-run only that widget’s data fetch.
• Added loading-state behavior for each button:
• disabled while fetching
• spinner animation during fetch
• aria-label on each refresh button
• Kept existing theme styling for icon state and hover state using muted-foreground and card-foreground token colors.
• Improved ContributionGraph refresh UX so failed refresh does not wipe previously loaded chart data.

How to Test

• Start the app and open the dashboard.
• In each target widget (StreakTracker, ContributionGraph, PRMetrics, TopRepos), click the refresh icon.
• Verify the button disables immediately and icon spins while fetching.
• Verify data refreshes only for that widget (other widgets should remain unchanged).
• Confirm button is in the header row, aligned at top-right near the title.
• Confirm accessibility label exists on each button (Refresh Commit Streaks, Refresh Commit Activity, Refresh PR Analytics, Refresh Top Repositories).
• Trigger a failing refresh scenario for ContributionGraph (for example, temporary API/network failure) and verify prior chart data remains visible with an error message.
• Run npm run lint and npm run type-check.

Screenshots (if UI change)

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Added/updated tests if applicable

[vercel]

@Tannuu18 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.

[Priyanshu-byte-coder]

Good refactor. Extracting fetch into useCallback is the right pattern — lets the button reuse it without duplicating logic. aria-busy, aria-label, disabled-during-load all correct. CSS vars throughout. Covers all 4 widgets (ContributionGraph, PRMetrics, StreakTracker, TopRepos). Approved.

[Priyanshu-byte-coder]

PR is approved but has a conflict with the just-merged #288 (both modify ContributionGraph.tsx). Please rebase on latest main and resolve the conflict — should be straightforward to combine both changes. Then it'll merge automatically.

[Priyanshu-byte-coder]

The refactor to useCallback + async/await and the refresh button look clean — aria-busy, aria-label, disabled state all handled well. However this conflicts with recently merged PRs that touched ContributionGraph.tsx. Please rebase:

git fetch upstream && git rebase upstream/main

Push once rebased — will merge.

[Priyanshu-byte-coder]

Hi @Tannuu18 — this PR has a merge conflict with main. Please rebase your branch:

git fetch upstream
git rebase upstream/main
# resolve conflicts, then:
git push --force-with-lease

Once rebased, we'll review and merge.

[Tannuu18]

heyy @Priyanshu-byte-coder The E2E smoke test is failing because the WebServer is unable to resolve the database domain (ENOTFOUND placeholder.supabase.co), causing the component rendering to time out. The Lint, Build, and Type checks all pass successfully!

[Priyanshu-byte-coder]

PR now has merge conflicts — several of the files it touches (TopRepos.tsx, StreakTracker.tsx, PRMetrics.tsx) were updated by other merged PRs. Rebase and resolve conflicts, then I'll do a full review of the refresh button implementation.

[Tannuu18]

Please this time do the timely merge for this one. As everytime it's getting difficult to merge all the changes with others, as it's like working on two features.