feat(tools): serialise settings into url

6 files changed, 72 insertions, 0 deletions

diff --git a/src/lib/Tools/ActivityHistory.svelte b/src/lib/Tools/ActivityHistory.svelte
index a8f3c45b..e946a116 100644
--- a/src/lib/Tools/ActivityHistory.svelte
+++ b/src/lib/Tools/ActivityHistory.svelte
@@ -10,6 +10,7 @@
 		userIdentity as getUserIdentity,
 		type AniListAuthorisation
 	} from '$lib/AniList/identity';
+	import { clearAllParameters } from './tool.js';
 
 	export let user: AniListAuthorisation;
 
@@ -17,6 +18,8 @@
 	let currentUserIdentity = { name: '', id: -1 };
 
 	onMount(async () => {
+		clearAllParameters();
+
 		if (user !== undefined) {
 			if ($userIdentity === '') {
 				userIdentity.set(JSON.stringify(await getUserIdentity(user)));
diff --git a/src/lib/Tools/CharacterBirthdays.svelte b/src/lib/Tools/CharacterBirthdays.svelte
index f3112fa6..c58f59c3 100644
--- a/src/lib/Tools/CharacterBirthdays.svelte
+++ b/src/lib/Tools/CharacterBirthdays.svelte
@@ -4,6 +4,7 @@
 	import { ACDBBirthdays, type ACDBBirthday } from '$lib/Birthday/ACDB';
 	import { aniSearchBirthdays, type aniSearchBirthday } from '$lib/Birthday/aniSearch';
 	import Error from '$lib/Error.svelte';
+	import { clearAllParameters } from './tool';
 
 	interface Birthday {
 		name: string;
@@ -35,6 +36,7 @@
 		if (browser) {
 			$page.url.searchParams.set('month', month.toString());
 			$page.url.searchParams.set('day', day.toString());
+			clearAllParameters(['month', 'day']);
 			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
 		}
 	}
diff --git a/src/lib/Tools/EpisodeDiscussionCollector.svelte b/src/lib/Tools/EpisodeDiscussionCollector.svelte
index a9acd8ae..2559afb2 100644
--- a/src/lib/Tools/EpisodeDiscussionCollector.svelte
+++ b/src/lib/Tools/EpisodeDiscussionCollector.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import { threads } from '$lib/AniList/forum';
+	import { onMount } from 'svelte';
+	import { clearAllParameters } from './tool';
 
 	let searchInput = '';
 	let searchInputFinal = '';
+
+	onMount(clearAllParameters);
 </script>
 
 <p>
diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy.svelte
index a6beb21e..1d1fca69 100644
--- a/src/lib/Tools/SequelSpy.svelte
+++ b/src/lib/Tools/SequelSpy.svelte
@@ -2,6 +2,8 @@
 	import type { AniListAuthorisation } from '$lib/AniList/identity';
 	import { prequels, type MediaPrequel } from '$lib/AniList/prequels';
 	import MediaTitle from '$lib/List/MediaTitleDisplay.svelte';
+	import { onMount } from 'svelte';
+	import { clearAllParameters } from './tool';
 
 	export let user: AniListAuthorisation;
 
@@ -22,6 +24,8 @@
 	})();
 
 	$: currentPrequels = prequels(user, year, season);
+
+	onMount(clearAllParameters);
 </script>
 
 <p>
diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index d3d2466b..10480607 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -13,6 +13,9 @@
 	import manga from '../../stores/manga.js';
 	import Error from '$lib/Error.svelte';
 	import { domToBlob } from 'modern-screenshot';
+	import { browser } from '$app/environment';
+	import { page } from '$app/stores';
+	import { clearAllParameters } from './tool.js';
 
 	export let user: AniListAuthorisation;
 
@@ -31,8 +34,24 @@
 	let width = 980;
 	let forceDark = false;
 	let highestRatedCount = 5;
+	let mounted = false;
 
 	$: {
+		if (browser && mounted) {
+			$page.url.searchParams.set('transparency', transparency.toString());
+			$page.url.searchParams.set('lightTheme', lightTheme.toString());
+			$page.url.searchParams.set('watermark', watermark.toString());
+			$page.url.searchParams.set('includeMusic', includeMusic.toString());
+			$page.url.searchParams.set('includeSpecials', includeSpecials.toString());
+			$page.url.searchParams.set('includeRepeats', includeRepeats.toString());
+			$page.url.searchParams.set('width', width.toString());
+			$page.url.searchParams.set('forceDark', forceDark.toString());
+			$page.url.searchParams.set('highestRatedCount', highestRatedCount.toString());
+
+			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
+		}
+	}
+	$: {
 		includeMusic = includeMusic;
 		includeSpecials = includeSpecials;
 		includeRepeats = includeRepeats;
@@ -87,6 +106,29 @@
 	};
 
 	onMount(async () => {
+		clearAllParameters([
+			'transparency',
+			'lightTheme',
+			'watermark',
+			'includeMusic',
+			'includeSpecials',
+			'includeRepeats',
+			'width',
+			'forceDark',
+			'highestRatedCount'
+		]);
+		if (browser) {
+			transparency = $page.url.searchParams.get('transparency') === 'true';
+			lightTheme = $page.url.searchParams.get('lightTheme') === 'true';
+			watermark = $page.url.searchParams.get('watermark') === 'true';
+			includeMusic = $page.url.searchParams.get('includeMusic') === 'true';
+			includeSpecials = $page.url.searchParams.get('includeSpecials') === 'true';
+			includeRepeats = $page.url.searchParams.get('includeRepeats') === 'true';
+			width = parseInt($page.url.searchParams.get('width') || '980', 10);
+			forceDark = $page.url.searchParams.get('forceDark') === 'true';
+			highestRatedCount = parseInt($page.url.searchParams.get('highestRatedCount') || '5', 10);
+		}
+
 		if (user !== undefined) {
 			if ($userIdentity === '') {
 				userIdentity.set(JSON.stringify(await getUserIdentity(user)));
@@ -99,6 +141,8 @@
 		}
 
 		await update();
+
+		mounted = true;
 	});
 
 	const update = async () => {
diff --git a/src/lib/Tools/tool.ts b/src/lib/Tools/tool.ts
new file mode 100644
index 00000000..2d1a13f5
--- /dev/null
+++ b/src/lib/Tools/tool.ts
@@ -0,0 +1,15 @@
+import { browser } from '$app/environment';
+import { page } from '$app/stores';
+
+export const clearAllParameters = (saved: string[] = []) => {
+	if (browser) {
+		page.subscribe((value) => {
+			value.url.searchParams.forEach((_, key) => {
+				if (!saved.includes(key) && key !== 'tool') {
+					value.url.searchParams.delete(key);
+				}
+			});
+			history.replaceState(null, '', `?${value.url.searchParams.toString()}`);
+		});
+	}
+};