chore: migrate version announcement modal (#19381)

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

@@ -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}

web/src/lib/modals/VersionAnnouncementModal.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import FormatMessage from '$lib/components/i18n/format-message.svelte';
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    serverVersion: string;
+    releaseVersion: string;
+    onClose: () => void;
+  };
+
+  const { serverVersion, releaseVersion, onClose }: Props = $props();
+</script>
+
+<Modal size="small" title="🎉 {$t('new_version_available')}" {onClose} 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={onClose}>{$t('acknowledge')}</Button>
+  </ModalFooter>
+</Modal>

web/src/routes/+layout.svelte

@@ -8,13 +8,20 @@
   import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
   import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
   import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
-  import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
   import { serverConfig } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
-  import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
+  import {
+    closeWebsocketConnection,
+    openWebsocketConnection,
+    websocketStore,
+    type ReleaseEvent,
+  } from '$lib/stores/websocket';
   import { copyToClipboard } from '$lib/utils';
   import { isAssetViewerRoute } from '$lib/utils/navigation';
+  import type { ServerVersionResponseDto } from '@immich/sdk';
   import { setTranslations } from '@immich/ui';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -66,6 +73,32 @@
       closeWebsocketConnection();
     }
   });
+
+  const semverToName = ({ major, minor, patch }: ServerVersionResponseDto) => `v${major}.${minor}.${patch}`;
+  const { release } = websocketStore;
+
+  const handleRelease = async (release: ReleaseEvent) => {
+    if (!release.isAvailable || !$user.isAdmin) {
+      return;
+    }
+
+    const releaseVersion = semverToName(release.releaseVersion);
+    const serverVersion = semverToName(release.serverVersion);
+
+    if (localStorage.getItem('appVersion') === releaseVersion) {
+      return;
+    }
+
+    try {
+      await modalManager.show(VersionAnnouncementModal, { serverVersion, releaseVersion });
+
+      localStorage.setItem('appVersion', releaseVersion);
+    } catch (error) {
+      console.error('Error [VersionAnnouncementBox]:', error);
+    }
+  };
+
+  $effect(() => void handleRelease($release));
 </script>
 
 <svelte:head>
@@ -121,7 +154,3 @@
 <DownloadPanel />
 <UploadPanel />
 <NotificationList />
-
-{#if $user?.isAdmin}
-  <VersionAnnouncementBox />
-{/if}