feat(frontend): Group affected packages by ecosystem in vertical view

[ashmod]

This PR refactors the "Affected packages" component on the vulnerability details page to improve the user experience for vulnerabilities with many affected packages.

The vertical layout has been redesigned as a two-level accordion, grouped by ecosystem:

• Ecosystems are now the top-level collapsible headers.
• Packages belonging to an ecosystem are nested inside as their own individual collapsible cards.
• Ecosystems and packages are collapsed by default if their count is above a set threshold.

Fixes #3087

[ashmod]

osv_grouped-pkgs.mp4

The vid shows 2 examples;

• A vulnerability affecting a large number of ecosystems.
• An ecosystem containing a large number of packages.

It shows how large lists of ecosystems or packages are collapsed by default, each triggered by its own numerical threshold.

[jess-lowe]

/gcbrun

[another-rex]

/gcbrun

[another-rex]

This is great! Couple cosmetics comments though:

The main thing is it feels like each package section does not quite look like it belongs to the ecosystem above it enough.

[ashmod]

This is great! Couple cosmetics comments though:

The main thing is it feels like each package section does not quite look like it belongs to the ecosystem above it enough.

Thanks, those changes should now be addressed. LMK if I missed anything!

To solve the main issue, I've added a tree-like nesting structure to better show that the packages belong to the ecosystem above them. I'm exploring other options, but the spicy-sections container is somewhat restrictive.

[another-rex]

/gcbrun

[jess-lowe]

/gcbrun

[jess-lowe]

LGTM! Thanks :)