Problem Statement
As a user, I want a quick way to return to the top of the Dashboard after scrolling through multiple widgets (commit chart, PR analytics, goals, streak tracker, etc.) so that I can navigate efficiently without manual scrolling.
Proposed Solution
- Add a floating button fixed to the bottom-right corner of the Dashboard
- Button appears only when user scrolls past 400px
- Clicking it smoothly scrolls to top using window.scrollTo({ top: 0, behavior: 'smooth' })
- Use Lucide ArrowUp icon
- Style with Tailwind: fixed bottom-6 right-6 p-3 rounded-full bg-primary text-white shadow-lg hover:scale-105 transition
- Respect dark/light theme
Feature Area
Dashboard
Alternatives Considered
- Browser-native scroll (poor UX on long dashboards)
- Sticky header with back-to-top link (takes up screen space)
Acceptance Criteria
[ ] Button is hidden when at top of page
[ ] Button appears after scrolling 400px down
[ ] Clicking button smoothly scrolls to top
[ ] Button is visible in both light and dark mode
[ ] Button does not overlap with other floating elements (e.g., Discord webhook toast)
Additional Context
No response
Problem Statement
As a user, I want a quick way to return to the top of the Dashboard after scrolling through multiple widgets (commit chart, PR analytics, goals, streak tracker, etc.) so that I can navigate efficiently without manual scrolling.
Proposed Solution
Feature Area
Dashboard
Alternatives Considered
Acceptance Criteria
[ ] Button is hidden when at top of page
[ ] Button appears after scrolling 400px down
[ ] Clicking button smoothly scrolls to top
[ ] Button is visible in both light and dark mode
[ ] Button does not overlap with other floating elements (e.g., Discord webhook toast)
Additional Context
No response