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

Does not use runes in stores (yet).

3 files changed, 13 insertions, 12 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 5d1023d..356a096 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -9,10 +9,10 @@
 	import ChannelList from '$lib/components/ChannelList.svelte';
 	import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
 
-	let loading = true;
 	let events = null;
 
-	$: channel = $page?.params?.channel;
+	let loading = $state(true);
+	let channel = $derived($page.params.channel);
 
 	function onBooted(boot) {
 		currentUser.update(() => ({
@@ -63,7 +63,7 @@
 	<div id="interface" class="p-2">
 		<nav id="sidebar" data-expanded={$showMenu}>
 			<div class="channel-list">
-				<ChannelList active={channel} />
+				<ChannelList active={channel} channels={$channelsList.channels} />
 			</div>
 			<div class="create-channel">
 				<CreateChannelForm />
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index 2c1b40a..a5836fc 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -3,7 +3,7 @@
 	import ActiveChannel from '$lib/components/ActiveChannel.svelte';
 	import MessageInput from '$lib/components/MessageInput.svelte';
 
-	$: channel = $page?.params?.channel;
+	let channel = $derived($page.params.channel);
 </script>
 
 <div class="active-channel">
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 26537ad..4531a91 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -3,15 +3,16 @@
 
 	import Invites from '$lib/components/Invites.svelte';
 
-	let currentPassword = '',
-		newPassword = '',
-		confirmPassword = '',
+	let currentPassword = $state(''),
+		newPassword = $state(''),
+		confirmPassword = $state(''),
 		passwordForm;
-	let pending = false;
-	$: valid = newPassword === confirmPassword && newPassword !== currentPassword;
-	$: disabled = pending || !valid;
+	let pending = $state(false);
+	let valid = $derived(newPassword === confirmPassword && newPassword !== currentPassword);
+	let disabled = $derived(pending || !valid);
 
-	async function onPasswordChange() {
+	async function onPasswordChange(event) {
+		event.preventDefault();
 		pending = true;
 		let response = await changePassword(currentPassword, newPassword);
 		switch (response.status) {
@@ -23,7 +24,7 @@
 	}
 </script>
 
-<form on:submit|preventDefault={onPasswordChange} bind:this={passwordForm}>
+<form onsubmit={onPasswordChange} bind:this={passwordForm}>
 	<label
 		>current password
 		<input