From 22ce0549e20ee397cf5953bd6b7aafc752deaa28 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Sat, 2 Nov 2024 20:02:24 -0400
Subject: Run prettier, make lint part of pre-commit

---
 ui/lib/components/ActiveChannel.svelte     | 62 +++++++++++++++---------------
 ui/lib/components/Channel.svelte           | 27 ++++++-------
 ui/lib/components/ChannelList.svelte       | 18 ++++-----
 ui/lib/components/CreateChannelForm.svelte | 34 +++++++++-------
 ui/lib/components/CurrentUser.svelte       | 33 ++++++++--------
 ui/lib/components/Invite.svelte            |  5 +--
 ui/lib/components/Invites.svelte           | 12 ++----
 ui/lib/components/LogIn.svelte             | 48 +++++++++++++++--------
 ui/lib/components/Message.svelte           | 44 ++++++++++-----------
 ui/lib/components/MessageInput.svelte      | 50 ++++++++++++++----------
 ui/lib/components/MessageRun.svelte        | 33 ++++++++--------
 11 files changed, 194 insertions(+), 172 deletions(-)

(limited to 'ui/lib/components')

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>
-- 
cgit v1.2.3