feat: implemented "Jump to Section" menu for Tooling page

[AnujAga2005]

What kind of change does this PR introduce?

Feature (UX Improvement)

Issue Number:

• Closes ✨ Enhancement: Add "Jump to Section" navigation when Group By is active #2104

Screenshots/videos:

If relevant, did you update the documentation?

N/A (UI enhancement)

Technical Changes

• Implemented Native Jump Menu: Added a native HTML <select> element in GroupByMenu.tsx.
• Added scrollToSection Logic:
  • Implemented smooth-scrolling with a -100px offset to prevent headers from being covered by the sticky navbar.
• Responsive Layout Refactor:
  • Updated GroupByMenu.tsx to use flex-col and gap-y-4 so the buttons and dropdown stack correctly on mobile.
• Updated index.page.tsx: Passed a filtered activeSections prop to ensure the jump menu only lists categories that currently contain tools.

Summary

This PR adds a "Jump to Section" navigation menu to the Tooling page to improve usability when the "Group By" feature is enabled.

Does this PR introduce a breaking change?

No

Checklist

• Read, understood, and followed the contributing guidelines.
• Verified that the implementation works correctly on both desktop and mobile views.
• Confirmed that the "Jump to Section" IDs match the section headers in the Tooling Table.

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
website	✅ Ready (View Log)	Visit Preview	be897f3

[codecov]

Codecov Report

❌ Patch coverage is 75.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 99.85%. Comparing base (2ee67ff) to head (be897f3).
⚠️ Report is 21 commits behind head on main.

Files with missing lines	Patch %	Lines
components/ui/button.tsx	75.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##              main    #2266      +/-   ##
===========================================
- Coverage   100.00%   99.85%   -0.15%     
===========================================
  Files           30       30              
  Lines          663      675      +12     
  Branches       205      213       +8     
===========================================
+ Hits           663      674      +11     
- Misses           0        1       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 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.

[AnujAga2005]

hi @AgniveshChaubey , i have updated the code and implemented element as per our discussion and also ensured that it works well on small screens as well and matches the look, have a look at it whenever you have some time. Thanks!

[AgniveshChaubey]

Why keep it in a separate row? Let's keep it next to the language button. Additionally, the downward arrow doesnt look quite good.

[AnujAga2005]

@AgniveshChaubey i kept it in the separate row for keeping the mobile view look clean, otherwise it was looking clustered and if u want i can change that arrow to an svg image that might look better

[AgniveshChaubey]

On bigger screen it doesn't look good. We should target the bigger screen first as I think users mostly visit our website on bigger screen.

[AnujAga2005]

Okk then i will try putting it in the same row for bigger screens and in separate row for smaller screens, if that didn't worked out then i will put it in the same row for all screens and just for smaller screens i will remove the "Jump to Section" text from the button

[AnujAga2005]

@AgniveshChaubey i have added the lg class to switch the position of button in bigger screens. See if anything else is required.

[AnujAga2005]

Hi @AgniveshChaubey , just a follow up for this PR. Let me know if anything else is required. Thanks!

[AgniveshChaubey]

I checked this in desktop view on mobile, and still the 'jump to' section is in a separate row even when there a lot of space available in the previous row.

[AnujAga2005]

@AgniveshChaubey maybe that's because lg class depends on viewport width and not on the viewing mode we are using(above 1024px it will show the button in same row otherwise in separate row) if you check it on your laptop you will see that it perfectly sits on the same row. I can still do 2 different modifications if u want , either move the button entirely in the same row for all screen sizes (here it will sit on same row for all screen sizes but might look clustered in smaller screens) or use md instead of lg which will reduce the breakpoint from 1024px to 768px (but in desktop mode of mobile it might still not show in same row because of screen size).

[AnujAga2005]

Hi @AgniveshChaubey, i changed the lg class to md and now in my mobile's desktop view its working as required. I pushed the updated code as well. Thanks!

[AgniveshChaubey]

Thanks! I'll check it this weekend

[AnujAga2005]

Sure.

[AgniveshChaubey]

I've done some code refactoring, but the CI is failing. Can you check that?

[AnujAga2005]

Sure. Maybe its some linting issue i will get back to you in a few hours.

[AnujAga2005]

According to CI logs the issue was because size attribute was expecting a number (because size attribute needs a number in default HTML button case) but since we are using our custom size attribute there was a clash happening , so i omitted the HTML size attribute from our ButtonProps to use our custom attribute. @AgniveshChaubey

[AnujAga2005]

That issue is resolved but i am not sure about this codecov issue , can u please help me with this ?

[AgniveshChaubey]

Okay, I'll check it

[AnujAga2005]

@AgniveshChaubey any update? If anything is needed from my side I am happy to help.

[AgniveshChaubey]

You can look into what's failing and try to fix it. If you're finding it difficult, that okay -- I'll check it once I get some buffer. No need to hurry.