feat: queue detail page (#24352)

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

@@ -4,6 +4,7 @@ import type {
   AlbumResponseDto,
   LibraryResponseDto,
   LoginResponseDto,
+  QueueResponseDto,
   SharedLinkResponseDto,
   SystemConfigDto,
   UserAdminResponseDto,
@@ -21,6 +22,8 @@ export type Events = {
 
   AlbumDelete: [AlbumResponseDto];
 
+  QueueUpdate: [QueueResponseDto];
+
   SharedLinkCreate: [SharedLinkResponseDto];
   SharedLinkUpdate: [SharedLinkResponseDto];
   SharedLinkDelete: [SharedLinkResponseDto];

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

@@ -0,0 +1,45 @@
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import type { QueueSnapshot } from '$lib/types';
+import { getQueues, type QueueResponseDto } from '@immich/sdk';
+import { DateTime } from 'luxon';
+
+export class QueueManager {
+  #snapshots = $state<QueueSnapshot[]>([]);
+  #queues: QueueResponseDto[] = $derived(this.#snapshots.at(-1)?.snapshot ?? []);
+
+  #interval?: ReturnType<typeof setInterval>;
+  #listenerCount = 0;
+
+  get snapshots() {
+    return this.#snapshots;
+  }
+
+  get queues() {
+    return this.#queues;
+  }
+
+  constructor() {
+    eventManager.on('QueueUpdate', () => void this.refresh());
+  }
+
+  listen() {
+    if (!this.#interval) {
+      this.#interval = setInterval(() => void this.refresh(true), 3000);
+    }
+
+    this.#listenerCount++;
+    void this.refresh();
+
+    return () => this.#listenerCount--;
+  }
+
+  async refresh(tick = false) {
+    this.#snapshots.push({
+      timestamp: DateTime.now().toMillis(),
+      snapshot: this.#listenerCount > 0 || !tick ? await getQueues().catch(() => undefined) : undefined,
+    });
+    this.#snapshots = this.#snapshots.slice(-30);
+  }
+}
+
+export const queueManager = new QueueManager();