feat: shallow routing

client/src/lib/ui/Modal.svelte

@@ -2,7 +2,8 @@
 	import { X } from '@lucide/svelte';
 	import { Dialog } from 'bits-ui';
 	import { fade } from 'svelte/transition';
-	import type { Snippet } from 'svelte';
+	import { type Snippet } from 'svelte';
+	import { pushState } from '$app/navigation';
 
 	let {
 		trigger,
@@ -17,7 +18,24 @@
 	} = $props();
 </script>
 
-<Dialog.Root bind:open>
+<svelte:window
+	onpopstate={() => {
+		if (open) {
+			open = false;
+		}
+	}}
+/>
+
+<Dialog.Root
+	bind:open
+	onOpenChange={(e) => {
+		if (e) {
+			pushState('', '#modal');
+		} else {
+			history.back();
+		}
+	}}
+>
 	<Dialog.Trigger>
 		{#snippet child({ props })}
 			{@render trigger(props)}

client/src/lib/ui/Pagination.svelte

@@ -2,6 +2,8 @@
 	import { cn } from '$lib/utils';
 	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
 	import { Pagination } from 'bits-ui';
+	import { pushState, replaceState } from '$app/navigation';
+	import { onMount } from 'svelte';
 
 	let {
 		count = $bindable(),
@@ -16,15 +18,35 @@
 		className?: string;
 		onchange?: (e: number) => void;
 	} = $props();
+
+	let page: number = $state(1);
+
+	onMount(() => {
+		replaceState('', `${page}`);
+	});
 </script>
 
+<svelte:window
+	onpopstate={(e) => {
+		const lastPage: number = Number(e.state['sveltekit:states']);
+		if (!isNaN(lastPage)) {
+			page = lastPage;
+			offset = (lastPage - 1) * limit;
+			window.scrollTo(0, 0);
+			onchange?.(lastPage);
+		}
+	}}
+/>
+
 {#key count && limit}
 	<Pagination.Root
 		{count}
+		bind:page
 		perPage={limit}
 		onPageChange={(e) => {
 			offset = (e - 1) * limit;
 			window.scrollTo(0, 0);
+			pushState('', `${e}`);
 			onchange?.(e);
 		}}
 	>