feat(web): persist albums page scroll position

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';

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>

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;