Skip to content

feat(web): add scroll progress bar to support guide pages#2206

Open
mica000 wants to merge 3 commits intodevfrom
feat/support-scroll-progress-bar
Open

feat(web): add scroll progress bar to support guide pages#2206
mica000 wants to merge 3 commits intodevfrom
feat/support-scroll-progress-bar

Conversation

@mica000
Copy link
Copy Markdown
Contributor

@mica000 mica000 commented Mar 9, 2026

CleanShot 2026-03-09 at 18 33 19@2x

Summary

  • Adds a scroll progress bar to the support guide article pages
  • The progress bar appears directly beneath the sticky header and tracks page scroll position
  • Header and progress bar stick together as a single unit when scrolling

Test plan

  • Navigate to any guide page (e.g. /support/install-leather)
  • Verify the progress bar appears below the header and fills as you scroll
  • Verify the header stays fixed at the top while scrolling
  • Verify no gap appears between the header and progress bar

Made with Cursor

@mica000 mica000 requested a review from camerow March 9, 2026 21:28
@leather-bot
Copy link
Copy Markdown
Contributor

leather-bot commented Mar 9, 2026

Leather Web build 57c946dWeb preview, Web test report

@codecov
Copy link
Copy Markdown

codecov bot commented Mar 9, 2026

Codecov Report

❌ Patch coverage is 0% with 26 lines in your changes missing coverage. Please review.
✅ Project coverage is 12.45%. Comparing base (5a4e830) to head (57c946d).

Files with missing lines Patch % Lines
apps/web/app/utils/hooks/use-scroll-progress.ts 0.00% 14 Missing ⚠️
apps/web/app/pages/support/guide/guide.tsx 0.00% 12 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##              dev    #2206      +/-   ##
==========================================
- Coverage   12.45%   12.45%   -0.01%     
==========================================
  Files        2420     2421       +1     
  Lines      100139   100164      +25     
  Branches     4173     4174       +1     
==========================================
  Hits        12477    12477              
- Misses      86634    86659      +25     
  Partials     1028     1028              
Files with missing lines Coverage Δ
apps/web/app/pages/support/guide/guide.tsx 0.00% <0.00%> (ø)
apps/web/app/utils/hooks/use-scroll-progress.ts 0.00% <0.00%> (ø)
Components Coverage Δ
bitcoin 64.86% <ø> (ø)
query 24.48% <ø> (ø)
utils 86.99% <ø> (ø)
crypto 69.75% <ø> (ø)
stacks 49.35% <ø> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Comment on lines +26 to +41
function useScrollProgress() {
const [progress, setProgress] = useState(0);

useEffect(() => {
function handleScroll() {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
setProgress(docHeight > 0 ? Math.min(scrollTop / docHeight, 1) : 0);
}

window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);

return progress;
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could better live in a separate directory that it can be reused

@mica000 mica000 force-pushed the feat/support-scroll-progress-bar branch from d7ba444 to ae36a7c Compare March 12, 2026 13:48
@mica000 mica000 requested a review from kyranjamie March 16, 2026 14:57
@mica000
Copy link
Copy Markdown
Contributor Author

mica000 commented Mar 16, 2026

Addressed your feedback! Moved the useScrollProgress hook to app/utils/hooks/use-scroll-progress.ts so it can be reused. Ready for another review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants