From 6922a92b69e8cccb06a5300f4976213371eac13a Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Mon, 10 Nov 2025 14:19:27 -0600
Subject: [PATCH] feat: show update version info (#23698)

* feat: show update version info

* Apply suggestions from code review

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

---------

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
---
 i18n/en.json                                  |  1 +
 .../side-bar/server-status.svelte             | 48 +++++++++++++++++--
 web/src/lib/utils.ts                          |  2 +
 web/src/routes/+layout.svelte                 |  4 +-
 4 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index 6117e30106..f0b10d2ac1 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -1414,6 +1414,7 @@
   "new_pin_code": "New PIN code",
   "new_pin_code_subtitle": "This is your first time accessing the locked folder. Create a PIN code to securely access this page",
   "new_timeline": "New Timeline",
+  "new_update": "New update",
   "new_user_created": "New user created",
   "new_version_available": "NEW VERSION AVAILABLE",
   "newest_first": "Newest first",
diff --git a/web/src/lib/components/shared-components/side-bar/server-status.svelte b/web/src/lib/components/shared-components/side-bar/server-status.svelte
index 5c70955f60..b678bc5507 100644
--- a/web/src/lib/components/shared-components/side-bar/server-status.svelte
+++ b/web/src/lib/components/shared-components/side-bar/server-status.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import ServerAboutModal from '$lib/modals/ServerAboutModal.svelte';
+  import { user } from '$lib/stores/user.store';
   import { userInteraction } from '$lib/stores/user.svelte';
   import { websocketStore } from '$lib/stores/websocket';
+  import { semverToName } from '$lib/utils';
   import { requestServerInfo } from '$lib/utils/auth';
   import {
     getAboutInfo,
@@ -9,12 +11,12 @@
     type ServerAboutResponseDto,
     type ServerVersionHistoryResponseDto,
   } from '@immich/sdk';
-  import { Icon, modalManager } from '@immich/ui';
-  import { mdiAlert } from '@mdi/js';
+  import { Icon, modalManager, Text } from '@immich/ui';
+  import { mdiAlert, mdiNewBox } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
-  const { serverVersion, connected } = websocketStore;
+  const { serverVersion, connected, release } = websocketStore;
 
   let info: ServerAboutResponseDto | undefined = $state();
   let versions: ServerVersionHistoryResponseDto[] = $state([]);
@@ -34,6 +36,21 @@
   let version = $derived(
     $serverVersion ? `v${$serverVersion.major}.${$serverVersion.minor}.${$serverVersion.patch}` : null,
   );
+
+  const releaseInfo = $derived.by(() => {
+    if ($release == undefined || $release?.isAvailable || !$user.isAdmin) {
+      return;
+    }
+
+    const availableVersion = semverToName($release.releaseVersion);
+    const serverVersion = semverToName($release.serverVersion);
+
+    if (serverVersion === availableVersion) {
+      return;
+    }
+
+    return { availableVersion, releaseUrl: `https://github.com/immich-app/immich/releases/tag/${availableVersion}` };
+  });
 </script>
 
 <div
@@ -56,7 +73,7 @@
       <button
         type="button"
         onclick={() => info && modalManager.show(ServerAboutModal, { versions, info })}
-        class="dark:text-immich-gray flex gap-1"
+        class="dark:text-immich-gray flex gap-1 place-items-center place-content-center"
       >
         {#if isMain}
           <Icon icon={mdiAlert} size="1.5em" color="#ffcc4d" /> {info?.sourceRef}
@@ -69,3 +86,26 @@
     {/if}
   </div>
 </div>
+
+{#if releaseInfo}
+  <a
+    href={releaseInfo.releaseUrl}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="mt-3 p-2.5 ms-4 rounded-lg text-sm min-w-52 border border-gray-200/50 dark:border-gray-700/50 bg-white/50 dark:bg-gray-800/50 hover:border-immich-primary/40 dark:hover:border-immich-dark-primary/40 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/5 transition-all duration-200 group block"
+  >
+    <div class="flex items-center justify-between gap-2">
+      <div class="flex items-center gap-2">
+        <Icon icon={mdiNewBox} size="16" class="text-immich-primary dark:text-immich-dark-primary opacity-80" />
+        <Text size="tiny" class="font-medium text-gray-700 dark:text-gray-300">
+          {releaseInfo.availableVersion}
+        </Text>
+      </div>
+      <span
+        class="text-[11px] text-gray-500 dark:text-gray-400 group-hover:text-immich-primary dark:group-hover:text-immich-dark-primary transition-colors opacity-70 group-hover:opacity-100"
+      >
+        {$t('new_update')}!
+      </span>
+    </div>
+  </a>
+{/if}
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 65510352c1..6e0a216477 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -400,3 +400,5 @@ export const getReleaseType = (
 
   return 'none';
 };
+
+export const semverToName = ({ major, minor, patch }: ServerVersionResponseDto) => `v${major}.${minor}.${patch}`;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index f5d4619943..bd0029735c 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -17,9 +17,8 @@
     websocketStore,
     type ReleaseEvent,
   } from '$lib/stores/websocket';
-  import { copyToClipboard, getReleaseType } from '$lib/utils';
+  import { copyToClipboard, getReleaseType, semverToName } from '$lib/utils';
   import { isAssetViewerRoute } from '$lib/utils/navigation';
-  import type { ServerVersionResponseDto } from '@immich/sdk';
   import { modalManager, setTranslations } from '@immich/ui';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -78,7 +77,6 @@
     }
   });
 
-  const semverToName = ({ major, minor, patch }: ServerVersionResponseDto) => `v${major}.${minor}.${patch}`;
   const { release } = websocketStore;
 
   const handleRelease = async (release?: ReleaseEvent) => {