summaryrefslogtreecommitdiff
path: root/ui
diff options
context:
space:
mode:
Diffstat (limited to 'ui')
-rw-r--r--ui/lib/components/ActiveChannel.svelte4
-rw-r--r--ui/lib/components/Channel.svelte4
-rw-r--r--ui/lib/components/ChannelList.svelte5
-rw-r--r--ui/lib/components/CreateChannelForm.svelte9
-rw-r--r--ui/lib/components/CurrentUser.svelte5
-rw-r--r--ui/lib/components/Invite.svelte4
-rw-r--r--ui/lib/components/Invites.svelte13
-rw-r--r--ui/lib/components/LogIn.svelte13
-rw-r--r--ui/lib/components/Message.svelte12
-rw-r--r--ui/lib/components/MessageInput.svelte34
-rw-r--r--ui/lib/components/MessageRun.svelte8
-rw-r--r--ui/routes/(app)/+layout.svelte6
-rw-r--r--ui/routes/(app)/ch/[channel]/+page.svelte2
-rw-r--r--ui/routes/(app)/me/+page.svelte17
-rw-r--r--ui/routes/(login)/invite/[invite]/+page.js12
-rw-r--r--ui/routes/(login)/invite/[invite]/+page.svelte17
-rw-r--r--ui/routes/(login)/login/+page.svelte5
-rw-r--r--ui/routes/(login)/setup/+page.svelte11
18 files changed, 90 insertions, 91 deletions
diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
index 212048a..ac1a0b9 100644
--- a/ui/lib/components/ActiveChannel.svelte
+++ b/ui/lib/components/ActiveChannel.svelte
@@ -2,8 +2,8 @@
import { messages } from '$lib/store';
import MessageRun from './MessageRun.svelte';
- export let channel = null;
- $: messageList = channel !== null ? $messages.inChannel(channel) : [];
+ let { channel } = $props();
+ let messageList = $derived(channel !== null ? $messages.inChannel(channel) : []);
function* chunkBy(xs, fn) {
let chunk;
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index 3dc5c87..fdc5d56 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -1,7 +1,5 @@
<script>
- export let id;
- export let name;
- export let active = false;
+ let { id, name, active } = $props();
</script>
<li class="rounded-full" class:bg-slate-400={active}>
diff --git a/ui/lib/components/ChannelList.svelte b/ui/lib/components/ChannelList.svelte
index f7376c1..9d1227e 100644
--- a/ui/lib/components/ChannelList.svelte
+++ b/ui/lib/components/ChannelList.svelte
@@ -1,10 +1,7 @@
<script>
- import { channelsList } from '$lib/store';
import Channel from './Channel.svelte';
- export let active = null;
-
- $: channels = $channelsList.channels;
+ let { channels, active } = $props();
</script>
<nav class="list-nav">
diff --git a/ui/lib/components/CreateChannelForm.svelte b/ui/lib/components/CreateChannelForm.svelte
index 6eee5db..ac43925 100644
--- a/ui/lib/components/CreateChannelForm.svelte
+++ b/ui/lib/components/CreateChannelForm.svelte
@@ -1,11 +1,12 @@
<script>
import { createChannel } from '$lib/apiServer';
- let name = '';
+ let name = $state('');
let pending = false;
- $: disabled = pending;
+ let disabled = $derived(pending);
- async function handleSubmit() {
+ async function handleSubmit(event) {
+ event.preventDefault();
pending = true;
const response = await createChannel(name);
if (200 <= response.status && response.status < 300) {
@@ -15,7 +16,7 @@
}
</script>
-<form on:submit|preventDefault={handleSubmit} class="form form-row flex-nowrap">
+<form onsubmit={handleSubmit} class="form form-row flex-nowrap">
<input
type="text"
placeholder="create channel"
diff --git a/ui/lib/components/CurrentUser.svelte b/ui/lib/components/CurrentUser.svelte
index 97ff980..46c76b0 100644
--- a/ui/lib/components/CurrentUser.svelte
+++ b/ui/lib/components/CurrentUser.svelte
@@ -3,7 +3,8 @@
import { logOut } from '$lib/apiServer';
import { currentUser } from '$lib/store';
- async function handleLogout() {
+ async function handleLogout(event) {
+ event.preventDefault();
const response = await logOut();
if (200 <= response.status && response.status < 300) {
currentUser.update(() => null);
@@ -12,7 +13,7 @@
}
</script>
-<form on:submit|preventDefault={handleLogout}>
+<form onsubmit={handleLogout}>
{#if $currentUser}
<a href="/me">@{$currentUser.username}</a>
{/if}
diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte
index ea8dd1d..79fe087 100644
--- a/ui/lib/components/Invite.svelte
+++ b/ui/lib/components/Invite.svelte
@@ -1,8 +1,8 @@
<script>
import { clipboard } from '@skeletonlabs/skeleton';
- export let id;
- $: inviteUrl = new URL(`/invite/${id}`, document.location);
+ let { id } = $props();
+ let inviteUrl = $derived(new URL(`/invite/${id}`, document.location));
</script>
<button
diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte
index bfaf2b6..337ee7e 100644
--- a/ui/lib/components/Invites.svelte
+++ b/ui/lib/components/Invites.svelte
@@ -1,24 +1,23 @@
<script>
- import { writable } from 'svelte/store';
import { createInvite } from '$lib/apiServer';
import Invite from '$lib/components/Invite.svelte';
- let invites = writable([]);
- $: $invites, console.log('invites', $invites);
+ let invites = $state([]);
- async function onSubmit() {
+ async function onSubmit(event) {
+ event.preventDefault();
let response = await createInvite();
if (response.status == 200) {
- invites.update((val) => [...val, response.data]);
+ invites.push(response.data);
}
}
</script>
<ul>
- {#each $invites as invite}
+ {#each invites as invite}
<li><Invite id={invite.id} /></li>
{/each}
</ul>
-<form on:submit|preventDefault={onSubmit}>
+<form onsubmit={onSubmit}>
<button class="btn variant-filled" type="submit"> Create Invitation </button>
</form>
diff --git a/ui/lib/components/LogIn.svelte b/ui/lib/components/LogIn.svelte
index 4346c47..4e28abe 100644
--- a/ui/lib/components/LogIn.svelte
+++ b/ui/lib/components/LogIn.svelte
@@ -1,12 +1,15 @@
<script>
- export let disabled = false;
- export let username = '';
- export let password = '';
- export let legend = 'sign in';
+ let {
+ username = $bindable(),
+ password = $bindable(),
+ legend = 'sign in',
+ disabled,
+ onsubmit
+ } = $props();
</script>
<div class="card m-4 p-4">
- <form on:submit|preventDefault>
+ <form {onsubmit}>
<label class="label" for="username">
username
<input
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index a82318a..f47e9b6 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -2,14 +2,12 @@
import { marked } from 'marked';
import DOMPurify from 'dompurify';
- export let at;
- export let body;
-
- $: renderedBody = DOMPurify.sanitize(marked.parse(body, { breaks: true }));
-
- let scroll = (message) => {
+ function scroll(message) {
message.scrollIntoView();
- };
+ }
+
+ let { at, body } = $props();
+ let renderedBody = $derived(DOMPurify.sanitize(marked.parse(body, { breaks: true })));
</script>
<div class="message relative">
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>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index 4894885..23c2186 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -2,12 +2,10 @@
import { logins, currentUser } from '$lib/store';
import Message from '$lib/components/Message.svelte';
- export let sender;
- export let messages;
+ let { sender, messages } = $props();
- let name;
- $: name = $logins.get(sender);
- $: ownMessage = $currentUser.id == sender;
+ let name = $derived($logins.get(sender));
+ let ownMessage = $derived($currentUser !== null && $currentUser.id == sender);
</script>
<div
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
diff --git a/ui/routes/(login)/invite/[invite]/+page.js b/ui/routes/(login)/invite/[invite]/+page.js
index a48ba89..32c9290 100644
--- a/ui/routes/(login)/invite/[invite]/+page.js
+++ b/ui/routes/(login)/invite/[invite]/+page.js
@@ -1,12 +1,11 @@
import { getInvite } from '$lib/apiServer';
-export async function load({ params }) {
- let { invite } = params;
+async function loadInvite(invite) {
let response = await getInvite(invite);
switch (response.status) {
case 200: {
let invite = response.data;
- return { invite };
+ return invite;
}
case 404:
return null;
@@ -15,3 +14,10 @@ export async function load({ params }) {
break;
}
}
+
+export function load({ params }) {
+ let { invite } = params;
+ return {
+ invite: loadInvite(invite)
+ };
+}
diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index 8f4d1a4..65f5a97 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -4,14 +4,15 @@
import LogIn from '$lib/components/LogIn.svelte';
- export let data;
+ let { data } = $props();
- let username = '',
- password = '';
+ let username = $state(''),
+ password = $state('');
let pending = false;
- $: disabled = pending;
+ let disabled = $derived(pending);
- async function onSubmit() {
+ async function onSubmit(event) {
+ event.preventDefault();
pending = true;
const response = await acceptInvite(data.invite.id, username, password);
if (200 <= response.status && response.status < 300) {
@@ -23,13 +24,13 @@
}
</script>
-{#await data}
+{#await data.invite}
<div class="card m-4 p-4">
<p>Loading invitation…</p>
</div>
-{:then { invite }}
+{:then invite}
<div class="card m-4 p-4">
<p>Hi there! {invite.issuer} invites you to the conversation.</p>
</div>
- <LogIn bind:disabled bind:username bind:password on:submit={onSubmit} />
+ <LogIn {disabled} bind:username bind:password onsubmit={onSubmit} />
{/await}
diff --git a/ui/routes/(login)/login/+page.svelte b/ui/routes/(login)/login/+page.svelte
index dba7f5a..77c2d62 100644
--- a/ui/routes/(login)/login/+page.svelte
+++ b/ui/routes/(login)/login/+page.svelte
@@ -9,7 +9,8 @@
let pending = false;
$: disabled = pending;
- async function onSubmit() {
+ async function onSubmit(event) {
+ event.preventDefault();
pending = true;
const response = await logIn(username, password);
if (200 <= response.status && response.status < 300) {
@@ -21,4 +22,4 @@
}
</script>
-<LogIn bind:disabled bind:username bind:password on:submit={onSubmit} />
+<LogIn {disabled} bind:username bind:password onsubmit={onSubmit} />
diff --git a/ui/routes/(login)/setup/+page.svelte b/ui/routes/(login)/setup/+page.svelte
index 2f098ef..f95403f 100644
--- a/ui/routes/(login)/setup/+page.svelte
+++ b/ui/routes/(login)/setup/+page.svelte
@@ -4,12 +4,13 @@
import LogIn from '$lib/components/LogIn.svelte';
- let username = '',
- password = '';
+ let username = $state(''),
+ password = $state('');
let pending = false;
- $: disabled = pending;
+ let disabled = $derived(pending);
- async function onSubmit() {
+ async function onSubmit(event) {
+ event.preventDefault();
pending = true;
const response = await setup(username, password);
if (200 <= response.status && response.status < 300) {
@@ -21,4 +22,4 @@
}
</script>
-<LogIn bind:disabled bind:username bind:password legend="set up" on:submit={onSubmit} />
+<LogIn {disabled} bind:username bind:password legend="set up" onsubmit={onSubmit} />
generated by cgit v1.2.3 (git 2.39.1) at 2026-01-02 13:46:10 +0000