Svelte 5: go through and use runes in components, pages, and layouts.

Does not use runes in stores (yet).

1 files changed, 14 insertions, 20 deletions

diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index e829674..220ed3b 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -1,40 +1,34 @@
 <script>
-	import { tick } from 'svelte';
 	import { postToChannel } from '$lib/apiServer';
 
-	export let channel = null;
-	let input;
-	let value = '';
+	let { channel } = $props();
+
+	let form;
+	let value = $state('');
 	let pending = false;
 
-	$: disabled = pending || channel === null;
+	let disabled = $derived(pending);
 
-	async function handleSubmit() {
-		if (channel !== null) {
-			pending = true;
-			// TODO try/catch:
-			await postToChannel(channel, value);
-			pending = false;
-			value = '';
-			await tick();
-			input.focus();
-		}
+	async function onSubmit(event) {
+		event.preventDefault();
+		pending = true;
+		await postToChannel(channel, value);
+		form.reset();
+		pending = false;
 	}
 
 	function onKeyDown(event) {
 		if (!event.altKey && event.key === 'Enter') {
-			handleSubmit();
-			event.preventDefault();
+			onSubmit(event);
 		}
 	}
 </script>
 
-<form on:submit|preventDefault={handleSubmit} class="flex flex-row flex-nowrap">
+<form bind:this={form} onsubmit={onSubmit} class="flex flex-row flex-nowrap">
 	<textarea
-		bind:this={input}
+		onkeydown={onKeyDown}
 		bind:value
 		{disabled}
-		on:keydown={onKeyDown}
 		type="search"
 		class="flex-auto h-6 input rounded-r-none"
 	></textarea>