frontend: Migrate to Svelte 5

1 files changed, 33 insertions, 27 deletions

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 6af3b88..29a1c16 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { addShortcut, handleShortcuts } from '$lib/Shortcuts';
+	import { toastFinally } from '$lib/Toasts';
 	import { fadeDefault } from '$lib/Transitions';
 	import AddArtist from '$lib/dialogs/AddArtist.svelte';
 	import AddCharacter from '$lib/dialogs/AddCharacter.svelte';
@@ -11,7 +12,7 @@
 	import Navigation from '$lib/navigation/Navigation.svelte';
 	import { cacheExchange, fetchExchange, initContextClient } from '@urql/svelte';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
-	import { Modals, closeModal, openModal } from 'svelte-modals';
+	import { Modals, modals, type ModalComponent } from 'svelte-modals';
 	import { fade } from 'svelte/transition';
 	import '../app.css';
 
@@ -20,12 +21,16 @@
 		exchanges: [cacheExchange, fetchExchange]
 	});
 
-	addShortcut('na', () => openModal(AddArtist));
-	addShortcut('nh', () => openModal(AddCharacter));
-	addShortcut('ni', () => openModal(AddCircle));
-	addShortcut('nn', () => openModal(AddNamespace));
-	addShortcut('nt', () => openModal(AddTag));
-	addShortcut('nw', () => openModal(AddWorld));
+	function open(modal: ModalComponent) {
+		modals.open(modal).catch(toastFinally);
+	}
+
+	addShortcut('na', () => open(AddArtist));
+	addShortcut('nh', () => open(AddCharacter));
+	addShortcut('ni', () => open(AddCircle));
+	addShortcut('nn', () => open(AddNamespace));
+	addShortcut('nt', () => open(AddTag));
+	addShortcut('nw', () => open(AddWorld));
 
 	function keydown(event: KeyboardEvent) {
 		handleShortcuts(event);
@@ -36,38 +41,38 @@
 
 <Navigation>
 	<Link matchExact href="/" title="Home" accel="go">
-		<span class="icon-base icon-[material-symbols--home]" />
+		<span class="icon-base icon-[material-symbols--home]"></span>
 	</Link>
 	<Link href="/comics/" title="Comics" accel="gc">
-		<span class="icon-base icon-[material-symbols--menu-book]" />
+		<span class="icon-base icon-[material-symbols--menu-book]"></span>
 	</Link>
 	<Link href="/namespaces/" title="Namespaces" accel="gn">
-		<span class="icon-base icon-[material-symbols--inbox]" />
+		<span class="icon-base icon-[material-symbols--inbox]"></span>
 	</Link>
 	<Link href="/tags/" title="Tags" accel="gt">
-		<span class="icon-base icon-[material-symbols--label]" />
+		<span class="icon-base icon-[material-symbols--label]"></span>
 	</Link>
 	<Link href="/artists/" title="Artists" accel="ga">
-		<span class="icon-base icon-[material-symbols--person]" />
+		<span class="icon-base icon-[material-symbols--person]"></span>
 	</Link>
 	<Link href="/circles/" title="Circles" accel="gi">
-		<span class="icon-base icon-[material-symbols--group]" />
+		<span class="icon-base icon-[material-symbols--group]"></span>
 	</Link>
 	<Link href="/characters/" title="Characters" accel="gh">
-		<span class="icon-base icon-[material-symbols--face]" />
+		<span class="icon-base icon-[material-symbols--face]"></span>
 	</Link>
 	<Link href="/worlds/" title="Worlds" accel="gw">
-		<span class="icon-base icon-[material-symbols--public]" />
+		<span class="icon-base icon-[material-symbols--public]"></span>
 	</Link>
 	<Link href="/archives/" title="Archives" accel="gz">
-		<span class="icon-base icon-[material-symbols--folder-zip]" />
+		<span class="icon-base icon-[material-symbols--folder-zip]"></span>
 	</Link>
-	<div class="mb-auto" />
+	<div class="mb-auto"></div>
 	<Link href="/statistics/" title="Statistics" accel="gs">
-		<span class="icon-base icon-[material-symbols--bar-chart]" />
+		<span class="icon-base icon-[material-symbols--bar-chart]"></span>
 	</Link>
 	<Link href="/help/" title="Help" accel="?" target="_blank">
-		<span class="icon-base icon-[material-symbols--help]" />
+		<span class="icon-base icon-[material-symbols--help]"></span>
 	</Link>
 </Navigation>
 
@@ -76,14 +81,15 @@
 </div>
 
 <Modals>
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div
-		slot="backdrop"
-		on:click={closeModal}
-		transition:fade={fadeDefault}
-		class="fixed bottom-0 left-0 right-0 top-0 z-20 bg-stone-800/80"
-	/>
+	{#snippet backdrop({ close })}
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div
+			onclick={() => close()}
+			transition:fade={fadeDefault}
+			class="fixed bottom-0 left-0 right-0 top-0 z-20 bg-stone-800/80"
+		></div>
+	{/snippet}
 </Modals>
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />