Merge branch 'main' into feat/memories-view

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

i18n/en.json

@@ -1300,7 +1300,6 @@
   "hide_schema": "Hide schema",
   "hide_text_recognition": "Hide text recognition",
   "hide_unnamed_people": "Hide unnamed people",
-  "hold_key_to_pan": "Hold {key} to pan",
   "home_page_add_to_album_conflicts": "Added {added} assets to album {album}. {failed} assets are already in the album.",
   "home_page_add_to_album_err_local": "Can not add local assets to albums yet, skipping",
   "home_page_add_to_album_success": "Added {added} assets to album {album}.",

mise.lock

@@ -1,30 +1,30 @@
 # @generated - this file is auto-generated by `mise lock` https://mise.en.dev/dev-tools/mise-lock.html
 
 [[tools."aqua:flutter/flutter"]]
-version = "3.44.0"
+version = "3.44.1"
 backend = "aqua:flutter/flutter"
 
 [tools."aqua:flutter/flutter"."platforms.linux-arm64"]
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.0-stable.tar.xz"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.1-stable.tar.xz"
 
 [tools."aqua:flutter/flutter"."platforms.linux-arm64-musl"]
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.0-stable.tar.xz"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.1-stable.tar.xz"
 
 [tools."aqua:flutter/flutter"."platforms.linux-x64"]
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.0-stable.tar.xz"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.1-stable.tar.xz"
 
 [tools."aqua:flutter/flutter"."platforms.linux-x64-musl"]
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.0-stable.tar.xz"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.1-stable.tar.xz"
 
 [tools."aqua:flutter/flutter"."platforms.macos-arm64"]
-checksum = "blake3:fb03aa5d9790205c948922ec3f0751c16e4575b09d6ae9dd4fbeb664a69f0e00"
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.44.0-stable.zip"
+checksum = "blake3:15069c982a30ca0189a83edb5627b69d91485ad94fb74d2de8585b43364e9e8e"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.44.1-stable.zip"
 
 [tools."aqua:flutter/flutter"."platforms.macos-x64"]
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_3.44.0-stable.zip"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_3.44.1-stable.zip"
 
 [tools."aqua:flutter/flutter"."platforms.windows-x64"]
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutter_windows_3.44.0-stable.zip"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutter_windows_3.44.1-stable.zip"
 
 [[tools.flutter]]
 version = "3.41.9-stable"

mise.toml

@@ -16,7 +16,7 @@ config_roots = [
 
 [tools]
 node = "24.15.0"
-"aqua:flutter/flutter" = "3.44.0"
+"aqua:flutter/flutter" = "3.44.1"
 pnpm = "10.33.4"
 terragrunt = "1.0.3"
 opentofu = "1.11.6"

mobile/lib/domain/services/memory.service.dart

@@ -13,6 +13,10 @@ class DriftMemoryService {
     return _repository.getAll(ownerId);
   }
 
+  Future<List<DriftMemory>> getAllMemories(String ownerId) {
+    return _repository.getAll(ownerId, onlyToday: false);
+  }
+
   Future<DriftMemory?> get(String memoryId) {
     return _repository.get(memoryId);
   }

mobile/lib/infrastructure/repositories/memory.repository.dart

@@ -9,10 +9,7 @@ class DriftMemoryRepository extends DriftDatabaseRepository {
   final Drift _db;
   const DriftMemoryRepository(this._db) : super(_db);
 
-  Future<List<DriftMemory>> getAll(String ownerId) async {
-    final now = DateTime.now();
-    final localUtc = DateTime.utc(now.year, now.month, now.day, 0, 0, 0);
-
+  Future<List<DriftMemory>> getAll(String ownerId, {bool onlyToday = true}) async {
     final query =
         _db.select(_db.memoryEntity).join([
             innerJoin(_db.memoryAssetEntity, _db.memoryAssetEntity.memoryId.equalsExp(_db.memoryEntity.id)),
@@ -24,10 +21,17 @@ class DriftMemoryRepository extends DriftDatabaseRepository {
             ),
           ])
           ..where(_db.memoryEntity.ownerId.equals(ownerId))
-          ..where(_db.memoryEntity.deletedAt.isNull())
-          ..where(_db.memoryEntity.showAt.isSmallerOrEqualValue(localUtc))
-          ..where(_db.memoryEntity.hideAt.isBiggerOrEqualValue(localUtc))
-          ..orderBy([OrderingTerm.desc(_db.memoryEntity.memoryAt), OrderingTerm.asc(_db.remoteAssetEntity.createdAt)]);
+          ..where(_db.memoryEntity.deletedAt.isNull());
+
+    if (onlyToday) {
+      final now = DateTime.now();
+      final localUtc = DateTime.utc(now.year, now.month, now.day, 0, 0, 0);
+
+      query.where(_db.memoryEntity.showAt.isSmallerOrEqualValue(localUtc));
+      query.where(_db.memoryEntity.hideAt.isBiggerOrEqualValue(localUtc));
+    }
+
+    query.orderBy([OrderingTerm.desc(_db.memoryEntity.memoryAt), OrderingTerm.asc(_db.remoteAssetEntity.createdAt)]);
 
     final rows = await query.get();
     if (rows.isEmpty) {

mobile/lib/pages/common/tab_shell.page.dart

@@ -112,7 +112,7 @@ void _onNavigationSelected(TabsRouter router, int index, WidgetRef ref) {
   }
 
   if (index == kPhotoTabIndex) {
-    ref.invalidate(driftMemoryFutureProvider);
+    ref.invalidate(driftMemoryLaneProvider);
   }
 
   if (router.activeIndex != kSearchTabIndex && index == kSearchTabIndex) {

mobile/lib/presentation/pages/dev/main_timeline.page.dart

@@ -11,7 +11,7 @@ class MainTimelinePage extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final hasMemories = ref.watch(driftMemoryFutureProvider.select((state) => state.value?.isNotEmpty ?? false));
+    final hasMemories = ref.watch(driftMemoryLaneProvider.select((state) => state.value?.isNotEmpty ?? false));
     return Timeline(
       topSliverWidget: const SliverToBoxAdapter(child: DriftMemoryLane()),
       topSliverWidgetHeight: hasMemories ? 200 : 0,

mobile/lib/presentation/pages/drift_library.page.dart

@@ -7,8 +7,10 @@ import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/images/local_album_thumbnail.widget.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/presentation/widgets/people/partner_user_avatar.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/memory.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/partner.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
@@ -133,7 +135,12 @@ class _CollectionCards extends StatelessWidget {
         child: Wrap(
           spacing: 8,
           runSpacing: 8,
-          children: [_PeopleCollectionCard(), _PlacesCollectionCard(), _LocalAlbumsCollectionCard()],
+          children: [
+            _PeopleCollectionCard(),
+            _PlacesCollectionCard(),
+            _LocalAlbumsCollectionCard(),
+            _MemoriesCollectionCard(),
+          ],
         ),
       ),
     );
@@ -327,6 +334,76 @@ class _LocalAlbumsCollectionCard extends ConsumerWidget {
   }
 }
 
+class _MemoriesCollectionCard extends ConsumerWidget {
+  const _MemoriesCollectionCard();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final memories = ref.watch(driftAllMemoriesProvider);
+
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final isTablet = constraints.maxWidth > 600;
+        final widthFactor = isTablet ? 0.25 : 0.5;
+        final size = context.width * widthFactor - 20.0;
+
+        return GestureDetector(
+          onTap: () => context.pushRoute(const DriftMemoryListRoute()),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Container(
+                height: size,
+                width: size,
+                decoration: BoxDecoration(
+                  borderRadius: const BorderRadius.all(Radius.circular(20)),
+                  gradient: LinearGradient(
+                    colors: [context.colorScheme.primary.withAlpha(30), context.colorScheme.primary.withAlpha(25)],
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                  ),
+                ),
+                child: memories.widgetWhen(
+                  onLoading: () => const Center(child: CircularProgressIndicator()),
+                  onData: (memories) {
+                    return GridView.count(
+                      crossAxisCount: 2,
+                      padding: const EdgeInsets.all(12),
+                      crossAxisSpacing: 8,
+                      mainAxisSpacing: 8,
+                      physics: const NeverScrollableScrollPhysics(),
+                      children: memories.take(4).map((memory) {
+                        return ClipRRect(
+                          borderRadius: const BorderRadius.all(Radius.circular(10)),
+                          child: Thumbnail.remote(
+                            remoteId: memory.assets[0].id,
+                            thumbhash: memory.assets[0].thumbHash ?? "",
+                            fit: BoxFit.cover,
+                          ),
+                        );
+                      }).toList(),
+                    );
+                  },
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: Text(
+                  'memories'.t(context: context),
+                  style: context.textTheme.titleSmall?.copyWith(
+                    color: context.colorScheme.onSurface,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
+
 class _QuickAccessButtonList extends ConsumerWidget {
   const _QuickAccessButtonList();
 

mobile/lib/presentation/pages/drift_memory_list.page.dart

@@ -0,0 +1,104 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/presentation/pages/drift_memory.page.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/memory.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+@RoutePage()
+class DriftMemoryListPage extends ConsumerStatefulWidget {
+  const DriftMemoryListPage({super.key});
+
+  @override
+  ConsumerState<DriftMemoryListPage> createState() => _DriftMemoryListPageState();
+}
+
+class _DriftMemoryListPageState extends ConsumerState<DriftMemoryListPage> {
+  bool _onlyFavorites = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final memories = ref.watch(driftAllMemoriesProvider);
+
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        return Scaffold(
+          appBar: AppBar(
+            title: Text('memories'.tr()),
+            actions: [
+              IconButton(
+                icon: Icon(_onlyFavorites ? Icons.favorite : Icons.favorite_outline),
+                onPressed: () {
+                  setState(() => _onlyFavorites = !_onlyFavorites);
+                },
+              ),
+            ],
+          ),
+          body: SafeArea(
+            child: memories.when(
+              data: (memories) {
+                if (_onlyFavorites) {
+                  memories = memories.where((memory) => memory.isSaved).toList();
+                }
+
+                return GridView.builder(
+                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                    crossAxisCount: constraints.maxWidth > 600 ? 4 : 2,
+                    childAspectRatio: 0.5625,
+                    mainAxisSpacing: 16,
+                    crossAxisSpacing: 16,
+                  ),
+                  padding: const EdgeInsets.all(16),
+                  itemCount: memories.length,
+                  itemBuilder: (context, index) => GestureDetector(
+                    onTap: () {
+                      if (memories[index].assets.isNotEmpty) {
+                        DriftMemoryPage.setMemory(ref, memories[index]);
+                      }
+                      context.pushRoute(DriftMemoryRoute(memories: memories, memoryIndex: index));
+                    },
+                    child: Stack(
+                      children: [
+                        ClipRRect(
+                          borderRadius: const BorderRadius.all(Radius.circular(10)),
+                          child: ColorFiltered(
+                            colorFilter: ColorFilter.mode(Colors.black.withValues(alpha: 0.2), BlendMode.darken),
+                            child: AbsorbPointer(
+                              child: Thumbnail.remote(
+                                remoteId: memories[index].assets[0].id,
+                                thumbhash: memories[index].assets[0].thumbHash ?? "",
+                                fit: BoxFit.cover,
+                              ),
+                            ),
+                          ),
+                        ),
+                        Positioned(
+                          bottom: 16,
+                          left: 16,
+                          child: Text(
+                            DateFormat.yMMMMd().format(memories[index].memoryAt),
+                            style: const TextStyle(fontWeight: FontWeight.w600, color: Colors.white, fontSize: 15),
+                          ),
+                        ),
+                        if (memories[index].isSaved)
+                          const Positioned(
+                            top: 16,
+                            right: 16,
+                            child: Icon(Icons.favorite, color: Colors.white, size: 24),
+                          ),
+                      ],
+                    ),
+                  ),
+                );
+              },
+              error: (error, stack) => const Text("Error loading memories"),
+              loading: () => const Center(child: CircularProgressIndicator()),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

mobile/lib/presentation/widgets/memory/memory_lane.widget.dart

@@ -14,7 +14,7 @@ class DriftMemoryLane extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final memoryLaneProvider = ref.watch(driftMemoryFutureProvider);
+    final memoryLaneProvider = ref.watch(driftMemoryLaneProvider);
     final memories = memoryLaneProvider.value ?? const [];
     if (memories.isEmpty) {
       return const SizedBox.shrink();

mobile/lib/providers/infrastructure/memory.provider.dart

@@ -13,7 +13,7 @@ final driftMemoryServiceProvider = Provider<DriftMemoryService>(
   (ref) => DriftMemoryService(ref.watch(driftMemoryRepositoryProvider)),
 );
 
-final driftMemoryFutureProvider = FutureProvider.autoDispose<List<DriftMemory>>((ref) {
+final driftMemoryLaneProvider = FutureProvider.autoDispose<List<DriftMemory>>((ref) {
   final (userId, enabled) = ref.watch(currentUserProvider.select((user) => (user?.id, user?.memoryEnabled ?? true)));
   if (userId == null || !enabled) {
     return const [];
@@ -22,3 +22,13 @@ final driftMemoryFutureProvider = FutureProvider.autoDispose<List<DriftMemory>>(
   final service = ref.watch(driftMemoryServiceProvider);
   return service.getMemoryLane(userId);
 });
+
+final driftAllMemoriesProvider = FutureProvider.autoDispose<List<DriftMemory>>((ref) {
+  final (userId, enabled) = ref.watch(currentUserProvider.select((user) => (user?.id, user?.memoryEnabled ?? true)));
+  if (userId == null || !enabled) {
+    return const [];
+  }
+
+  final service = ref.watch(driftMemoryServiceProvider);
+  return service.getAllMemories(userId);
+});

mobile/lib/routing/router.dart

@@ -52,6 +52,7 @@ import 'package:immich_mobile/presentation/pages/drift_local_album.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_locked_folder.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_map.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_memory.page.dart';
+import 'package:immich_mobile/presentation/pages/drift_memory_list.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_partner_detail.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_people_collection.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_person.page.dart';
@@ -191,6 +192,7 @@ class AppRouter extends RootStackRouter {
     AutoRoute(page: DownloadInfoRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: CleanupPreviewRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: DriftSlideshowRoute.page, guards: [_authGuard, _duplicateGuard]),
+    AutoRoute(page: DriftMemoryListRoute.page, guards: [_authGuard, _duplicateGuard]),
     // required to handle all deeplinks in deep_link.service.dart
     // auto_route_library#1722
     RedirectRoute(path: '*', redirectTo: '/'),

mobile/lib/routing/router.gr.dart

@@ -754,6 +754,22 @@ class DriftMapRouteArgs {
   int get hashCode => key.hashCode ^ initialLocation.hashCode;
 }
 
+/// generated route for
+/// [DriftMemoryListPage]
+class DriftMemoryListRoute extends PageRouteInfo<void> {
+  const DriftMemoryListRoute({List<PageRouteInfo>? children})
+    : super(DriftMemoryListRoute.name, initialChildren: children);
+
+  static const String name = 'DriftMemoryListRoute';
+
+  static PageInfo page = PageInfo(
+    name,
+    builder: (data) {
+      return const DriftMemoryListPage();
+    },
+  );
+}
+
 /// generated route for
 /// [DriftMemoryPage]
 class DriftMemoryRoute extends PageRouteInfo<DriftMemoryRouteArgs> {

mobile/lib/utils/openapi_patching.dart

@@ -19,6 +19,7 @@ dynamic upgradeDto(dynamic value, String targetType) {
       if (value is Map) {
         addDefault(value, 'mapLightStyleUrl', 'https://tiles.immich.cloud/v1/style/light.json');
         addDefault(value, 'mapDarkStyleUrl', 'https://tiles.immich.cloud/v1/style/dark.json');
+        addDefault(value, 'minFaces', 3);
       }
     case 'UserResponseDto':
       if (value is Map) {
@@ -54,6 +55,7 @@ dynamic upgradeDto(dynamic value, String targetType) {
     case 'ServerFeaturesDto':
       if (value is Map) {
         addDefault(value, 'ocr', false);
+        addDefault(value, 'realtimeTranscoding', false);
       }
       break;
     case 'MemoriesResponse':

mobile/openapi/README.md

@@ -454,6 +454,7 @@ Class | Method | HTTP request | Description
  - [MemoryCreateDto](doc//MemoryCreateDto.md)
  - [MemoryResponseDto](doc//MemoryResponseDto.md)
  - [MemorySearchOrder](doc//MemorySearchOrder.md)
+ - [MemorySearchResponseDto](doc//MemorySearchResponseDto.md)
  - [MemoryStatisticsResponseDto](doc//MemoryStatisticsResponseDto.md)
  - [MemoryType](doc//MemoryType.md)
  - [MemoryUpdateDto](doc//MemoryUpdateDto.md)

mobile/openapi/lib/api.dart

@@ -195,6 +195,7 @@ part 'model/memories_update.dart';
 part 'model/memory_create_dto.dart';
 part 'model/memory_response_dto.dart';
 part 'model/memory_search_order.dart';
+part 'model/memory_search_response_dto.dart';
 part 'model/memory_statistics_response_dto.dart';
 part 'model/memory_type.dart';
 part 'model/memory_update_dto.dart';

mobile/openapi/lib/api/memories_api.dart

@@ -265,6 +265,9 @@ class MemoriesApi {
   ///
   /// * [MemorySearchOrder] order:
   ///
+  /// * [int] page:
+  ///   Page number
+  ///
   /// * [int] size:
   ///   Number of memories to return
   ///
@@ -292,6 +295,9 @@ class MemoriesApi {
     if (order != null) {
       queryParams.addAll(_queryParams('', 'order', order));
     }
+    if (page != null) {
+      queryParams.addAll(_queryParams('', 'page', page));
+    }
     if (size != null) {
       queryParams.addAll(_queryParams('', 'size', size));
     }
@@ -331,6 +337,9 @@ class MemoriesApi {
   ///
   /// * [MemorySearchOrder] order:
   ///
+  /// * [int] page:
+  ///   Page number
+  ///
   /// * [int] size:
   ///   Number of memories to return
   ///
@@ -434,6 +443,9 @@ class MemoriesApi {
   ///
   /// * [MemorySearchOrder] order:
   ///
+  /// * [int] page:
+  ///   Page number
+  ///
   /// * [int] size:
   ///   Number of memories to return
   ///
@@ -461,6 +473,9 @@ class MemoriesApi {
     if (order != null) {
       queryParams.addAll(_queryParams('', 'order', order));
     }
+    if (page != null) {
+      queryParams.addAll(_queryParams('', 'page', page));
+    }
     if (size != null) {
       queryParams.addAll(_queryParams('', 'size', size));
     }
@@ -500,6 +515,9 @@ class MemoriesApi {
   ///
   /// * [MemorySearchOrder] order:
   ///
+  /// * [int] page:
+  ///   Page number
+  ///
   /// * [int] size:
   ///   Number of memories to return
   ///
@@ -513,11 +531,8 @@ class MemoriesApi {
     // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
     // FormatException when trying to decode an empty string.
     if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
-      final responseBody = await _decodeBodyBytes(response);
-      return (await apiClient.deserializeAsync(responseBody, 'List<MemoryResponseDto>') as List)
-        .cast<MemoryResponseDto>()
-        .toList(growable: false);
-
+      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'MemorySearchResponseDto',) as MemorySearchResponseDto;
+    
     }
     return null;
   }

mobile/openapi/lib/api_client.dart

@@ -437,6 +437,8 @@ class ApiClient {
           return MemoryResponseDto.fromJson(value);
         case 'MemorySearchOrder':
           return MemorySearchOrderTypeTransformer().decode(value);
+        case 'MemorySearchResponseDto':
+          return MemorySearchResponseDto.fromJson(value);
         case 'MemoryStatisticsResponseDto':
           return MemoryStatisticsResponseDto.fromJson(value);
         case 'MemoryType':

mobile/openapi/lib/model/memory_search_response_dto.dart

@@ -0,0 +1,120 @@
+//
+// AUTO-GENERATED FILE, DO NOT MODIFY!
+//
+// @dart=2.18
+
+// ignore_for_file: unused_element, unused_import
+// ignore_for_file: always_put_required_named_parameters_first
+// ignore_for_file: constant_identifier_names
+// ignore_for_file: lines_longer_than_80_chars
+
+part of openapi.api;
+
+class MemorySearchResponseDto {
+  /// Returns a new [MemorySearchResponseDto] instance.
+  MemorySearchResponseDto({
+    required this.hasNextPage,
+    this.items = const [],
+    required this.total,
+  });
+
+  /// Whether there are more pages
+  bool hasNextPage;
+
+  List<MemoryResponseDto> items;
+
+  /// Total number of matching memories
+  ///
+  /// Minimum value: 0
+  /// Maximum value: 9007199254740991
+  int total;
+
+  @override
+  bool operator ==(Object other) => identical(this, other) || other is MemorySearchResponseDto &&
+    other.hasNextPage == hasNextPage &&
+    _deepEquality.equals(other.items, items) &&
+    other.total == total;
+
+  @override
+  int get hashCode =>
+    // ignore: unnecessary_parenthesis
+    (hasNextPage.hashCode) +
+    (items.hashCode) +
+    (total.hashCode);
+
+  @override
+  String toString() => 'MemorySearchResponseDto[hasNextPage=$hasNextPage, items=$items, total=$total]';
+
+  Map<String, dynamic> toJson() {
+    final json = <String, dynamic>{};
+      json[r'hasNextPage'] = this.hasNextPage;
+      json[r'items'] = this.items;
+      json[r'total'] = this.total;
+    return json;
+  }
+
+  /// Returns a new [MemorySearchResponseDto] instance and imports its values from
+  /// [value] if it's a [Map], null otherwise.
+  // ignore: prefer_constructors_over_static_methods
+  static MemorySearchResponseDto? fromJson(dynamic value) {
+    upgradeDto(value, "MemorySearchResponseDto");
+    if (value is Map) {
+      final json = value.cast<String, dynamic>();
+
+      return MemorySearchResponseDto(
+        hasNextPage: mapValueOfType<bool>(json, r'hasNextPage')!,
+        items: MemoryResponseDto.listFromJson(json[r'items']),
+        total: mapValueOfType<int>(json, r'total')!,
+      );
+    }
+    return null;
+  }
+
+  static List<MemorySearchResponseDto> listFromJson(dynamic json, {bool growable = false,}) {
+    final result = <MemorySearchResponseDto>[];
+    if (json is List && json.isNotEmpty) {
+      for (final row in json) {
+        final value = MemorySearchResponseDto.fromJson(row);
+        if (value != null) {
+          result.add(value);
+        }
+      }
+    }
+    return result.toList(growable: growable);
+  }
+
+  static Map<String, MemorySearchResponseDto> mapFromJson(dynamic json) {
+    final map = <String, MemorySearchResponseDto>{};
+    if (json is Map && json.isNotEmpty) {
+      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
+      for (final entry in json.entries) {
+        final value = MemorySearchResponseDto.fromJson(entry.value);
+        if (value != null) {
+          map[entry.key] = value;
+        }
+      }
+    }
+    return map;
+  }
+
+  // maps a json object with a list of MemorySearchResponseDto-objects as value to a dart map
+  static Map<String, List<MemorySearchResponseDto>> mapListFromJson(dynamic json, {bool growable = false,}) {
+    final map = <String, List<MemorySearchResponseDto>>{};
+    if (json is Map && json.isNotEmpty) {
+      // ignore: parameter_assignments
+      json = json.cast<String, dynamic>();
+      for (final entry in json.entries) {
+        map[entry.key] = MemorySearchResponseDto.listFromJson(entry.value, growable: growable,);
+      }
+    }
+    return map;
+  }
+
+  /// The list of required keys that must be present in a JSON.
+  static const requiredKeys = <String>{
+    'hasNextPage',
+    'items',
+    'total',
+  };
+}
+

mobile/pubspec.lock

@@ -1997,4 +1997,4 @@ packages:
     version: "3.1.3"
 sdks:
   dart: ">=3.12.0 <4.0.0"
-  flutter: "3.44.0"
+  flutter: "3.44.1"

mobile/pubspec.yaml

@@ -6,7 +6,7 @@ version: 3.0.0+3047
 
 environment:
   sdk: '>=3.12.0 <4.0.0'
-  flutter: 3.44.0
+  flutter: 3.44.1
 
 dependencies:
   async: ^2.13.1

open-api/immich-openapi-specs.json

@@ -6728,6 +6728,17 @@
               "$ref": "#/components/schemas/MemorySearchOrder"
             }
           },
+          {
+            "name": "page",
+            "required": false,
+            "in": "query",
+            "description": "Page number",
+            "schema": {
+              "minimum": 1,
+              "maximum": 9007199254740991,
+              "type": "integer"
+            }
+          },
           {
             "name": "size",
             "required": false,
@@ -6753,10 +6764,7 @@
             "content": {
               "application/json": {
                 "schema": {
-                  "items": {
-                    "$ref": "#/components/schemas/MemoryResponseDto"
-                  },
-                  "type": "array"
+                  "$ref": "#/components/schemas/MemorySearchResponseDto"
                 }
               }
             },
@@ -6897,6 +6905,17 @@
               "$ref": "#/components/schemas/MemorySearchOrder"
             }
           },
+          {
+            "name": "page",
+            "required": false,
+            "in": "query",
+            "description": "Page number",
+            "schema": {
+              "minimum": 1,
+              "maximum": 9007199254740991,
+              "type": "integer"
+            }
+          },
           {
             "name": "size",
             "required": false,
@@ -19173,6 +19192,32 @@
         ],
         "type": "string"
       },
+      "MemorySearchResponseDto": {
+        "properties": {
+          "hasNextPage": {
+            "description": "Whether there are more pages",
+            "type": "boolean"
+          },
+          "items": {
+            "items": {
+              "$ref": "#/components/schemas/MemoryResponseDto"
+            },
+            "type": "array"
+          },
+          "total": {
+            "description": "Total number of matching memories",
+            "maximum": 9007199254740991,
+            "minimum": 0,
+            "type": "integer"
+          }
+        },
+        "required": [
+          "hasNextPage",
+          "items",
+          "total"
+        ],
+        "type": "object"
+      },
       "MemoryStatisticsResponseDto": {
         "properties": {
           "total": {

packages/sdk/src/fetch-client.ts

@@ -1320,6 +1320,13 @@ export type MemoryResponseDto = {
     /** Last update date */
     updatedAt: string;
 };
+export type MemorySearchResponseDto = {
+    /** Whether there are more pages */
+    hasNextPage: boolean;
+    items: MemoryResponseDto[];
+    /** Total number of matching memories */
+    total: number;
+};
 export type MemoryCreateDto = {
     /** Asset IDs to associate with memory */
     assetIds?: string[];
@@ -4786,22 +4793,24 @@ export function reverseGeocode({ lat, lon }: {
 /**
  * Retrieve memories
  */
-export function searchMemories({ $for, isSaved, isTrashed, order, size, $type }: {
+export function searchMemories({ $for, isSaved, isTrashed, order, page, size, $type }: {
     $for?: string;
     isSaved?: boolean;
     isTrashed?: boolean;
     order?: MemorySearchOrder;
+    page?: number;
     size?: number;
     $type?: MemoryType;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
         status: 200;
-        data: MemoryResponseDto[];
+        data: MemorySearchResponseDto;
     }>(`/memories${QS.query(QS.explode({
         "for": $for,
         isSaved,
         isTrashed,
         order,
+        page,
         size,
         "type": $type
     }))}`, {
@@ -4826,11 +4835,12 @@ export function createMemory({ memoryCreateDto }: {
 /**
  * Retrieve memories statistics
  */
-export function memoriesStatistics({ $for, isSaved, isTrashed, order, size, $type }: {
+export function memoriesStatistics({ $for, isSaved, isTrashed, order, page, size, $type }: {
     $for?: string;
     isSaved?: boolean;
     isTrashed?: boolean;
     order?: MemorySearchOrder;
+    page?: number;
     size?: number;
     $type?: MemoryType;
 }, opts?: Oazapfts.RequestOpts) {
@@ -4842,6 +4852,7 @@ export function memoriesStatistics({ $for, isSaved, isTrashed, order, size, $typ
         isSaved,
         isTrashed,
         order,
+        page,
         size,
         "type": $type
     }))}`, {

server/src/controllers/memory.controller.ts

@@ -7,6 +7,7 @@ import {
   MemoryCreateDto,
   MemoryResponseDto,
   MemorySearchDto,
+  MemorySearchResponseDto,
   MemoryStatisticsResponseDto,
   MemoryUpdateDto,
 } from 'src/dtos/memory.dto';
@@ -28,7 +29,7 @@ export class MemoryController {
       'Retrieve a list of memories. Memories are sorted descending by creation date by default, although they can also be sorted in ascending order, or randomly.',
     history: new HistoryBuilder().added('v1').beta('v1').stable('v2'),
   })
-  searchMemories(@Auth() auth: AuthDto, @Query() dto: MemorySearchDto): Promise<MemoryResponseDto[]> {
+  searchMemories(@Auth() auth: AuthDto, @Query() dto: MemorySearchDto): Promise<MemorySearchResponseDto> {
     return this.service.search(auth, dto);
   }
 

server/src/dtos/memory.dto.ts

@@ -14,6 +14,7 @@ const MemorySearchSchema = z
     isTrashed: stringToBool.optional().describe('Include trashed memories'),
     isSaved: stringToBool.optional().describe('Filter by saved status'),
     size: z.coerce.number().int().min(1).optional().describe('Number of memories to return'),
+    page: z.coerce.number().int().min(1).optional().describe('Page number'),
     order: AssetOrderWithRandomSchema.optional(),
   })
   .meta({ id: 'MemorySearchDto' });
@@ -75,11 +76,20 @@ const MemoryResponseSchema = z
   })
   .meta({ id: 'MemoryResponseDto' });
 
+const MemorySearchResponseSchema = z
+  .object({
+    total: z.int().min(0).describe('Total number of matching memories'),
+    items: z.array(MemoryResponseSchema),
+    hasNextPage: z.boolean().describe('Whether there are more pages'),
+  })
+  .meta({ id: 'MemorySearchResponseDto' });
+
 export class MemorySearchDto extends createZodDto(MemorySearchSchema) {}
 export class MemoryUpdateDto extends createZodDto(MemoryUpdateSchema) {}
 export class MemoryCreateDto extends createZodDto(MemoryCreateSchema) {}
 export class MemoryStatisticsResponseDto extends createZodDto(MemoryStatisticsResponseSchema) {}
 export class MemoryResponseDto extends createZodDto(MemoryResponseSchema) {}
+export class MemorySearchResponseDto extends createZodDto(MemorySearchResponseSchema) {}
 
 export const mapMemory = (entity: Memory, auth: AuthDto): MemoryResponseDto => {
   return {

server/src/repositories/memory.repository.ts

@@ -9,6 +9,7 @@ import { AssetOrderWithRandom, AssetVisibility } from 'src/enum';
 import { DB } from 'src/schema';
 import { MemoryTable } from 'src/schema/tables/memory.table';
 import { IBulkAsset } from 'src/types';
+import { paginationHelper } from 'src/utils/pagination';
 
 @Injectable()
 export class MemoryRepository implements IBulkAsset {
@@ -57,8 +58,8 @@ export class MemoryRepository implements IBulkAsset {
     { params: [DummyValue.UUID, {}] },
     { name: 'date filter', params: [DummyValue.UUID, { for: DummyValue.DATE }] },
   )
-  search(ownerId: string, dto: MemorySearchDto) {
-    return this.searchBuilder(ownerId, dto)
+  async search(ownerId: string, dto: MemorySearchDto) {
+    const items = await this.searchBuilder(ownerId, dto)
       .select((eb) =>
         jsonArrayFrom(
           eb
@@ -89,8 +90,11 @@ export class MemoryRepository implements IBulkAsset {
           ? qb.orderBy(sql`RANDOM()`)
           : qb.orderBy('memoryAt', (dto.order?.toLowerCase() || 'desc') as OrderByDirection),
       )
-      .$if(dto.size !== undefined, (qb) => qb.limit(dto.size!))
+      .$if(dto.size !== undefined, (qb) => qb.limit(dto.size! + 1))
+      .$if(dto.page !== undefined && dto.size !== undefined, (qb) => qb.offset((dto.page! - 1) * dto.size!))
       .execute();
+
+    return paginationHelper(items, dto.size ?? items.length);
   }
 
   @GenerateSql({ params: [DummyValue.UUID] })

server/src/services/memory.service.spec.ts

@@ -34,21 +34,28 @@ describe(MemoryService.name, () => {
       const asset = AssetFactory.create();
       const memory1 = MemoryFactory.from({ ownerId: userId }).asset(asset).build();
       const memory2 = MemoryFactory.create({ ownerId: userId });
-      mocks.memory.search.mockResolvedValue([getForMemory(memory1), getForMemory(memory2)]);
+      mocks.memory.search.mockResolvedValue({
+        items: [getForMemory(memory1), getForMemory(memory2)],
+        hasNextPage: false,
+      });
+      mocks.memory.statistics.mockResolvedValue({ total: 2 });
 
-      await expect(sut.search(factory.auth({ user: { id: userId } }), {})).resolves.toEqual(
-        expect.arrayContaining([
+      await expect(sut.search(factory.auth({ user: { id: userId } }), {})).resolves.toMatchObject({
+        items: expect.arrayContaining([
           expect.objectContaining({
             id: memory1.id,
             assets: expect.arrayContaining([expect.objectContaining({ id: asset.id })]),
           }),
         ]),
-      );
+        hasNextPage: false,
+        total: 2,
+      });
     });
 
     it('should map empty result', async () => {
-      mocks.memory.search.mockResolvedValue([]);
-      await expect(sut.search(factory.auth(), {})).resolves.toEqual([]);
+      mocks.memory.search.mockResolvedValue({ items: [], hasNextPage: false });
+      mocks.memory.statistics.mockResolvedValue({ total: 0 });
+      await expect(sut.search(factory.auth(), {})).resolves.toMatchObject({ items: [], hasNextPage: false, total: 0 });
     });
   });
 

server/src/services/memory.service.ts

@@ -71,10 +71,14 @@ export class MemoryService extends BaseService {
   }
 
   async search(auth: AuthDto, dto: MemorySearchDto) {
-    const memories = await this.memoryRepository.search(auth.user.id, dto);
-    return memories
-      .filter((memory: Memory) => memory.assets && memory.assets.length > 0)
-      .map((memory: Memory) => mapMemory(memory, auth));
+    const { items, hasNextPage } = await this.memoryRepository.search(auth.user.id, dto);
+    const { total } = await this.memoryRepository.statistics(auth.user.id, dto);
+
+    return {
+      total,
+      items: items.map((memory: Memory) => mapMemory(memory, auth)),
+      hasNextPage,
+    };
   }
 
   statistics(auth: AuthDto, dto: MemorySearchDto) {

server/test/medium/specs/services/memory.service.spec.ts

@@ -133,8 +133,8 @@ describe(MemoryService.name, () => {
       await sut.onMemoriesCreate();
 
       const memories = await memoryRepo.search(user.id, {});
-      expect(memories.length).toBe(1);
-      expect(memories[0]).toEqual(
+      expect(memories.items.length).toBe(1);
+      expect(memories.items[0]).toEqual(
         expect.objectContaining({
           id: expect.any(String),
           createdAt: expect.any(Date),
@@ -173,8 +173,8 @@ describe(MemoryService.name, () => {
       await sut.onMemoriesCreate();
 
       const memories = await memoryRepo.search(user.id, {});
-      expect(memories.length).toBe(1);
-      expect(memories[0]).toEqual(
+      expect(memories.items.length).toBe(1);
+      expect(memories.items[0]).toEqual(
         expect.objectContaining({
           id: expect.any(String),
           createdAt: expect.any(Date),
@@ -228,12 +228,12 @@ describe(MemoryService.name, () => {
       await sut.onMemoriesCreate();
 
       const memories = await memoryRepo.search(user.id, {});
-      expect(memories.length).toBe(1);
+      expect(memories.items.length).toBe(1);
 
       await sut.onMemoriesCreate();
 
       const memoriesAfter = await memoryRepo.search(user.id, {});
-      expect(memoriesAfter.length).toBe(1);
+      expect(memoriesAfter.items.length).toBe(1);
     });
   });
 

web/src/lib/components/AdaptiveImage.svelte

@@ -74,8 +74,6 @@
     onError?: () => void;
     ref?: HTMLDivElement;
     imgRef?: HTMLImageElement;
-    imgNaturalSize?: Size;
-    imgScaledSize?: Size;
     backdrop?: Snippet;
     overlays?: Snippet;
   };
@@ -84,10 +82,6 @@
     ref = $bindable(),
     // eslint-disable-next-line no-useless-assignment
     imgRef = $bindable(),
-    // eslint-disable-next-line no-useless-assignment
-    imgNaturalSize = $bindable(),
-    // eslint-disable-next-line no-useless-assignment
-    imgScaledSize = $bindable(),
     asset,
     sharedLink,
     objectFit = 'contain',
@@ -155,22 +149,10 @@
     return { width: 1, height: 1 };
   });
 
-  $effect(() => {
-    imgNaturalSize = imageDimensions;
-  });
-
-  const scaledDimensions = $derived.by(() => {
-    const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
-    return scaleFn(imageDimensions, container);
-  });
-
-  $effect(() => {
-    imgScaledSize = scaledDimensions;
-  });
-
   const { insetInlineStart, top, displayWidth, displayHeight, rasterWidth, rasterHeight, rasterScale } = $derived.by(
     () => {
-      const { width, height } = scaledDimensions;
+      const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
+      const { width, height } = scaleFn(imageDimensions, container);
       if (maxRasterPixels === 0) {
         return {
           insetInlineStart: (container.width - width) / 2 + 'px',

web/src/lib/components/asset-viewer/PhotoViewer.svelte

@@ -13,7 +13,7 @@
   import { SlideshowLook, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { handlePromiseError } from '$lib/utils';
   import { canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
-  import type { Size } from '$lib/utils/container-utils';
+  import { getNaturalSize, scaleToFit, type Size } from '$lib/utils/container-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { getOcrBoundingBoxes } from '$lib/utils/ocr-utils';
   import { getBoundingBox, type BoundingBox } from '$lib/utils/people-utils';
@@ -67,9 +67,13 @@
     height: containerHeight,
   });
 
-  let scaledDimensions = $state<Size>({ width: 0, height: 0 });
+  const overlaySize = $derived.by((): Size => {
+    if (!assetViewerManager.imgRef || !visibleImageReady) {
+      return { width: 0, height: 0 };
+    }
 
-  const overlaySize = $derived(visibleImageReady ? scaledDimensions : { width: 0, height: 0 });
+    return scaleToFit(getNaturalSize(assetViewerManager.imgRef), { width: containerWidth, height: containerHeight });
+  });
 
   const highlightedBoxes = $derived(getBoundingBox(assetViewerManager.highlightedFaces, overlaySize));
   const isHighlighting = $derived(highlightedBoxes.length > 0);
@@ -231,7 +235,6 @@
       onReady?.();
     }}
     bind:imgRef={assetViewerManager.imgRef}
-    bind:imgScaledSize={scaledDimensions}
     bind:ref={adaptiveImage}
   >
     {#snippet backdrop()}
@@ -283,11 +286,7 @@
     {/snippet}
   </AdaptiveImage>
 
-  {#if assetViewerManager.isFaceEditMode && assetViewerManager.imgRef && asset.width && asset.height}
-    <FaceEditor
-      imageSize={{ width: asset.width, height: asset.height }}
-      containerSize={{ width: containerWidth, height: containerHeight }}
-      assetId={asset.id}
-    />
+  {#if assetViewerManager.isFaceEditMode && assetViewerManager.imgRef}
+    <FaceEditor htmlElement={assetViewerManager.imgRef} {containerWidth} {containerHeight} assetId={asset.id} />
   {/if}
 </div>

web/src/lib/components/asset-viewer/VideoNativeViewer.svelte

@@ -308,30 +308,9 @@
   let containerHeight = $state(0);
 
   $effect(() => {
-    if (!assetViewerManager.isFaceEditMode || !videoPlayer) {
-      return;
+    if (assetViewerManager.isFaceEditMode) {
+      videoPlayer?.pause();
     }
-    videoPlayer.pause();
-
-    const { videoWidth, videoHeight } = videoPlayer;
-    if (videoWidth === 0 || videoHeight === 0) {
-      return;
-    }
-
-    const canvas = document.createElement('canvas');
-    canvas.width = videoWidth;
-    canvas.height = videoHeight;
-    canvas.getContext('2d')?.drawImage(videoPlayer, 0, 0);
-
-    const img = new Image();
-    img.onload = () => (assetViewerManager.imgRef = img);
-    img.src = canvas.toDataURL('image/png');
-
-    return () => {
-      img.onload = null;
-      img.src = '';
-      assetViewerManager.imgRef = undefined;
-    };
   });
 
   // The time is only refreshed on HLS fragment decode by default,
@@ -475,12 +454,8 @@
         </div>
       {/if}
 
-      {#if assetViewerManager.isFaceEditMode}
-        <FaceEditor
-          imageSize={{ width: asset.width ?? 0, height: asset.height ?? 0 }}
-          containerSize={{ width: containerWidth, height: containerHeight }}
-          {assetId}
-        />
+      {#if assetViewerManager.isFaceEditMode && videoPlayer}
+        <FaceEditor htmlElement={videoPlayer} {containerWidth} {containerHeight} {assetId} />
       {/if}
     {/if}
   </div>

web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte

@@ -4,27 +4,25 @@
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import FaceCreateTagModal from '$lib/modals/CreateFaceModal.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
-  import { computeContentMetrics, mapContentRectToNatural, type Size } from '$lib/utils/container-utils';
+  import { getNaturalSize, scaleToFit } from '$lib/utils/container-utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { scaleFaceRectOnResize, type ResizeContext } from '$lib/utils/people-utils';
   import { createFace, getAllPeople, type PersonResponseDto } from '@immich/sdk';
   import { Button, Input, modalManager, toastManager } from '@immich/ui';
   import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
   import { clamp } from 'lodash-es';
   import { onDestroy, onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
 
   type Props = {
-    imageSize: Size;
-    containerSize: Size;
+    htmlElement: HTMLImageElement | HTMLVideoElement;
+    containerWidth: number;
+    containerHeight: number;
     assetId: string;
   };
 
-  let { imageSize, containerSize, assetId }: Props = $props();
+  let { htmlElement, containerWidth, containerHeight, assetId }: Props = $props();
 
   let canvasEl: HTMLCanvasElement | undefined = $state();
-  let containerEl: HTMLDivElement | undefined = $state();
   let canvas: Canvas | undefined = $state();
   let faceRect: Rect | undefined = $state();
   let faceSelectorEl: HTMLDivElement | undefined = $state();
@@ -35,9 +33,6 @@
 
   let searchTerm = $state('');
   let faceBoxPosition = $state({ left: 0, top: 0, width: 0, height: 0 });
-  let userMovedRect = false;
-  let previousMetrics: ResizeContext | null = null;
-  let panModifierHeld = $state(false);
 
   let filteredCandidates = $derived(
     searchTerm
@@ -59,12 +54,11 @@
   };
 
   const setupCanvas = () => {
-    if (!canvasEl) {
+    if (!canvasEl || !htmlElement) {
       return;
     }
 
-    canvas = new Canvas(canvasEl, { width: containerSize.width, height: containerSize.height });
-    canvas.selection = false;
+    canvas = new Canvas(canvasEl);
     configureControlStyle();
 
     // eslint-disable-next-line tscompat/tscompat
@@ -82,100 +76,57 @@
 
     canvas.add(faceRect);
     canvas.setActiveObject(faceRect);
+    setDefaultFaceRectanglePosition(faceRect);
   };
 
   onMount(async () => {
     setupCanvas();
-    void getPeople();
+    await getPeople();
     await tick();
     searchInputEl?.focus();
   });
 
+  const imageContentMetrics = $derived.by(() => {
+    const natural = getNaturalSize(htmlElement);
+    const container = { width: containerWidth, height: containerHeight };
+    const { width: contentWidth, height: contentHeight } = scaleToFit(natural, container);
+    return {
+      contentWidth,
+      contentHeight,
+      offsetX: (containerWidth - contentWidth) / 2,
+      offsetY: (containerHeight - contentHeight) / 2,
+    };
+  });
+
+  const setDefaultFaceRectanglePosition = (faceRect: Rect) => {
+    const { offsetX, offsetY } = imageContentMetrics;
+
+    faceRect.set({
+      top: offsetY + 200,
+      left: offsetX + 200,
+    });
+
+    faceRect.setCoords();
+    positionFaceSelector();
+  };
+
   $effect(() => {
     if (!canvas) {
       return;
     }
 
-    const upperCanvas = canvas.upperCanvasEl;
-    const controller = new AbortController();
-    const { signal } = controller;
-
-    const stopIfOnTarget = (event: PointerEvent) => {
-      if (canvas?.findTarget(event).target) {
-        event.stopPropagation();
-      }
-    };
-
-    const handlePointerDown = (event: PointerEvent) => {
-      if (!canvas) {
-        return;
-      }
-      if (canvas.findTarget(event).target) {
-        event.stopPropagation();
-        return;
-      }
-      if (faceRect) {
-        event.stopPropagation();
-        const pointer = canvas.getScenePoint(event);
-        faceRect.set({ left: pointer.x, top: pointer.y });
-        faceRect.setCoords();
-        userMovedRect = true;
-        canvas.renderAll();
-        positionFaceSelector();
-      }
-    };
-
-    upperCanvas.addEventListener('pointerdown', handlePointerDown, { signal });
-    upperCanvas.addEventListener('pointermove', stopIfOnTarget, { signal });
-    upperCanvas.addEventListener('pointerup', stopIfOnTarget, { signal });
-
-    return () => {
-      controller.abort();
-    };
-  });
-
-  const imageContentMetrics = $derived(computeContentMetrics(imageSize, containerSize));
-
-  const setDefaultFaceRectanglePosition = (faceRect: Rect) => {
-    const { offsetX, offsetY, contentWidth, contentHeight } = imageContentMetrics;
-
-    faceRect.set({
-      top: offsetY + contentHeight / 2 - 56,
-      left: offsetX + contentWidth / 2 - 56,
+    canvas.setDimensions({
+      width: containerWidth,
+      height: containerHeight,
     });
-  };
 
-  $effect(() => {
-    const { offsetX, offsetY, contentWidth } = imageContentMetrics;
-
-    if (contentWidth === 0) {
+    if (!faceRect) {
       return;
     }
 
-    const isFirstRun = previousMetrics === null;
-
-    if (isFirstRun && !canvas) {
-      setupCanvas();
-    }
-
-    if (!canvas || !faceRect) {
-      return;
-    }
-
-    if (!isFirstRun) {
-      canvas.setDimensions({ width: containerSize.width, height: containerSize.height });
-    }
-
-    if (!isFirstRun && userMovedRect && previousMetrics) {
-      faceRect.set(scaleFaceRectOnResize(faceRect, previousMetrics, { contentWidth, offsetX, offsetY }));
-    } else {
+    if (!isFaceRectIntersectingCanvas(faceRect, canvas)) {
       setDefaultFaceRectanglePosition(faceRect);
     }
-
-    faceRect.setCoords();
-    previousMetrics = { contentWidth, offsetX, offsetY };
-    canvas.renderAll();
-    positionFaceSelector();
   });
 
   const isFaceRectIntersectingCanvas = (faceRect: Rect, canvas: Canvas) => {
@@ -216,39 +167,34 @@
     const gap = 15;
     const padding = faceRect.padding ?? 0;
     const rawBox = faceRect.getBoundingRect();
-    if (Number.isNaN(rawBox.left) || Number.isNaN(rawBox.width)) {
-      return;
-    }
-    const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
     const faceBox = {
-      left: (rawBox.left - padding) * currentZoom + currentPositionX,
-      top: (rawBox.top - padding) * currentZoom + currentPositionY,
-      width: (rawBox.width + padding * 2) * currentZoom,
-      height: (rawBox.height + padding * 2) * currentZoom,
+      left: rawBox.left - padding,
+      top: rawBox.top - padding,
+      width: rawBox.width + padding * 2,
+      height: rawBox.height + padding * 2,
     };
     const selectorWidth = faceSelectorEl.offsetWidth;
     const chromeHeight = faceSelectorEl.offsetHeight - scrollableListEl.offsetHeight;
-    const listHeight = Math.min(MAX_LIST_HEIGHT, containerSize.height - gap * 2 - chromeHeight);
+    const listHeight = Math.min(MAX_LIST_HEIGHT, containerHeight - gap * 2 - chromeHeight);
     const selectorHeight = listHeight + chromeHeight;
 
-    const clampTop = (top: number) => clamp(top, gap, containerSize.height - selectorHeight - gap);
-    const clampLeft = (left: number) => clamp(left, gap, containerSize.width - selectorWidth - gap);
-
-    const faceRight = faceBox.left + faceBox.width;
-    const faceBottom = faceBox.top + faceBox.height;
+    const clampTop = (top: number) => clamp(top, gap, containerHeight - selectorHeight - gap);
+    const clampLeft = (left: number) => clamp(left, gap, containerWidth - selectorWidth - gap);
 
     const overlapArea = (position: { top: number; left: number }) => {
-      const overlapX = Math.max(
-        0,
-        Math.min(position.left + selectorWidth, faceRight) - Math.max(position.left, faceBox.left),
-      );
-      const overlapY = Math.max(
-        0,
-        Math.min(position.top + selectorHeight, faceBottom) - Math.max(position.top, faceBox.top),
-      );
+      const selectorRight = position.left + selectorWidth;
+      const selectorBottom = position.top + selectorHeight;
+      const faceRight = faceBox.left + faceBox.width;
+      const faceBottom = faceBox.top + faceBox.height;
+
+      const overlapX = Math.max(0, Math.min(selectorRight, faceRight) - Math.max(position.left, faceBox.left));
+      const overlapY = Math.max(0, Math.min(selectorBottom, faceBottom) - Math.max(position.top, faceBox.top));
       return overlapX * overlapY;
     };
 
+    const faceBottom = faceBox.top + faceBox.height;
+    const faceRight = faceBox.left + faceBox.width;
+
     const positions = [
       { top: clampTop(faceBottom + gap), left: clampLeft(faceBox.left) },
       { top: clampTop(faceBox.top - selectorHeight - gap), left: clampLeft(faceBox.left) },
@@ -270,164 +216,83 @@
       }
     }
 
-    const containerRect = containerEl?.getBoundingClientRect();
-    const offsetTop = containerRect?.top ?? 0;
-    const offsetLeft = containerRect?.left ?? 0;
-    faceSelectorEl.style.top = `${bestPosition.top + offsetTop}px`;
-    faceSelectorEl.style.left = `${bestPosition.left + offsetLeft}px`;
+    faceSelectorEl.style.top = `${bestPosition.top}px`;
+    faceSelectorEl.style.left = `${bestPosition.left}px`;
     scrollableListEl.style.height = `${listHeight}px`;
-    faceBoxPosition = faceBox;
+    faceBoxPosition = { left: faceBox.left, top: faceBox.top, width: faceBox.width, height: faceBox.height };
   };
 
-  $effect(() => {
-    if (!canvas) {
-      return;
-    }
-
-    const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
-    canvas.setViewportTransform([currentZoom, 0, 0, currentZoom, currentPositionX, currentPositionY]);
-    canvas.renderAll();
-    positionFaceSelector();
-  });
-
   $effect(() => {
     const rect = faceRect;
     const cvs = canvas;
     if (rect && cvs) {
-      const onUserMove = () => {
-        userMovedRect = true;
-        positionFaceSelector();
-      };
-      rect.on('moving', onUserMove);
-      rect.on('scaling', onUserMove);
+      rect.on('moving', positionFaceSelector);
+      rect.on('scaling', positionFaceSelector);
       cvs.on('object:modified', () => searchInputEl?.focus());
       return () => {
-        rect.off('moving', onUserMove);
-        rect.off('scaling', onUserMove);
+        rect.off('moving', positionFaceSelector);
+        rect.off('scaling', positionFaceSelector);
         cvs.off('object:modified', () => searchInputEl?.focus());
       };
     }
   });
 
-  const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
-  const panModifierKey = isMac ? 'Meta' : 'Control';
-  const panModifierLabel = isMac ? '⌘' : 'Ctrl';
-  const isZoomed = $derived(assetViewerManager.zoom > 1);
-
-  $effect(() => {
-    if (!containerEl) {
-      return;
-    }
-    const element = containerEl;
-    const parent = element.parentElement;
-
-    const activate = () => {
-      panModifierHeld = true;
-      element.style.pointerEvents = 'none';
-      if (parent) {
-        parent.style.cursor = 'move';
-      }
-    };
-
-    const deactivate = () => {
-      panModifierHeld = false;
-      element.style.pointerEvents = '';
-      if (parent) {
-        parent.style.cursor = '';
-      }
-    };
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === panModifierKey) {
-        activate();
-      }
-    };
-    const onKeyUp = (event: KeyboardEvent) => {
-      if (event.key === panModifierKey) {
-        deactivate();
-      }
-    };
-
-    document.addEventListener('keydown', onKeyDown);
-    document.addEventListener('keyup', onKeyUp);
-    window.addEventListener('blur', deactivate);
-
-    return () => {
-      document.removeEventListener('keydown', onKeyDown);
-      document.removeEventListener('keyup', onKeyUp);
-      window.removeEventListener('blur', deactivate);
-      deactivate();
-    };
-  });
-
-  const trapEvents = (node: HTMLElement) => {
-    const stop = (e: Event) => e.stopPropagation();
-    const eventTypes = ['keydown', 'pointerdown', 'pointermove', 'pointerup'] as const;
-    for (const type of eventTypes) {
-      node.addEventListener(type, stop);
-    }
-
-    document.body.append(node);
-
-    return {
-      destroy() {
-        for (const type of eventTypes) {
-          node.removeEventListener(type, stop);
-        }
-        node.remove();
-      },
-    };
-  };
-
   const getFaceCroppedCoordinates = () => {
-    if (!faceRect || imageSize.width === 0 || imageSize.height === 0) {
+    if (!faceRect || !htmlElement) {
       return;
     }
 
-    const scaledWidth = faceRect.getScaledWidth();
-    const scaledHeight = faceRect.getScaledHeight();
+    const { left, top, width, height } = faceRect.getBoundingRect();
+    const { offsetX, offsetY, contentWidth, contentHeight } = imageContentMetrics;
+    const natural = getNaturalSize(htmlElement);
 
-    const imageRect = mapContentRectToNatural(
-      {
-        left: faceRect.left - scaledWidth / 2,
-        top: faceRect.top - scaledHeight / 2,
-        width: scaledWidth,
-        height: scaledHeight,
-      },
-      imageContentMetrics,
-      imageSize,
-    );
+    const scaleX = natural.width / contentWidth;
+    const scaleY = natural.height / contentHeight;
+    const imageX = (left - offsetX) * scaleX;
+    const imageY = (top - offsetY) * scaleY;
 
     return {
-      imageWidth: imageSize.width,
-      imageHeight: imageSize.height,
-      x: Math.floor(imageRect.left),
-      y: Math.floor(imageRect.top),
-      width: Math.floor(imageRect.width),
-      height: Math.floor(imageRect.height),
+      imageWidth: natural.width,
+      imageHeight: natural.height,
+      x: Math.floor(imageX),
+      y: Math.floor(imageY),
+      width: Math.floor(width * scaleX),
+      height: Math.floor(height * scaleY),
     };
   };
 
   type FaceCoordinates = NonNullable<ReturnType<typeof getFaceCroppedCoordinates>>;
 
   const getFacePreviewUrl = (data: FaceCoordinates) => {
-    const imgRef = assetViewerManager.imgRef;
-    if (!imgRef || imageContentMetrics.contentWidth === 0) {
+    if (!htmlElement) {
       return;
     }
 
-    const scaleX = imgRef.naturalWidth / imageSize.width;
-    const scaleY = imgRef.naturalHeight / imageSize.height;
-    const x = clamp(Math.floor(data.x * scaleX), 0, imgRef.naturalWidth - 1);
-    const y = clamp(Math.floor(data.y * scaleY), 0, imgRef.naturalHeight - 1);
-    const width = clamp(Math.floor(data.width * scaleX), 1, imgRef.naturalWidth - x);
-    const height = clamp(Math.floor(data.height * scaleY), 1, imgRef.naturalHeight - y);
+    const natural = getNaturalSize(htmlElement);
+    if (natural.width <= 0 || natural.height <= 0) {
+      return;
+    }
+
+    const x = clamp(data.x, 0, natural.width - 1);
+    const y = clamp(data.y, 0, natural.height - 1);
+    const width = clamp(data.width, 1, natural.width - x);
+    const height = clamp(data.height, 1, natural.height - y);
+
+    if (width <= 0 || height <= 0) {
+      return;
+    }
 
     const canvas = document.createElement('canvas');
     canvas.width = width;
     canvas.height = height;
+
+    const context = canvas.getContext('2d');
+    if (!context) {
+      return;
+    }
+
     try {
-      canvas.getContext('2d')?.drawImage(imgRef, x, y, width, height, 0, 0, width, height);
+      context.drawImage(htmlElement, x, y, width, height, 0, 0, width, height);
       return canvas.toDataURL('image/png');
     } catch {
       return;
@@ -499,7 +364,6 @@
 
 <div
   id="face-editor-data"
-  bind:this={containerEl}
   class="absolute inset-s-0 top-0 z-5 size-full overflow-hidden"
   data-overlay-interactive
   data-face-left={faceBoxPosition.left}
@@ -507,14 +371,12 @@
   data-face-width={faceBoxPosition.width}
   data-face-height={faceBoxPosition.height}
 >
-  <canvas bind:this={canvasEl} id="face-editor" class="absolute top-0 start-0"></canvas>
+  <canvas bind:this={canvasEl} id="face-editor" class="absolute inset-s-0 top-0"></canvas>
 
   <div
     id="face-selector"
     bind:this={faceSelectorEl}
-    class="fixed z-20 w-[min(200px,45vw)] min-w-48 rounded-xl border border-gray-200 bg-white px-2 py-4 backdrop-blur-sm transition-[top,left] duration-200 ease-out dark:border-gray-800 dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-    use:trapEvents
-    onwheel={(e) => e.stopPropagation()}
+    class="absolute inset-s-[calc(50%-125px)] top-[calc(50%-250px)] w-62.5 max-w-62.5 rounded-xl border border-gray-200 bg-white px-2 py-4 backdrop-blur-sm transition-[top,left] duration-200 ease-out dark:border-gray-800 dark:bg-immich-dark-gray dark:text-immich-dark-fg"
   >
     <p class="text-center text-sm">{$t('select_person_to_tag')}</p>
 
@@ -561,15 +423,4 @@
       {$t('cancel')}
     </Button>
   </div>
-
-  {#if isZoomed && !panModifierHeld}
-    <div
-      transition:fade={{ duration: 200 }}
-      class="pointer-events-none absolute inset-s-1/2 bottom-4 z-10 -translate-x-1/2"
-    >
-      <p class="whitespace-nowrap rounded-full bg-black/60 px-3 py-1.5 text-xs text-white">
-        {$t('hold_key_to_pan', { values: { key: panModifierLabel } })}
-      </p>
-    </div>
-  {/if}
 </div>

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

@@ -1,9 +1,16 @@
-import { deleteMemory, type MemoryResponseDto, removeMemoryAssets, searchMemories, updateMemory } from '@immich/sdk';
+import {
+  deleteMemory,
+  type MemoryResponseDto,
+  removeMemoryAssets,
+  searchMemories,
+  updateMemory,
+  MemorySearchOrder,
+  MemoryType,
+} from '@immich/sdk';
 import { DateTime } from 'luxon';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import { asLocalTimeISO } from '$lib/utils/date-time';
 import { toTimelineAsset } from '$lib/utils/timeline-util';
 
 type MemoryIndex = {
@@ -20,10 +27,31 @@ export type MemoryAsset = MemoryIndex & {
   nextMemory?: MemoryResponseDto;
 };
 
+const PAGE_SIZE = 250;
+
 class MemoryManager {
   #loading: Promise<void> | undefined;
+  #filters:
+    | {
+        $for?: string;
+        isSaved?: boolean;
+        isTrashed?: boolean;
+        order?: MemorySearchOrder;
+        page?: number;
+        size?: number;
+        $type?: MemoryType;
+      }
+    | undefined;
+  #hasNextPage: boolean;
+  #page: number;
+  #total: number;
 
   constructor() {
+    this.#filters = undefined;
+    this.#hasNextPage = true;
+    this.#page = 1;
+    this.#total = 0;
+
     eventManager.on({
       AuthLogout: () => this.clearCache(),
       AuthUserLoaded: () => this.initialize(),
@@ -37,6 +65,16 @@ class MemoryManager {
     this.scheduleHourlyRefresh();
   }
 
+  get filters() {
+    return this.#filters;
+  }
+
+  set filters(filters) {
+    this.#filters = filters;
+    this.clearCache();
+    void this.loadNextPage();
+  }
+
   ready() {
     return this.initialize();
   }
@@ -117,22 +155,46 @@ class MemoryManager {
     }
   }
 
+  loadNextPage() {
+    if (this.#hasNextPage) {
+      if (this.#loading === undefined) {
+        this.#loading = this.load(this.#page++);
+      } else {
+        void this.#loading.then(() => (this.#loading = this.load(this.#page++)));
+      }
+    }
+  }
+
+  get hasNextPage() {
+    return this.#hasNextPage;
+  }
+
+  get total() {
+    return this.#total;
+  }
+
   private clearCache() {
     this.#loading = undefined;
+    this.#hasNextPage = true;
+    this.#page = 1;
     this.memories = [];
   }
 
   private initialize() {
     if (!this.#loading) {
-      this.#loading = this.load();
+      this.#loading = this.load(this.#page++);
     }
 
     return this.#loading;
   }
 
-  private async load() {
-    const memories = await searchMemories({ $for: asLocalTimeISO(DateTime.now()) });
-    this.memories = memories.filter((memory) => memory.assets.length > 0);
+  private async load(page: number) {
+    if (this.#filters !== undefined) {
+      const { items, hasNextPage, total } = await searchMemories({ size: PAGE_SIZE, ...this.#filters, page });
+      this.memories.push(...items);
+      this.#hasNextPage = hasNextPage;
+      this.#total = total;
+    }
   }
 
   private scheduleHourlyRefresh() {
@@ -146,12 +208,18 @@ class MemoryManager {
     const initialDelay = nextEvent.diff(now).as('milliseconds');
 
     setTimeout(() => {
-      this.#loading = this.load();
+      if (this.#page <= 2) {
+        this.clearCache();
+        this.loadNextPage();
+      }
 
       // Schedule subsequent events hourly
       setInterval(
         () => {
-          this.#loading = this.load();
+          if (this.#page <= 2) {
+            this.clearCache();
+            this.loadNextPage();
+          }
         },
         60 * 60 * 1000,
       );

web/src/lib/utils.ts

@@ -20,12 +20,13 @@ import {
   type UserResponseDto,
 } from '@immich/sdk';
 import { toastManager, type ActionItem, type IfLike } from '@immich/ui';
+import { DateTime } from 'luxon';
 import { init, register, t } from 'svelte-i18n';
 import { derived, get } from 'svelte/store';
 import { defaultLang, locales } from '$lib/constants';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 import { downloadManager } from '$lib/managers/download-manager.svelte';
-import { alwaysLoadOriginalFile, lang } from '$lib/stores/preferences.store';
+import { alwaysLoadOriginalFile, lang, locale } from '$lib/stores/preferences.store';
 import { isWebCompatibleImage } from '$lib/utils/asset-utils';
 import { handleError } from '$lib/utils/handle-error';
 import { langs } from '$lib/utils/i18n';
@@ -366,9 +367,13 @@ export const handlePromiseError = <T>(promise: Promise<T>): void => {
 
 export const memoryLaneTitle = derived(t, ($t) => {
   return (memory: MemoryResponseDto) => {
-    const now = new Date();
     if (memory.type === MemoryType.OnThisDay) {
-      return $t('years_ago', { values: { years: now.getFullYear() - memory.data.year } });
+      const now = new Date();
+      const memoryDate = new Date(memory.memoryAt);
+
+      return memoryDate.getUTCDate() === now.getDate() && memoryDate.getUTCMonth() === now.getMonth()
+        ? $t('years_ago', { values: { years: now.getFullYear() - memory.data.year } })
+        : DateTime.fromJSDate(memoryDate).toLocaleString(DateTime.DATE_MED, { locale: get(locale) });
     }
 
     return $t('unknown');

web/src/lib/utils/container-utils.spec.ts

@@ -1,15 +1,18 @@
 import {
-  computeContentMetrics,
+  getContentMetrics,
   getNaturalSize,
-  mapContentRectToNatural,
   mapNormalizedRectToContent,
   mapNormalizedToContent,
   scaleToCover,
   scaleToFit,
 } from '$lib/utils/container-utils';
 
-const mockImage = (props: { naturalWidth: number; naturalHeight: number }): HTMLImageElement =>
-  props as unknown as HTMLImageElement;
+const mockImage = (props: {
+  naturalWidth: number;
+  naturalHeight: number;
+  width: number;
+  height: number;
+}): HTMLImageElement => props as unknown as HTMLImageElement;
 
 const mockVideo = (props: {
   videoWidth: number;
@@ -46,85 +49,48 @@ describe('scaleToFit', () => {
   });
 });
 
-describe('computeContentMetrics', () => {
-  it('should return zero metrics for zero-width content', () => {
-    expect(computeContentMetrics({ width: 0, height: 1080 }, { width: 800, height: 600 })).toEqual({
-      contentWidth: 0,
-      contentHeight: 0,
-      offsetX: 0,
-      offsetY: 0,
-    });
-  });
-
-  it('should return zero metrics for zero-height content', () => {
-    expect(computeContentMetrics({ width: 1920, height: 0 }, { width: 800, height: 600 })).toEqual({
-      contentWidth: 0,
-      contentHeight: 0,
-      offsetX: 0,
-      offsetY: 0,
-    });
-  });
-
-  it('should center wide content vertically', () => {
-    expect(computeContentMetrics({ width: 2000, height: 1000 }, { width: 800, height: 600 })).toEqual({
-      contentWidth: 800,
-      contentHeight: 400,
-      offsetX: 0,
-      offsetY: 100,
-    });
-  });
-
-  it('should center tall content horizontally', () => {
-    expect(computeContentMetrics({ width: 1000, height: 2000 }, { width: 800, height: 600 })).toEqual({
-      contentWidth: 300,
-      contentHeight: 600,
-      offsetX: 250,
-      offsetY: 0,
-    });
-  });
-
-  it('should produce zero offsets when aspect ratios match', () => {
-    expect(computeContentMetrics({ width: 1600, height: 900 }, { width: 800, height: 450 })).toEqual({
+describe('getContentMetrics', () => {
+  it('should compute zero offsets when aspect ratios match', () => {
+    const img = mockImage({ naturalWidth: 1600, naturalHeight: 900, width: 800, height: 450 });
+    expect(getContentMetrics(img)).toEqual({
       contentWidth: 800,
       contentHeight: 450,
       offsetX: 0,
       offsetY: 0,
     });
   });
-});
 
-describe('mapContentRectToNatural', () => {
-  it('should map a full-content rect back to natural size', () => {
-    const metrics = { contentWidth: 800, contentHeight: 400, offsetX: 0, offsetY: 100 };
-    const rect = mapContentRectToNatural({ left: 0, top: 100, width: 800, height: 400 }, metrics, {
-      width: 2000,
-      height: 1000,
-    });
-    expect(rect).toEqual({ left: 0, top: 0, width: 2000, height: 1000 });
+  it('should compute horizontal letterbox offsets for tall image', () => {
+    const img = mockImage({ naturalWidth: 1000, naturalHeight: 2000, width: 800, height: 600 });
+    const metrics = getContentMetrics(img);
+    expect(metrics.contentWidth).toBe(300);
+    expect(metrics.contentHeight).toBe(600);
+    expect(metrics.offsetX).toBe(250);
+    expect(metrics.offsetY).toBe(0);
   });
 
-  it('should map a centered sub-rect to natural coordinates', () => {
-    const metrics = { contentWidth: 800, contentHeight: 400, offsetX: 0, offsetY: 100 };
-    const rect = mapContentRectToNatural({ left: 200, top: 200, width: 400, height: 200 }, metrics, {
-      width: 2000,
-      height: 1000,
-    });
-    expect(rect).toEqual({ left: 500, top: 250, width: 1000, height: 500 });
+  it('should compute vertical letterbox offsets for wide image', () => {
+    const img = mockImage({ naturalWidth: 2000, naturalHeight: 1000, width: 800, height: 600 });
+    const metrics = getContentMetrics(img);
+    expect(metrics.contentWidth).toBe(800);
+    expect(metrics.contentHeight).toBe(400);
+    expect(metrics.offsetX).toBe(0);
+    expect(metrics.offsetY).toBe(100);
   });
 
-  it('should handle letterboxed content with horizontal offset', () => {
-    const metrics = { contentWidth: 300, contentHeight: 600, offsetX: 250, offsetY: 0 };
-    const rect = mapContentRectToNatural({ left: 250, top: 0, width: 300, height: 600 }, metrics, {
-      width: 1000,
-      height: 2000,
-    });
-    expect(rect).toEqual({ left: 0, top: 0, width: 1000, height: 2000 });
+  it('should use clientWidth/clientHeight for video elements', () => {
+    const video = mockVideo({ videoWidth: 1920, videoHeight: 1080, clientWidth: 800, clientHeight: 600 });
+    const metrics = getContentMetrics(video);
+    expect(metrics.contentWidth).toBe(800);
+    expect(metrics.contentHeight).toBe(450);
+    expect(metrics.offsetX).toBe(0);
+    expect(metrics.offsetY).toBe(75);
   });
 });
 
 describe('getNaturalSize', () => {
   it('should return naturalWidth/naturalHeight for images', () => {
-    const img = mockImage({ naturalWidth: 4000, naturalHeight: 3000 });
+    const img = mockImage({ naturalWidth: 4000, naturalHeight: 3000, width: 800, height: 600 });
     expect(getNaturalSize(img)).toEqual({ width: 4000, height: 3000 });
   });
 

web/src/lib/utils/container-utils.ts

@@ -49,6 +49,13 @@ export const scaleToFit = (dimensions: Size, container: Size): Size => {
   };
 };
 
+const getElementSize = (element: HTMLImageElement | HTMLVideoElement): Size => {
+  if (element instanceof HTMLVideoElement) {
+    return { width: element.clientWidth, height: element.clientHeight };
+  }
+  return { width: element.width, height: element.height };
+};
+
 export const getNaturalSize = (element: HTMLImageElement | HTMLVideoElement): Size => {
   if (element instanceof HTMLVideoElement) {
     return { width: element.videoWidth, height: element.videoHeight };
@@ -56,18 +63,17 @@ export const getNaturalSize = (element: HTMLImageElement | HTMLVideoElement): Si
   return { width: element.naturalWidth, height: element.naturalHeight };
 };
 
-export function computeContentMetrics(imageSize: Size, containerSize: Size): ContentMetrics {
-  if (imageSize.width === 0 || imageSize.height === 0) {
-    return { contentWidth: 0, contentHeight: 0, offsetX: 0, offsetY: 0 };
-  }
-  const { width: contentWidth, height: contentHeight } = scaleToFit(imageSize, containerSize);
+export const getContentMetrics = (element: HTMLImageElement | HTMLVideoElement): ContentMetrics => {
+  const natural = getNaturalSize(element);
+  const client = getElementSize(element);
+  const { width: contentWidth, height: contentHeight } = scaleToFit(natural, client);
   return {
     contentWidth,
     contentHeight,
-    offsetX: (containerSize.width - contentWidth) / 2,
-    offsetY: (containerSize.height - contentHeight) / 2,
+    offsetX: (client.width - contentWidth) / 2,
+    offsetY: (client.height - contentHeight) / 2,
   };
-}
+};
 
 export function mapNormalizedToContent(point: Point, sizeOrMetrics: Size | ContentMetrics): Point {
   if ('contentWidth' in sizeOrMetrics) {
@@ -103,25 +109,3 @@ export function mapNormalizedRectToContent(
     height: br.y - tl.y,
   };
 }
-
-export function mapContentToNatural(point: Point, metrics: ContentMetrics, naturalSize: Size): Point {
-  return {
-    x: ((point.x - metrics.offsetX) / metrics.contentWidth) * naturalSize.width,
-    y: ((point.y - metrics.offsetY) / metrics.contentHeight) * naturalSize.height,
-  };
-}
-
-export function mapContentRectToNatural(rect: Rect, metrics: ContentMetrics, naturalSize: Size): Rect {
-  const topLeft = mapContentToNatural({ x: rect.left, y: rect.top }, metrics, naturalSize);
-  const bottomRight = mapContentToNatural(
-    { x: rect.left + rect.width, y: rect.top + rect.height },
-    metrics,
-    naturalSize,
-  );
-  return {
-    top: topLeft.y,
-    left: topLeft.x,
-    width: bottomRight.x - topLeft.x,
-    height: bottomRight.y - topLeft.y,
-  };
-}

web/src/lib/utils/people-utils.spec.ts

@@ -1,6 +1,6 @@
 import type { Faces } from '$lib/managers/asset-viewer-manager.svelte';
 import type { Size } from '$lib/utils/container-utils';
-import { getBoundingBox, scaleFaceRectOnResize, type FaceRectState, type ResizeContext } from '$lib/utils/people-utils';
+import { getBoundingBox } from '$lib/utils/people-utils';
 
 const makeFace = (overrides: Partial<Faces> = {}): Faces => ({
   id: 'face-1',
@@ -68,88 +68,3 @@ describe('getBoundingBox', () => {
     expect(boxes[0].left).toBeLessThan(boxes[1].left);
   });
 });
-
-describe('scaleFaceRectOnResize', () => {
-  const makeRect = (overrides: Partial<FaceRectState> = {}): FaceRectState => ({
-    left: 300,
-    top: 400,
-    scaleX: 1,
-    scaleY: 1,
-    ...overrides,
-  });
-
-  const makePrevious = (overrides: Partial<ResizeContext> = {}): ResizeContext => ({
-    offsetX: 100,
-    offsetY: 50,
-    contentWidth: 800,
-    ...overrides,
-  });
-
-  it('should preserve relative position when container doubles in size', () => {
-    const rect = makeRect({ left: 300, top: 250 });
-    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
-
-    const result = scaleFaceRectOnResize(rect, previous, { offsetX: 200, offsetY: 100, contentWidth: 1600 });
-
-    expect(result.left).toBe(600);
-    expect(result.top).toBe(500);
-    expect(result.scaleX).toBe(2);
-    expect(result.scaleY).toBe(2);
-  });
-
-  it('should preserve relative position when container halves in size', () => {
-    const rect = makeRect({ left: 300, top: 250 });
-    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
-
-    const result = scaleFaceRectOnResize(rect, previous, { offsetX: 50, offsetY: 25, contentWidth: 400 });
-
-    expect(result.left).toBe(150);
-    expect(result.top).toBe(125);
-    expect(result.scaleX).toBe(0.5);
-    expect(result.scaleY).toBe(0.5);
-  });
-
-  it('should handle no change in dimensions', () => {
-    const rect = makeRect({ left: 300, top: 250, scaleX: 1.5, scaleY: 1.5 });
-    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
-
-    const result = scaleFaceRectOnResize(rect, previous, { offsetX: 100, offsetY: 50, contentWidth: 800 });
-
-    expect(result.left).toBe(300);
-    expect(result.top).toBe(250);
-    expect(result.scaleX).toBe(1.5);
-    expect(result.scaleY).toBe(1.5);
-  });
-
-  it('should handle offset changes without content width change', () => {
-    const rect = makeRect({ left: 300, top: 250 });
-    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
-
-    const result = scaleFaceRectOnResize(rect, previous, { offsetX: 150, offsetY: 75, contentWidth: 800 });
-
-    expect(result.left).toBe(350);
-    expect(result.top).toBe(275);
-    expect(result.scaleX).toBe(1);
-    expect(result.scaleY).toBe(1);
-  });
-
-  it('should compound existing scale factors', () => {
-    const rect = makeRect({ left: 300, top: 250, scaleX: 2, scaleY: 3 });
-    const previous = makePrevious({ contentWidth: 800 });
-
-    const result = scaleFaceRectOnResize(rect, previous, { ...previous, contentWidth: 1600 });
-
-    expect(result.scaleX).toBe(4);
-    expect(result.scaleY).toBe(6);
-  });
-
-  it('should handle rect at image origin', () => {
-    const rect = makeRect({ left: 100, top: 50 });
-    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
-
-    const result = scaleFaceRectOnResize(rect, previous, { offsetX: 200, offsetY: 100, contentWidth: 1600 });
-
-    expect(result.left).toBe(200);
-    expect(result.top).toBe(100);
-  });
-});

web/src/lib/utils/people-utils.ts

@@ -1,7 +1,7 @@
 import { AssetTypeEnum, type AssetFaceResponseDto } from '@immich/sdk';
 import type { Faces } from '$lib/managers/asset-viewer-manager.svelte';
 import { getAssetMediaUrl } from '$lib/utils';
-import { mapNormalizedRectToContent, type ContentMetrics, type Rect, type Size } from '$lib/utils/container-utils';
+import { mapNormalizedRectToContent, type Rect, type Size } from '$lib/utils/container-utils';
 
 export type BoundingBox = Rect & { id: string };
 
@@ -21,32 +21,6 @@ export const getBoundingBox = (faces: Faces[], imageSize: Size): BoundingBox[] =
   return boxes;
 };
 
-export type FaceRectState = {
-  left: number;
-  top: number;
-  scaleX: number;
-  scaleY: number;
-};
-
-export type ResizeContext = Pick<ContentMetrics, 'contentWidth' | 'offsetX' | 'offsetY'>;
-
-export const scaleFaceRectOnResize = (
-  faceRect: FaceRectState,
-  previous: ResizeContext,
-  current: ResizeContext,
-): FaceRectState => {
-  const scale = current.contentWidth / previous.contentWidth;
-  const imageRelativeLeft = (faceRect.left - previous.offsetX) * scale;
-  const imageRelativeTop = (faceRect.top - previous.offsetY) * scale;
-
-  return {
-    left: current.offsetX + imageRelativeLeft,
-    top: current.offsetY + imageRelativeTop,
-    scaleX: faceRect.scaleX * scale,
-    scaleY: faceRect.scaleY * scale,
-  };
-};
-
 export const zoomImageToBase64 = async (
   face: AssetFaceResponseDto,
   assetId: string,

web/src/routes/(user)/explore/+page.svelte

@@ -6,10 +6,10 @@
   import SingleGridRow from '$lib/components/shared-components/SingleGridRow.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { Route } from '$lib/route';
-  import { getAssetMediaUrl, getPeopleThumbnailUrl } from '$lib/utils';
+  import { getAssetMediaUrl, getPeopleThumbnailUrl, memoryLaneTitle } from '$lib/utils';
   import { getAssetInfo, AssetMediaSize, type SearchExploreResponseDto } from '@immich/sdk';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { Icon } from '@immich/ui';
+  import { Icon, ImageCarousel } from '@immich/ui';
   import { mdiHeart } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -28,13 +28,22 @@
     return targetField?.items || [];
   };
 
-  let places = $derived(getFieldItems(data.items, 'exifInfo.city'));
+  let places = $derived(getFieldItems(data.explore, 'exifInfo.city'));
   let recents = $derived(
-    getFieldItems(data.items, 'createdAt').sort((a, b) => new Date(b.value).getTime() - new Date(a.value).getTime()),
+    getFieldItems(data.explore, 'createdAt').sort((a, b) => new Date(b.value).getTime() - new Date(a.value).getTime()),
+  );
+  let people = $state(data.people.people);
+  let memories = $derived(
+    data.memories.map((memory) => ({
+      id: memory.id,
+      title: $memoryLaneTitle(memory),
+      href: Route.memories({ id: memory.assets[0].id }),
+      alt: $t('memory_lane_title', { values: { title: $getAltText(toTimelineAsset(memory.assets[0])) } }),
+      src: getAssetMediaUrl({ id: memory.assets[0].id }),
+    })),
   );
-  let people = $state(data.response.people);
 
-  let hasPeople = $derived(data.response.total > 0);
+  let hasPeople = $derived(data.people.total > 0);
 
   const onPersonThumbnailReady = ({ id }: { id: string }) => {
     for (const person of people) {
@@ -124,6 +133,20 @@
     </div>
   {/if}
 
+  {#if memories.length > 0}
+    <div class="mt-2 mb-6">
+      <div class="flex justify-between">
+        <p class="mb-4 font-medium dark:text-immich-dark-fg">{$t('memories')}</p>
+        <a
+          href={Route.memories()}
+          class="pe-4 text-sm font-medium hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
+          draggable="false">{$t('view_all')}</a
+        >
+      </div>
+      <ImageCarousel items={memories} />
+    </div>
+  {/if}
+
   {#if recents.length > 0}
     <div class="mt-2 mb-6">
       <div class="flex justify-between">

web/src/routes/(user)/explore/+page.ts

@@ -1,16 +1,24 @@
-import { getAllPeople, getExploreData } from '@immich/sdk';
+import { getAllPeople, getExploreData, MemorySearchOrder } from '@immich/sdk';
+import { memoryManager } from '$lib/managers/memory-manager.svelte';
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
   await authenticate(url);
-  const [items, response] = await Promise.all([getExploreData(), getAllPeople({ withHidden: false })]);
+  memoryManager.filters = { size: 12, order: MemorySearchOrder.Desc };
+
+  const [explore, people] = await Promise.all([
+    getExploreData(),
+    getAllPeople({ withHidden: false }),
+    memoryManager.ready(),
+  ]);
   const $t = await getFormatter();
 
   return {
-    items,
-    response,
+    explore,
+    people,
+    memories: memoryManager.memories,
     meta: {
       title: $t('explore'),
     },

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

@@ -1,5 +1,109 @@
-<script>
+<script lang="ts">
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import type { PageData } from './$types';
+  import { Route } from '$lib/route';
+  import { getAssetMediaUrl, memoryLaneTitle } from '$lib/utils';
+  import { t } from 'svelte-i18n';
+  import { mdiHeartOutline, mdiHeart } from '@mdi/js';
+  import { Button, Icon, LoadingSpinner } from '@immich/ui';
+  import { locale } from '$lib/stores/preferences.store';
+  import { getAltText } from '$lib/utils/thumbnail-util';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { page } from '$app/state';
   import MemoryViewer from './MemoryViewer.svelte';
+  import { QueryParameter } from '$lib/constants';
+  import { memoryManager } from '$lib/managers/memory-manager.svelte';
+  import { clearQueryParam, setQueryValue } from '$lib/utils/navigation';
+
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
+  let onlyFavorites = $state(page.url.searchParams.get('favorites') === 'true');
+  let lastElement: HTMLElement | undefined = $state();
+
+  const toggleFavorites = async () => {
+    onlyFavorites = !onlyFavorites;
+    memoryManager.filters = onlyFavorites ? { isSaved: true } : {};
+    await memoryManager.ready();
+
+    if (onlyFavorites) {
+      void setQueryValue('favorites', 'true');
+    } else {
+      void clearQueryParam('favorites', page.url);
+    }
+  };
+
+  const intersectionObserver = new IntersectionObserver((entries) => {
+    const entry = entries.find((entry) => entry.target === lastElement);
+    if (entry?.isIntersecting && memoryManager.hasNextPage) {
+      void memoryManager.loadNextPage();
+    }
+  });
+
+  $effect(() => {
+    if (lastElement) {
+      intersectionObserver.disconnect();
+      intersectionObserver.observe(lastElement);
+    }
+  });
 </script>
 
-<MemoryViewer />
+{#if page.url.searchParams.has(QueryParameter.ID)}
+  <MemoryViewer />
+{:else}
+  <UserPageLayout title={data.meta.title} description={`(${memoryManager.total.toLocaleString($locale)})`}>
+    {#snippet buttons()}
+      <div class="flex place-items-center gap-2">
+        <Button
+          leadingIcon={mdiHeartOutline}
+          size="small"
+          variant={onlyFavorites ? 'filled' : 'ghost'}
+          color="secondary"
+          onclick={() => toggleFavorites()}>{$t('only_favorites')}</Button
+        >
+      </div>
+    {/snippet}
+    {#if memoryManager.memories.length > 0}
+      <div class="grid w-full grid-cols-3 gap-7 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-7">
+        {#each memoryManager.memories as memory, index (memory.id)}
+          <a
+            href={Route.memories({ id: memory.assets[0].id })}
+            class="relative rounded-md bg-gray-50 p-2 pb-0 shadow-md sm:p-5 sm:pb-0"
+            style:transform={`rotate(${Math.random() * 5 - 2.5}deg)`}
+            bind:this={
+              () => (index === memoryManager.memories.length - 1 ? lastElement : null),
+              (e) => {
+                if (index === memoryManager.memories.length - 1) {
+                  lastElement = e;
+                }
+              }
+            }
+          >
+            {#if memory.isSaved}
+              <div class="absolute inset-s-2 top-2 z-2">
+                <Icon data-icon-favorite icon={mdiHeart} size="32" class="text-red-400" />
+              </div>
+            {/if}
+            <img
+              src={getAssetMediaUrl({ id: memory.assets[0].id })}
+              alt={$getAltText(toTimelineAsset(memory.assets[0]))}
+              class="aspect-square object-cover brightness-75"
+              loading="lazy"
+            />
+            <p
+              class="my-2 text-center text-sm font-medium text-ellipsis text-black capitalize hover:cursor-pointer sm:my-5"
+            >
+              {$memoryLaneTitle(memory)}
+            </p>
+          </a>
+        {/each}
+      </div>
+    {:else if memoryManager.total > 0}
+      <div class="flex items-center justify-center py-16">
+        <LoadingSpinner size="giant" />
+      </div>
+    {/if}
+  </UserPageLayout>
+{/if}

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

@@ -1,3 +1,6 @@
+import { isEqual } from 'lodash-es';
+import { QueryParameter } from '$lib/constants';
+import { memoryManager } from '$lib/managers/memory-manager.svelte';
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
@@ -6,10 +9,19 @@ export const load = (async ({ url }) => {
   const user = await authenticate(url);
   const $t = await getFormatter();
 
+  const filters = url.searchParams.get('favorites') === 'true' ? { isSaved: true } : {};
+  if (
+    !(url.searchParams.has(QueryParameter.ID) && memoryManager.memories.length > 0) &&
+    !isEqual(memoryManager.filters, filters)
+  ) {
+    memoryManager.filters = filters;
+    await memoryManager.ready();
+  }
+
   return {
     user,
     meta: {
-      title: $t('memory'),
+      title: $t('memories'),
     },
   };
 }) satisfies PageLoad;

web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte

@@ -82,6 +82,7 @@
   let progressBarController: Tween<number> | undefined = $state(undefined);
   let videoPlayer: HTMLVideoElement | undefined = $state();
   const asHref = (asset: { id: string }) => `?${QueryParameter.ID}=${asset.id}`;
+  let previousPage = $state(Route.memories());
 
   const handleNavigate = async (asset?: { id: string }) => {
     if (assetViewerManager.isViewing) {
@@ -106,7 +107,7 @@
   const handlePreviousAsset = () => handleNavigate(current?.previous?.asset);
   const handleNextMemory = () => handleNavigate(current?.nextMemory?.assets[0]);
   const handlePreviousMemory = () => handleNavigate(current?.previousMemory?.assets[0]);
-  const handleEscape = async () => goto(Route.photos());
+  const handleEscape = async () => goto(previousPage);
   const handleSelectAll = () =>
     assetMultiSelectManager.selectAssets(current?.memory.assets.map((a) => toTimelineAsset(a)) || []);
 
@@ -249,7 +250,7 @@
 
   const init = (target: Page | NavigationTarget | null) => {
     if (memoryManager.memories.length === 0) {
-      return handlePromiseError(goto(Route.photos()));
+      return handlePromiseError(goto(previousPage));
     }
 
     current = loadFromParams(target);
@@ -281,6 +282,10 @@
   };
 
   afterNavigate(({ from, to }) => {
+    if (from?.url !== null && !from?.url.searchParams.has(QueryParameter.ID)) {
+      previousPage = from!.url.toString();
+    }
+
     memoryManager.ready().then(
       () => {
         let target;
@@ -381,7 +386,7 @@
             icon={mdiClose}
             aria-label={$t('close')}
             size="large"
-            onclick={() => goto(Route.photos())}
+            onclick={() => goto(previousPage)}
           />
           <p class="text-lg">
             {$memoryLaneTitle(current.memory)}

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

@@ -1,4 +1,7 @@
+import { DateTime } from 'luxon';
+import { memoryManager } from '$lib/managers/memory-manager.svelte';
 import { authenticate } from '$lib/utils/auth';
+import { asLocalTimeISO } from '$lib/utils/date-time';
 import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
@@ -6,6 +9,10 @@ export const load = (async ({ url }) => {
   await authenticate(url);
   const $t = await getFormatter();
 
+  if (memoryManager.filters === undefined || memoryManager.filters.$for !== asLocalTimeISO(DateTime.now())) {
+    memoryManager.filters = { $for: asLocalTimeISO(DateTime.now()) };
+  }
+
   return {
     meta: {
       title: $t('photos'),