[FR] Show both versions in the frontend

[thomas-mc-work]

Is your feature request related to a problem? Please describe.

No problem, just a topping.

Describe the solution you'd like

I'd like to see both verson in the frontend: current version und latest available version:

grafana/loki:3.4.0 ⇒ 3.4.2

This allows me to see my update drift quickly.

Actually same as shown in the CLI:

… Major update (3.4.0 → 3.4.2)

Describe alternatives you've considered

Just live with how it's displayed now.

[sergi0g]

Hey @thomas-mc-work! Thanks for opening this issue! Do you want to join the discord so I can share some design previews and get feedback without filling this issue up with screenshots?

[thomas-mc-work]

I'd prefer to keep the discussion in this ticket because I strive to avoid proprietary services. Also it would rip out parts of the conversation. If you don't like to have it in a ticket we could open a discussion for that topic.

[sergi0g]

No problem! I try to do the same. I was thinking of a design like this:

I'm not really sure I like the color though. I need ideas. What do you think?

[thomas-mc-work]

Thank you for the draft!

Are you following a color scheme? There are color calculators which can tell you compatible colors based on the ons you've got, e.g. https://www.sessions.edu/color-calculator/

There is a bit of redundancy about the existing version (left side after the colon and then right side before the arrow). There are also some differences between those values which should be equal from my perspective. Otherwise this could lead to confusion.

Maybe you print everything aligned to the left:

mysqL:8.0 => 9.2

What do you think?

[sergi0g]

On the left, the full reference is shown. If an image is using a tag like v3.1.4-alpine it must be shown. In the badge we can show just the version.

[sergi0g]

I think it looks quite nice with the theme gray color. What do you think?

[thomas-mc-work]

Wonderful! Good job.

Is there a space surrounding the arrow? If not then it could need one. Otherwise I'd be more than fine with it.

[sergi0g]

There's no space as in "space character", but I can try increasing the gap between the text and the arrow.

[thomas-mc-work]

Solved by https://github.com/sergi0g/cup/releases/tag/v3.2.1. Thank you!