fix: use icon instead of emoji

immich-app · Oct 16, 2024 · da0a3e1 · da0a3e1
1 parent d04bbc4
commit da0a3e1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/web/src/lib/components/shared-components/server-about-modal.svelte b/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;
 
@@ -153,7 +155,8 @@
       {/if}
 
       {#if info.sourceRef === 'main'}
-        <div class="col-span-full p-4">
+        <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>

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
@@ -10,19 +10,19 @@
     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;
   let versions: ServerVersionHistoryResponseDto[] = [];
 
-  $: isMain = info?.sourceRef === 'main';
-  $: version = isMain
-    ? 'main ⚠️'
-    : $serverVersion && `v${$serverVersion.major}.${$serverVersion.minor}.${$serverVersion.patch}`;
-
   onMount(async () => {
     await requestServerInfo();
     [info, versions] = await Promise.all([getAboutInfo(), getVersionHistory()]);
@@ -50,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}

diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json
@@ -816,7 +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!",
+  "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",