feat(web): event handler component (#23763)

web/src/lib/components/OnEvents.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { eventManager, type Events } from '$lib/managers/event-manager.svelte';
+  import { onMount } from 'svelte';
+
+  type Props = Partial<{
+    [K in keyof Events as `on${K}`]: (...args: Events[K]) => void;
+  }>;
+
+  const props: Props = $props();
+  const unsubscribes: Array<() => void> = [];
+
+  onMount(() => {
+    for (const name of Object.keys(props)) {
+      const event = name.slice(2) as keyof Events;
+      const listener = props[name as keyof Props];
+
+      if (!listener) {
+        continue;
+      }
+
+      const args = [event, listener as (...args: Events[typeof event]) => void] as const;
+
+      eventManager.on(...args);
+      unsubscribes.push(() => eventManager.off(...args));
+    }
+
+    return () => {
+      for (const unsubscribe of unsubscribes) {
+        unsubscribe();
+      }
+    };
+  });
+</script>

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

@@ -30,7 +30,7 @@ class AuthManager {
         globalThis.location.href = redirectUri;
       }
     } finally {
-      eventManager.emit('auth.logout');
+      eventManager.emit('AuthLogout');
     }
   }
 }

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

@@ -1,6 +1,15 @@
 import type { ThemeSetting } from '$lib/managers/theme-manager.svelte';
 import type { LoginResponseDto } from '@immich/sdk';
 
+export type Events = {
+  AppInit: [];
+  UserLogin: [];
+  AuthLogin: [LoginResponseDto];
+  AuthLogout: [];
+  LanguageChange: [{ name: string; code: string; rtl?: boolean }];
+  ThemeChange: [ThemeSetting];
+};
+
 type Listener<EventMap extends Record<string, unknown[]>, K extends keyof EventMap> = (...params: EventMap[K]) => void;
 
 class EventManager<EventMap extends Record<string, unknown[]>> {
@@ -51,11 +60,4 @@ class EventManager<EventMap extends Record<string, unknown[]>> {
   }
 }
 
-export const eventManager = new EventManager<{
-  'app.init': [];
-  'user.login': [];
-  'auth.login': [LoginResponseDto];
-  'auth.logout': [];
-  'language.change': [{ name: string; code: string; rtl?: boolean }];
-  'theme.change': [ThemeSetting];
-}>();
+export const eventManager = new EventManager<Events>();

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

@@ -4,7 +4,7 @@ import { lang } from '$lib/stores/preferences.store';
 
 class LanguageManager {
   constructor() {
-    eventManager.on('app.init', () => lang.subscribe((lang) => this.setLanguage(lang)));
+    eventManager.on('AppInit', () => lang.subscribe((lang) => this.setLanguage(lang)));
   }
 
   rtl = $state(false);
@@ -19,7 +19,7 @@ class LanguageManager {
 
     document.body.setAttribute('dir', item.rtl ? 'rtl' : 'ltr');
 
-    eventManager.emit('language.change', item);
+    eventManager.emit('LanguageChange', item);
   }
 }
 

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

@@ -36,7 +36,7 @@ class ThemeManager {
   isDark = $derived(this.value === Theme.DARK);
 
   constructor() {
-    eventManager.on('app.init', () => this.#onAppInit());
+    eventManager.on('AppInit', () => this.#onAppInit());
   }
 
   setSystem(system: boolean) {
@@ -71,7 +71,7 @@ class ThemeManager {
 
     this.#theme.current = theme;
 
-    eventManager.emit('theme.change', theme);
+    eventManager.emit('ThemeChange', theme);
   }
 }
 

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

@@ -6,7 +6,7 @@ class UploadManager {
   mediaTypes = $state<ServerMediaTypesResponseDto>({ image: [], sidecar: [], video: [] });
 
   constructor() {
-    eventManager.on('app.init', () => void this.#loadExtensions()).on('auth.logout', () => void this.reset());
+    eventManager.on('AppInit', () => void this.#loadExtensions()).on('AuthLogout', () => void this.reset());
   }
 
   reset() {

web/src/lib/stores/folders.svelte.ts

@@ -19,7 +19,7 @@ class FoldersStore {
   private assets = $state<AssetCache>({});
 
   constructor() {
-    eventManager.on('auth.logout', () => this.clearCache());
+    eventManager.on('AuthLogout', () => this.clearCache());
   }
 
   async fetchTree(): Promise<TreeNode> {

web/src/lib/stores/memory.store.svelte.ts

@@ -21,7 +21,7 @@ export type MemoryAsset = MemoryIndex & {
 
 class MemoryStoreSvelte {
   constructor() {
-    eventManager.on('auth.logout', () => this.clearCache());
+    eventManager.on('AuthLogout', () => this.clearCache());
   }
 
   memories = $state<MemoryResponseDto[]>([]);

web/src/lib/stores/notification-manager.svelte.ts

@@ -9,8 +9,8 @@ class NotificationStore {
   notifications = $state<NotificationDto[]>([]);
 
   constructor() {
-    eventManager.on('auth.login', () => handlePromiseError(this.refresh()));
-    eventManager.on('auth.logout', () => this.clear());
+    eventManager.on('AuthLogin', () => handlePromiseError(this.refresh()));
+    eventManager.on('AuthLogout', () => this.clear());
   }
 
   async refresh() {

web/src/lib/stores/search.svelte.ts

@@ -5,7 +5,7 @@ class SearchStore {
   isSearchEnabled = $state(false);
 
   constructor() {
-    eventManager.on('auth.logout', () => this.clearCache());
+    eventManager.on('AuthLogout', () => this.clearCache());
   }
 
   clearCache() {

web/src/lib/stores/user.store.ts

@@ -16,4 +16,4 @@ export const resetSavedUser = () => {
   purchaseStore.setPurchaseStatus(false);
 };
 
-eventManager.on('auth.logout', () => resetSavedUser());
+eventManager.on('AuthLogout', () => resetSavedUser());

web/src/lib/stores/user.svelte.ts

@@ -26,4 +26,4 @@ const reset = () => {
   Object.assign(userInteraction, defaultUserInteraction);
 };
 
-eventManager.on('auth.logout', () => reset());
+eventManager.on('AuthLogout', () => reset());

web/src/routes/+layout.svelte

@@ -58,7 +58,7 @@
     // if the browser theme changes, changes the Immich theme too
   });
 
-  eventManager.emit('app.init');
+  eventManager.emit('AppInit');
 
   beforeNavigate(({ from, to }) => {
     if (isAssetViewerRoute(from) && isAssetViewerRoute(to)) {

web/src/routes/auth/login/+page.svelte

@@ -27,7 +27,7 @@
 
   const onSuccess = async (user: LoginResponseDto) => {
     await goto(data.continueUrl, { invalidateAll: true });
-    eventManager.emit('auth.login', user);
+    eventManager.emit('AuthLogin', user);
   };
 
   const onFirstLogin = () => goto(AppRoute.AUTH_CHANGE_PASSWORD);