Add Counter to dropdown menu in tools Page

[AQIB-NAWAB]

What kind of change does this PR introduce?

feature
Issue Number:

• Closes ✨ Enhancement: Display Selected Filter Count as Badges on Filter Dropdowns #1447

Screenshots/videos:

Summary
Add a counter to each dropdown which increase the user experience to see the total numbers of selected filter in each dropdown.

Does this PR introduce a breaking change?
No. There is nothing

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

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

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (a44dbdf) to head (4f218f7).

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1479   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           10        10           
  Lines          396       396           
  Branches       106       106           
=========================================
  Hits           396       396           

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

[AQIB-NAWAB]

Hi @benjagm , please review the PR

[DhairyaMajmudar]

@AQIB-NAWAB Thanks for PR pls. check my review comments

[AQIB-NAWAB]

@DhairyaMajmudar Please review the PR

[DhairyaMajmudar]

The border around the number is not full circle

The changes are not optimal with light mode

[AQIB-NAWAB]

@DhairyaMajmudar is it good under light mode ??

[AQIB-NAWAB]

Hi @DhairyaMajmudar , please review the PR

[AQIB-NAWAB]

Hi @benjagm , Please review the PR.
Thanks

[github-actions]

Hi @AQIB-NAWAB! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: breaking changes information

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @AQIB-NAWAB! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: breaking changes information

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @AQIB-NAWAB! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: breaking changes information

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[AQIB-NAWAB]

Here is the video of output:

Screencast.from.2025-03-16.15-44-57.webm

Working on mobile as well

Please let me know if there anything need to improved 😊

Thanks

[AQIB-NAWAB]

Hi @benjagm , Please review the PR

[DhairyaMajmudar]

LGTM 👍🏻

[DarhkVoyd]

Hey, sorry I missed the discussion. I’m not a big fan of this design or how it’s implemented. I don’t understand how this metric is helpful or useful. I do like the idea of making it more intuitive for users to see the filters they’ve selected. Have you thought about some alternatives? I think badges or tags might be a better idea.

[AQIB-NAWAB]

Hey, sorry I missed the discussion. I’m not a big fan of this design or how it’s implemented. I don’t understand how this metric is helpful or useful. I do like the idea of making it more intuitive for users to see the filters they’ve selected. Have you thought about some alternatives? I think badges or tags might be a better idea.

Hi @DarhkVoyd , currently, there are a lot of options in the filter section that do not align with the suggested design.

The reason for adding a counter in the dropdown menus is that when users search with filters, all dropdowns collapse, requiring them to check again which options were selected. Showing the counter in the dropdown is a good way to enhance user engagement.

Here is video of current behavior
Screencast from 2025-03-24 10-17-49.webm