refactor: external links (#26880)

This commit is contained in:
Jason Rasmussen
2026-03-12 10:55:33 -04:00
committed by GitHub
parent 3bd37ebbfb
commit d4605b21d9
8 changed files with 26 additions and 82 deletions

View File

@@ -11,7 +11,7 @@
import AuthDisableLoginConfirmModal from '$lib/modals/AuthDisableLoginConfirmModal.svelte'; import AuthDisableLoginConfirmModal from '$lib/modals/AuthDisableLoginConfirmModal.svelte';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { OAuthTokenEndpointAuthMethod, unlinkAllOAuthAccountsAdmin } from '@immich/sdk'; 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 { mdiRestart } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
@@ -75,14 +75,7 @@
<Text size="small"> <Text size="small">
<FormatMessage key="admin.oauth_settings_more_details"> <FormatMessage key="admin.oauth_settings_more_details">
{#snippet children({ message })} {#snippet children({ message })}
<a <Link href="https://docs.immich.app/administration/oauth">{message}</Link>
href="https://docs.immich.app/administration/oauth"
class="underline"
target="_blank"
rel="noreferrer"
>
{message}
</a>
{/snippet} {/snippet}
</FormatMessage> </FormatMessage>
</Text> </Text>

View File

@@ -7,6 +7,7 @@
import FormatMessage from '$lib/elements/FormatMessage.svelte'; import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte'; import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
import { systemConfigManager } from '$lib/managers/system-config-manager.svelte'; import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
import { Link } from '@immich/ui';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
@@ -52,15 +53,10 @@
<p class="text-sm dark:text-immich-dark-fg"> <p class="text-sm dark:text-immich-dark-fg">
<FormatMessage key="admin.cron_expression_description"> <FormatMessage key="admin.cron_expression_description">
{#snippet children({ message })} {#snippet children({ message })}
<a <Link href="https://crontab.guru/#{configToEdit.backup.database.cronExpression.replaceAll(' ', '_')}">
href="https://crontab.guru/#{configToEdit.backup.database.cronExpression.replaceAll(' ', '_')}"
class="underline"
target="_blank"
rel="noreferrer"
>
{message} {message}
<br /> <br />
</a> </Link>
{/snippet} {/snippet}
</FormatMessage> </FormatMessage>
</p> </p>

View File

@@ -18,7 +18,7 @@
VideoCodec, VideoCodec,
VideoContainer, VideoContainer,
} from '@immich/sdk'; } from '@immich/sdk';
import { Icon } from '@immich/ui'; import { Icon, Link } from '@immich/ui';
import { mdiHelpCircleOutline } from '@mdi/js'; import { mdiHelpCircleOutline } from '@mdi/js';
import { isEqual, sortBy } from 'lodash-es'; import { isEqual, sortBy } from 'lodash-es';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@@ -38,17 +38,11 @@
<FormatMessage key="admin.transcoding_codecs_learn_more"> <FormatMessage key="admin.transcoding_codecs_learn_more">
{#snippet children({ tag, message })} {#snippet children({ tag, message })}
{#if tag === 'h264-link'} {#if tag === 'h264-link'}
<a href="https://trac.ffmpeg.org/wiki/Encode/H.264" class="underline" target="_blank" rel="noreferrer"> <Link href="https://trac.ffmpeg.org/wiki/Encode/H.264">{message}</Link>
{message}
</a>
{:else if tag === 'hevc-link'} {:else if tag === 'hevc-link'}
<a href="https://trac.ffmpeg.org/wiki/Encode/H.265" class="underline" target="_blank" rel="noreferrer"> <Link href="https://trac.ffmpeg.org/wiki/Encode/H.265">{message}</Link>
{message}
</a>
{:else if tag === 'vp9-link'} {:else if tag === 'vp9-link'}
<a href="https://trac.ffmpeg.org/wiki/Encode/VP9" class="underline" target="_blank" rel="noreferrer"> <Link href="https://trac.ffmpeg.org/wiki/Encode/VP9">{message}</Link>
{message}
</a>
{/if} {/if}
{/snippet} {/snippet}
</FormatMessage> </FormatMessage>

View File

@@ -8,6 +8,7 @@
import FormatMessage from '$lib/elements/FormatMessage.svelte'; import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte'; import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
import { systemConfigManager } from '$lib/managers/system-config-manager.svelte'; import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
import { Link } from '@immich/ui';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
@@ -73,14 +74,11 @@
<p class="text-sm dark:text-immich-dark-fg"> <p class="text-sm dark:text-immich-dark-fg">
<FormatMessage key="admin.cron_expression_description"> <FormatMessage key="admin.cron_expression_description">
{#snippet children({ message })} {#snippet children({ message })}
<a <Link
href="https://crontab.guru/#{configToEdit.library.scan.cronExpression.replaceAll(' ', '_')}" href="https://crontab.guru/#{configToEdit.library.scan.cronExpression.replaceAll(' ', '_')}"
class="underline"
target="_blank"
rel="noreferrer"
> >
{message} {message}
</a> </Link>
{/snippet} {/snippet}
</FormatMessage> </FormatMessage>
</p> </p>

View File

@@ -7,6 +7,7 @@
import FormatMessage from '$lib/elements/FormatMessage.svelte'; import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte'; import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
import { systemConfigManager } from '$lib/managers/system-config-manager.svelte'; import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
import { Link } from '@immich/ui';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
@@ -54,14 +55,7 @@
<p class="text-sm dark:text-immich-dark-fg"> <p class="text-sm dark:text-immich-dark-fg">
<FormatMessage key="admin.map_manage_reverse_geocoding_settings"> <FormatMessage key="admin.map_manage_reverse_geocoding_settings">
{#snippet children({ message })} {#snippet children({ message })}
<a <Link href="https://docs.immich.app/features/reverse-geocoding">{message}</Link>
href="https://docs.immich.app/features/reverse-geocoding"
class="underline"
target="_blank"
rel="noreferrer"
>
{message}
</a>
{/snippet} {/snippet}
</FormatMessage> </FormatMessage>
</p> </p>

View File

@@ -12,7 +12,7 @@
import { handleSystemConfigSave } from '$lib/services/system-config.service'; import { handleSystemConfigSave } from '$lib/services/system-config.service';
import { user } from '$lib/stores/user.store'; import { user } from '$lib/stores/user.store';
import { getStorageTemplateOptions, type SystemConfigTemplateStorageOptionDto } from '@immich/sdk'; 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 handlebar from 'handlebars';
import * as luxon from 'luxon'; import * as luxon from 'luxon';
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
@@ -112,23 +112,11 @@
<FormatMessage key="admin.storage_template_more_details"> <FormatMessage key="admin.storage_template_more_details">
{#snippet children({ tag, message })} {#snippet children({ tag, message })}
{#if tag === 'template-link'} {#if tag === 'template-link'}
<a <Link href="https://docs.immich.app/administration/storage-template">{message}</Link>
href="https://docs.immich.app/administration/storage-template"
class="underline"
target="_blank"
rel="noreferrer"
>
{message}
</a>
{:else if tag === 'implications-link'} {:else if tag === 'implications-link'}
<a <Link href="https://docs.immich.app/administration/backup-and-restore#asset-types-and-storage-locations">
href="https://docs.immich.app/administration/backup-and-restore#asset-types-and-storage-locations"
class="underline"
target="_blank"
rel="noreferrer"
>
{message} {message}
</a> </Link>
{/if} {/if}
{/snippet} {/snippet}
</FormatMessage> </FormatMessage>

View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import FormatMessage from '$lib/elements/FormatMessage.svelte'; 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 { mdiAlertCircleOutline } from '@mdi/js';
import type { Translations } from 'svelte-i18n'; import type { Translations } from 'svelte-i18n';
@@ -14,18 +14,13 @@
<div class="flex flex-col"> <div class="flex flex-col">
<Stack gap={2}> <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"> <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"> <div class="text-gray-800 dark:text-gray-300 leading-relaxed">
<FormatMessage key="admin.backup_onboarding_description"> <FormatMessage key="admin.backup_onboarding_description">
{#snippet children({ message })} {#snippet children({ message })}
<a <Link href="https://www.backblaze.com/blog/the-3-2-1-backup-strategy/">
href="https://www.backblaze.com/blog/the-3-2-1-backup-strategy/"
class="underline"
target="_blank"
rel="noreferrer"
>
{message} {message}
</a> </Link>
{/snippet} {/snippet}
</FormatMessage> </FormatMessage>
</div> </div>
@@ -37,7 +32,7 @@
<div class="space-y-6"> <div class="space-y-6">
{#each messageKeys as keyString, index (index)} {#each messageKeys as keyString, index (index)}
<div class="flex items-start gap-6"> <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> <span class="text-light text-xl font-semibold">{3 - index}</span>
</div> </div>
<div class="leading-relaxed pt-2"> <div class="leading-relaxed pt-2">
@@ -52,14 +47,7 @@
<p> <p>
<FormatMessage key="admin.backup_onboarding_footer"> <FormatMessage key="admin.backup_onboarding_footer">
{#snippet children({ message })} {#snippet children({ message })}
<a <Link href="https://docs.immich.app/administration/backup-and-restore/">{message}</Link>
href="https://docs.immich.app/administration/backup-and-restore/"
class="underline"
target="_blank"
rel="noreferrer"
>
{message}
</a>
{/snippet} {/snippet}
</FormatMessage> </FormatMessage>
</p> </p>

View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import FormatMessage from '$lib/elements/FormatMessage.svelte'; import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { ConfirmModal } from '@immich/ui'; import { ConfirmModal, Link } from '@immich/ui';
import { mdiCancel } from '@mdi/js'; import { mdiCancel } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@@ -18,14 +18,7 @@
<p> <p>
<FormatMessage key="admin.authentication_settings_reenable"> <FormatMessage key="admin.authentication_settings_reenable">
{#snippet children({ message })} {#snippet children({ message })}
<a <Link href="https://docs.immich.app/administration/server-commands">{message}</Link>
href="https://docs.immich.app/administration/server-commands"
rel="noreferrer"
target="_blank"
class="underline"
>
{message}
</a>
{/snippet} {/snippet}
</FormatMessage> </FormatMessage>
</p> </p>