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.svelte27
-rw-r--r--ui/lib/components/ChannelList.svelte18
-rw-r--r--ui/lib/components/CreateChannelForm.svelte34
-rw-r--r--ui/lib/components/CurrentUser.svelte33
-rw-r--r--ui/lib/components/Invite.svelte5
-rw-r--r--ui/lib/components/Invites.svelte12
-rw-r--r--ui/lib/components/LogIn.svelte48
-rw-r--r--ui/lib/components/Message.svelte44
-rw-r--r--ui/lib/components/MessageInput.svelte50
-rw-r--r--ui/lib/components/MessageRun.svelte33
11 files changed, 194 insertions, 172 deletions
diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
index 76bf13a..212048a 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';
- export let channel = null;
- $: messageList = channel !== null ? $messages.inChannel(channel) : [];
+ export let channel = null;
+ $: messageList = 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 bbe9ff7..60c9092 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -1,21 +1,18 @@
<script>
- import { showMenu } from '$lib/store';
+ import { showMenu } from '$lib/store';
- export let id;
- export let name;
- export let active = false;
+ export let id;
+ export let name;
+ export let active = false;
- function hideMenu() {
- showMenu.update(() => false);
- }
+ function hideMenu() {
+ showMenu.update(() => false);
+ }
</script>
-<li
- class="rounded-full"
- class:bg-slate-400={active}
->
-<a href="/ch/{id}" on:click={hideMenu}>
- <span class="badge bg-primary-500">#</span>
- <span class="flex-auto">{name}</span>
-</a>
+<li class="rounded-full" class:bg-slate-400={active}>
+ <a href="/ch/{id}" on:click={hideMenu}>
+ <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 316e404..f7376c1 100644
--- a/ui/lib/components/ChannelList.svelte
+++ b/ui/lib/components/ChannelList.svelte
@@ -1,16 +1,16 @@
<script>
- import { channelsList } from '$lib/store';
- import Channel from './Channel.svelte';
+ import { channelsList } from '$lib/store';
+ import Channel from './Channel.svelte';
- export let active = null;
+ export let active = null;
- $: channels = $channelsList.channels;
+ $: channels = $channelsList.channels;
</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 b716736..6b50fb1 100644
--- a/ui/lib/components/CreateChannelForm.svelte
+++ b/ui/lib/components/CreateChannelForm.svelte
@@ -1,23 +1,29 @@
<script>
- import { createChannel } from '$lib/apiServer';
+ import { createChannel } from '$lib/apiServer';
- let name = "";
- let pending = false;
- $: disabled = pending;
+ let name = '';
+ let pending = false;
+ $: disabled = pending;
- async function handleSubmit(event) {
- pending = true;
- const response = await createChannel(name);
- if (200 <= response.status && response.status < 300) {
- name = '';
- }
- pending = false;
- }
+ async function handleSubmit(event) {
+ pending = true;
+ const response = await createChannel(name);
+ if (200 <= response.status && response.status < 300) {
+ name = '';
+ }
+ pending = false;
+ }
</script>
<form on:submit|preventDefault={handleSubmit} class="form form-row flex-nowrap">
- <input type="text" placeholder="create channel" bind:value={name} disabled={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 4b1b974..97ff980 100644
--- a/ui/lib/components/CurrentUser.svelte
+++ b/ui/lib/components/CurrentUser.svelte
@@ -1,25 +1,24 @@
<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() {
- const response = await logOut();
- if (200 <= response.status && response.status < 300) {
- currentUser.update(() => null);
- goto('/login');
- }
- }
+ async function handleLogout() {
+ const response = await logOut();
+ if (200 <= response.status && response.status < 300) {
+ currentUser.update(() => null);
+ goto('/login');
+ }
+ }
</script>
<form on:submit|preventDefault={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 7fdc753..ea8dd1d 100644
--- a/ui/lib/components/Invite.svelte
+++ b/ui/lib/components/Invite.svelte
@@ -7,7 +7,6 @@
<button
class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
- use:clipboard={inviteUrl}>Copy</button>
+ 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 df51afb..bfaf2b6 100644
--- a/ui/lib/components/Invites.svelte
+++ b/ui/lib/components/Invites.svelte
@@ -4,25 +4,21 @@
import Invite from '$lib/components/Invite.svelte';
let invites = writable([]);
- $: $invites, console.log("invites", $invites);
+ $: $invites, console.log('invites', $invites);
async function onSubmit() {
let response = await createInvite();
if (response.status == 200) {
- invites.update(val => [...val, response.data]);
+ invites.update((val) => [...val, response.data]);
}
}
</script>
<ul>
{#each $invites as invite}
- <li><Invite id={invite.id} /></li>
+ <li><Invite id={invite.id} /></li>
{/each}
</ul>
<form on:submit|preventDefault={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 bb80ccd..4346c47 100644
--- a/ui/lib/components/LogIn.svelte
+++ b/ui/lib/components/LogIn.svelte
@@ -1,22 +1,36 @@
<script>
- export let disabled = false;
- export let username = '';
- export let password = '';
- export let legend = 'sign in';
+ export let disabled = false;
+ export let username = '';
+ export let password = '';
+ export let legend = 'sign in';
</script>
<div class="card m-4 p-4">
- <form on:submit|preventDefault>
- <label class="label" for="username">
- username
- <input class="input" name="username" type="text" placeholder="username" bind:value={username} disabled={disabled}>
- </label>
- <label class="label" for="password">
- password
- <input class="input" name="password" type="password" placeholder="password" bind:value={password} disabled={disabled}>
- </label>
- <button class="btn variant-filled" type="submit">
- {legend}
- </button>
- </form>
+ <form on:submit|preventDefault>
+ <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 b71cf3c..9376cbe 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -1,33 +1,33 @@
<script>
- import { marked } from 'marked';
- import DOMPurify from 'dompurify';
+ import { marked } from 'marked';
+ import DOMPurify from 'dompurify';
- export let at;
- export let body;
+ export let at;
+ export let body;
- $: renderedBody = DOMPurify.sanitize(marked.parse(body));
+ $: renderedBody = DOMPurify.sanitize(marked.parse(body));
- let scroll = (message) => {
- message.scrollIntoView();
- }
+ let scroll = (message) => {
+ message.scrollIntoView();
+ };
</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">
- {@html renderedBody}
- </section>
+ <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
+ <section use:scroll class="py-1 message-body">
+ {@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 03ac7fa..7aac442 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -1,28 +1,38 @@
<script>
- import { tick } from 'svelte';
- import { postToChannel } from '$lib/apiServer';
+ import { tick } from 'svelte';
+ import { postToChannel } from '$lib/apiServer';
- export let channel = null;
- let input;
- let value = '';
- let pending = false;
+ export let channel = null;
+ let input;
+ let value = '';
+ let pending = false;
- $: disabled = pending || (channel === null);
+ $: disabled = pending || channel === null;
- async function handleSubmit() {
- if (channel !== null) {
- pending = true;
- // TODO try/catch:
- await postToChannel(channel, value);
- pending = false;
- value = '';
- await tick();
- input.focus();
- }
- }
+ async function handleSubmit() {
+ if (channel !== null) {
+ pending = true;
+ // TODO try/catch:
+ await postToChannel(channel, value);
+ pending = false;
+ value = '';
+ await tick();
+ input.focus();
+ }
+ }
</script>
<form on:submit|preventDefault={handleSubmit} class="flex flex-row flex-nowrap">
- <input bind:this={input} bind:value={value} disabled={disabled} type="search" class="flex-auto h-6 input rounded-r-none" />
- <button color="primary variant-filled-secondary" type="submit" class="flex-none w-6 h-6 btn-icon variant-filled rounded-l-none">&raquo;</button>
+ <input
+ bind:this={input}
+ bind:value
+ {disabled}
+ type="search"
+ class="flex-auto h-6 input rounded-r-none"
+ />
+ <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 af699ab..4894885 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -1,23 +1,24 @@
<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';
- export let sender;
- export let messages;
+ export let sender;
+ export let messages;
- let name;
- $: name = $logins.get(sender);
- $: ownMessage = $currentUser.id == sender;
+ let name;
+ $: name = $logins.get(sender);
+ $: ownMessage = $currentUser.id == sender;
</script>
<div
- 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}
+ 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}
</div>
generated by cgit v1.2.3 (git 2.39.1) at 2026-01-02 11:10:50 +0000