fix: dialog back navigation

src/lib/components/kurosearch/sort-filter-config/SortFilterConfig.svelte

@@ -44,6 +44,7 @@
 	import { formatCount } from '$lib/logic/format-count';
 	import { createEventDispatcher } from 'svelte';
 	import SortFilterDialog from '../dialog-sort-filter/SortFilterDialog.svelte';
+	import { addHistory } from '$lib/logic/use/onpopstate';
 
 	const dispatch = createEventDispatcher();
 	const serializeSortFilter = (sort: any, filter: any) =>
@@ -60,6 +61,7 @@
 	on:click={() => {
 		sortFilterBefore = serializeSortFilter($sort, $filter);
 		dialog.showModal();
+		addHistory('dialog');
 	}}
 >
 	<i class="codicon codicon-filter" />

src/lib/components/kurosearch/supertag/Supertag.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { addHistory } from '$lib/logic/use/onpopstate';
 	import ConfirmDialog from '../dialog-confirm/ConfirmDialog.svelte';
 	import EditSupertagDialog from '../dialog-edit-supertag/EditSupertagDialog.svelte';
 	import ModifiedTag from '../modified-tag/ModifiedTag.svelte';
@@ -15,8 +16,20 @@
 <li>
 	<h3>{supertag.name}</h3>
 	<small>{Object.keys(supertag.tags).length} tags</small>
-	<button class="codicon codicon-edit" on:click={() => editDialog.showModal()} />
-	<button class="codicon codicon-close" on:click={() => deleteDialog.showModal()} />
+	<button
+		class="codicon codicon-edit"
+		on:click={() => {
+			editDialog.showModal();
+			addHistory('dialog');
+		}}
+	/>
+	<button
+		class="codicon codicon-close"
+		on:click={() => {
+			deleteDialog.showModal();
+			addHistory('dialog');
+		}}
+	/>
 	<span>{supertag.description || supertag.name}</span>
 	<ol>
 		{#each supertag.tags as tag}

src/lib/components/pure/dialog/Dialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { historyState } from '$lib/logic/use/historyState';
+	import { onpopstate } from '$lib/logic/use/onpopstate';
 	import { onMount } from 'svelte';
 
 	export let dialog: HTMLDialogElement;
@@ -24,7 +24,7 @@
 	});
 </script>
 
-<dialog bind:this={dialog} on:close use:historyState={{ hash: 'dialog', onPopState }}>
+<dialog bind:this={dialog} on:close use:onpopstate={onPopState}>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<slot />

src/lib/logic/use/onpopstate.ts

@@ -0,0 +1,18 @@
+export interface Parameters {
+	hash: string;
+	onPopState: () => void;
+}
+
+export const onpopstate = (_node: HTMLElement, onPopState: () => void) => {
+	window.addEventListener('popstate', onPopState);
+
+	return {
+		destroy() {
+			window.removeEventListener('popstate', onPopState);
+		}
+	};
+};
+
+export const addHistory = (state: string) => {
+	window.history.pushState(state, '', null);
+};

src/routes/+page.svelte

@@ -28,6 +28,7 @@
 	import LoadingAnimation from '$lib/components/pure/loading-animation/LoadingAnimation.svelte';
 	import cookiesAccepted from '$lib/store/cookies-accepted-store';
 	import CookieMessage from '$lib/components/kurosearch/cookie-message/CookieMessage.svelte';
+	import { addHistory } from '$lib/logic/use/onpopstate';
 
 	console.log(
 		'%ckurosearch\n%cHi, if you are reading this because you are debugging or reverse-engineering, feel free to send me a DM on Discord :)',
@@ -205,7 +206,10 @@
 				activeTags.addOrReplace(e.detail);
 			}
 		}}
-		on:createSupertag={() => createSupertagDialog.showModal()}
+		on:createSupertag={() => {
+			createSupertagDialog.showModal();
+			addHistory('dialog');
+		}}
 	/>
 </section>
 

src/routes/account/+page.svelte

@@ -15,6 +15,7 @@
 	import theme from '$lib/store/theme-store';
 	import '$lib/logic/firebase/firebase';
 	import { loadFile, saveFile } from '$lib/logic/file-utils';
+	import { addHistory } from '$lib/logic/use/onpopstate';
 
 	const reset = () => {
 		supertags.reset();
@@ -114,14 +115,20 @@
 			<TextButton
 				type="secondary"
 				title="Apply your settings from the cloud."
-				on:click={() => cloudPullDialog.showModal()}
+				on:click={() => {
+					cloudPullDialog.showModal();
+					addHistory('dialog');
+				}}
 			>
 				<span class="codicon codicon-cloud">Load Config</span>
 			</TextButton>
 			<TextButton
 				type="secondary"
 				title="Store current settings in the cloud."
-				on:click={() => cloudPushDialog.showModal()}
+				on:click={() => {
+					cloudPushDialog.showModal();
+					addHistory('dialog');
+				}}
 			>
 				<span class="codicon codicon-cloud">Save config</span>
 			</TextButton>
@@ -134,7 +141,13 @@
 	</div>
 
 	<Heading3>Delete Data</Heading3>
-	<TextButton title="Delete all your data." on:click={() => resetDialog.showModal()}>
+	<TextButton
+		title="Delete all your data."
+		on:click={() => {
+			resetDialog.showModal();
+			addHistory('dialog');
+		}}
+	>
 		Delete Data
 	</TextButton>
 </section>

src/routes/preferences/+page.svelte

@@ -17,6 +17,7 @@
 	import activeTagsStore from '$lib/store/active-tags-store';
 	import activeSupertagsStore from '$lib/store/active-supertags-store';
 	import wideLayoutEnabled from '$lib/store/wide-layout-enabled-store';
+	import { addHistory } from '$lib/logic/use/onpopstate';
 
 	let resetDialog: HTMLDialogElement;
 
@@ -124,7 +125,12 @@
 		title="Reset preferences"
 		description="Undo all customizations and return to default settings."
 	>
-		<TextButton title="Reset preferences" on:click={() => resetDialog.showModal()}>Reset</TextButton
+		<TextButton
+			title="Reset preferences"
+			on:click={() => {
+				resetDialog.showModal();
+				addHistory('dialog');
+			}}>Reset</TextButton
 		>
 	</Preference>
 </section>