feat: notifications (#17701)

* feat: notifications

* UI works

* chore: pr feedback

* initial fetch and clear notification upon logging out

* fix: merge

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -0,0 +1,38 @@
+import { eventManager } from '$lib/stores/event-manager.svelte';
+import { getNotifications, updateNotification, updateNotifications, type NotificationDto } from '@immich/sdk';
+
+class NotificationStore {
+  notifications = $state<NotificationDto[]>([]);
+
+  constructor() {
+    // TODO replace this with an `auth.login` event
+    this.refresh().catch(() => {});
+
+    eventManager.on('auth.logout', () => this.clear());
+  }
+
+  get hasUnread() {
+    return this.notifications.length > 0;
+  }
+
+  refresh = async () => {
+    this.notifications = await getNotifications({ unread: true });
+  };
+
+  markAsRead = async (id: string) => {
+    this.notifications = this.notifications.filter((notification) => notification.id !== id);
+    await updateNotification({ id, notificationUpdateDto: { readAt: new Date().toISOString() } });
+  };
+
+  markAllAsRead = async () => {
+    const ids = this.notifications.map(({ id }) => id);
+    this.notifications = [];
+    await updateNotifications({ notificationUpdateAllDto: { ids, readAt: new Date().toISOString() } });
+  };
+
+  clear = () => {
+    this.notifications = [];
+  };
+}
+
+export const notificationManager = new NotificationStore();

web/src/lib/stores/websocket.ts

@@ -1,6 +1,7 @@
 import { authManager } from '$lib/stores/auth-manager.svelte';
+import { notificationManager } from '$lib/stores/notification-manager.svelte';
 import { createEventEmitter } from '$lib/utils/eventemitter';
-import type { AssetResponseDto, ServerVersionResponseDto } from '@immich/sdk';
+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';
@@ -26,6 +27,7 @@ export interface Events {
   on_config_update: () => void;
   on_new_release: (newRelase: ReleaseEvent) => void;
   on_session_delete: (sessionId: string) => void;
+  on_notification: (notification: NotificationDto) => void;
 }
 
 const websocket: Socket<Events> = io({
@@ -50,6 +52,7 @@ websocket
   .on('on_server_version', (serverVersion) => websocketStore.serverVersion.set(serverVersion))
   .on('on_new_release', (releaseVersion) => websocketStore.release.set(releaseVersion))
   .on('on_session_delete', () => authManager.logout())
+  .on('on_notification', () => notificationManager.refresh())
   .on('connect_error', (e) => console.log('Websocket Connect Error', e));
 
 export const openWebsocketConnection = () => {