helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: migrate version announcement modal (#19381)

Browse source
This commit is contained in:
Daniel Dietzler 2025-06-23 04:56:41 +02:00 • committed by GitHub
parent c705a7b280
commit ecc58a8971
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 79 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

75
web/src/lib/components/shared-components/version-announcement-box.svelte
View file

@ -1,75 +0,0 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import { websocketStore } from '$lib/stores/websocket';
import type { ServerVersionResponseDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { t } from 'svelte-i18n';
let showModal = $state(false);
const { release } = websocketStore;
const semverToName = ({ major, minor, patch }: ServerVersionResponseDto) => `v${major}.${minor}.${patch}`;
const onAcknowledge = () => {
localStorage.setItem('appVersion', releaseVersion);
sessionStorage.setItem('modalAcknowledged', 'true');
showModal = false;
};
const handleRelease = () => {
try {
if (localStorage.getItem('appVersion') === releaseVersion) {
return;
}
showModal = true;
} catch (error) {
console.error('Error [VersionAnnouncementBox]:', error);
}
};
let releaseVersion = $derived($release && semverToName($release.releaseVersion));
let serverVersion = $derived($release && semverToName($release.serverVersion));
$effect(() => {
if ($release?.isAvailable && !sessionStorage.getItem('modalAcknowledged')) {
handleRelease();
}
});
</script>
{#if showModal}
<Modal size="small" title="🎉 {$t('new_version_available')}" onClose={() => (showModal = false)} icon={false}>
<ModalBody>
<div>
<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>
<div class="mt-4 font-medium">{$t('version_announcement_closing')}</div>
<div class="font-sm mt-8">
<code>{$t('server_version')}: {serverVersion}</code>
<br />
<code>{$t('latest_version')}: {releaseVersion}</code>
</div>
</ModalBody>
<ModalFooter>
<Button fullWidth shape="round" onclick={onAcknowledge}>{$t('acknowledge')}</Button>
</ModalFooter>
</Modal>
{/if}