feat(supply-depot): show installed version on cards + make Update pill stand out
Two card tweaks for the update workflow: - Show the installed image tag next to the powered-by name (e.g. "Kiwix · 3.7.0"), so the running version is visible at a glance. Only rendered for installed apps; falls back to just the version when powered_by is unset. - Change the "Update available" pill from a muted light-green tint to a solid desert-orange fill with white text, so an available update actually draws the eye instead of blending into the card.
This commit is contained in:
parent
5de58da4b7
commit
4ece29b6d4
|
|
@ -818,9 +818,20 @@ function AppCard({
|
||||||
<p className="font-semibold text-text-primary text-sm leading-tight truncate">
|
<p className="font-semibold text-text-primary text-sm leading-tight truncate">
|
||||||
{service.friendly_name ?? service.service_name}
|
{service.friendly_name ?? service.service_name}
|
||||||
</p>
|
</p>
|
||||||
{service.powered_by && (
|
{(() => {
|
||||||
<p className="text-xs text-text-muted truncate">{service.powered_by}</p>
|
// Show the installed image tag next to the powered-by name (e.g. "Kiwix · 3.7.0").
|
||||||
)}
|
// Only for installed apps — a not-yet-installed catalog entry has no meaningful
|
||||||
|
// running version. Falls back to just the version if powered_by is unset.
|
||||||
|
const version = service.installed ? extractTag(service.container_image) : ''
|
||||||
|
if (!service.powered_by && !version) return null
|
||||||
|
return (
|
||||||
|
<p className="text-xs text-text-muted truncate">
|
||||||
|
{service.powered_by}
|
||||||
|
{service.powered_by && version ? ' · ' : ''}
|
||||||
|
{version ? <span className="font-mono">{version}</span> : null}
|
||||||
|
</p>
|
||||||
|
)
|
||||||
|
})()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -882,7 +893,7 @@ function AppCard({
|
||||||
type="button"
|
type="button"
|
||||||
onClick={onUpdateVersion}
|
onClick={onUpdateVersion}
|
||||||
title={`Update to ${service.available_update_version}`}
|
title={`Update to ${service.available_update_version}`}
|
||||||
className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-full font-medium border border-desert-green-light bg-desert-green-lighter text-desert-green-dark cursor-pointer transition-colors hover:bg-desert-green-light"
|
className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-full font-semibold bg-desert-orange text-white shadow-sm cursor-pointer transition-colors hover:bg-desert-orange-dark"
|
||||||
>
|
>
|
||||||
<IconArrowUp className="h-3 w-3" />
|
<IconArrowUp className="h-3 w-3" />
|
||||||
Update available
|
Update available
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue