From 1eed0e14f567d701dd3cd085e679abbb4b54a756 Mon Sep 17 00:00:00 2001
From: Calum Dingwall <29152895+caburum@users.noreply.github.com>
Date: Fri, 26 Jul 2024 17:20:35 -0600
Subject: [PATCH 1/5] feat(web): persist people page scroll position when
 clicking back on person page

---
 .../layouts/user-page-layout.svelte           |  7 ++-
 web/src/lib/constants.ts                      |  5 ++
 web/src/routes/(user)/people/+page.svelte     | 54 ++++++++++++++++++-
 .../[[assetId=id]]/+page.svelte               | 14 +++--
 4 files changed, 74 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte
index 8222007d57a4b..b7c70aeb5a744 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/web/src/lib/components/layouts/user-page-layout.svelte
@@ -11,6 +11,8 @@
   export let scrollbar = true;
   export let admin = false;
 
+  export let scrollSlot: HTMLDivElement;
+
   $: scrollbarClass = scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden';
   $: hasTitleClass = title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full';
 </script>
@@ -49,7 +51,10 @@
       </div>
     {/if}
 
-    <div class="{scrollbarClass} scrollbar-stable absolute {hasTitleClass} w-full overflow-y-auto">
+    <div
+      class="{scrollbarClass} scrollbar-stable absolute {hasTitleClass} w-full overflow-y-auto"
+      bind:this={scrollSlot}
+    >
       <slot />
     </div>
   </section>
diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts
index 7e82ef75bcdec..f2e5998925cf4 100644
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -78,6 +78,11 @@ export enum QueryParameter {
   PAGE = 'page',
 }
 
+export enum SessionStorageKey {
+  INFINITE_SCROLL_PAGE = 'infiniteScrollPage',
+  SCROLL_POSITION = 'scrollPosition',
+}
+
 export enum OpenSettingQueryParameterValue {
   OAUTH = 'oauth',
   JOB = 'job',
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index f1a2674e24905..eda4893230450 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
+  import { beforeNavigate, goto } from '$app/navigation';
   import { page } from '$app/stores';
   import { focusTrap } from '$lib/actions/focus-trap';
   import Button from '$lib/components/elements/buttons/button.svelte';
@@ -17,7 +17,7 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
+  import { ActionQueryParameterValue, AppRoute, QueryParameter, SessionStorageKey } from '$lib/constants';
   import { locale } from '$lib/stores/preferences.store';
   import { websocketEvents } from '$lib/stores/websocket';
   import { handlePromiseError } from '$lib/utils';
@@ -61,12 +61,61 @@
   let changeNameInputEl: HTMLInputElement | null;
   let innerHeight: number;
 
+  let scrollSlot: HTMLDivElement;
+  beforeNavigate(({ to }) => {
+    // Save current scroll information when going into a person page.
+    if (to && to.url.pathname.startsWith(AppRoute.PEOPLE)) {
+      if (nextPage) sessionStorage.setItem(SessionStorageKey.INFINITE_SCROLL_PAGE, nextPage.toString());
+      sessionStorage.setItem(SessionStorageKey.SCROLL_POSITION, scrollSlot.scrollTop.toString());
+    } else {
+      sessionStorage.removeItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
+      sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
+    }
+  });
+
+  const restoreScrollPosition = () => {
+    let newScroll = sessionStorage.getItem(SessionStorageKey.SCROLL_POSITION);
+    if (newScroll)
+      scrollSlot.scroll({
+        top: parseFloat(newScroll),
+        behavior: 'instant',
+      });
+    sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
+  };
+
   onMount(() => {
     const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
     if (getSearchedPeople) {
       searchName = getSearchedPeople;
       handlePromiseError(handleSearchPeople(true, searchName));
     }
+
+    // Load up to previously loaded page when returning.
+    let newNextPage = sessionStorage.getItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
+    if (newNextPage && nextPage) {
+      let startingPage = nextPage,
+        pagesToLoad = parseInt(newNextPage) - nextPage;
+
+      if (pagesToLoad) {
+        handlePromiseError(
+          Promise.all(
+            Array(pagesToLoad).map((_, i) => {
+              return getAllPeople({ withHidden: true, page: startingPage + i });
+            }),
+          ).then((pages) => {
+            pages.forEach((page) => {
+              people = people.concat(page.people);
+            });
+            nextPage = pages[pages.length - 1].hasNextPage ? startingPage + pagesToLoad : null;
+            restoreScrollPosition(); // wait until extra pages are loaded
+          }),
+        );
+      } else {
+        restoreScrollPosition();
+      }
+      sessionStorage.removeItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
+    }
+
     return websocketEvents.on('on_person_thumbnail', (personId: string) => {
       for (const person of people) {
         if (person.id === personId) {
@@ -311,6 +360,7 @@
 <UserPageLayout
   title={$t('people')}
   description={countVisiblePeople === 0 && !searchName ? undefined : `(${countVisiblePeople.toLocaleString($locale)})`}
+  bind:scrollSlot
 >
   <svelte:fragment slot="buttons">
     {#if people.length > 0}
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 02afe7f6106d1..202912f703400 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { afterNavigate, goto } from '$app/navigation';
+  import { afterNavigate, beforeNavigate, goto } from '$app/navigation';
   import { page } from '$app/stores';
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
   import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
@@ -25,7 +25,7 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import { AppRoute, QueryParameter } from '$lib/constants';
+  import { AppRoute, QueryParameter, SessionStorageKey } from '$lib/constants';
   import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { AssetStore } from '$lib/stores/assets.store';
@@ -126,6 +126,14 @@
     });
   });
 
+  beforeNavigate(({ to }) => {
+    // Forget scroll position from people page if going somewhere else.
+    if (to && !to.url.pathname.startsWith(AppRoute.PEOPLE)) {
+      sessionStorage.removeItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
+      sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
+    }
+  });
+
   const handleEscape = async () => {
     if ($showAssetViewer || viewMode === ViewMode.SUGGEST_MERGE) {
       return;
@@ -187,7 +195,7 @@
         type: NotificationType.Info,
       });
 
-      await goto(previousRoute, { replaceState: true });
+      await goto(previousRoute);
     } catch (error) {
       handleError(error, $t('errors.unable_to_hide_person'));
     }

From 819b92500ee740b8826ea7c613322887091dad70 Mon Sep 17 00:00:00 2001
From: Calum Dingwall <29152895+caburum@users.noreply.github.com>
Date: Fri, 26 Jul 2024 17:42:48 -0600
Subject: [PATCH 2/5] feat(web): partially fix scrolling reset on search page

the scroll position is still changed, however it centers the selected item which is more usable than just the top
---
 web/src/lib/utils/navigation.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/lib/utils/navigation.ts b/web/src/lib/utils/navigation.ts
index 4d5660f1737ff..145591db7f8e6 100644
--- a/web/src/lib/utils/navigation.ts
+++ b/web/src/lib/utils/navigation.ts
@@ -66,7 +66,7 @@ async function navigateAssetRoute(route: AssetRoute) {
   const { assetId } = route;
   const next = assetId ? currentUrlReplaceAssetId(assetId) : currentUrlWithoutAsset();
   if (next !== currentUrl()) {
-    await goto(next, { replaceState: false });
+    await goto(next, { replaceState: false, noScroll: true });
   }
 }
 

From b630e4fb4acfa1bf6145bf02aad065c473a1f3c9 Mon Sep 17 00:00:00 2001
From: Calum Dingwall <29152895+caburum@users.noreply.github.com>
Date: Fri, 26 Jul 2024 17:59:36 -0600
Subject: [PATCH 3/5] feat(web): persist albums page scroll position

---
 .../layouts/user-page-layout.svelte           |  2 +-
 web/src/routes/(user)/albums/+page.svelte     | 24 ++++++++++++++++++-
 .../[[assetId=id]]/+page.svelte               | 11 +++++++--
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte
index b7c70aeb5a744..2dd6e3c8faeac 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/web/src/lib/components/layouts/user-page-layout.svelte
@@ -11,7 +11,7 @@
   export let scrollbar = true;
   export let admin = false;
 
-  export let scrollSlot: HTMLDivElement;
+  export let scrollSlot: HTMLDivElement | undefined = undefined;
 
   $: scrollbarClass = scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden';
   $: hasTitleClass = title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full';
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index b4b1f5ee1a8d5..3761820023a8c 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { PageData } from './$types';
+  import { beforeNavigate } from '$app/navigation';
   import { AlbumFilter, albumViewSettings } from '$lib/stores/preferences.store';
   import { createAlbumAndRedirect } from '$lib/utils/album-utils';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
@@ -8,15 +9,36 @@
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import GroupTab from '$lib/components/elements/group-tab.svelte';
   import SearchBar from '$lib/components/elements/search-bar.svelte';
+  import { AppRoute, SessionStorageKey } from '$lib/constants';
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
   export let data: PageData;
 
+  let scrollSlot: HTMLDivElement;
+  beforeNavigate(({ to }) => {
+    // Save current scroll information when going into a person page.
+    if (to && to.url.pathname.startsWith(AppRoute.ALBUMS)) {
+      sessionStorage.setItem(SessionStorageKey.SCROLL_POSITION, scrollSlot.scrollTop.toString());
+    } else {
+      sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
+    }
+  });
+  onMount(() => {
+    let newScroll = sessionStorage.getItem(SessionStorageKey.SCROLL_POSITION);
+    if (newScroll)
+      scrollSlot.scroll({
+        top: parseFloat(newScroll),
+        behavior: 'instant',
+      });
+    sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
+  });
+
   let searchQuery = '';
   let albumGroups: string[] = [];
 </script>
 
-<UserPageLayout title={data.meta.title}>
+<UserPageLayout title={data.meta.title} bind:scrollSlot>
   <div class="flex place-items-center gap-2" slot="buttons">
     <AlbumsControls {albumGroups} bind:searchQuery />
   </div>
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index d44cf15fcf68a..3f3c8fc160966 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { afterNavigate, goto, onNavigate } from '$app/navigation';
+  import { afterNavigate, beforeNavigate, goto, onNavigate } from '$app/navigation';
   import AlbumDescription from '$lib/components/album-page/album-description.svelte';
   import AlbumOptions from '$lib/components/album-page/album-options.svelte';
   import AlbumSummary from '$lib/components/album-page/album-summary.svelte';
@@ -32,7 +32,7 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-  import { AppRoute } from '$lib/constants';
+  import { AppRoute, SessionStorageKey } from '$lib/constants';
   import { numberOfComments, setNumberOfComments, updateNumberOfComments } from '$lib/stores/activity.store';
   import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -138,6 +138,13 @@
 
   $: albumHasViewers = album.albumUsers.some(({ role }) => role === AlbumUserRole.Viewer);
 
+  beforeNavigate(({ to }) => {
+    // Forget scroll position from albums page if going somewhere else.
+    if (to && !to.url.pathname.startsWith(AppRoute.ALBUMS)) {
+      sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
+    }
+  });
+
   afterNavigate(({ from }) => {
     let url: string | undefined = from?.url?.pathname;
 

From 1574f60f07b46314ddbb65cb5bdc1b882699cf87 Mon Sep 17 00:00:00 2001
From: Calum Dingwall <29152895+caburum@users.noreply.github.com>
Date: Wed, 31 Jul 2024 22:52:37 -0400
Subject: [PATCH 4/5] lint & revert conflicting navigateAssetRoute change

---
 web/src/lib/utils/navigation.ts           |  2 +-
 web/src/routes/(user)/albums/+page.svelte |  5 +++--
 web/src/routes/(user)/people/+page.svelte | 19 +++++++++++--------
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/utils/navigation.ts b/web/src/lib/utils/navigation.ts
index 145591db7f8e6..4d5660f1737ff 100644
--- a/web/src/lib/utils/navigation.ts
+++ b/web/src/lib/utils/navigation.ts
@@ -66,7 +66,7 @@ async function navigateAssetRoute(route: AssetRoute) {
   const { assetId } = route;
   const next = assetId ? currentUrlReplaceAssetId(assetId) : currentUrlWithoutAsset();
   if (next !== currentUrl()) {
-    await goto(next, { replaceState: false, noScroll: true });
+    await goto(next, { replaceState: false });
   }
 }
 
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index 3761820023a8c..b2b6260904fb9 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -26,11 +26,12 @@
   });
   onMount(() => {
     let newScroll = sessionStorage.getItem(SessionStorageKey.SCROLL_POSITION);
-    if (newScroll)
+    if (newScroll) {
       scrollSlot.scroll({
-        top: parseFloat(newScroll),
+        top: Number.parseFloat(newScroll),
         behavior: 'instant',
       });
+    }
     sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
   });
 
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index eda4893230450..a7a773211d102 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -65,7 +65,9 @@
   beforeNavigate(({ to }) => {
     // Save current scroll information when going into a person page.
     if (to && to.url.pathname.startsWith(AppRoute.PEOPLE)) {
-      if (nextPage) sessionStorage.setItem(SessionStorageKey.INFINITE_SCROLL_PAGE, nextPage.toString());
+      if (nextPage) {
+        sessionStorage.setItem(SessionStorageKey.INFINITE_SCROLL_PAGE, nextPage.toString());
+      }
       sessionStorage.setItem(SessionStorageKey.SCROLL_POSITION, scrollSlot.scrollTop.toString());
     } else {
       sessionStorage.removeItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
@@ -75,11 +77,12 @@
 
   const restoreScrollPosition = () => {
     let newScroll = sessionStorage.getItem(SessionStorageKey.SCROLL_POSITION);
-    if (newScroll)
+    if (newScroll) {
       scrollSlot.scroll({
-        top: parseFloat(newScroll),
+        top: Number.parseFloat(newScroll),
         behavior: 'instant',
       });
+    }
     sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
   };
 
@@ -94,19 +97,19 @@
     let newNextPage = sessionStorage.getItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
     if (newNextPage && nextPage) {
       let startingPage = nextPage,
-        pagesToLoad = parseInt(newNextPage) - nextPage;
+        pagesToLoad = Number.parseInt(newNextPage) - nextPage;
 
       if (pagesToLoad) {
         handlePromiseError(
           Promise.all(
-            Array(pagesToLoad).map((_, i) => {
+            Array.from({ length: pagesToLoad }).map((_, i) => {
               return getAllPeople({ withHidden: true, page: startingPage + i });
             }),
           ).then((pages) => {
-            pages.forEach((page) => {
+            for (const page of pages) {
               people = people.concat(page.people);
-            });
-            nextPage = pages[pages.length - 1].hasNextPage ? startingPage + pagesToLoad : null;
+            }
+            nextPage = pages.at(-1)?.hasNextPage ? startingPage + pagesToLoad : null;
             restoreScrollPosition(); // wait until extra pages are loaded
           }),
         );

From c6a682e41efe213dd0b05fb39518d2316903f11c Mon Sep 17 00:00:00 2001
From: Calum Dingwall <caburum@users.noreply.github.com>
Date: Wed, 4 Sep 2024 15:25:16 -0500
Subject: [PATCH 5/5] Move scroll memory into reusable action.

---
 web/src/lib/actions/scroll-memory.ts          |  87 ++++++++++++++
 web/src/lib/actions/use-actions.ts            |  67 +++++++++++
 .../layouts/user-page-layout.svelte           |   9 +-
 web/src/routes/(user)/albums/+page.svelte     |  27 +----
 .../[[assetId=id]]/+page.svelte               |  18 ++-
 web/src/routes/(user)/people/+page.svelte     | 106 +++++++++---------
 .../[[assetId=id]]/+page.svelte               |  21 ++--
 7 files changed, 232 insertions(+), 103 deletions(-)
 create mode 100644 web/src/lib/actions/scroll-memory.ts
 create mode 100644 web/src/lib/actions/use-actions.ts

diff --git a/web/src/lib/actions/scroll-memory.ts b/web/src/lib/actions/scroll-memory.ts
new file mode 100644
index 0000000000000..1c19fdd8ab2d0
--- /dev/null
+++ b/web/src/lib/actions/scroll-memory.ts
@@ -0,0 +1,87 @@
+import { navigating } from '$app/stores';
+import { AppRoute, SessionStorageKey } from '$lib/constants';
+import { handlePromiseError } from '$lib/utils';
+
+interface Options {
+  /**
+   * {@link AppRoute} for subpages that scroll state should be kept while visiting.
+   *
+   * This must be kept the same in all subpages of this route for the scroll memory clearer to work.
+   */
+  routeStartsWith: AppRoute;
+  /**
+   * Function to clear additional data/state before scrolling (ex infinite scroll).
+   */
+  beforeClear?: () => void;
+}
+
+interface PageOptions extends Options {
+  /**
+   * Function to save additional data/state before scrolling (ex infinite scroll).
+   */
+  beforeSave?: () => void;
+  /**
+   * Function to load additional data/state before scrolling (ex infinite scroll).
+   */
+  beforeScroll?: () => Promise<void>;
+}
+
+/**
+ * @param node The scroll slot element, typically from {@link UserPageLayout}
+ */
+export function scrollMemory(
+  node: HTMLElement,
+  { routeStartsWith, beforeSave, beforeClear, beforeScroll }: PageOptions,
+) {
+  const unsubscribeNavigating = navigating.subscribe((navigation) => {
+    const existingScroll = sessionStorage.getItem(SessionStorageKey.SCROLL_POSITION);
+    if (navigation?.to && !existingScroll) {
+      // Save current scroll information when going into a subpage.
+      if (navigation.to.url.pathname.startsWith(routeStartsWith)) {
+        beforeSave?.();
+        sessionStorage.setItem(SessionStorageKey.SCROLL_POSITION, node.scrollTop.toString());
+      } else {
+        beforeClear?.();
+        sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
+      }
+    }
+  });
+
+  handlePromiseError(
+    (async () => {
+      await beforeScroll?.();
+
+      const newScroll = sessionStorage.getItem(SessionStorageKey.SCROLL_POSITION);
+      if (newScroll) {
+        node.scroll({
+          top: Number.parseFloat(newScroll),
+          behavior: 'instant',
+        });
+      }
+      beforeClear?.();
+      sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
+    })(),
+  );
+
+  return {
+    destroy() {
+      unsubscribeNavigating();
+    },
+  };
+}
+
+export function scrollMemoryClearer(_node: HTMLElement, { routeStartsWith, beforeClear }: Options) {
+  const unsubscribeNavigating = navigating.subscribe((navigation) => {
+    // Forget scroll position from main page if going somewhere else.
+    if (navigation?.to && !navigation?.to.url.pathname.startsWith(routeStartsWith)) {
+      beforeClear?.();
+      sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
+    }
+  });
+
+  return {
+    destroy() {
+      unsubscribeNavigating();
+    },
+  };
+}
diff --git a/web/src/lib/actions/use-actions.ts b/web/src/lib/actions/use-actions.ts
new file mode 100644
index 0000000000000..762cfdccf775b
--- /dev/null
+++ b/web/src/lib/actions/use-actions.ts
@@ -0,0 +1,67 @@
+/**
+ * @license Apache-2.0
+ * https://github.com/hperrin/svelte-material-ui/blob/master/packages/common/src/internal/useActions.ts
+ */
+
+export type SvelteActionReturnType<P> = {
+  update?: (newParams?: P) => void;
+  destroy?: () => void;
+} | void;
+
+export type SvelteHTMLActionType<P> = (node: HTMLElement, params?: P) => SvelteActionReturnType<P>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type HTMLActionEntry<P = any> = SvelteHTMLActionType<P> | [SvelteHTMLActionType<P>, P];
+
+export type HTMLActionArray = HTMLActionEntry[];
+
+export type SvelteSVGActionType<P> = (node: SVGElement, params?: P) => SvelteActionReturnType<P>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type SVGActionEntry<P = any> = SvelteSVGActionType<P> | [SvelteSVGActionType<P>, P];
+
+export type SVGActionArray = SVGActionEntry[];
+
+export type ActionArray = HTMLActionArray | SVGActionArray;
+
+export function useActions(node: HTMLElement | SVGElement, actions: ActionArray) {
+  const actionReturns: SvelteActionReturnType<unknown>[] = [];
+
+  if (actions) {
+    for (const actionEntry of actions) {
+      const action = Array.isArray(actionEntry) ? actionEntry[0] : actionEntry;
+      if (Array.isArray(actionEntry) && actionEntry.length > 1) {
+        actionReturns.push(action(node as HTMLElement & SVGElement, actionEntry[1]));
+      } else {
+        actionReturns.push(action(node as HTMLElement & SVGElement));
+      }
+    }
+  }
+
+  return {
+    update(actions: ActionArray) {
+      if ((actions?.length || 0) != actionReturns.length) {
+        throw new Error('You must not change the length of an actions array.');
+      }
+
+      if (actions) {
+        for (const [i, returnEntry] of actionReturns.entries()) {
+          if (returnEntry && returnEntry.update) {
+            const actionEntry = actions[i];
+            if (Array.isArray(actionEntry) && actionEntry.length > 1) {
+              returnEntry.update(actionEntry[1]);
+            } else {
+              returnEntry.update();
+            }
+          }
+        }
+      }
+    },
+
+    destroy() {
+      for (const returnEntry of actionReturns) {
+        returnEntry?.destroy?.();
+      }
+    },
+  };
+}
diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte
index bad07767519aa..bdeeaaab9aa55 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/web/src/lib/components/layouts/user-page-layout.svelte
@@ -3,6 +3,7 @@
   import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
   import SideBar from '../shared-components/side-bar/side-bar.svelte';
   import AdminSideBar from '../shared-components/side-bar/admin-side-bar.svelte';
+  import { useActions, type ActionArray } from '$lib/actions/use-actions';
 
   export let hideNavbar = false;
   export let showUploadButton = false;
@@ -10,8 +11,7 @@
   export let description: string | undefined = undefined;
   export let scrollbar = true;
   export let admin = false;
-
-  export let scrollSlot: HTMLDivElement | undefined = undefined;
+  export let use: ActionArray = [];
 
   $: scrollbarClass = scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden';
   $: hasTitleClass = title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full';
@@ -55,10 +55,7 @@
       </div>
     {/if}
 
-    <div
-      class="{scrollbarClass} scrollbar-stable absolute {hasTitleClass} w-full overflow-y-auto"
-      bind:this={scrollSlot}
-    >
+    <div class="{scrollbarClass} scrollbar-stable absolute {hasTitleClass} w-full overflow-y-auto" use:useActions={use}>
       <slot />
     </div>
   </section>
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index ce3050ee0175f..4f378ed0dabf7 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { PageData } from './$types';
-  import { beforeNavigate } from '$app/navigation';
+  import { scrollMemory } from '$lib/actions/scroll-memory';
   import { AlbumFilter, albumViewSettings } from '$lib/stores/preferences.store';
   import { createAlbumAndRedirect } from '$lib/utils/album-utils';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
@@ -9,37 +9,16 @@
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import GroupTab from '$lib/components/elements/group-tab.svelte';
   import SearchBar from '$lib/components/elements/search-bar.svelte';
-  import { AppRoute, SessionStorageKey } from '$lib/constants';
-  import { onMount } from 'svelte';
+  import { AppRoute } from '$lib/constants';
   import { t } from 'svelte-i18n';
 
   export let data: PageData;
 
-  let scrollSlot: HTMLDivElement;
-  beforeNavigate(({ to }) => {
-    // Save current scroll information when going into a person page.
-    if (to && to.url.pathname.startsWith(AppRoute.ALBUMS)) {
-      sessionStorage.setItem(SessionStorageKey.SCROLL_POSITION, scrollSlot.scrollTop.toString());
-    } else {
-      sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
-    }
-  });
-  onMount(() => {
-    let newScroll = sessionStorage.getItem(SessionStorageKey.SCROLL_POSITION);
-    if (newScroll) {
-      scrollSlot.scroll({
-        top: Number.parseFloat(newScroll),
-        behavior: 'instant',
-      });
-    }
-    sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
-  });
-
   let searchQuery = '';
   let albumGroups: string[] = [];
 </script>
 
-<UserPageLayout title={data.meta.title} bind:scrollSlot>
+<UserPageLayout title={data.meta.title} use={[[scrollMemory, { routeStartsWith: AppRoute.ALBUMS }]]}>
   <div class="flex place-items-center gap-2" slot="buttons">
     <AlbumsControls {albumGroups} bind:searchQuery />
   </div>
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index d22f59d379928..029b5093e194a 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { afterNavigate, beforeNavigate, goto, onNavigate } from '$app/navigation';
+  import { afterNavigate, goto, onNavigate } from '$app/navigation';
+  import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
   import AlbumDescription from '$lib/components/album-page/album-description.svelte';
   import AlbumOptions from '$lib/components/album-page/album-options.svelte';
   import AlbumSummary from '$lib/components/album-page/album-summary.svelte';
@@ -32,7 +33,7 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-  import { AppRoute, SessionStorageKey } from '$lib/constants';
+  import { AppRoute } from '$lib/constants';
   import { numberOfComments, setNumberOfComments, updateNumberOfComments } from '$lib/stores/activity.store';
   import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -148,13 +149,6 @@
 
   $: albumHasViewers = album.albumUsers.some(({ role }) => role === AlbumUserRole.Viewer);
 
-  beforeNavigate(({ to }) => {
-    // Forget scroll position from albums page if going somewhere else.
-    if (to && !to.url.pathname.startsWith(AppRoute.ALBUMS)) {
-      sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
-    }
-  });
-
   afterNavigate(({ from }) => {
     let url: string | undefined = from?.url?.pathname;
 
@@ -439,7 +433,11 @@
   });
 </script>
 
-<div class="flex overflow-hidden" bind:clientWidth={globalWidth}>
+<div
+  class="flex overflow-hidden"
+  bind:clientWidth={globalWidth}
+  use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}
+>
   <div class="relative w-full shrink">
     {#if $isMultiSelectState}
       <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index a7a773211d102..b3349e2ddd0dc 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { beforeNavigate, goto } from '$app/navigation';
+  import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import { focusTrap } from '$lib/actions/focus-trap';
+  import { scrollMemory } from '$lib/actions/scroll-memory';
   import Button from '$lib/components/elements/buttons/button.svelte';
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
@@ -51,6 +52,7 @@
   let showSetBirthDateModal = false;
   let showMergeModal = false;
   let personName = '';
+  let currentPage = 1;
   let nextPage = data.people.hasNextPage ? 2 : null;
   let personMerge1: PersonResponseDto;
   let personMerge2: PersonResponseDto;
@@ -61,31 +63,6 @@
   let changeNameInputEl: HTMLInputElement | null;
   let innerHeight: number;
 
-  let scrollSlot: HTMLDivElement;
-  beforeNavigate(({ to }) => {
-    // Save current scroll information when going into a person page.
-    if (to && to.url.pathname.startsWith(AppRoute.PEOPLE)) {
-      if (nextPage) {
-        sessionStorage.setItem(SessionStorageKey.INFINITE_SCROLL_PAGE, nextPage.toString());
-      }
-      sessionStorage.setItem(SessionStorageKey.SCROLL_POSITION, scrollSlot.scrollTop.toString());
-    } else {
-      sessionStorage.removeItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
-      sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
-    }
-  });
-
-  const restoreScrollPosition = () => {
-    let newScroll = sessionStorage.getItem(SessionStorageKey.SCROLL_POSITION);
-    if (newScroll) {
-      scrollSlot.scroll({
-        top: Number.parseFloat(newScroll),
-        behavior: 'instant',
-      });
-    }
-    sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
-  };
-
   onMount(() => {
     const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
     if (getSearchedPeople) {
@@ -93,32 +70,6 @@
       handlePromiseError(handleSearchPeople(true, searchName));
     }
 
-    // Load up to previously loaded page when returning.
-    let newNextPage = sessionStorage.getItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
-    if (newNextPage && nextPage) {
-      let startingPage = nextPage,
-        pagesToLoad = Number.parseInt(newNextPage) - nextPage;
-
-      if (pagesToLoad) {
-        handlePromiseError(
-          Promise.all(
-            Array.from({ length: pagesToLoad }).map((_, i) => {
-              return getAllPeople({ withHidden: true, page: startingPage + i });
-            }),
-          ).then((pages) => {
-            for (const page of pages) {
-              people = people.concat(page.people);
-            }
-            nextPage = pages.at(-1)?.hasNextPage ? startingPage + pagesToLoad : null;
-            restoreScrollPosition(); // wait until extra pages are loaded
-          }),
-        );
-      } else {
-        restoreScrollPosition();
-      }
-      sessionStorage.removeItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
-    }
-
     return websocketEvents.on('on_person_thumbnail', (personId: string) => {
       for (const person of people) {
         if (person.id === personId) {
@@ -131,6 +82,36 @@
     });
   });
 
+  const loadInitialScroll = () =>
+    new Promise<void>((resolve) => {
+      // Load up to previously loaded page when returning.
+      let newNextPage = sessionStorage.getItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
+      if (newNextPage && nextPage) {
+        let startingPage = nextPage,
+          pagesToLoad = Number.parseInt(newNextPage) - nextPage;
+
+        if (pagesToLoad) {
+          handlePromiseError(
+            Promise.all(
+              Array.from({ length: pagesToLoad }).map((_, i) => {
+                return getAllPeople({ withHidden: true, page: startingPage + i });
+              }),
+            ).then((pages) => {
+              for (const page of pages) {
+                people = people.concat(page.people);
+              }
+              currentPage = startingPage + pagesToLoad - 1;
+              nextPage = pages.at(-1)?.hasNextPage ? startingPage + pagesToLoad : null;
+              resolve(); // wait until extra pages are loaded
+            }),
+          );
+        } else {
+          resolve();
+        }
+        sessionStorage.removeItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
+      }
+    });
+
   const loadNextPage = async () => {
     if (!nextPage) {
       return;
@@ -139,6 +120,9 @@
     try {
       const { people: newPeople, hasNextPage } = await getAllPeople({ withHidden: true, page: nextPage });
       people = people.concat(newPeople);
+      if (nextPage !== null) {
+        currentPage = nextPage;
+      }
       nextPage = hasNextPage ? nextPage + 1 : null;
     } catch (error) {
       handleError(error, $t('errors.failed_to_load_people'));
@@ -363,7 +347,23 @@
 <UserPageLayout
   title={$t('people')}
   description={countVisiblePeople === 0 && !searchName ? undefined : `(${countVisiblePeople.toLocaleString($locale)})`}
-  bind:scrollSlot
+  use={[
+    [
+      scrollMemory,
+      {
+        routeStartsWith: AppRoute.PEOPLE,
+        beforeSave: () => {
+          if (currentPage) {
+            sessionStorage.setItem(SessionStorageKey.INFINITE_SCROLL_PAGE, currentPage.toString());
+          }
+        },
+        beforeClear: () => {
+          sessionStorage.removeItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
+        },
+        beforeLoad: loadInitialScroll,
+      },
+    ],
+  ]}
 >
   <svelte:fragment slot="buttons">
     {#if people.length > 0}
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index a820e58bb27be..fbab4a8904e18 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { afterNavigate, beforeNavigate, goto } from '$app/navigation';
+  import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/stores';
+  import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
   import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
   import MergeFaceSelector from '$lib/components/faces-page/merge-face-selector.svelte';
@@ -126,14 +127,6 @@
     });
   });
 
-  beforeNavigate(({ to }) => {
-    // Forget scroll position from people page if going somewhere else.
-    if (to && !to.url.pathname.startsWith(AppRoute.PEOPLE)) {
-      sessionStorage.removeItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
-      sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
-    }
-  });
-
   const handleEscape = async () => {
     if ($showAssetViewer || viewMode === ViewMode.SUGGEST_MERGE) {
       return;
@@ -452,7 +445,15 @@
   {/if}
 </header>
 
-<main class="relative h-screen overflow-hidden bg-immich-bg tall:ml-4 pt-[var(--navbar-height)] dark:bg-immich-dark-bg">
+<main
+  class="relative h-screen overflow-hidden bg-immich-bg tall:ml-4 pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
+  use:scrollMemoryClearer={{
+    routeStartsWith: AppRoute.PEOPLE,
+    beforeClear: () => {
+      sessionStorage.removeItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
+    },
+  }}
+>
   {#key refreshAssetGrid}
     <AssetGrid
       enableRouting={true}