From d4605b21d99fa7f9bc21689e932d26ef55870874 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Thu, 12 Mar 2026 10:55:33 -0400
Subject: [PATCH] refactor: external links (#26880)

---
 .../admin-settings/AuthSettings.svelte        | 11 ++-------
 .../admin-settings/BackupSettings.svelte      | 10 +++-----
 .../admin-settings/FFmpegSettings.svelte      | 14 ++++-------
 .../admin-settings/LibrarySettings.svelte     |  8 +++----
 .../admin-settings/MapSettings.svelte         | 10 ++------
 .../StorageTemplateSettings.svelte            | 20 ++++------------
 .../onboarding-page/onboarding-backup.svelte  | 24 +++++--------------
 .../AuthDisableLoginConfirmModal.svelte       | 11 ++-------
 8 files changed, 26 insertions(+), 82 deletions(-)

diff --git a/web/src/lib/components/admin-settings/AuthSettings.svelte b/web/src/lib/components/admin-settings/AuthSettings.svelte
index aec1761998..25af7bf2c1 100644
--- a/web/src/lib/components/admin-settings/AuthSettings.svelte
+++ b/web/src/lib/components/admin-settings/AuthSettings.svelte
@@ -11,7 +11,7 @@
   import AuthDisableLoginConfirmModal from '$lib/modals/AuthDisableLoginConfirmModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { OAuthTokenEndpointAuthMethod, unlinkAllOAuthAccountsAdmin } from '@immich/sdk';
-  import { Button, modalManager, Text, toastManager } from '@immich/ui';
+  import { Button, Link, modalManager, Text, toastManager } from '@immich/ui';
   import { mdiRestart } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -75,14 +75,7 @@
             <Text size="small">
               <FormatMessage key="admin.oauth_settings_more_details">
                 {#snippet children({ message })}
-                  <a
-                    href="https://docs.immich.app/administration/oauth"
-                    class="underline"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {message}
-                  </a>
+                  <Link href="https://docs.immich.app/administration/oauth">{message}</Link>
                 {/snippet}
               </FormatMessage>
             </Text>
diff --git a/web/src/lib/components/admin-settings/BackupSettings.svelte b/web/src/lib/components/admin-settings/BackupSettings.svelte
index fc374ddd6f..7fd22a2b6d 100644
--- a/web/src/lib/components/admin-settings/BackupSettings.svelte
+++ b/web/src/lib/components/admin-settings/BackupSettings.svelte
@@ -7,6 +7,7 @@
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
+  import { Link } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
@@ -52,15 +53,10 @@
             <p class="text-sm dark:text-immich-dark-fg">
               <FormatMessage key="admin.cron_expression_description">
                 {#snippet children({ message })}
-                  <a
-                    href="https://crontab.guru/#{configToEdit.backup.database.cronExpression.replaceAll(' ', '_')}"
-                    class="underline"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
+                  <Link href="https://crontab.guru/#{configToEdit.backup.database.cronExpression.replaceAll(' ', '_')}">
                     {message}
                     <br />
-                  </a>
+                  </Link>
                 {/snippet}
               </FormatMessage>
             </p>
diff --git a/web/src/lib/components/admin-settings/FFmpegSettings.svelte b/web/src/lib/components/admin-settings/FFmpegSettings.svelte
index e062b616b3..95aa9d74f2 100644
--- a/web/src/lib/components/admin-settings/FFmpegSettings.svelte
+++ b/web/src/lib/components/admin-settings/FFmpegSettings.svelte
@@ -18,7 +18,7 @@
     VideoCodec,
     VideoContainer,
   } from '@immich/sdk';
-  import { Icon } from '@immich/ui';
+  import { Icon, Link } from '@immich/ui';
   import { mdiHelpCircleOutline } from '@mdi/js';
   import { isEqual, sortBy } from 'lodash-es';
   import { t } from 'svelte-i18n';
@@ -38,17 +38,11 @@
           <FormatMessage key="admin.transcoding_codecs_learn_more">
             {#snippet children({ tag, message })}
               {#if tag === 'h264-link'}
-                <a href="https://trac.ffmpeg.org/wiki/Encode/H.264" class="underline" target="_blank" rel="noreferrer">
-                  {message}
-                </a>
+                <Link href="https://trac.ffmpeg.org/wiki/Encode/H.264">{message}</Link>
               {:else if tag === 'hevc-link'}
-                <a href="https://trac.ffmpeg.org/wiki/Encode/H.265" class="underline" target="_blank" rel="noreferrer">
-                  {message}
-                </a>
+                <Link href="https://trac.ffmpeg.org/wiki/Encode/H.265">{message}</Link>
               {:else if tag === 'vp9-link'}
-                <a href="https://trac.ffmpeg.org/wiki/Encode/VP9" class="underline" target="_blank" rel="noreferrer">
-                  {message}
-                </a>
+                <Link href="https://trac.ffmpeg.org/wiki/Encode/VP9">{message}</Link>
               {/if}
             {/snippet}
           </FormatMessage>
diff --git a/web/src/lib/components/admin-settings/LibrarySettings.svelte b/web/src/lib/components/admin-settings/LibrarySettings.svelte
index a91a5eb97a..52c2eb8d4f 100644
--- a/web/src/lib/components/admin-settings/LibrarySettings.svelte
+++ b/web/src/lib/components/admin-settings/LibrarySettings.svelte
@@ -8,6 +8,7 @@
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
+  import { Link } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
@@ -73,14 +74,11 @@
                 <p class="text-sm dark:text-immich-dark-fg">
                   <FormatMessage key="admin.cron_expression_description">
                     {#snippet children({ message })}
-                      <a
+                      <Link
                         href="https://crontab.guru/#{configToEdit.library.scan.cronExpression.replaceAll(' ', '_')}"
-                        class="underline"
-                        target="_blank"
-                        rel="noreferrer"
                       >
                         {message}
-                      </a>
+                      </Link>
                     {/snippet}
                   </FormatMessage>
                 </p>
diff --git a/web/src/lib/components/admin-settings/MapSettings.svelte b/web/src/lib/components/admin-settings/MapSettings.svelte
index 692a5cfcf5..5888c82611 100644
--- a/web/src/lib/components/admin-settings/MapSettings.svelte
+++ b/web/src/lib/components/admin-settings/MapSettings.svelte
@@ -7,6 +7,7 @@
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
+  import { Link } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
@@ -54,14 +55,7 @@
             <p class="text-sm dark:text-immich-dark-fg">
               <FormatMessage key="admin.map_manage_reverse_geocoding_settings">
                 {#snippet children({ message })}
-                  <a
-                    href="https://docs.immich.app/features/reverse-geocoding"
-                    class="underline"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {message}
-                  </a>
+                  <Link href="https://docs.immich.app/features/reverse-geocoding">{message}</Link>
                 {/snippet}
               </FormatMessage>
             </p>
diff --git a/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte b/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
index 7018bc5d04..8ccb3f7781 100644
--- a/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
+++ b/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
@@ -12,7 +12,7 @@
   import { handleSystemConfigSave } from '$lib/services/system-config.service';
   import { user } from '$lib/stores/user.store';
   import { getStorageTemplateOptions, type SystemConfigTemplateStorageOptionDto } from '@immich/sdk';
-  import { Heading, LoadingSpinner, Text } from '@immich/ui';
+  import { Heading, Link, LoadingSpinner, Text } from '@immich/ui';
   import handlebar from 'handlebars';
   import * as luxon from 'luxon';
   import { onDestroy } from 'svelte';
@@ -112,23 +112,11 @@
       <FormatMessage key="admin.storage_template_more_details">
         {#snippet children({ tag, message })}
           {#if tag === 'template-link'}
-            <a
-              href="https://docs.immich.app/administration/storage-template"
-              class="underline"
-              target="_blank"
-              rel="noreferrer"
-            >
-              {message}
-            </a>
+            <Link href="https://docs.immich.app/administration/storage-template">{message}</Link>
           {:else if tag === 'implications-link'}
-            <a
-              href="https://docs.immich.app/administration/backup-and-restore#asset-types-and-storage-locations"
-              class="underline"
-              target="_blank"
-              rel="noreferrer"
-            >
+            <Link href="https://docs.immich.app/administration/backup-and-restore#asset-types-and-storage-locations">
               {message}
-            </a>
+            </Link>
           {/if}
         {/snippet}
       </FormatMessage>
diff --git a/web/src/lib/components/onboarding-page/onboarding-backup.svelte b/web/src/lib/components/onboarding-page/onboarding-backup.svelte
index 146661884b..7d7f51c392 100644
--- a/web/src/lib/components/onboarding-page/onboarding-backup.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-backup.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { Icon, Stack } from '@immich/ui';
+  import { Icon, Link, Stack } from '@immich/ui';
   import { mdiAlertCircleOutline } from '@mdi/js';
   import type { Translations } from 'svelte-i18n';
 
@@ -14,18 +14,13 @@
 <div class="flex flex-col">
   <Stack gap={2}>
     <div class="flex items-start gap-4 p-6 my-10 bg-gray-100 dark:bg-gray-800/40 rounded-xl border border-gray-700/50">
-      <Icon icon={mdiAlertCircleOutline} size="36" class="text-warning flex-shrink-0 mt-0.5" />
+      <Icon icon={mdiAlertCircleOutline} size="36" class="text-warning shrink-0 mt-0.5" />
       <div class="text-gray-800 dark:text-gray-300 leading-relaxed">
         <FormatMessage key="admin.backup_onboarding_description">
           {#snippet children({ message })}
-            <a
-              href="https://www.backblaze.com/blog/the-3-2-1-backup-strategy/"
-              class="underline"
-              target="_blank"
-              rel="noreferrer"
-            >
+            <Link href="https://www.backblaze.com/blog/the-3-2-1-backup-strategy/">
               {message}
-            </a>
+            </Link>
           {/snippet}
         </FormatMessage>
       </div>
@@ -37,7 +32,7 @@
       <div class="space-y-6">
         {#each messageKeys as keyString, index (index)}
           <div class="flex items-start gap-6">
-            <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/90 flex items-center justify-center">
+            <div class="shrink-0 w-12 h-12 rounded-full bg-primary/90 flex items-center justify-center">
               <span class="text-light text-xl font-semibold">{3 - index}</span>
             </div>
             <div class="leading-relaxed pt-2">
@@ -52,14 +47,7 @@
       <p>
         <FormatMessage key="admin.backup_onboarding_footer">
           {#snippet children({ message })}
-            <a
-              href="https://docs.immich.app/administration/backup-and-restore/"
-              class="underline"
-              target="_blank"
-              rel="noreferrer"
-            >
-              {message}
-            </a>
+            <Link href="https://docs.immich.app/administration/backup-and-restore/">{message}</Link>
           {/snippet}
         </FormatMessage>
       </p>
diff --git a/web/src/lib/modals/AuthDisableLoginConfirmModal.svelte b/web/src/lib/modals/AuthDisableLoginConfirmModal.svelte
index f12d6cd8a3..d9e215d945 100644
--- a/web/src/lib/modals/AuthDisableLoginConfirmModal.svelte
+++ b/web/src/lib/modals/AuthDisableLoginConfirmModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { ConfirmModal } from '@immich/ui';
+  import { ConfirmModal, Link } from '@immich/ui';
   import { mdiCancel } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -18,14 +18,7 @@
       <p>
         <FormatMessage key="admin.authentication_settings_reenable">
           {#snippet children({ message })}
-            <a
-              href="https://docs.immich.app/administration/server-commands"
-              rel="noreferrer"
-              target="_blank"
-              class="underline"
-            >
-              {message}
-            </a>
+            <Link href="https://docs.immich.app/administration/server-commands">{message}</Link>
           {/snippet}
         </FormatMessage>
       </p>