Filters for integration page

[kknopper]

Proposed change

A rework of #24642 / #24500 / #18512 to add proper filtration to the integrations page. Also addresses https://github.com/home-assistant/home-assistant.io/issues/9944

Saw the new site changes, and finally came back to rework this PR. Merged in latest site changes, and updated code to remove jquery element selectors. Also added Brand Partners to category dropdown

used @ludeeus's notes from here as a guideline #16996 (comment)

• Better styling for filters. Thanks @ludeeus for the starting point
• added filtration of IoT Classes, and Quality Scale
• all filtration items have been moved into <select> dropdowns. (Category, Version, IoT, and Quality)
• It's now possible to combine filters (Search, IoT, Version, Category, and Quality)
• an easy way to reset filters (buttons get added to the dom that can be clicked to remove filters)
• complete rework of the applyFilter() function that allows for combining filters
• update is backwards compatible with old # urls
• on page load, if no filters are present in the url, the category is set to Featured like the production site
• integrations can now be searched for by their iot class and quality scale. You can also search for Featured integrations

Completely reworked the javascript for the integrations page. I opted to use the URLSearchParams browser API, over the hash method, as this api makes it easy to add and remove querys/filters to the url.

Created a buildQueryFromURL() function to build a query object of active filters any time the url gets updated. This object is then compared against the integrations array for filtration. Added more helper functions as well.

Functionality:

• Old # Urls still work as expected. Also allowed for new hash urls for IoT and Quality which look like so: .../integrations/#iot_class/local-polling and .../integrations/#quality_scale/internal

• If a # url is present, any change to a filter will convert the URL to use the URLSearchParams API format instead.

• On page load, or any change to the url, the current active filters (select dropdowns / search bar) will get updated to match the current active filters

• Filter removal buttons are dynamically added to the dom as well, and also update to match current active filters

• Filters can be removed by clicking these buttons, or setting a filter dropdown to its initial state

Caveats:

• URLSearchParams is not supported by IE
• this update contains a lot of ES6 javascript which is not supported by IE
• if IE needs to be supported, there are polyfills available for the - URLSearchParams api

This is a pretty large change, because of this, I tried to make my code as readable as possible with code comments for new functions.

Type of change

• [x] Spelling, grammar or other readability improvements (current branch).
• [ ] Adjusted missing or incorrect information in the current documentation (current branch).
• [ ] Added documentation for a new integration I'm adding to Home Assistant (next branch).
  • [ ] I've opened up a PR to add logos and icons in Brands repository.
• [ ] Added documentation for a new feature I'm adding to Home Assistant (next branch).
• [ ] Removed stale or deprecated documentation.

Additional information

• Link to parent pull request in the codebase:
• Link to parent pull request in the Brands repository:
• This PR fixes or closes issue: fixes #9944

Checklist

• [x] This PR uses the correct branch, based on one of the following:
  • I made a change to the existing documentation and used the current branch.
  • I made a change that is related to an upcoming version of Home Assistant and used the next branch.
• [x] The documentation follows the Home Assistant documentation standards.

Summary by CodeRabbit

• New Features

  • Enhanced component search with a minimum height and padding for better layout.
  • Improved integration filtering with new options based on categories, versions, IoT classes, and quality scales.
  • Added dynamic filtering and search functionality.
  • Introduced radio buttons and dropdowns for refined filter options.
  • Dynamic URL updates to reflect active filters.

• Style

  • Updated styles for various components including search inputs, filters, and alert messages to improve the visual appearance and usability.