frontend: Migrate to Svelte 5

7 files changed, 216 insertions, 183 deletions

diff --git a/frontend/src/lib/forms/ArtistForm.svelte b/frontend/src/lib/forms/ArtistForm.svelte
index 7df5e8b..663c3ae 100644
--- a/frontend/src/lib/forms/ArtistForm.svelte
+++ b/frontend/src/lib/forms/ArtistForm.svelte
@@ -1,25 +1,29 @@
 <script lang="ts">
-	import { type ArtistInput } from '$gql/Mutations';
-	import { type OmitIdentifiers } from '$gql/Utils';
-	import { type Artist } from '$gql/graphql';
-	import Labelled from '$lib/components/Labelled.svelte';
-	import { createEventDispatcher } from 'svelte';
+	import type { AddArtistInput, Artist } from '$gql/graphql';
+	import SubmitButton from '$lib/components/SubmitButton.svelte';
+	import { itemPending, type FormProps } from '$lib/Form';
 
-	const dispatch = createEventDispatcher<{ submit: ArtistInput }>();
+	let { initial, submit, children }: FormProps<Artist, AddArtistInput> = $props();
 
-	export let artist: OmitIdentifiers<Artist>;
+	let input = $state(initial);
+	let pending = $derived(input.name.length > 0 && itemPending(initial, input));
 
