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

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() {