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