[Feature]: Add a "Filter distribution" section to the UI

[pleia2]

Problem statement

In the Flask-based version of the tool, we had a section that allowed users to filter by specific point-release distributions. For instance, if you search for "RHEL", when the results came back you could specify which RHEL versions you wanted. Based on feedback from users, this was used a lot, since sometimes they only wanted to search RHEL 10.x, for instance, rather than RHEL 8.

Screenshot of how this was implemented:

Proposed solution

Include something similar in our new React-based UI.

Please start with a mock-up before writing any code so we can run this by our users.

Alternatives considered

No response

[Bhavishya07-Tech]

Hi @pleia2, I'd like to work on this. I'll put together a mock-up first as you suggested and share it here before writing any code.

[Bhavishya07-Tech]

@pleia2 Here's a rough mock-up for the filter distribution section — a collapsible sidebar grouped by distro family (RHEL/Ubuntu/Debian/etc.), with version checkboxes that filter the results table on the right, similar to the old Flask UI. Let me know if this direction looks right before I start building it out.

[pleia2]

Keeping the React UI in mind (attached), rather than the older one I shared above, would you envision moving the "Refine results on this page:" box over to the left as well? I think this would work great, I just want to make sure our vision is aligned 😄

[Bhavishya07-Tech]

Yes, I think moving "Refine results" to the left makes sense — that groups all the filtering controls (package search + distro filters) together in one place instead of splitting them between the top bar and sidebar. I'll update the mock-up to reflect that.

[Bhavishya07-Tech]

Updated the mock-up — moved "Refine results on this page" into the left sidebar above the distro filters, so everything's grouped together. Let me know if this works!