Convert multiple pages into SPA

svelte/src/layout/Button.svelte

@@ -54,6 +54,7 @@ let click_int = (e: MouseEvent) => {
 	</button>
 {:else}
 	<a
+		on:click={click_int}
 		href="{link_href}"
 		target={link_target}
 		class="button"

svelte/src/layout/Dialog.svelte

@@ -22,6 +22,10 @@ export const open = (button_rect: DOMRect) => {
 	dialog.style.top = Math.round(Math.min(min_top, max_top)) + "px"
 }
 
+export const close = () => {
+	dialog.close()
+}
+
 // Attach a click handler so that the dialog is closed when the user clicks
 // outside the dialog. The way this check works is that there is usually an
 // element inside the dialog with all the content. When the click target is

svelte/src/layout/IconBlock.svelte

@@ -39,7 +39,6 @@ export let width = "750px"
 	overflow-wrap: anywhere;
 	background-color: var(--shaded_background);
 	backdrop-filter: blur(4px);
-	border-radius: 8px;
 	padding: 8px;
 }
 </style>

svelte/src/layout/SortButton.svelte

@@ -5,7 +5,7 @@ export let asc = true
 export let sort_func: (field: string) => void
 </script>
 
-<button class:button_highlight={active_field === field} on:click={() => sort_func(field)}>
+<button on:click={() => sort_func(field)}>
 	{#if active_field === field}
 		{#if asc}↓{:else}↑{/if}
 	{/if}
@@ -18,6 +18,6 @@ button {
 	margin: 0;
 	line-height: 1em;
 	width: 100%;
-	text-align: center;
+	text-align: initial;
 }
 </style>

svelte/src/layout/TextBlock.svelte

@@ -11,13 +11,12 @@ export let center = false
 .block {
 	display: block;
 	text-align: initial;
-	max-width: 99%;
+	max-width: 100%;
 	overflow-wrap: anywhere;
-	margin: 8px auto;
+	margin: auto;
 
 	background-color: var(--shaded_background);
 	backdrop-filter: blur(4px);
-	border-radius: 8px;
 	padding: 8px;
 }
 .center {

svelte/src/layout/checkout/Checkout.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { onMount } from "svelte";
-import LoadingIndicator from "util/LoadingIndicator.svelte";
 import PickAmount from "./PickAmount.svelte";
 import PickCountry from "./PickCountry.svelte";
 import { payment_providers, type CheckoutState } from "./CheckoutLib";
@@ -9,7 +8,6 @@ import { get_misc_vat_rate, get_user } from "lib/PixeldrainAPI";
 import { countries } from "country-data-list";
 import PickProvider from "./PickProvider.svelte";
 
-let loading = false
 let state: CheckoutState = {country: null, provider: null, amount: 0, vat: 0, name: ""}
 
 onMount(async () => {
@@ -42,8 +40,6 @@ onMount(async () => {
 </script>
 
 <div class="highlight_border">
-	<LoadingIndicator loading={loading}/>
-
 	{#if state.country !== null}
 		<div class="navbar">
 			{#if state.country !== null}
@@ -76,13 +72,13 @@ onMount(async () => {
 	{/if}
 
 	{#if state.country === null}
-		<PickCountry bind:state bind:loading={loading}/>
+		<PickCountry bind:state/>
 	{:else if state.provider === null}
 		<PickProvider bind:state/>
 	{:else if state.provider.need_name === true && state.name === ""}
 		<PickName bind:state/>
 	{:else}
-		<PickAmount bind:state bind:loading/>
+		<PickAmount bind:state/>
 	{/if}
 </div>
 

svelte/src/layout/checkout/PickAmount.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 import Euro from "util/Euro.svelte";
 import { checkout, type CheckoutState } from "./CheckoutLib";
+import { loading_finish, loading_start } from "lib/Loading";
 
 export let state: CheckoutState
-export let loading: boolean
 
 const amounts = [10, 20, 50, 100, 200, 500, 1000, 2000, 5000]
 let amount = 20
@@ -11,10 +11,13 @@ let amount = 20
 const submit = async (e: SubmitEvent) => {
 	e.preventDefault()
 
-	loading = true
 	state.amount = amount
-	await checkout(state)
-	loading = false
+	loading_start()
+	try {
+		await checkout(state)
+	}finally {
+		loading_finish()
+	}
 }
 </script>
 

svelte/src/layout/checkout/PickCountry.svelte

@@ -2,13 +2,12 @@
 import { countries } from "country-data-list";
 import { get_misc_vat_rate, put_user } from "lib/PixeldrainAPI";
 import { payment_providers, type CheckoutState } from "./CheckoutLib";
+import { loading_finish, loading_start } from "lib/Loading";
 
 export let state: CheckoutState
-export let loading: boolean
 let country_input = ""
 
 const set_country = async (e?: Event) => {
-	loading = true
 	if (e !== undefined) {
 		e.preventDefault()
 	}
@@ -24,6 +23,7 @@ const set_country = async (e?: Event) => {
 	// with an invalid combination
 	state.provider = null
 
+	loading_start()
 	try {
 		// Save the user's country for later use
 		await put_user({checkout_country: c.alpha3})
@@ -34,7 +34,7 @@ const set_country = async (e?: Event) => {
 	} catch (err) {
 		alert(err)
 	} finally {
-		loading = false
+		loading_finish()
 	}
 }