From e803bc909f107eb5c2828c5246c50f7fea11a000 Mon Sep 17 00:00:00 2001
From: Ethan Margaillan <ethan.margaillan@gmail.com>
Date: Mon, 26 Jun 2023 18:54:20 +0200
Subject: [PATCH] feat(web): store albums sorting policy in local storage
 (#2966)

---
 web/src/lib/stores/preferences.store.ts   |  8 ++++++++
 web/src/routes/(user)/albums/+page.svelte | 11 ++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/stores/preferences.store.ts b/web/src/lib/stores/preferences.store.ts
index e65c9c68bb..62dce34cb3 100644
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@@ -37,3 +37,11 @@ export const mapSettings = persisted<MapSettings>('map-settings', {
 });
 
 export const videoViewerVolume = persisted<number>('video-viewer-volume', 1, {});
+
+export interface AlbumViewSettings {
+	sortBy: string;
+}
+
+export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settings', {
+	sortBy: 'Most recent photo'
+});
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index bbee578016..f4902b40e7 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { albumViewSettings } from '$lib/stores/preferences.store';
 	import AlbumCard from '$lib/components/album-page/album-card.svelte';
 	import { goto } from '$app/navigation';
 	import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
@@ -17,7 +18,6 @@
 	export let data: PageData;
 
 	const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
-	let selectedSortBy = sortByOptions[0];
 
 	const {
 		albums: unsortedAlbums,
@@ -39,15 +39,16 @@
 	};
 
 	$: {
-		if (selectedSortBy === 'Most recent photo') {
+		const { sortBy } = $albumViewSettings;
+		if (sortBy === 'Most recent photo') {
 			$albums = $unsortedAlbums.sort((a, b) =>
 				a.lastModifiedAssetTimestamp && b.lastModifiedAssetTimestamp
 					? sortByDate(a.lastModifiedAssetTimestamp, b.lastModifiedAssetTimestamp)
 					: sortByDate(a.updatedAt, b.updatedAt)
 			);
-		} else if (selectedSortBy === 'Last modified') {
+		} else if (sortBy === 'Last modified') {
 			$albums = $unsortedAlbums.sort((a, b) => sortByDate(a.updatedAt, b.updatedAt));
-		} else if (selectedSortBy === 'Album title') {
+		} else if (sortBy === 'Album title') {
 			$albums = $unsortedAlbums.sort((a, b) => a.albumName.localeCompare(b.albumName));
 		}
 	}
@@ -86,7 +87,7 @@
 			</div>
 		</LinkButton>
 
-		<Dropdown options={sortByOptions} bind:value={selectedSortBy} />
+		<Dropdown options={sortByOptions} bind:value={$albumViewSettings.sortBy} />
 	</div>
 
 	<!-- Album Card -->