Make rendering of `<ecosystem>/<package>` on website less ambiguous

[michaelkedar]

Currently, on the /list page, the listed packages are rendered as <ecosystem>/<package> (e.g. PyPI/numpy)
This can cause some confusion:

• Some ecosystems allow for a :<registry> suffix (VSCode), which makes these strings look like URLs when they are not actually valid (e.g. VSCode:https://open-vsx.org/SIRILMP.dark-theme-sm, per Data quality issue with VSCode Extension Unique Identifiers (hyperlinks in https://osv.dev/vulnerability/ ... ) #4505)
• In some ecosystems, package names can contain slashes (e.g. npm/@babel/runtime), and there's nothing in the schema inherently preventing ecosystem names from containing slashes either (and with the registries they already do), so it's not inherently clear which part is which.

We should format these better so that the separation of the ecosystem and package name are clearer.

One slight issue - with #4469 the website uses the ListedVulnerability entity for this page, which has the packages field pre-generated with <ecosystem>/<package> (and I don't think we can easily split these without the referring to the original records). We'd need to change/add to this field so separate the ecosystem and package names and regenerate all the entities (and be careful when doing the release cutover).

[Vasuk12]

Hey @michaelkedar If this is still open. Can I work on this issue?

[another-rex]

I think because of the database changes this is probably not the best issue to work on.

It's not as easy as splitting on the first or last / because both the ecosystem and the package itself can have / in it.