frontend: Migrate to Svelte 5

1 files changed, 19 insertions, 15 deletions

diff --git a/frontend/src/lib/forms/CharacterForm.svelte b/frontend/src/lib/forms/CharacterForm.svelte
index 4cec37c..23b3ef7 100644
--- a/frontend/src/lib/forms/CharacterForm.svelte
+++ b/frontend/src/lib/forms/CharacterForm.svelte
@@ -1,25 +1,29 @@
 <script lang="ts">
-	import { type CharacterInput } from '$gql/Mutations';
-	import { type OmitIdentifiers } from '$gql/Utils';
-	import { type Character } from '$gql/graphql';
-	import Labelled from '$lib/components/Labelled.svelte';
-	import { createEventDispatcher } from 'svelte';
+	import type { AddCharacterInput, Character } from '$gql/graphql';
+	import SubmitButton from '$lib/components/SubmitButton.svelte';
+	import { itemPending, type FormProps } from '$lib/Form';
 
-	const dispatch = createEventDispatcher<{ submit: CharacterInput }>();
+	let { initial, submit, children }: FormProps<Character, AddCharacterInput> = $props();
 
-	export let character: OmitIdentifiers<Character>;
+	let input = $state(initial);
+	let pending = $derived(input.name.length > 0 && itemPending(initial, input));
 
-	function submit() {
-		dispatch('submit', { name: character.name });
+	function onsubmit(event: SubmitEvent) {
+		event.preventDefault();
+
+		submit({ ...input });
 	}
 </script>
 
-<form on:submit|preventDefault={submit}>
+<form {onsubmit}>
 	<div class="grid-labels">
-		<Labelled label="Name" let:id>
-			<!-- svelte-ignore a11y-autofocus -->
-			<input autofocus required {id} bind:value={character.name} />
-		</Labelled>
+		<label class="self-center" for="name">Name</label>
+		<!-- svelte-ignore a11y_autofocus -->
+		<input autofocus required id="name" bind:value={input.name} />
+	</div>
+	<div class="flex gap-4">
+		{@render children?.()}
+		<div class="grow"></div>
+		<SubmitButton {pending} />
 	</div>
-	<slot />
 </form>