chore(web): migration svelte 5 syntax (#13883)

This commit is contained in:
Alex 2024-11-14 08:43:25 -06:00 committed by GitHub
parent 9203a61709
commit 0b3742cf13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
310 changed files with 6435 additions and 4176 deletions

View file

@ -6,18 +6,12 @@
import { t } from 'svelte-i18n';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
let showModal = false;
let showModal = $state(false);
const { release } = websocketStore;
const semverToName = ({ major, minor, patch }: ServerVersionResponseDto) => `v${major}.${minor}.${patch}`;
$: releaseVersion = $release && semverToName($release.releaseVersion);
$: serverVersion = $release && semverToName($release.serverVersion);
$: if ($release?.isAvailable) {
handleRelease();
}
const onAcknowledge = () => {
localStorage.setItem('appVersion', releaseVersion);
showModal = false;
@ -34,21 +28,30 @@
console.error('Error [VersionAnnouncementBox]:', error);
}
};
let releaseVersion = $derived($release && semverToName($release.releaseVersion));
let serverVersion = $derived($release && semverToName($release.serverVersion));
$effect(() => {
if ($release?.isAvailable) {
handleRelease();
}
});
</script>
{#if showModal}
<FullScreenModal title="🎉 {$t('new_version_available')}" onClose={() => (showModal = false)}>
<div>
<FormatMessage key="version_announcement_message" let:tag let:message>
{#if tag === 'link'}
<span class="font-medium underline">
<a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer">
{message}
</a>
</span>
{:else if tag === 'code'}
<code>{message}</code>
{/if}
<FormatMessage key="version_announcement_message">
{#snippet children({ tag, message })}
{#if tag === 'link'}
<span class="font-medium underline">
<a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer">
{message}
</a>
</span>
{:else if tag === 'code'}
<code>{message}</code>
{/if}
{/snippet}
</FormatMessage>
</div>
@ -60,8 +63,8 @@
<code>{$t('latest_version')}: {releaseVersion}</code>
</div>
<svelte:fragment slot="sticky-bottom">
<Button fullwidth on:click={onAcknowledge}>{$t('acknowledge')}</Button>
</svelte:fragment>
{#snippet stickyBottom()}
<Button fullwidth onclick={onAcknowledge}>{$t('acknowledge')}</Button>
{/snippet}
</FullScreenModal>
{/if}