-	function submit() {
-		dispatch('submit', { name: artist.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={artist.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>
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>
diff --git a/frontend/src/lib/forms/CircleForm.svelte b/frontend/src/lib/forms/CircleForm.svelte
index b71256c..ba6013a 100644
--- a/frontend/src/lib/forms/CircleForm.svelte
+++ b/frontend/src/lib/forms/CircleForm.svelte
@@ -1,25 +1,29 @@
 <script lang="ts">
-	import { type CircleInput } from '$gql/Mutations';
-	import { type OmitIdentifiers } from '$gql/Utils';
-	import { type Circle } from '$gql/graphql';
-	import Labelled from '$lib/components/Labelled.svelte';
-	import { createEventDispatcher } from 'svelte';
+	import type { AddCircleInput, Circle } from '$gql/graphql';
+	import SubmitButton from '$lib/components/SubmitButton.svelte';
+	import { itemPending, type FormProps } from '$lib/Form';
 
-	const dispatch = createEventDispatcher<{ submit: CircleInput }>();
+	let { initial, submit, children }: FormProps<Circle, AddCircleInput> = $props();
 
-	export let circle: OmitIdentifiers<Circle>;
+	let input = $state(initial);
+	let pending = $derived(input.name.length > 0 && itemPending(initial, input));
 
-	function submit() {
-		dispatch('submit', { name: circle.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 required autofocus {id} bind:value={circle.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>
diff --git a/frontend/src/lib/forms/ComicForm.svelte b/frontend/src/lib/forms/ComicForm.svelte
index 74051c8..adc6a34 100644
--- a/frontend/src/lib/forms/ComicForm.svelte
+++ b/frontend/src/lib/forms/ComicForm.svelte
@@ -3,98 +3,113 @@
 	import { type OmitIdentifiers } from '$gql/Utils';
 	import type { FullComicFragment, UpdateComicInput } from '$gql/graphql';
 	import { categories, censorships, directions, languages, layouts, ratings } from '$lib/Enums';
-	import Labelled from '$lib/components/Labelled.svelte';
 	import LabelledBlock from '$lib/components/LabelledBlock.svelte';
 	import Select from '$lib/components/Select.svelte';
 	import { getContextClient } from '@urql/svelte';
-	import { createEventDispatcher } from 'svelte';
+	import { type Snippet } from 'svelte';
 
 	const client = getContextClient();
-	const dispatch = createEventDispatcher<{ submit: UpdateComicInput }>();
-
-	export let comic: OmitIdentifiers<FullComicFragment>;
-
-	$: tagsQuery = comicTagList(client);
-	$: artistsQuery = artistList(client);
-	$: charactersQuery = characterList(client);
-	$: circlesQuery = circleList(client);
-	$: worldsQuery = worldList(client);
-
-	$: tags = $tagsQuery.data?.comicTags.edges;
-	$: artists = $artistsQuery.data?.artists.edges;
-	$: characters = $charactersQuery.data?.characters.edges;
-	$: circles = $circlesQuery.data?.circles.edges;
-	$: worlds = $worldsQuery.data?.worlds.edges;
-
-	function submit() {
-		dispatch('submit', {
-			direction: comic.direction,
-			layout: comic.layout,
-			rating: comic.rating,
-			category: comic.category,
-			censorship: comic.censorship,
-			title: comic.title,
-			originalTitle: comic.originalTitle,
-			url: comic.url,
-			date: comic.date === '' ? null : comic.date,
-			language: comic.language,
-			tags: { ids: comic.tags.map((t) => t.id) },
-			artists: { ids: comic.artists.map((a) => a.id) },
-			characters: { ids: comic.characters.map((c) => c.id) },
-			circles: { ids: comic.circles.map((c) => c.id) },
-			worlds: { ids: comic.worlds.map((w) => w.id) }
+
+	interface Props {
+		input: OmitIdentifiers<FullComicFragment>;
+		submit: (input: UpdateComicInput) => void;
+		children?: Snippet;
+	}
+
+	let { input = $bindable(), submit, children }: Props = $props();
+
+	let tagsQuery = $derived(comicTagList(client));
+	let artistsQuery = $derived(artistList(client));
+	let charactersQuery = $derived(characterList(client));
+	let circlesQuery = $derived(circleList(client));
+	let worldsQuery = $derived(worldList(client));
+
+	let tags = $derived($tagsQuery.data?.comicTags.edges);
+	let artists = $derived($artistsQuery.data?.artists.edges);
+	let characters = $derived($charactersQuery.data?.characters.edges);
+	let circles = $derived($circlesQuery.data?.circles.edges);
+	let worlds = $derived($worldsQuery.data?.worlds.edges);
+
+	function onsubmit(event: SubmitEvent) {
+		event.preventDefault();
+
+		submit({
+			direction: input.direction,
+			layout: input.layout,
+			rating: input.rating,
+			category: input.category,
+			censorship: input.censorship,
+			title: input.title,
+			originalTitle: input.originalTitle,
+			url: input.url,
+			date: input.date === '' ? null : input.date,
+			language: input.language,
+			tags: { ids: input.tags.map((t) => t.id) },
+			artists: { ids: input.artists.map((a) => a.id) },
+			characters: { ids: input.characters.map((c) => c.id) },
+			circles: { ids: input.circles.map((c) => c.id) },
+			worlds: { ids: input.worlds.map((w) => w.id) }
 		});
 	}
 </script>
 
-<form on:submit|preventDefault={submit}>
+<form {onsubmit}>
 	<div class="grid-labels">
-		<Labelled label="Title" let:id>
-			<input required {id} bind:value={comic.title} title={comic.title} />
-		</Labelled>
-		<Labelled label="Original Title" let:id>
-			<input {id} bind:value={comic.originalTitle} title={comic.originalTitle} />
-		</Labelled>
-		<Labelled label="URL" let:id>
-			<input {id} bind:value={comic.url} />
-		</Labelled>
-		<Labelled label="Date" let:id>
-			<input {id} type="date" bind:value={comic.date} pattern={'d{4}-d{2}-d{2}'} />
-		</Labelled>
-		<Labelled label="Category" let:id>
-			<Select {id} options={categories} bind:value={comic.category} />
-		</Labelled>
-		<Labelled label="Rating" let:id>
-			<Select {id} options={ratings} bind:value={comic.rating} />
-		</Labelled>
-		<Labelled label="Censorship" let:id>
-			<Select {id} options={censorships} bind:value={comic.censorship} />
-		</Labelled>
-		<Labelled label="Language" let:id>
-			<Select {id} options={languages} bind:value={comic.language} />
-		</Labelled>
-		<Labelled label="Direction" let:id>
-			<Select {id} options={directions} bind:value={comic.direction} />
-		</Labelled>
-		<Labelled label="Layout" let:id>
-			<Select {id} options={layouts} bind:value={comic.layout} />
-		</Labelled>
+		<label class="self-center" for="title">Title</label>
+		<input required id="title" bind:value={input.title} title={input.title} />
+
+		<label class="self-center" for="original-title">Original Title</label>
+		<input id="original-title" bind:value={input.originalTitle} title={input.originalTitle} />
+
+		<label class="self-center" for="url">URL</label>
+		<input id="url" bind:value={input.url} />
+
+		<label class="self-center" for="date">Date</label>
+		<input id="date" type="date" bind:value={input.date} pattern={'d{4}-d{2}-d{2}'} />
+
+		<label class="self-center" for="category">Category</label>
+		<Select id="category" options={categories} bind:value={input.category} />
+
+		<label class="self-center" for="rating">Rating</label>
+		<Select id="rating" options={ratings} bind:value={input.rating} />
+
+		<label class="self-center" for="censorship">Censorship</label>
+		<Select id="censorship" options={censorships} bind:value={input.censorship} />
+
+		<label class="self-center" for="language">Language</label>
+		<Select id="language" options={languages} bind:value={input.language} />
+
+		<label class="self-center" for="direction">Direction</label>
+		<Select id="direction" options={directions} bind:value={input.direction} />
+
+		<label class="self-center" for="layout">Layout</label>
+		<Select id="layout" options={layouts} bind:value={input.layout} />
 	</div>
 
-	<LabelledBlock label="Artists" let:id>
-		<Select multi object {id} options={artists} bind:value={comic.artists} />
+	<LabelledBlock label="Artists">
+		{#snippet children({ id })}
+			<Select multi object {id} options={artists} bind:value={input.artists} />
+		{/snippet}
 	</LabelledBlock>
-	<LabelledBlock label="Circles" let:id>
-		<Select multi object {id} options={circles} bind:value={comic.circles} />
+	<LabelledBlock label="Circles">
+		{#snippet children({ id })}
+			<Select multi object {id} options={circles} bind:value={input.circles} />
+		{/snippet}
 	</LabelledBlock>
-	<LabelledBlock label="Characters" let:id>
-		<Select multi object {id} options={characters} bind:value={comic.characters} />
+	<LabelledBlock label="Characters">
+		{#snippet children({ id })}
+			<Select multi object {id} options={characters} bind:value={input.characters} />
+		{/snippet}
 	</LabelledBlock>
-	<LabelledBlock label="Worlds" let:id>
-		<Select multi object {id} options={worlds} bind:value={comic.worlds} />
+	<LabelledBlock label="Worlds">
+		{#snippet children({ id })}
+			<Select multi object {id} options={worlds} bind:value={input.worlds} />
+		{/snippet}
 	</LabelledBlock>
-	<LabelledBlock label="Tags" let:id>
-		<Select multi object {id} options={tags} bind:value={comic.tags} />
+	<LabelledBlock label="Tags">
+		{#snippet children({ id })}
+			<Select multi object {id} options={tags} bind:value={input.tags} />
+		{/snippet}
 	</LabelledBlock>
-	<slot />
+	{@render children?.()}
 </form>
diff --git a/frontend/src/lib/forms/NamespaceForm.svelte b/frontend/src/lib/forms/NamespaceForm.svelte
index c05b6d8..3631d84 100644
--- a/frontend/src/lib/forms/NamespaceForm.svelte
+++ b/frontend/src/lib/forms/NamespaceForm.svelte
@@ -1,28 +1,31 @@
 <script lang="ts">
-	import { type NamespaceInput } from '$gql/Mutations';
-	import { type OmitIdentifiers } from '$gql/Utils';
-	import { type Namespace } from '$gql/graphql';
-	import Labelled from '$lib/components/Labelled.svelte';
-	import { createEventDispatcher } from 'svelte';
+	import type { AddNamespaceInput, Namespace } from '$gql/graphql';
+	import SubmitButton from '$lib/components/SubmitButton.svelte';
+	import { namespacePending, type FormProps } from '$lib/Form';
 
-	const dispatch = createEventDispatcher<{ submit: NamespaceInput }>();
+	let { initial, submit, children }: FormProps<Namespace, AddNamespaceInput> = $props();
 
-	export let namespace: OmitIdentifiers<Namespace>;
+	let input = $state(initial);
+	let pending = $derived(input.name.length > 0 && namespacePending(initial, input));
 
-	function submit() {
-		dispatch('submit', { name: namespace.name, sortName: namespace.sortName });
+	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 required autofocus {id} bind:value={namespace.name} />
-		</Labelled>
-		<Labelled label="Sort name" let:id>
-			<input {id} bind:value={namespace.sortName} />
-		</Labelled>
+		<label class="self-center" for="name">Name</label>
+		<!-- svelte-ignore a11y_autofocus -->
+		<input autofocus required id="name" bind:value={input.name} />
+		<label class="self-center" for="sort-name">Sort name</label>
+		<input id="name" bind:value={input.sortName} />
+	</div>
+	<div class="flex gap-4">
+		{@render children?.()}
+		<div class="grow"></div>
+		<SubmitButton {pending} />
 	</div>
-	<slot />
 </form>
diff --git a/frontend/src/lib/forms/TagForm.svelte b/frontend/src/lib/forms/TagForm.svelte
index 6cc2227..2789587 100644
--- a/frontend/src/lib/forms/TagForm.svelte
+++ b/frontend/src/lib/forms/TagForm.svelte
@@ -1,42 +1,41 @@
 <script lang="ts">
-	import type { TagInput } from '$gql/Mutations';
 	import { namespaceList } from '$gql/Queries';
-	import type { OmitIdentifiers } from '$gql/Utils';
-	import type { FullTag } from '$gql/graphql';
-	import Labelled from '$lib/components/Labelled.svelte';
+	import type { AddTagInput, FullTag } from '$gql/graphql';
+	import { tagPending, type FormProps } from '$lib/Form';
 	import Select from '$lib/components/Select.svelte';
+	import SubmitButton from '$lib/components/SubmitButton.svelte';
 	import { getContextClient } from '@urql/svelte';
-	import { createEventDispatcher } from 'svelte';
 
-	const client = getContextClient();
-	const dispatch = createEventDispatcher<{ submit: TagInput }>();
+	let { initial, submit, children }: FormProps<FullTag, AddTagInput> = $props();
 
-	export let tag: OmitIdentifiers<FullTag>;
+	let input = $state(initial);
+	let pending = $derived(input.name.length > 0 && tagPending(initial, input));
 
-	$: namespaceQuery = namespaceList(client);
-	$: namespaces = $namespaceQuery.data?.namespaces.edges;
+	let namespaceQuery = $derived(namespaceList(getContextClient()));
+	let namespaces = $derived($namespaceQuery.data?.namespaces.edges);
 
-	function submit() {
-		dispatch('submit', {
-			name: tag.name,
-			description: tag.description,
-			namespaces: { ids: tag.namespaces.map((n) => n.id) }
-		});
+	function onsubmit(event: SubmitEvent) {
+		event.preventDefault();
+
+		submit({ ...input, namespaces: { ids: input.namespaces.map((n) => n.id) } });
 	}
 </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={tag.name} />
-		</Labelled>
-		<Labelled label="Description" let:id>
-			<textarea rows={3} {id} bind:value={tag.description} />
-		</Labelled>
-		<Labelled label="Namespaces" let:id>
-			<Select multi object {id} options={namespaces} bind:value={tag.namespaces} />
-		</Labelled>
+		<label class="self-center" for="name">Name</label>
+		<!-- svelte-ignore a11y_autofocus -->
+		<input autofocus required id="name" bind:value={input.name} />
+
+		<label class="self-center" for="description">Description</label>
+		<textarea rows={3} id="description" bind:value={input.description}></textarea>
+
+		<label class="self-center" for="namespaces">Namespaces</label>
+		<Select multi object id="namespaces" options={namespaces} bind:value={input.namespaces} />
+	</div>
+	<div class="flex gap-4">
+		{@render children?.()}
+		<div class="grow"></div>
+		<SubmitButton {pending} />
 	</div>
-	<slot />
 </form>
diff --git a/frontend/src/lib/forms/WorldForm.svelte b/frontend/src/lib/forms/WorldForm.svelte
index 103dd5b..e6b821f 100644
--- a/frontend/src/lib/forms/WorldForm.svelte
+++ b/frontend/src/lib/forms/WorldForm.svelte
@@ -1,25 +1,29 @@
 <script lang="ts">
-	import { type WorldInput } from '$gql/Mutations';
-	import { type OmitIdentifiers } from '$gql/Utils';
-	import { type World } from '$gql/graphql';
-	import Labelled from '$lib/components/Labelled.svelte';
-	import { createEventDispatcher } from 'svelte';
+	import type { AddWorldInput, World } from '$gql/graphql';
+	import SubmitButton from '$lib/components/SubmitButton.svelte';
+	import { itemPending, type FormProps } from '$lib/Form';
 
-	const dispatch = createEventDispatcher<{ submit: WorldInput }>();
+	let { initial, submit, children }: FormProps<World, AddWorldInput> = $props();
 
-	export let world: OmitIdentifiers<World>;
+	let input = $state(initial);
+	let pending = $derived(input.name.length > 0 && itemPending(initial, input));
 
-	function submit() {
-		dispatch('submit', { name: world.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={world.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>