[pull] main from immich-app:main

web/package.json

@@ -27,7 +27,7 @@
     "@formatjs/icu-messageformat-parser": "^3.0.0",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.53.3",
+    "@immich/ui": "^0.54.0",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -270,7 +270,7 @@
   };
 
   afterNavigate(({ from, to }) => {
-    memoryStore.initialize().then(
+    memoryStore.ready().then(
       () => {
         let target = null;
         if (to?.params?.assetId) {

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

@@ -15,9 +15,11 @@ import type {
 
 export type Events = {
   AppInit: [];
-  UserLogin: [];
+
   AuthLogin: [LoginResponseDto];
   AuthLogout: [];
+  AuthUserLoaded: [UserAdminResponseDto];
+
   LanguageChange: [{ name: string; code: string; rtl?: boolean }];
   ThemeChange: [ThemeSetting];
 

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

@@ -20,12 +20,18 @@ export type MemoryAsset = MemoryIndex & {
 };
 
 class MemoryStoreSvelte {
+  #loading: Promise<void> | undefined;
+
   constructor() {
     eventManager.on('AuthLogout', () => this.clearCache());
+    eventManager.on('AuthUserLoaded', () => void this.initialize());
+  }
+
+  ready() {
+    return this.initialize();
   }
 
   memories = $state<MemoryResponseDto[]>([]);
-  private initialized = false;
   private memoryAssets = $derived.by(() => {
     const memoryAssets: MemoryAsset[] = [];
     let previous: MemoryAsset | undefined;
@@ -101,21 +107,20 @@ class MemoryStoreSvelte {
     }
   }
 
-  async initialize() {
-    if (this.initialized) {
-      return;
-    }
-    this.initialized = true;
-
-    await this.loadAllMemories();
+  private clearCache() {
+    this.#loading = undefined;
+    this.memories = [];
   }
 
-  clearCache() {
-    this.initialized = false;
-    this.memories = [];
+  private initialize() {
+    if (!this.#loading) {
+      this.#loading = this.load();
+    }
+
+    return this.#loading;
   }
 
-  private async loadAllMemories() {
+  private async load() {
     const memories = await searchMemories({ $for: asLocalTimeISO(DateTime.now()) });
     this.memories = memories.filter((memory) => memory.assets.length > 0);
   }

web/src/lib/utils/auth.ts

@@ -1,4 +1,5 @@
 import { browser } from '$app/environment';
+import { eventManager } from '$lib/managers/event-manager.svelte';
 import { purchaseStore } from '$lib/stores/purchase.store';
 import { preferences as preferences$, user as user$ } from '$lib/stores/user.store';
 import { userInteraction } from '$lib/stores/user.svelte';
@@ -24,6 +25,8 @@ export const loadUser = async () => {
       user$.set(user);
       preferences$.set(preferences);
 
+      eventManager.emit('AuthUserLoaded', user);
+
       // Check for license status
       if (serverInfo.licensed || user.license?.activatedAt) {
         purchaseStore.setPurchaseStatus(true);

web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { beforeNavigate } from '$app/navigation';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import MemoryLane from '$lib/components/photos-page/memory-lane.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
@@ -21,23 +20,26 @@
   import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '$lib/components/timeline/Timeline.svelte';
-  import { AssetAction } from '$lib/constants';
+  import { AppRoute, AssetAction, QueryParameter } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
+  import { memoryStore } from '$lib/stores/memory.store.svelte';
   import { preferences, user } from '$lib/stores/user.store';
+  import { getAssetThumbnailUrl, memoryLaneTitle } from '$lib/utils';
   import {
     updateStackedAssetInTimeline,
     updateUnstackedAssetInTimeline,
     type OnLink,
     type OnUnlink,
   } from '$lib/utils/actions';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
+  import { getAltText } from '$lib/utils/thumbnail-util';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { AssetVisibility } from '@immich/sdk';
-
+  import { ImageCarousel } from '@immich/ui';
   import { mdiDotsVertical, mdiPlus } from '@mdi/js';
-
   import { t } from 'svelte-i18n';
 
   let { isViewing: showAssetViewer } = assetViewingStore;
@@ -85,6 +87,16 @@
   beforeNavigate(() => {
     isFaceEditMode.value = false;
   });
+
+  const items = $derived(
+    memoryStore.memories.map((memory) => ({
+      id: memory.id,
+      title: $memoryLaneTitle(memory),
+      href: `${AppRoute.MEMORY}?${QueryParameter.ID}=${memory.assets[0].id}`,
+      alt: $t('memory_lane_title', { values: { title: $getAltText(toTimelineAsset(memory.assets[0])) } }),
+      src: getAssetThumbnailUrl(memory.assets[0].id),
+    })),
+  );
 </script>
 
 <UserPageLayout hideNavbar={assetInteraction.selectionActive} showUploadButton scrollbar={false}>
@@ -98,7 +110,7 @@
     withStacked
   >
     {#if $preferences.memories.enabled}
-      <MemoryLane />
+      <ImageCarousel {items} />
     {/if}
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} class="mt-10 mx-auto" />

web/src/routes/+layout.svelte

@@ -49,6 +49,8 @@
       toast_info_title: $t('info'),
       toast_warning_title: $t('warning'),
       toast_danger_title: $t('error'),
+      navigate_next: $t('next'),
+      navigate_previous: $t('previous'),
     });
   });