summaryrefslogtreecommitdiff
path: root/ui/lib/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/lib/components')
-rw-r--r--ui/lib/components/ActiveChannel.svelte62
-rw-r--r--ui/lib/components/Channel.svelte10
-rw-r--r--ui/lib/components/ChannelList.svelte14
-rw-r--r--ui/lib/components/CreateChannelForm.svelte42
-rw-r--r--ui/lib/components/CurrentUser.svelte34
-rw-r--r--ui/lib/components/Invite.svelte10
-rw-r--r--ui/lib/components/Invites.svelte28
-rw-r--r--ui/lib/components/LogIn.svelte68
-rw-r--r--ui/lib/components/Message.svelte44
-rw-r--r--ui/lib/components/MessageInput.svelte60
-rw-r--r--ui/lib/components/MessageRun.svelte28
11 files changed, 200 insertions, 200 deletions
diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
index ac1a0b9..a4ccd24 100644
--- a/ui/lib/components/ActiveChannel.svelte
+++ b/ui/lib/components/ActiveChannel.svelte
@@ -1,42 +1,42 @@
<script>
- import { messages } from '$lib/store';
- import MessageRun from './MessageRun.svelte';
+ import { messages } from '$lib/store';
+ import MessageRun from './MessageRun.svelte';
- let { channel } = $props();
- let messageList = $derived(channel !== null ? $messages.inChannel(channel) : []);
+ let { channel } = $props();
+ let messageList = $derived(channel !== null ? $messages.inChannel(channel) : []);
- function* chunkBy(xs, fn) {
- let chunk;
- let key;
- for (let x of xs) {
- let newKey = fn(x);
- if (key !== newKey) {
- if (chunk !== undefined) {
- yield [key, chunk];
- }
+ function* chunkBy(xs, fn) {
+ let chunk;
+ let key;
+ for (let x of xs) {
+ let newKey = fn(x);
+ if (key !== newKey) {
+ if (chunk !== undefined) {
+ yield [key, chunk];
+ }
- chunk = [x];
- key = newKey;
- } else {
- chunk.push(x);
- }
- }
- if (chunk !== undefined) {
- yield [key, chunk];
- }
- }
+ chunk = [x];
+ key = newKey;
+ } else {
+ chunk.push(x);
+ }
+ }
+ if (chunk !== undefined) {
+ yield [key, chunk];
+ }
+ }
</script>
<div class="container">
- {#each chunkBy(messageList, (msg) => msg.sender) as [sender, messages]}
- <div>
- <MessageRun {sender} {messages} />
- </div>
- {/each}
+ {#each chunkBy(messageList, (msg) => msg.sender) as [sender, messages]}
+ <div>
+ <MessageRun {sender} {messages} />
+ </div>
+ {/each}
</div>
<style>
- .container {
- overflow: auto;
- }
+ .container {
+ overflow: auto;
+ }
</style>
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index fdc5d56..e84c6d0 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -1,10 +1,10 @@
<script>
- let { id, name, active } = $props();
+ let { id, name, active } = $props();
</script>
<li class="rounded-full" class:bg-slate-400={active}>
- <a href="/ch/{id}">
- <span class="badge bg-primary-500">#</span>
- <span class="flex-auto">{name}</span>
- </a>
+ <a href="/ch/{id}">
+ <span class="badge bg-primary-500">#</span>
+ <span class="flex-auto">{name}</span>
+ </a>
</li>
diff --git a/ui/lib/components/ChannelList.svelte b/ui/lib/components/ChannelList.svelte
index 9d1227e..51dd6cf 100644
--- a/ui/lib/components/ChannelList.svelte
+++ b/ui/lib/components/ChannelList.svelte
@@ -1,13 +1,13 @@
<script>
- import Channel from './Channel.svelte';
+ import Channel from './Channel.svelte';
- let { channels, active } = $props();
+ let { channels, active } = $props();
</script>
<nav class="list-nav">
- <ul>
- {#each channels as channel}
- <Channel {...channel} active={active === channel.id} />
- {/each}
- </ul>
+ <ul>
+ {#each channels as channel}
+ <Channel {...channel} active={active === channel.id} />
+ {/each}
+ </ul>
</nav>
diff --git a/ui/lib/components/CreateChannelForm.svelte b/ui/lib/components/CreateChannelForm.svelte
index ac43925..afa3f78 100644
--- a/ui/lib/components/CreateChannelForm.svelte
+++ b/ui/lib/components/CreateChannelForm.svelte
@@ -1,30 +1,30 @@
<script>
- import { createChannel } from '$lib/apiServer';
+ import { createChannel } from '$lib/apiServer';
- let name = $state('');
- let pending = false;
- let disabled = $derived(pending);
+ let name = $state('');
+ let pending = false;
+ let disabled = $derived(pending);
- async function handleSubmit(event) {
- event.preventDefault();
- pending = true;
- const response = await createChannel(name);
- if (200 <= response.status && response.status < 300) {
- name = '';
- }
- pending = false;
- }
+ async function handleSubmit(event) {
+ event.preventDefault();
+ pending = true;
+ const response = await createChannel(name);
+ if (200 <= response.status && response.status < 300) {
+ name = '';
+ }
+ pending = false;
+ }
</script>
<form onsubmit={handleSubmit} class="form form-row flex-nowrap">
- <input
- type="text"
- placeholder="create channel"
- bind:value={name}
- {disabled}
- class="input flex-auto h-6 w-9/12"
- />
- <button type="submit" class="flex-none w-6 h-6">&#x2795;</button>
+ <input
+ type="text"
+ placeholder="create channel"
+ bind:value={name}
+ {disabled}
+ class="input flex-auto h-6 w-9/12"
+ />
+ <button type="submit" class="flex-none w-6 h-6">&#x2795;</button>
</form>
<style>
diff --git a/ui/lib/components/CurrentUser.svelte b/ui/lib/components/CurrentUser.svelte
index 46c76b0..56bf915 100644
--- a/ui/lib/components/CurrentUser.svelte
+++ b/ui/lib/components/CurrentUser.svelte
@@ -1,25 +1,25 @@
<script>
- import { goto } from '$app/navigation';
- import { logOut } from '$lib/apiServer';
- import { currentUser } from '$lib/store';
+ import { goto } from '$app/navigation';
+ import { logOut } from '$lib/apiServer';
+ import { currentUser } from '$lib/store';
- async function handleLogout(event) {
- event.preventDefault();
- const response = await logOut();
- if (200 <= response.status && response.status < 300) {
- currentUser.update(() => null);
- goto('/login');
- }
- }
+ async function handleLogout(event) {
+ event.preventDefault();
+ const response = await logOut();
+ if (200 <= response.status && response.status < 300) {
+ currentUser.update(() => null);
+ goto('/login');
+ }
+ }
</script>
<form onsubmit={handleLogout}>
- {#if $currentUser}
- <a href="/me">@{$currentUser.username}</a>
- {/if}
- <button class="border-slate-500 border-solid border-2 font-bold p-1 rounded" type="submit"
- >log out</button
- >
+ {#if $currentUser}
+ <a href="/me">@{$currentUser.username}</a>
+ {/if}
+ <button class="border-slate-500 border-solid border-2 font-bold p-1 rounded" type="submit"
+ >log out</button
+ >
</form>
<style>
diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte
index 79fe087..35e00b4 100644
--- a/ui/lib/components/Invite.svelte
+++ b/ui/lib/components/Invite.svelte
@@ -1,12 +1,12 @@
<script>
- import { clipboard } from '@skeletonlabs/skeleton';
+ import { clipboard } from '@skeletonlabs/skeleton';
- let { id } = $props();
- let inviteUrl = $derived(new URL(`/invite/${id}`, document.location));
+ let { id } = $props();
+ let inviteUrl = $derived(new URL(`/invite/${id}`, document.location));
</script>
<button
- class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
- use:clipboard={inviteUrl}>Copy</button
+ class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
+ use:clipboard={inviteUrl}>Copy</button
>
<span data-clipboard="inviteUrl">{inviteUrl}</span>
diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte
index 337ee7e..cc14f3b 100644
--- a/ui/lib/components/Invites.svelte
+++ b/ui/lib/components/Invites.svelte
@@ -1,23 +1,23 @@
<script>
- import { createInvite } from '$lib/apiServer';
- import Invite from '$lib/components/Invite.svelte';
+ import { createInvite } from '$lib/apiServer';
+ import Invite from '$lib/components/Invite.svelte';
- let invites = $state([]);
+ let invites = $state([]);
- async function onSubmit(event) {
- event.preventDefault();
- let response = await createInvite();
- if (response.status == 200) {
- invites.push(response.data);
- }
- }
+ async function onSubmit(event) {
+ event.preventDefault();
+ let response = await createInvite();
+ if (response.status == 200) {
+ invites.push(response.data);
+ }
+ }
</script>
<ul>
- {#each invites as invite}
- <li><Invite id={invite.id} /></li>
- {/each}
+ {#each invites as invite}
+ <li><Invite id={invite.id} /></li>
+ {/each}
</ul>
<form onsubmit={onSubmit}>
- <button class="btn variant-filled" type="submit"> Create Invitation </button>
+ <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 4e28abe..7fb91e8 100644
--- a/ui/lib/components/LogIn.svelte
+++ b/ui/lib/components/LogIn.svelte
@@ -1,39 +1,39 @@
<script>
- let {
- username = $bindable(),
- password = $bindable(),
- legend = 'sign in',
- disabled,
- onsubmit
- } = $props();
+ let {
+ username = $bindable(),
+ password = $bindable(),
+ legend = 'sign in',
+ disabled,
+ onsubmit
+ } = $props();
</script>
<div class="card m-4 p-4">
- <form {onsubmit}>
- <label class="label" for="username">
- username
- <input
- class="input"
- name="username"
- type="text"
- placeholder="username"
- bind:value={username}
- {disabled}
- />
- </label>
- <label class="label" for="password">
- password
- <input
- class="input"
- name="password"
- type="password"
- placeholder="password"
- bind:value={password}
- {disabled}
- />
- </label>
- <button class="btn variant-filled" type="submit">
- {legend}
- </button>
- </form>
+ <form {onsubmit}>
+ <label class="label" for="username">
+ username
+ <input
+ class="input"
+ name="username"
+ type="text"
+ placeholder="username"
+ bind:value={username}
+ {disabled}
+ />
+ </label>
+ <label class="label" for="password">
+ password
+ <input
+ class="input"
+ name="password"
+ type="password"
+ placeholder="password"
+ bind:value={password}
+ {disabled}
+ />
+ </label>
+ <button class="btn variant-filled" type="submit">
+ {legend}
+ </button>
+ </form>
</div>
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index f47e9b6..f0e7045 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -1,32 +1,32 @@
<script>
- import { marked } from 'marked';
- import DOMPurify from 'dompurify';
+ import { marked } from 'marked';
+ import DOMPurify from 'dompurify';
- function scroll(message) {
- message.scrollIntoView();
- }
+ function scroll(message) {
+ message.scrollIntoView();
+ }
- let { at, body } = $props();
- let renderedBody = $derived(DOMPurify.sanitize(marked.parse(body, { breaks: true })));
+ let { at, body } = $props();
+ let renderedBody = $derived(DOMPurify.sanitize(marked.parse(body, { breaks: true })));
</script>
<div class="message relative">
- <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
- <section use:scroll class="py-1 message-body">
- <!-- eslint-disable-next-line svelte/no-at-html-tags -->
- {@html renderedBody}
- </section>
+ <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
+ <section use:scroll class="py-1 message-body">
+ <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+ {@html renderedBody}
+ </section>
</div>
<style>
- .message .timestamp {
- display: none;
- }
- .message:hover .timestamp {
- display: flex;
- }
- .message-body:empty:after {
- content: '.';
- visibility: hidden;
- }
+ .message .timestamp {
+ display: none;
+ }
+ .message:hover .timestamp {
+ display: flex;
+ }
+ .message-body:empty:after {
+ content: '.';
+ visibility: hidden;
+ }
</style>
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 220ed3b..907391c 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -1,40 +1,40 @@
<script>
- import { postToChannel } from '$lib/apiServer';
+ import { postToChannel } from '$lib/apiServer';
- let { channel } = $props();
+ let { channel } = $props();
- let form;
- let value = $state('');
- let pending = false;
+ let form;
+ let value = $state('');
+ let pending = false;
- let disabled = $derived(pending);
+ let disabled = $derived(pending);
- async function onSubmit(event) {
- event.preventDefault();
- pending = true;
- await postToChannel(channel, value);
- form.reset();
- pending = false;
- }
+ 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') {
- onSubmit(event);
- }
- }
+ function onKeyDown(event) {
+ if (!event.altKey && event.key === 'Enter') {
+ onSubmit(event);
+ }
+ }
</script>
<form bind:this={form} onsubmit={onSubmit} class="flex flex-row flex-nowrap">
- <textarea
- onkeydown={onKeyDown}
- bind:value
- {disabled}
- type="search"
- class="flex-auto h-6 input rounded-r-none"
- ></textarea>
- <button
- color="primary variant-filled-secondary"
- type="submit"
- class="flex-none w-6 h-6 btn-icon variant-filled rounded-l-none">&raquo;</button
- >
+ <textarea
+ onkeydown={onKeyDown}
+ bind:value
+ {disabled}
+ type="search"
+ class="flex-auto h-6 input rounded-r-none"
+ ></textarea>
+ <button
+ color="primary variant-filled-secondary"
+ type="submit"
+ class="flex-none w-6 h-6 btn-icon variant-filled rounded-l-none">&raquo;</button
+ >
</form>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index 23c2186..b3e3eee 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -1,22 +1,22 @@
<script>
- import { logins, currentUser } from '$lib/store';
- import Message from '$lib/components/Message.svelte';
+ import { logins, currentUser } from '$lib/store';
+ import Message from '$lib/components/Message.svelte';
- let { sender, messages } = $props();
+ let { sender, messages } = $props();
- let name = $derived($logins.get(sender));
- let ownMessage = $derived($currentUser !== null && $currentUser.id == sender);
+ let name = $derived($logins.get(sender));
+ let ownMessage = $derived($currentUser !== null && $currentUser.id == sender);
</script>
<div
- class="card card-hover m-4 px-4 py-1 relative"
- class:own-message={ownMessage}
- class:other-message={!ownMessage}
+ class="card card-hover m-4 px-4 py-1 relative"
+ class:own-message={ownMessage}
+ class:other-message={!ownMessage}
>
- <span class="chip variant-soft sticky top-o left-0">
- @{name}:
- </span>
- {#each messages as { at, body }}
- <Message {at} {body} />
- {/each}
+ <span class="chip variant-soft sticky top-o left-0">
+ @{name}:
+ </span>
+ {#each messages as { at, body }}
+ <Message {at} {body} />
+ {/each}
</div>
generated by cgit v1.2.3 (git 2.39.1) at 2026-01-02 15:39:55 +0000