feat: show warning when running main branch build (#13462)

* feat: show warning when running main branch build

* fix: emoji weirdness

* fix: use icon instead of emoji

* fix: missing conditional

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

@@ -4,6 +4,8 @@
   import { type ServerAboutResponseDto, type ServerVersionHistoryResponseDto } from '@immich/sdk';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
+  import { mdiAlert } from '@mdi/js';
+  import Icon from '$lib/components/elements/icon.svelte';
 
   export let onClose: () => void;
 
@@ -152,6 +154,15 @@
         </div>
       {/if}
 
+      {#if info.sourceRef === 'main' && info.repository === 'immich-app/immich'}
+        <div class="col-span-full p-4 flex gap-1">
+          <Icon path={mdiAlert} size="2em" color="#ffcc4d" />
+          <p class="immich-form-label text-sm" id="main-warning">
+            {$t('main_branch_warning')}
+          </p>
+        </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

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

@@ -10,11 +10,14 @@
     type ServerAboutResponseDto,
     type ServerVersionHistoryResponseDto,
   } from '@immich/sdk';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiAlert } from '@mdi/js';
 
   const { serverVersion, connected } = websocketStore;
 
   let isOpen = false;
 
+  $: isMain = info?.sourceRef === 'main' && info.repository === 'immich-app/immich';
   $: version = $serverVersion ? `v${$serverVersion.major}.${$serverVersion.minor}.${$serverVersion.patch}` : null;
 
   let info: ServerAboutResponseDto;
@@ -47,7 +50,13 @@
 
   <div class="flex justify-between justify-items-center">
     {#if $connected && version}
-      <button type="button" on:click={() => (isOpen = true)} class="dark:text-immich-gray">{version}</button>
+      <button type="button" on:click={() => (isOpen = true)} class="dark:text-immich-gray flex gap-1">
+        {#if isMain}
+          <Icon path={mdiAlert} size="1.5em" color="#ffcc4d" /> {info.sourceRef}
+        {:else}
+          {version}
+        {/if}
+      </button>
     {:else}
       <p class="text-red-500">{$t('unknown')}</p>
     {/if}

web/src/lib/i18n/en.json

@@ -816,6 +816,7 @@
   "look": "Look",
   "loop_videos": "Loop videos",
   "loop_videos_description": "Enable to automatically loop a video in the detail viewer.",
+  "main_branch_warning": "You're running a build from the main branch. We strongly recommend using a release version!",
   "make": "Make",
   "manage_shared_links": "Manage shared links",
   "manage_sharing_with_partners": "Manage sharing with partners",