chore: build metadata (#10612)

feat: build metadata

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

@@ -0,0 +1,156 @@
+<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 { t } from 'svelte-i18n';
+
+  export let onClose: () => void;
+
+  export let info: ServerAboutResponseDto;
+</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>
+        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="version-desc"
+          >Immich</label
+        >
+        <div>
+          <a
+            href={info.versionUrl}
+            class="underline text-sm immich-form-label"
+            target="_blank"
+            rel="noreferrer"
+            id="version-desc"
+          >
+            {info.version}
+          </a>
+        </div>
+      </div>
+
+      <div>
+        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="ffmpeg-desc"
+          >ExifTool</label
+        >
+        <p class="immich-form-label pb-2 text-sm" id="ffmpeg-desc">
+          {info.exiftool}
+        </p>
+      </div>
+
+      <div>
+        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="nodejs-desc"
+          >Node.js</label
+        >
+        <p class="immich-form-label pb-2 text-sm" id="nodejs-desc">
+          {info.nodejs}
+        </p>
+      </div>
+
+      <div>
+        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="vips-desc"
+          >Libvips</label
+        >
+        <p class="immich-form-label pb-2 text-sm" id="vips-desc">
+          {info.libvips}
+        </p>
+      </div>
+
+      <div class={(info.imagemagick?.length || 0) > 10 ? 'col-span-2' : ''}>
+        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="imagemagick-desc"
+          >ImageMagick</label
+        >
+        <p class="immich-form-label pb-2 text-sm" id="imagemagick-desc">
+          {info.imagemagick}
+        </p>
+      </div>
+
+      <div class={(info.ffmpeg?.length || 0) > 10 ? 'col-span-2' : ''}>
+        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="ffmpeg-desc"
+          >FFmpeg</label
+        >
+        <p class="immich-form-label pb-2 text-sm" id="ffmpeg-desc">
+          {info.ffmpeg}
+        </p>
+      </div>
+
+      {#if info.repository && info.repositoryUrl}
+        <div>
+          <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="version-desc"
+            >{$t('repository')}</label
+          >
+          <div>
+            <a
+              href={info.repositoryUrl}
+              class="underline text-sm immich-form-label"
+              target="_blank"
+              rel="noreferrer"
+              id="version-desc"
+            >
+              {info.repository}
+            </a>
+          </div>
+        </div>
+      {/if}
+
+      {#if info.sourceRef && info.sourceCommit && info.sourceUrl}
+        <div>
+          <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="git-desc"
+            >{$t('source')}</label
+          >
+          <div>
+            <a
+              href={info.sourceUrl}
+              class="underline text-sm immich-form-label"
+              target="_blank"
+              rel="noreferrer"
+              id="git-desc"
+            >
+              {info.sourceRef}@{info.sourceCommit.slice(0, 9)}
+            </a>
+          </div>
+        </div>
+      {/if}
+
+      {#if info.build && info.buildUrl}
+        <div>
+          <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="build-desc"
+            >{$t('build')}</label
+          >
+          <div>
+            <a
+              href={info.buildUrl}
+              class="underline text-sm immich-form-label"
+              target="_blank"
+              rel="noreferrer"
+              id="build-desc"
+            >
+              {info.build}
+            </a>
+          </div>
+        </div>
+      {/if}
+
+      {#if info.buildImage && info.buildImage}
+        <div>
+          <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="build-image-desc"
+            >{$t('build_image')}</label
+          >
+          <div>
+            <a
+              href={info.buildImageUrl}
+              class="underline text-sm immich-form-label"
+              target="_blank"
+              rel="noreferrer"
+              id="build-image-desc"
+            >
+              {info.buildImage}
+            </a>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </FullScreenModal>
+</Portal>

web/src/lib/components/shared-components/status-box.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
+  import ServerAboutModal from '$lib/components/shared-components/server-about-modal.svelte';
   import { locale } from '$lib/stores/preferences.store';
-  import { websocketStore } from '$lib/stores/websocket';
-  import { onMount } from 'svelte';
-  import { getByteUnitString } from '../../utils/byte-units';
-  import LoadingSpinner from './loading-spinner.svelte';
-  import { mdiChartPie, mdiDns } from '@mdi/js';
   import { serverInfo } from '$lib/stores/server-info.store';
   import { user } from '$lib/stores/user.store';
+  import { websocketStore } from '$lib/stores/websocket';
   import { requestServerInfo } from '$lib/utils/auth';
+  import { mdiChartPie, mdiDns } from '@mdi/js';
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
+  import { getByteUnitString } from '../../utils/byte-units';
+  import LoadingSpinner from './loading-spinner.svelte';
+  import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
 
   const { serverVersion, connected } = websocketStore;
 
   let usageClasses = '';
+  let isOpen = false;
 
   $: version = $serverVersion ? `v${$serverVersion.major}.${$serverVersion.minor}.${$serverVersion.patch}` : null;
   $: hasQuota = $user?.quotaSizeInBytes !== null;
@@ -21,6 +24,8 @@
   $: usedBytes = (hasQuota ? $user?.quotaUsageInBytes : $serverInfo?.diskUseRaw) || 0;
   $: usedPercentage = Math.round((usedBytes / availableBytes) * 100);
 
+  let aboutInfo: ServerAboutResponseDto;
+
   const onUpdate = () => {
     usageClasses = getUsageClass();
   };
@@ -41,9 +46,14 @@
 
   onMount(async () => {
     await requestServerInfo();
+    aboutInfo = await getAboutInfo();
   });
 </script>
 
+{#if isOpen}
+  <ServerAboutModal onClose={() => (isOpen = false)} info={aboutInfo} />
+{/if}
+
 <div class="dark:text-immich-dark-fg">
   <div
     class="storage-status grid grid-cols-[64px_auto]"
@@ -96,13 +106,11 @@
       <div class="mt-2 flex justify-between justify-items-center">
         <p>{$t('version')}</p>
         {#if $connected && version}
-          <a
-            href="https://github.com/immich-app/immich/releases"
-            class="font-medium text-immich-primary dark:text-immich-dark-primary"
-            target="_blank"
+          <button
+            type="button"
+            on:click={() => (isOpen = true)}
+            class="font-medium text-immich-primary dark:text-immich-dark-primary">{version}</button
           >
-            {version}
-          </a>
         {:else}
           <p class="font-medium text-red-500">{$t('unknown')}</p>
         {/if}

web/src/lib/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "about": "About",
   "account": "Account",
   "account_settings": "Account Settings",
   "acknowledge": "Acknowledge",
@@ -380,6 +381,8 @@
   "birthdate_saved": "Date of birth saved successfully",
   "birthdate_set_description": "Date of birth is used to calculate the age of this person at the time of a photo.",
   "blurred_background": "Blurred background",
+  "build": "Build",
+  "build_image": "Build Image",
   "bulk_delete_duplicates_confirmation": "Are you sure you want to bulk delete {count, plural, one {# duplicate asset} other {# duplicate assets}}? This will keep the largest asset of each group and permanently delete all other duplicates. You cannot undo this action!",
   "bulk_keep_duplicates_confirmation": "Are you sure you want to keep {count, plural, one {# duplicate asset} other {# duplicate assets}}? This will resolve all duplicate groups without deleting anything.",
   "bulk_trash_duplicates_confirmation": "Are you sure you want to bulk trash {count, plural, one {# duplicate asset} other {# duplicate assets}}? This will keep the largest asset of each group and trash all other duplicates.",
@@ -904,6 +907,7 @@
   "repair": "Repair",
   "repair_no_results_message": "Untracked and missing files will show up here",
   "replace_with_upload": "Replace with upload",
+  "repository": "Repository",
   "require_password": "Require password",
   "require_user_to_change_password_on_first_login": "Require user to change password on first login",
   "reset": "Reset",
@@ -1016,6 +1020,7 @@
   "sort_oldest": "Oldest photo",
   "sort_recent": "Most recent photo",
   "sort_title": "Title",
+  "source": "Source",
   "stack": "Stack",
   "stack_selected_photos": "Stack selected photos",
   "stacked_assets_count": "Stacked {count, plural, one {# asset} other {# assets}}",