fix(web): asset selection on memories page is broken (#16759)

* 16712: Proper intialisation of the memory store to avoid loading up duplicate object refs of the same asset.

* 16712: Add auth to memory mapping so isFavorite is actually return correctly from the server.

* 16712: Move logic that belongs in the store into the store.

* 16712: Cleanup.

* 16712: Fix init behaviour.

* 16712: Add comment.

* 16712: Make method private.

* 16712: Fix import.

* 16712: Fix format.

* 16712: Cleaner if/else and fix typo.

* fix: icon size mismatch

* 16712: Fixed up state machine managing memory playback:
* Updated to `Tween` (`tweened` was deprecated)
* Removed `resetPromise`. Setting progressController to 0 had the same effect, so not really sure why it was there?
* Removed the many duplicate places the `handleAction` method was called. Now we just called it on `afterNavigate` as well as when `galleryInView` or `$isViewing` state changes.

* 16712: Add aria tag.

* 16712: Fix memory player duplicate invocation bugs. Now we should only call 'reset' and 'play' once, after navigate/page load. This should hopefully fix all the various bugs around playback.

* 16712: Cleanup

* 16712: Cleanup

* 16712: Cleanup

* 16712: Cleanup

---------

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

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

@@ -0,0 +1,119 @@
+import { asLocalTimeISO } from '$lib/utils/date-time';
+import {
+  type AssetResponseDto,
+  deleteMemory,
+  type MemoryResponseDto,
+  removeMemoryAssets,
+  searchMemories,
+  updateMemory,
+} from '@immich/sdk';
+import { DateTime } from 'luxon';
+
+type MemoryIndex = {
+  memoryIndex: number;
+  assetIndex: number;
+};
+
+export type MemoryAsset = MemoryIndex & {
+  memory: MemoryResponseDto;
+  asset: AssetResponseDto;
+  previousMemory?: MemoryResponseDto;
+  previous?: MemoryAsset;
+  next?: MemoryAsset;
+  nextMemory?: MemoryResponseDto;
+};
+
+class MemoryStoreSvelte {
+  memories = $state<MemoryResponseDto[]>([]);
+  private initialized = false;
+  private memoryAssets = $derived.by(() => {
+    const memoryAssets: MemoryAsset[] = [];
+    let previous: MemoryAsset | undefined;
+    for (const [memoryIndex, memory] of this.memories.entries()) {
+      for (const [assetIndex, asset] of memory.assets.entries()) {
+        const current = {
+          memory,
+          memoryIndex,
+          previousMemory: this.memories[memoryIndex - 1],
+          nextMemory: this.memories[memoryIndex + 1],
+          asset,
+          assetIndex,
+          previous,
+        };
+
+        memoryAssets.push(current);
+
+        if (previous) {
+          previous.next = current;
+        }
+
+        previous = current;
+      }
+    }
+
+    return memoryAssets;
+  });
+
+  getMemoryAsset(assetId: string | undefined) {
+    return this.memoryAssets.find((memoryAsset) => memoryAsset.asset.id === assetId) ?? this.memoryAssets[0];
+  }
+
+  hideAssetsFromMemory(ids: string[]) {
+    const idSet = new Set<string>(ids);
+    for (const memory of this.memories) {
+      memory.assets = memory.assets.filter((asset) => !idSet.has(asset.id));
+    }
+    // if we removed all assets from a memory, then lets remove those memories (we don't show memories with 0 assets)
+    this.memories = this.memories.filter((memory) => memory.assets.length > 0);
+  }
+
+  async deleteMemory(id: string) {
+    const memory = this.memories.find((memory) => memory.id === id);
+    if (memory) {
+      await deleteMemory({ id: memory.id });
+      this.memories = this.memories.filter((memory) => memory.id !== id);
+    }
+  }
+
+  async deleteAssetFromMemory(assetId: string) {
+    const memoryWithAsset = this.memories.find((memory) => memory.assets.some((asset) => asset.id === assetId));
+
+    if (memoryWithAsset) {
+      if (memoryWithAsset.assets.length === 1) {
+        await this.deleteMemory(memoryWithAsset.id);
+      } else {
+        await removeMemoryAssets({ id: memoryWithAsset.id, bulkIdsDto: { ids: [assetId] } });
+        memoryWithAsset.assets = memoryWithAsset.assets.filter((asset) => asset.id !== assetId);
+      }
+    }
+  }
+
+  async updateMemorySaved(id: string, isSaved: boolean) {
+    const memory = this.memories.find((memory) => memory.id === id);
+    if (memory) {
+      await updateMemory({
+        id,
+        memoryUpdateDto: {
+          isSaved,
+        },
+      });
+      memory.isSaved = isSaved;
+    }
+  }
+
+  async initialize() {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
+
+    await this.loadAllMemories();
+  }
+
+  private async loadAllMemories() {
+    const memories = await searchMemories({ $for: asLocalTimeISO(DateTime.now()) });
+    this.memories = memories.filter((memory) => memory.assets.length > 0);
+  }
+}
+
+export const memoryStore = new MemoryStoreSvelte();