refactor: external links (#26880)

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>

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>

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>

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>

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>

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>