diff options
| author | Kit La Touche <kit@transneptune.net> | 2024-11-03 21:43:00 -0500 |
|---|---|---|
| committer | Kit La Touche <kit@transneptune.net> | 2024-11-03 21:43:00 -0500 |
| commit | f38881f3253b3a128154ffd95655859e3dc629dc (patch) | |
| tree | e0b1eea57aa8b431aa83e2efc4577c12d3cc2b29 /ui/lib/components | |
| parent | 032bd28ee996e076bc8341704f74f062a2672645 (diff) | |
Run spaces-style prettier formatting
Diffstat (limited to 'ui/lib/components')
| -rw-r--r-- | ui/lib/components/ActiveChannel.svelte | 62 | ||||
| -rw-r--r-- | ui/lib/components/Channel.svelte | 10 | ||||
| -rw-r--r-- | ui/lib/components/ChannelList.svelte | 14 | ||||
| -rw-r--r-- | ui/lib/components/CreateChannelForm.svelte | 42 | ||||
| -rw-r--r-- | ui/lib/components/CurrentUser.svelte | 34 | ||||
| -rw-r--r-- | ui/lib/components/Invite.svelte | 10 | ||||
| -rw-r--r-- | ui/lib/components/Invites.svelte | 28 | ||||
| -rw-r--r-- | ui/lib/components/LogIn.svelte | 68 | ||||
| -rw-r--r-- | ui/lib/components/Message.svelte | 44 | ||||
| -rw-r--r-- | ui/lib/components/MessageInput.svelte | 60 | ||||
| -rw-r--r-- | ui/lib/components/MessageRun.svelte | 28 |
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">➕</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">➕</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">»</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">»</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> |
