feat: Add reusable Back to Top button for improved navigation [Issue: #326]

[abdullahxyz85]

Summary [Issue: #326 ]

Implements a floating "Back to Top" button that improves user experience by providing quick navigation to the top of long pages. The button appears after scrolling down and smoothly scrolls users back to the top when clicked.

Motivation

Users need to manually scroll back to the top after navigating through long sections/pages. A floating Back to Top button enhances navigation and improves overall user experience, particularly on long dashboard pages.

What's Changed

New Component

• src/components/BackToTopButton.tsx - Reusable floating button component with:
  • Scroll detection (appears after 300px scroll)
  • Smooth scroll animation to top
  • Full accessibility support (ARIA labels, keyboard navigation)
  • Theme-aware styling using CSS variables
  • Responsive design for all devices
  • Hover and focus animations

Integration

• src/app/providers.tsx - Added BackToTopButton to root Providers component so it appears on all pages

Implementation Details

Features

✅ Floating Button

• Positioned at bottom-right corner (32px from edges)
• 48x48px circular button with up arrow icon
• Fixed z-index (z-50) above other content

✅ Scroll Detection

• Appears after user scrolls down 300px
• Automatically hides when near top of page
• Efficient event listener with proper cleanup

✅ Smooth Scrolling

• Uses native CSS scroll-behavior: smooth
• Works across all modern browsers
• No page jumps or jarring animations

Visual Overview:

---

Checklist

• Code follows project style guidelines
• TypeScript compilation passes (npx tsc --noEmit)
• No new console warnings or errors
• Changes tested locally
• Accessibility verified (keyboard, screen reader)
• Responsive design verified
• Documentation updated (this PR description)

Closes: #326

[vercel]

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

[abdullahxyz85]

Hi @Priyanshu-byte-coder , please add the label: gssoc:approved and level: intermediate. Review and merge it 🙏

[Priyanshu-byte-coder]

Three separate features bundled in one PR — needs splitting. Also has a rendering bug.

1. Split into focused PRs

This PR adds three unrelated things:

• Back to Top button (BackToTopButton.tsx, providers.tsx)
• Diff size trend chart (DiffTrendChart.tsx, /api/metrics/diff-trend/route.ts)
• PR open time histogram (changes to PRMetrics.tsx + prs/route.ts)

Each should be a separate PR so they can be reviewed, merged, and reverted independently.

2. Duplicate stats grid in PRMetrics.tsx (bug)

The diff adds a new <div className="grid grid-cols-2 md:grid-cols-4"> inside the space-y-6 wrapper but doesn't remove the original grid. Both render — users see the stats grid twice. Delete the original (lower) stats grid that was not moved.

3. globals.css change belongs in diff-trend PR

The --success and --destructive CSS var additions are used only by DiffTrendChart.tsx. They should ship with that PR, not bundled here.

The individual features look well-implemented — just split them into three separate PRs.

[abdullahxyz85]

@Priyanshu-byte-coder Now u can merge it! Everything is ok and working fine!

[abdullahxyz85]

@Priyanshu-byte-coder I was working on diff trend issue as well, and there was little bug remaining, i fixed it now

[abdullahxyz85]

My PR: #321 , #322 , #377

Everything is fine and working in these PR, please review and merge it under gssoc label: gssoc:approved and levels

[abdullahxyz85]

Three separate features bundled in one PR — needs splitting. Also has a rendering bug.

1. Split into focused PRs

This PR adds three unrelated things:

• Back to Top button (BackToTopButton.tsx, providers.tsx)
• Diff size trend chart (DiffTrendChart.tsx, /api/metrics/diff-trend/route.ts)
• PR open time histogram (changes to PRMetrics.tsx + prs/route.ts)

Each should be a separate PR so they can be reviewed, merged, and reverted independently.

2. Duplicate stats grid in PRMetrics.tsx (bug)

The diff adds a new <div className="grid grid-cols-2 md:grid-cols-4"> inside the space-y-6 wrapper but doesn't remove the original grid. Both render — users see the stats grid twice. Delete the original (lower) stats grid that was not moved.

3. globals.css change belongs in diff-trend PR

The --success and --destructive CSS var additions are used only by DiffTrendChart.tsx. They should ship with that PR, not bundled here.

The individual features look well-implemented — just split them into three separate PRs.

@Priyanshu-byte-coder I am splitting it today!

[abdullahxyz85]

Closing to reopen as separate, isolated feature PRs for proper review