fix: effect loop (#24014)

web/src/lib/components/shared-components/side-bar/server-status.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import { releaseManager } from '$lib/managers/release-manager.svelte';
   import ServerAboutModal from '$lib/modals/ServerAboutModal.svelte';
   import { user } from '$lib/stores/user.store';
   import { userInteraction } from '$lib/stores/user.svelte';
   import { websocketStore } from '$lib/stores/websocket';
+  import type { ReleaseEvent } from '$lib/types';
   import { semverToName } from '$lib/utils';
   import { requestServerInfo } from '$lib/utils/auth';
   import {
@@ -16,7 +18,7 @@
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
-  const { serverVersion, connected, release } = websocketStore;
+  const { serverVersion, connected } = websocketStore;
 
   let info: ServerAboutResponseDto | undefined = $state();
   let versions: ServerVersionHistoryResponseDto[] = $state([]);
@@ -37,20 +39,22 @@
     $serverVersion ? `v${$serverVersion.major}.${$serverVersion.minor}.${$serverVersion.patch}` : null,
   );
 
-  const releaseInfo = $derived.by(() => {
-    if ($release == undefined || !$release?.isAvailable || !$user.isAdmin) {
+  const getReleaseInfo = (release?: ReleaseEvent) => {
+    if (!release || !release?.isAvailable || !$user.isAdmin) {
       return;
     }
 
-    const availableVersion = semverToName($release.releaseVersion);
-    const serverVersion = semverToName($release.serverVersion);
+    const availableVersion = semverToName(release.releaseVersion);
+    const serverVersion = semverToName(release.serverVersion);
 
     if (serverVersion === availableVersion) {
       return;
     }
 
     return { availableVersion, releaseUrl: `https://github.com/immich-app/immich/releases/tag/${availableVersion}` };
-  });
+  };
+
+  const releaseInfo = $derived(getReleaseInfo(releaseManager.value));
 </script>
 
 <div

web/src/lib/managers/event-manager.svelte.ts

@@ -1,4 +1,5 @@
 import type { ThemeSetting } from '$lib/managers/theme-manager.svelte';
+import type { ReleaseEvent } from '$lib/types';
 import type {
   AlbumResponseDto,
   LibraryResponseDto,
@@ -34,6 +35,8 @@ export type Events = {
   LibraryCreate: [LibraryResponseDto];
   LibraryUpdate: [LibraryResponseDto];
   LibraryDelete: [{ id: string }];
+
+  ReleaseEvent: [ReleaseEvent];
 };
 
 type Listener<EventMap extends Record<string, unknown[]>, K extends keyof EventMap> = (...params: EventMap[K]) => void;

web/src/lib/managers/release-manager.svelte.ts

@@ -0,0 +1,12 @@
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import { type ReleaseEvent } from '$lib/types';
+
+class ReleaseManager {
+  value = $state<ReleaseEvent | undefined>();
+
+  constructor() {
+    eventManager.on('ReleaseEvent', (event) => (this.value = event));
+  }
+}
+
+export const releaseManager = new ReleaseManager();

web/src/lib/stores/websocket.ts

@@ -1,21 +1,15 @@
 import { page } from '$app/state';
 import { AppRoute } from '$lib/constants';
 import { authManager } from '$lib/managers/auth-manager.svelte';
+import { eventManager } from '$lib/managers/event-manager.svelte';
 import { notificationManager } from '$lib/stores/notification-manager.svelte';
+import type { ReleaseEvent } from '$lib/types';
 import { createEventEmitter } from '$lib/utils/eventemitter';
 import { type AssetResponseDto, type NotificationDto, type ServerVersionResponseDto } from '@immich/sdk';
 import { io, type Socket } from 'socket.io-client';
 import { get, writable } from 'svelte/store';
 import { user } from './user.store';
 
-export interface ReleaseEvent {
-  isAvailable: boolean;
-  /** ISO8601 */
-  checkedAt: string;
-  serverVersion: ServerVersionResponseDto;
-  releaseVersion: ServerVersionResponseDto;
-}
-
 interface AppRestartEvent {
   isMaintenanceMode: boolean;
 }
@@ -32,7 +26,7 @@ export interface Events {
   on_person_thumbnail: (personId: string) => void;
   on_server_version: (serverVersion: ServerVersionResponseDto) => void;
   on_config_update: () => void;
-  on_new_release: (newRelease: ReleaseEvent) => void;
+  on_new_release: (event: ReleaseEvent) => void;
   on_session_delete: (sessionId: string) => void;
   on_notification: (notification: NotificationDto) => void;
 
@@ -50,7 +44,6 @@ const websocket: Socket<Events> = io({
 export const websocketStore = {
   connected: writable<boolean>(false),
   serverVersion: writable<ServerVersionResponseDto>(),
-  release: writable<ReleaseEvent>(),
   serverRestarting: writable<undefined | AppRestartEvent>(),
 };
 
@@ -61,7 +54,7 @@ websocket
   .on('disconnect', () => websocketStore.connected.set(false))
   .on('on_server_version', (serverVersion) => websocketStore.serverVersion.set(serverVersion))
   .on('AppRestartV1', (mode) => websocketStore.serverRestarting.set(mode))
-  .on('on_new_release', (releaseVersion) => websocketStore.release.set(releaseVersion))
+  .on('on_new_release', (event) => eventManager.emit('ReleaseEvent', event))
   .on('on_session_delete', () => authManager.logout())
   .on('on_notification', () => notificationManager.refresh())
   .on('connect_error', (e) => console.log('Websocket Connect Error', e));

web/src/lib/types.ts

@@ -1,4 +1,13 @@
+import type { ServerVersionResponseDto } from '@immich/sdk';
 import type { MenuItem } from '@immich/ui';
 import type { HTMLAttributes } from 'svelte/elements';
 
 export type ActionItem = MenuItem & { props?: Omit<HTMLAttributes<HTMLElement>, 'color'> };
+
+export interface ReleaseEvent {
+  isAvailable: boolean;
+  /** ISO8601 */
+  checkedAt: string;
+  serverVersion: ServerVersionResponseDto;
+  releaseVersion: ServerVersionResponseDto;
+}

web/src/routes/+layout.svelte

@@ -4,6 +4,7 @@
   import { shortcut } from '$lib/actions/shortcut';
   import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
   import ErrorLayout from '$lib/components/layouts/ErrorLayout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
   import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
   import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
@@ -11,13 +12,10 @@
   import { eventManager } from '$lib/managers/event-manager.svelte';
   import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
   import ServerRestartingModal from '$lib/modals/ServerRestartingModal.svelte';
+  import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
   import { user } from '$lib/stores/user.store';
-  import {
-    closeWebsocketConnection,
-    openWebsocketConnection,
-    websocketStore,
-    type ReleaseEvent,
-  } from '$lib/stores/websocket';
+  import { closeWebsocketConnection, openWebsocketConnection, websocketStore } from '$lib/stores/websocket';
+  import type { ReleaseEvent } from '$lib/types';
   import { copyToClipboard, getReleaseType, semverToName } from '$lib/utils';
   import { maintenanceShouldRedirect } from '$lib/utils/maintenance';
   import { isAssetViewerRoute } from '$lib/utils/navigation';
@@ -79,15 +77,15 @@
     }
   });
 
-  const { release, serverRestarting } = websocketStore;
+  const { serverRestarting } = websocketStore;
 
-  const handleRelease = (release?: ReleaseEvent) => {
-    if (!release?.isAvailable || !$user.isAdmin) {
+  const onReleaseEvent = async (release: ReleaseEvent) => {
+    if (!release.isAvailable || !$user.isAdmin) {
       return;
     }
 
     const releaseVersion = semverToName(release.releaseVersion);
-    // const serverVersion = semverToName(release.serverVersion);
+    const serverVersion = semverToName(release.serverVersion);
     const type = getReleaseType(release.serverVersion, release.releaseVersion);
 
     if (type === 'none' || type === 'patch' || localStorage.getItem('appVersion') === releaseVersion) {
@@ -95,15 +93,13 @@
     }
 
     try {
-      // await modalManager.show(VersionAnnouncementModal, { serverVersion, releaseVersion });
+      await modalManager.show(VersionAnnouncementModal, { serverVersion, releaseVersion });
       localStorage.setItem('appVersion', releaseVersion);
     } catch (error) {
       console.error('Error [VersionAnnouncementBox]:', error);
     }
   };
 
-  $effect(() => void handleRelease($release));
-
   serverRestarting.subscribe((isRestarting) => {
     if (!isRestarting) {
       return;
@@ -126,6 +122,8 @@
   });
 </script>
 
+<OnEvents {onReleaseEvent} />
+
 <svelte:head>
   <title>{page.data.meta?.title || 'Web'} - Immich</title>
   <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />