Merge 0111e939de into 652ef8a427

2026-08-15 13:03:57 +00:00 · 2026-08-14 16:42:08 +00:00 · 2026-08-14 16:42:08 +00:00 · 808514b13d
commit 808514b13d
parent 652ef8a427 0111e939de
32 changed files with 569 additions and 70 deletions
--- a/e2e/src/ui/generators/memory/model-objects.ts
+++ b/e2e/src/ui/generators/memory/model-objects.ts
@ -80,5 +80,7 @@ export function generateMemoriesFromTimeline(
    );
  }

+  memories.sort((a, b) => new Date(b.memoryAt).getMilliseconds() - new Date(a.memoryAt).getMilliseconds());
+
  return memories;
 }
--- a/e2e/src/ui/mock-network/memory-network.ts
+++ b/e2e/src/ui/mock-network/memory-network.ts
@ -62,4 +62,14 @@ export const setupMemoryMockApiRoutes = async (

    await route.fallback();
  });
+
+  await context.route('**/api/memories/statistics*', async (route) => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      json: {
+        total: memories.length,
+      },
+    });
+  });
 };
--- a/e2e/src/ui/specs/memory/utils.ts
+++ b/e2e/src/ui/specs/memory/utils.ts
@ -3,7 +3,7 @@ import type { AssetResponseDto } from '@immich/sdk';
 import { expect, Page } from '@playwright/test';

 function getAssetIdFromUrl(url: URL): string | null {
-  const pathMatch = url.pathname.match(/\/memory\/photos\/([^/]+)/);
+  const pathMatch = url.pathname.match(/\/memories\/photos\/([^/]+)/);
  if (pathMatch) {
    return pathMatch[1];
  }
@ -21,12 +21,12 @@ export const memoryViewerUtils = {
  },

  async openMemoryPage(page: Page) {
-    await page.goto('/memory');
+    await page.goto('/memories');
    await this.waitForMemoryLoad(page);
  },

  async openMemoryPageWithAsset(page: Page, assetId: string) {
-    await page.goto(`/memory?id=${assetId}`);
+    await page.goto(`/memories?id=${assetId}`);
    await this.waitForMemoryLoad(page);
  },
 };
--- a/mobile/lib/domain/services/memory.service.dart
+++ b/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);
  }
--- a/mobile/lib/infrastructure/repositories/memory.repository.dart
+++ b/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.isNull() | _db.memoryEntity.showAt.isSmallerOrEqualValue(localUtc))
-          ..where(_db.memoryEntity.hideAt.isNull() | _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.isNull() | _db.memoryEntity.showAt.isSmallerOrEqualValue(localUtc));
+      query.where(_db.memoryEntity.hideAt.isNull() | _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) {
--- a/mobile/lib/pages/common/tab_shell.page.dart
+++ b/mobile/lib/pages/common/tab_shell.page.dart
@ -111,7 +111,7 @@ void _onNavigationSelected(TabsRouter router, int index, WidgetRef ref) {
  }

  if (index == kPhotoTabIndex) {
-    ref.invalidate(driftMemoryFutureProvider);
+    ref.invalidate(driftMemoryLaneProvider);
  }

  if (router.activeIndex != kSearchTabIndex && index == kSearchTabIndex) {
--- a/mobile/lib/presentation/pages/dev/main_timeline.page.dart
+++ b/mobile/lib/presentation/pages/dev/main_timeline.page.dart
@ -39,7 +39,7 @@ class _MainTimelinePageState extends ConsumerState<MainTimelinePage> {

  @override
  Widget build(BuildContext context) {
-    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,
--- a/mobile/lib/presentation/pages/drift_library.page.dart
+++ b/mobile/lib/presentation/pages/drift_library.page.dart
@ -7,8 +7,10 @@ import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/generated/translations.g.dart';
 import 'package:immich_mobile/presentation/widgets/images/local_album_thumbnail.widget.dart';
 import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.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/people.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/user.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(),
+          ],
        ),
      ),
    );
@ -329,6 +336,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(
+                  context.t.memories,
+                  style: context.textTheme.titleSmall?.copyWith(
+                    color: context.colorScheme.onSurface,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
+
@visibleForTesting
 final sharedWithPartnerProvider = StreamProvider.autoDispose<Iterable<Partner>>((ref) {
  final currentUser = ref.watch(currentUserProvider);
--- a/mobile/lib/presentation/pages/drift_memory_list.page.dart
+++ b/mobile/lib/presentation/pages/drift_memory_list.page.dart
@ -0,0 +1,107 @@
+import 'dart:async';
+
+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/generated/translations.g.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(context.t.memories),
+            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]);
+                      }
+                      unawaited(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()),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
--- a/mobile/lib/presentation/widgets/memory/memory_lane.widget.dart
+++ b/mobile/lib/presentation/widgets/memory/memory_lane.widget.dart
@ -16,7 +16,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();
--- a/mobile/lib/providers/app_life_cycle.provider.dart
+++ b/mobile/lib/providers/app_life_cycle.provider.dart
@ -128,7 +128,7 @@ class AppLifeCycleNotifier extends StateNotifier<AppLifeCycleEnum> {
          syncSuccess = await backgroundManager.syncRemote();
        }, "syncRemote"),
      ]);
-      _ref.invalidate(driftMemoryFutureProvider);
+      _ref.invalidate(driftAllMemoriesProvider);
      if (syncSuccess) {
        await Future.wait([
          _safeRun(backgroundManager.hashAssets, "hashAssets").then((_) {
--- a/mobile/lib/providers/infrastructure/memory.provider.dart
+++ b/mobile/lib/providers/infrastructure/memory.provider.dart
@ -15,7 +15,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 [];
@ -29,3 +29,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);
+});
--- a/mobile/lib/routing/router.dart
+++ b/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';
@ -194,6 +195,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: '/'),
--- a/mobile/test/providers/infrastructure/memory_provider_test.dart
+++ b/mobile/test/providers/infrastructure/memory_provider_test.dart
@ -44,11 +44,11 @@ void main() {
    when(() => userService.watchMyUser()).thenAnswer((_) => const Stream.empty());
  });

-  group('driftMemoryFutureProvider', () {
+  group('driftMemoryLaneProvider', () {
    test('re-queries after local midnight', () {
      fakeAsync((async) {
        final container = makeContainer();
-        container.listen(driftMemoryFutureProvider, (_, __) {});
+        container.listen(driftMemoryLaneProvider, (_, __) {});
        async.flushMicrotasks();

        verify(() => memoryService.getMemoryLane('user-1')).called(1);
@ -66,7 +66,7 @@ void main() {
    test('cancels the midnight timer when disposed', () {
      fakeAsync((async) {
        final container = makeContainer();
-        final subscription = container.listen(driftMemoryFutureProvider, (_, __) {});
+        final subscription = container.listen(driftMemoryLaneProvider, (_, __) {});
        async.flushMicrotasks();
        verify(() => memoryService.getMemoryLane('user-1')).called(1);

@ -83,7 +83,7 @@ void main() {

      fakeAsync((async) {
        final container = makeContainer();
-        container.listen(driftMemoryFutureProvider, (_, __) {});
+        container.listen(driftMemoryLaneProvider, (_, __) {});
        async.flushMicrotasks();

        async.elapse(const Duration(hours: 25));
--- a/open-api/immich-openapi-specs.json
+++ b/open-api/immich-openapi-specs.json
@ -7190,6 +7190,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,
@ -7359,6 +7370,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,
--- a/packages/sdk/src/fetch-client.ts
+++ b/packages/sdk/src/fetch-client.ts
@ -5006,11 +5006,12 @@ 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) {
@ -5022,6 +5023,7 @@ export function searchMemories({ $for, isSaved, isTrashed, order, size, $type }:
        isSaved,
        isTrashed,
        order,
+        page,
        size,
        "type": $type
    }))}`, {
@ -5046,11 +5048,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) {
@ -5062,6 +5065,7 @@ export function memoriesStatistics({ $for, isSaved, isTrashed, order, size, $typ
        isSaved,
        isTrashed,
        order,
+        page,
        size,
        "type": $type
    }))}`, {
--- a/server/src/dtos/memory.dto.ts
+++ b/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' });
--- a/server/src/repositories/memory.repository.ts
+++ b/server/src/repositories/memory.repository.ts
@ -90,6 +90,7 @@ export class MemoryRepository implements IBulkAsset {
          : qb.orderBy('memoryAt', (dto.order?.toLowerCase() || 'desc') as OrderByDirection),
      )
      .$if(dto.size !== undefined, (qb) => qb.limit(dto.size!))
+      .$if(dto.page !== undefined && dto.size !== undefined, (qb) => qb.offset((dto.page! - 1) * dto.size!))
      .execute();
  }

--- a/server/src/services/memory.service.spec.ts
+++ b/server/src/services/memory.service.spec.ts
@ -35,6 +35,7 @@ describe(MemoryService.name, () => {
      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.statistics.mockResolvedValue({ total: 2 });

      await expect(sut.search(factory.auth({ user: { id: userId } }), {})).resolves.toEqual(
        expect.arrayContaining([
@ -44,6 +45,8 @@ describe(MemoryService.name, () => {
          }),
        ]),
      );
+      mocks.memory.search.mockResolvedValue([]);
+      await expect(sut.search(factory.auth(), {})).resolves.toEqual([]);
    });

    it('should map empty result', async () => {
--- a/web/src/lib/managers/memory-manager.svelte.ts
+++ b/web/src/lib/managers/memory-manager.svelte.ts
@ -1,4 +1,11 @@
-import { deleteMemory, type MemoryResponseDto, removeMemoryAssets, searchMemories, updateMemory } from '@immich/sdk';
+import {
+  deleteMemory,
+  type MemoryResponseDto,
+  removeMemoryAssets,
+  searchMemories,
+  updateMemory,
+  memoriesStatistics,
+} from '@immich/sdk';
 import { DateTime } from 'luxon';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 import { eventManager } from '$lib/managers/event-manager.svelte';
@ -19,8 +26,15 @@ export type MemoryAsset = MemoryIndex & {
  nextMemory?: MemoryResponseDto;
 };

+const PAGE_SIZE = 250;
+
 class MemoryManager {
-  #loading: Promise<void> | undefined;
+  #loading = $state<Promise<void>>();
+  #filters: Parameters<typeof searchMemories>[0] | undefined;
+  #hasNextPage: boolean = true;
+  #page: number = 1;
+  #total: number | undefined = $state();
+  #queued: boolean = false;

  constructor() {
    eventManager.on({
@ -36,7 +50,17 @@ class MemoryManager {
    this.scheduleHourlyRefresh();
  }

-  ready() {
+  get filters() {
+    return this.#filters;
+  }
+
+  set filters(filters) {
+    this.#filters = filters;
+    this.clearCache();
+    void this.loadNextPage();
+  }
+
+  refresh() {
    return this.initialize();
  }

@ -116,22 +140,64 @@ class MemoryManager {
    }
  }

+  loadNextPage() {
+    if (this.#hasNextPage) {
+      if (this.#loading === undefined) {
+        this.#loading = this.load(this.#page++);
+      } else {
+        this.#queued = true;
+      }
+    }
+  }
+
+  get hasNextPage() {
+    return this.#hasNextPage;
+  }
+
+  get total() {
+    return this.#total;
+  }
+
+  get loading() {
+    return this.#loading;
+  }
+
  private clearCache() {
    this.#loading = undefined;
+    this.#hasNextPage = true;
+    this.#page = 1;
+    this.#total = undefined;
    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: DateTime.now().toFormat('yyyy-MM-dd') });
-    this.memories = memories.filter((memory) => memory.assets.length > 0);
+  private async load(page: number) {
+    if (this.#filters === undefined) {
+      return;
+    }
+    const items = await searchMemories({ size: PAGE_SIZE, ...this.#filters, page });
+    this.memories.push(...items);
+
+    if (this.#total === undefined) {
+      const { total } = await memoriesStatistics(this.#filters);
+      this.#total = total;
+    }
+
+    this.#hasNextPage = this.memories.length < this.#total;
+    this.#loading = undefined;
+
+    if (this.#queued) {
+      this.#queued = false;
+      this.#loading = this.load(this.#page++);
+      await this.#loading;
+    }
  }

  private scheduleHourlyRefresh() {
@ -145,12 +211,19 @@ 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) {
+            return;
+          }
+          this.clearCache();
+          this.loadNextPage();
        },
        60 * 60 * 1000,
      );
--- a/web/src/lib/route.ts
+++ b/web/src/lib/route.ts
@ -83,7 +83,7 @@ export const Route = {
    '/map' + (point ? `#${point.zoom}/${point.lat}/${point.lng}` : ''),

  // memories
-  memories: (params?: { id?: string }) => '/memory' + asQueryString(params),
+  memories: (params?: { id?: string }) => '/memories' + asQueryString(params),

  // partners
  viewPartner: ({ id }: { id: string }) => `/partners/${id}`,
--- a/web/src/lib/utils.ts
+++ b/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 { convertBCP47, langs } from '$lib/utils/i18n';
@ -365,9 +366,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');
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/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">
--- a/web/src/routes/(user)/explore/+page.ts
+++ b/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.refresh(),
+  ]);
  const $t = await getFormatter();

  return {
-    items,
-    response,
+    explore,
+    people,
+    memories: memoryManager.memories,
    meta: {
      title: $t('explore'),
    },
--- a/web/src/routes/(user)/memories/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/memories/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -0,0 +1,126 @@
+<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';
+
+  type Props = {
+    data: PageData;
+  };
+
+  const { data }: Props = $props();
+  let onlyFavorites = $state(page.url.searchParams.get('favorites') === 'true');
+  let lastElement: HTMLElement | null | undefined = $state();
+
+  const toggleFavorites = async () => {
+    onlyFavorites = !onlyFavorites;
+    memoryManager.filters = onlyFavorites ? { isSaved: true } : {};
+    await memoryManager.refresh();
+
+    if (onlyFavorites) {
+      await setQueryValue('favorites', 'true');
+    } else {
+      await 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) {
+      return;
+    }
+    intersectionObserver.disconnect();
+    intersectionObserver.observe(lastElement);
+  });
+
+  const rotationClasses = [
+    'rotate-[-2.5deg]',
+    '-rotate-2',
+    'rotate-[-1.5deg]',
+    '-rotate-1',
+    'rotate-[-0.5deg]',
+    'rotate-0',
+    'rotate-[0.5deg]',
+    'rotate-1',
+    'rotate-[1.5deg]',
+    'rotate-2',
+    'rotate-[2.5deg]',
+  ];
+
+  const getRotation = () => rotationClasses[Math.floor(Math.random() * rotationClasses.length)];
+</script>
+
+{#if page.url.searchParams.has(QueryParameter.ID)}
+  <MemoryViewer />
+{:else}
+  <UserPageLayout
+    title={data.meta.title}
+    description={memoryManager.total === undefined ? undefined : `(${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-light-100 p-2 pb-0 shadow-md transition-all hover:scale-102 hover:rotate-0 hover:shadow-lg sm:p-5 sm:pb-0 ${getRotation()}`}
+            bind:this={
+              () => (index === memoryManager.memories.length - 1 ? lastElement : null),
+              (e) => {
+                if (index === memoryManager.memories.length - 1) {
+                  lastElement = e;
+                }
+              }
+            }
+          >
+            <img
+              src={getAssetMediaUrl({ id: memory.assets[0].id })}
+              alt={$getAltText(toTimelineAsset(memory.assets[0]))}
+              class="aspect-square object-cover brightness-75"
+              loading="lazy"
+            />
+            {#if memory.isSaved}
+              <div class="absolute inset-s-2 top-2">
+                <Icon data-icon-favorite icon={mdiHeart} size="32" class="text-red-400" />
+              </div>
+            {/if}
+            <p class="my-2 text-center text-sm font-medium text-ellipsis capitalize hover:cursor-pointer sm:my-5">
+              {$memoryLaneTitle(memory)}
+            </p>
+          </a>
+        {/each}
+      </div>
+    {:else if memoryManager.loading}
+      <div class="flex items-center justify-center py-16">
+        <LoadingSpinner size="giant" />
+      </div>
+    {/if}
+  </UserPageLayout>
+{/if}
--- a/web/src/routes/(user)/memories/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/memories/[[photos=photos]]/[[assetId=id]]/+page.ts
@ -0,0 +1,27 @@
+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';
+
+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.refresh();
+  }
+
+  return {
+    user,
+    meta: {
+      title: $t('memories'),
+    },
+  };
+}) satisfies PageLoad;
--- a/web/src/routes/(user)/memories/[[photos=photos]]/[[assetId=id]]/MemoryPhotoViewer.svelte
+++ b/web/src/routes/(user)/memories/[[photos=photos]]/[[assetId=id]]/MemoryPhotoViewer.svelte
--- a/web/src/routes/(user)/memories/[[photos=photos]]/[[assetId=id]]/MemoryVideoViewer.svelte
+++ b/web/src/routes/(user)/memories/[[photos=photos]]/[[assetId=id]]/MemoryVideoViewer.svelte
--- a/web/src/routes/(user)/memories/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
+++ b/web/src/routes/(user)/memories/[[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,8 +282,12 @@
  };

  afterNavigate(({ from, to }) => {
+    if (from?.url !== null && !from?.url.searchParams.has(QueryParameter.ID)) {
+      previousPage = from!.url.href;
+    }
+
    memoryManager
-      .ready()
+      .refresh()
      .then(() => {
        let target;
        if (to?.params?.assetId) {
@ -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)}
--- a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -1,5 +0,0 @@
-<script>
-  import MemoryViewer from './MemoryViewer.svelte';
-</script>
-
-<MemoryViewer />
--- a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.ts
@ -1,15 +0,0 @@
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
-import type { PageLoad } from './$types';
-
-export const load = (async ({ url }) => {
-  const user = await authenticate(url);
-  const $t = await getFormatter();
-
-  return {
-    user,
-    meta: {
-      title: $t('memory'),
-    },
-  };
-}) satisfies PageLoad;
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@ -39,6 +39,7 @@
  import { AssetVisibility } from '@immich/sdk';
  import { ActionButton, CommandPaletteDefaultProvider, ImageCarousel } from '@immich/ui';
  import { mdiDotsVertical } from '@mdi/js';
+  import { DateTime } from 'luxon';
  import { t } from 'svelte-i18n';

  let timelineManager = $state<TimelineManager>() as TimelineManager;
@ -90,6 +91,10 @@
      src: getAssetMediaUrl({ id: memory.assets[0].id }),
    })),
  );
+
+  if (memoryManager.filters === undefined || memoryManager.filters.$for !== DateTime.now().toISODate()) {
+    memoryManager.filters = { $for: DateTime.now().toISODate() };
+  }
 </script>

 <UserPageLayout hideNavbar={assetMultiSelectManager.selectionActive} scrollbar={false}>