fix(ui): keep update release link visible

packages/ui/src/components/version-pill.tsx

@@ -2,10 +2,13 @@ import { Show, createEffect, createSignal } from "solid-js"
 import type { ServerMeta } from "../../../server/src/api-types"
 import { getServerMeta } from "../lib/server-meta"
 import { useI18n } from "../lib/i18n"
+import { openExternalUrl } from "../lib/external-url"
+import { useAvailableUpdate } from "../stores/releases"
 
 export default function VersionPill() {
   const { t } = useI18n()
   const [meta, setMeta] = createSignal<ServerMeta | null>(null)
+  const availableUpdate = useAvailableUpdate()
 
   createEffect(() => {
     void getServerMeta()
@@ -16,11 +19,18 @@ export default function VersionPill() {
   const serverVersion = () => meta()?.serverVersion
   const uiVersion = () => meta()?.ui?.version
   const uiSource = () => meta()?.ui?.source
+  const update = () => {
+    const refreshedUpdate = availableUpdate()
+    if (refreshedUpdate !== undefined) {
+      return refreshedUpdate
+    }
+    return meta()?.update ?? null
+  }
 
   const uiLabel = () => (uiVersion() ? t("versionPill.uiWithVersion", { version: uiVersion() }) : t("versionPill.ui"))
 
   return (
-    <Show when={serverVersion() || uiVersion() || uiSource()}>
+    <Show when={serverVersion() || uiVersion() || uiSource() || update()}>
       <div class="text-[11px] text-muted whitespace-nowrap">
         <Show when={serverVersion()}>
           {(v) => <span>{t("versionPill.appWithVersion", { version: v() })}</span>}
@@ -36,6 +46,28 @@ export default function VersionPill() {
             </span>
           </>
         </Show>
+        <Show when={update()}>
+          {(release) => (
+            <>
+              <Show when={serverVersion() || uiVersion() || uiSource()}>
+                <span class="mx-2">·</span>
+              </Show>
+              <a
+                href={release().url}
+                target="_blank"
+                rel="noreferrer"
+                class="text-primary hover:underline underline-offset-2"
+                title={t("releases.devUpdateAvailable.message", { version: release().version })}
+                onClick={(event) => {
+                  event.preventDefault()
+                  void openExternalUrl(release().url, "version-pill")
+                }}
+              >
+                {t("releases.devUpdateAvailable.action")}
+              </a>
+            </>
+          )}
+        </Show>
       </div>
     </Show>
   )

packages/ui/src/stores/releases.ts

@@ -9,6 +9,7 @@ import { hasInstances, showFolderSelection } from "./ui"
 const log = getLogger("actions")
 
 const [supportInfo, setSupportInfo] = createSignal<SupportMeta | null>(null)
+const [availableUpdate, setAvailableUpdate] = createSignal<ServerMeta["update"] | null | undefined>(undefined)
 
 const UI_VERSION_STORAGE_KEY = "codenomad:lastSeenUiVersion"
 const DEV_RELEASE_STORAGE_KEY = "codenomad:lastSeenDevRelease"
@@ -82,6 +83,7 @@ async function refreshFromMeta() {
   try {
     const meta = await getServerMeta(true)
     setSupportInfo(meta.support ?? null)
+    setAvailableUpdate(meta.update ?? null)
     maybeNotifyUiUpdated(meta)
     maybeNotifyDevReleaseAvailable(meta)
     ensureMetaRefresh(meta)
@@ -94,6 +96,10 @@ export function useSupportInfo() {
   return supportInfo
 }
 
+export function useAvailableUpdate() {
+  return availableUpdate
+}
+
 function maybeNotifyUiUpdated(meta: ServerMeta) {
   if (uiUpdateToasted) return
   uiUpdateToasted = true