Add page permalink

web-frontend/src/routes/app/+page.svelte

@@ -1,4 +1,6 @@
 <script>
+	import url from '$lib/url.js';
+	import CopyButton from '$lib/CopyButton.svelte';
 	import { getWasm, rustEnumToArray } from '$lib/common.js';
 	import { WasmStatus } from '$lib/common.js';
 	import { tick, onMount, onDestroy } from 'svelte';
@@ -143,6 +145,8 @@
 					coordinateInputValue = addr.allCoordinates[selectedCoordinateType];
 				}
 
+				history.replaceState(undefined, undefined, `#${addr.address.replaceAll(' ', '-')}`);
+
 				map.panTo(latlng, 20);
 				leaflet.popup().setLatLng(latlng).setContent(`${addr.address}`).openOn(map);
 				if (fromTextInput) {
@@ -169,6 +173,22 @@
 	$: {
 		mapIsVisible = initSuccess && tabInfo.selected == 0;
 	}
+
+	let lastHash;
+	$: {
+		if ($url && $url.hash) {
+			let hash = decodeURI($url.hash.substr(1))
+				.replaceAll(/-|\+|\s+/g, ' ')
+				.trim();
+
+			if (hash !== lastHash) {
+				addrInputValue = hash;
+				addressInput();
+			}
+
+			lastHash = hash;
+		}
+	}
 </script>
 
 <noscript>
@@ -187,6 +207,11 @@
 {:then}
 	<AddressInput bind:value={addrInputValue} on:change={addressInput} />
 
+	{#if $url && $url.hash}
+		<a class="text-indigo-600" href={$url}>Permalink</a>
+		<CopyButton data={$url} />
+	{/if}
+
 	<CoordinateInput
 		bind:value={coordinateInputValue}
 		on:type-change={selectedCoordinateTypeChange}