feat: track upgrade history (#13097)

web/src/lib/components/shared-components/server-about-modal.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import { type ServerAboutResponseDto } from '@immich/sdk';
+  import { type ServerAboutResponseDto, type ServerVersionHistoryResponseDto } from '@immich/sdk';
+  import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
 
   export let onClose: () => void;
 
   export let info: ServerAboutResponseDto;
+  export let versions: ServerVersionHistoryResponseDto[];
 </script>
 
 <Portal>
   <FullScreenModal title={$t('about')} {onClose}>
-    <div
-      class="immich-scrollbar max-h-[500px] overflow-y-auto flex flex-col sm:grid sm:grid-cols-2 gap-1 text-immich-primary dark:text-immich-dark-primary"
-    >
+    <div class="flex flex-col sm:grid sm:grid-cols-2 gap-1 text-immich-primary dark:text-immich-dark-primary">
       <div>
         <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="version-desc"
           >Immich</label
@@ -151,6 +151,35 @@
           </div>
         </div>
       {/if}
+
+      <div class="col-span-full">
+        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="version-history"
+          >{$t('version_history')}</label
+        >
+        <ul id="version-history" class="list-none">
+          {#each versions.slice(0, 5) as item (item.id)}
+            {@const createdAt = DateTime.fromISO(item.createdAt)}
+            <li>
+              <span
+                class="immich-form-label pb-2 text-xs"
+                id="version-history"
+                title={createdAt.toLocaleString(DateTime.DATETIME_SHORT_WITH_SECONDS)}
+              >
+                {$t('version_history_item', {
+                  values: {
+                    version: item.version,
+                    date: createdAt.toLocaleString({
+                      month: 'short',
+                      day: 'numeric',
+                      year: 'numeric',
+                    }),
+                  },
+                })}
+              </span>
+            </li>
+          {/each}
+        </ul>
+      </div>
     </div>
   </FullScreenModal>
 </Portal>

web/src/lib/components/shared-components/side-bar/server-status.svelte

@@ -4,7 +4,12 @@
   import { requestServerInfo } from '$lib/utils/auth';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
+  import {
+    getAboutInfo,
+    getVersionHistory,
+    type ServerAboutResponseDto,
+    type ServerVersionHistoryResponseDto,
+  } from '@immich/sdk';
 
   const { serverVersion, connected } = websocketStore;
 
@@ -12,16 +17,17 @@
 
   $: version = $serverVersion ? `v${$serverVersion.major}.${$serverVersion.minor}.${$serverVersion.patch}` : null;
 
-  let aboutInfo: ServerAboutResponseDto;
+  let info: ServerAboutResponseDto;
+  let versions: ServerVersionHistoryResponseDto[] = [];
 
   onMount(async () => {
     await requestServerInfo();
-    aboutInfo = await getAboutInfo();
+    [info, versions] = await Promise.all([getAboutInfo(), getVersionHistory()]);
   });
 </script>
 
 {#if isOpen}
-  <ServerAboutModal onClose={() => (isOpen = false)} info={aboutInfo} />
+  <ServerAboutModal onClose={() => (isOpen = false)} {info} {versions} />
 {/if}
 
 <div

web/src/lib/components/shared-components/side-bar/storage-space.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import ServerAboutModal from '$lib/components/shared-components/server-about-modal.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { serverInfo } from '$lib/stores/server-info.store';
   import { user } from '$lib/stores/user.store';
@@ -8,18 +7,14 @@
   import { t } from 'svelte-i18n';
   import { getByteUnitString } from '../../../utils/byte-units';
   import LoadingSpinner from '../loading-spinner.svelte';
-  import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
 
   let usageClasses = '';
-  let isOpen = false;
 
   $: hasQuota = $user?.quotaSizeInBytes !== null;
   $: availableBytes = (hasQuota ? $user?.quotaSizeInBytes : $serverInfo?.diskSizeRaw) || 0;
   $: usedBytes = (hasQuota ? $user?.quotaUsageInBytes : $serverInfo?.diskUseRaw) || 0;
   $: usedPercentage = Math.min(Math.round((usedBytes / availableBytes) * 100), 100);
 
-  let aboutInfo: ServerAboutResponseDto;
-
   const onUpdate = () => {
     usageClasses = getUsageClass();
   };
@@ -42,14 +37,9 @@
 
   onMount(async () => {
     await requestServerInfo();
-    aboutInfo = await getAboutInfo();
   });
 </script>
 
-{#if isOpen}
-  <ServerAboutModal onClose={() => (isOpen = false)} info={aboutInfo} />
-{/if}
-
 <div
   class="hidden md:block storage-status p-4 bg-gray-100 dark:bg-immich-dark-primary/10 ml-4 rounded-lg text-sm"
   title={$t('storage_usage', {

web/src/lib/i18n/en.json

@@ -1278,6 +1278,8 @@
   "version": "Version",
   "version_announcement_closing": "Your friend, Alex",
   "version_announcement_message": "Hi friend, there is a new version of the application please take your time to visit the <link>release notes</link> and ensure your <code>docker-compose.yml</code>, and <code>.env</code> setup is up-to-date to prevent any misconfigurations, especially if you use WatchTower or any mechanism that handles updating your application automatically.",
+  "version_history": "Version History",
+  "version_history_item": "Installed {version} on {date}",
   "video": "Video",
   "video_hover_setting": "Play video thumbnail on hover",
   "video_hover_setting_description": "Play video thumbnail when mouse is hovering over item. Even when disabled, playback can be started by hovering over the play icon.",