Run prettier, make lint part of pre-commit

3 files changed, 158 insertions, 134 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index ae80324..9843979 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -1,145 +1,147 @@
 <script>
-    import { page } from '$app/stores';
-    import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
 	import { onMount, onDestroy } from 'svelte';
 
 	import { boot, subscribeToEvents } from '$lib/apiServer';
 	import { showMenu, currentUser, logins, channelsList, messages } from '$lib/store';
 
-    import ChannelList from '$lib/components/ChannelList.svelte';
-    import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
-    import MessageInput from '$lib/components/MessageInput.svelte';
-
-    let loading = true;
-    let events = null;
-    let showMenuValue;
-    showMenu.subscribe((value) => {
-        showMenuValue = value;
-    });
+	import ChannelList from '$lib/components/ChannelList.svelte';
+	import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
+	import MessageInput from '$lib/components/MessageInput.svelte';
 
+	let loading = true;
+	let events = null;
+	let showMenuValue;
+	showMenu.subscribe((value) => {
+		showMenuValue = value;
+	});
 
-    function toggleMenu() {
-        showMenu.update((value) => !value);
-    }
+	function toggleMenu() {
+		showMenu.update((value) => !value);
+	}
 
-    $: channel = $page?.params?.channel;
+	$: channel = $page?.params?.channel;
 
-    function onBooted(boot) {
-        currentUser.update(() => ({
-            id: boot.login.id,
-            username: boot.login.name,
-        }));
-        logins.update((value) => value.setLogins(boot.logins));
-        channelsList.update((value) => value.setChannels(boot.channels));
-        messages.update((value) => value.setMessages(boot.messages));
-    }
+	function onBooted(boot) {
+		currentUser.update(() => ({
+			id: boot.login.id,
+			username: boot.login.name
+		}));
+		logins.update((value) => value.setLogins(boot.logins));
+		channelsList.update((value) => value.setChannels(boot.channels));
+		messages.update((value) => value.setMessages(boot.messages));
+	}
 
 	onMount(async () => {
-        let response = await boot();
-        switch (response.status) {
-            case 200:
-                onBooted(response.data);
-                events = subscribeToEvents(response.data.resume_point);
-                break;
-            case 401:
-                currentUser.update(() => null);
-                goto('/login');
-                break;
-            case 503:
-                currentUser.update(() => null);
-                goto('/setup');
-                break;
-            default:
-                // TODO: display error.
-                break;
-        }
-        loading = false;
+		let response = await boot();
+		switch (response.status) {
+			case 200:
+				onBooted(response.data);
+				events = subscribeToEvents(response.data.resume_point);
+				break;
+			case 401:
+				currentUser.update(() => null);
+				goto('/login');
+				break;
+			case 503:
+				currentUser.update(() => null);
+				goto('/setup');
+				break;
+			default:
+				// TODO: display error.
+				break;
+		}
+		loading = false;
 	});
 
-    onDestroy(async () => {
-        if (events !== null) {
-            events.close();
-        }
-    });
+	onDestroy(async () => {
+		if (events !== null) {
+			events.close();
+		}
+	});
 </script>
 
 <svelte:head>
-    <title>understory</title>
+	<title>understory</title>
 </svelte:head>
 
 {#if loading}
-    <h2>Loading&hellip;</h2>
+	<h2>Loading&hellip;</h2>
 {:else}
-    <div id="interface" class="p-2">
-        <nav id="sidebar" data-expanded={showMenuValue}>
-            <div class="channel-list">
-                <ChannelList active={channel} />
-            </div>
-            <div class="create-channel">
-                <CreateChannelForm />
-            </div>
-        </nav>
-        <main>
-            <div class="active-channel">
-                <slot />
-            </div>
-            <div class="create-message max-h-full">
-                <MessageInput {channel} />
-            </div>
-        </main>
-    </div>
+	<div id="interface" class="p-2">
+		<nav id="sidebar" data-expanded={showMenuValue}>
+			<div class="channel-list">
+				<ChannelList active={channel} />
+			</div>
+			<div class="create-channel">
+				<CreateChannelForm />
+			</div>
+		</nav>
+		<main>
+			<div class="active-channel">
+				<slot />
+			</div>
+			<div class="create-message max-h-full">
+				<MessageInput {channel} />
+			</div>
+		</main>
+	</div>
 {/if}
 
 <style>
-:root {
-    --app-bar-height: 68px;
-    --input-row-height: 2rem;
-    --interface-padding: 16px;
-}
+	:root {
+		--app-bar-height: 68px;
+		--input-row-height: 2rem;
+		--interface-padding: 16px;
+	}
 
-#interface {
-  margin: unset;
-  display: grid;
-  grid-template:
-    'side main' 1fr
-    / auto 1fr
-  ;
-  height: calc(100vh - var(--app-bar-height));
+	#interface {
+		margin: unset;
+		display: grid;
+		grid-template:
+			'side main' 1fr
+			/ auto 1fr;
+		height: calc(100vh - var(--app-bar-height));
 
-  @media (width > 640px) {
-    --overlay: static;
-    --translate: 0;
-  }
-}
-nav {
-    grid-area: side;
-    background-color: rgb(var(--color-surface-800));
-    inset: auto auto 0 0;
-    padding: 0.25rem;
-    position: var(--overlay, absolute);
-    transition: translate 300ms ease-out;
-    width: 21rem;
-    height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
-    z-index: 10;
-}
-nav button {
-    position: absolute;
-    top: 0;
-    right: 0;
-}
-main {
-    grid-area: main;
-    height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
-}
-.active-channel {
-    height: calc(100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height));
-    overflow: auto;
-}
-.channel-list {
-    height: calc(100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height));
-    overflow: auto;
-}
-nav[data-expanded=false] {
-  translate: var(--translate, -100% 0);
-}
+		@media (width > 640px) {
+			--overlay: static;
+			--translate: 0;
+		}
+	}
+	nav {
+		grid-area: side;
+		background-color: rgb(var(--color-surface-800));
+		inset: auto auto 0 0;
+		padding: 0.25rem;
+		position: var(--overlay, absolute);
+		transition: translate 300ms ease-out;
+		width: 21rem;
+		height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
+		z-index: 10;
+	}
+	nav button {
+		position: absolute;
+		top: 0;
+		right: 0;
+	}
+	main {
+		grid-area: main;
+		height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
+	}
+	.active-channel {
+		height: calc(
+			100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)
+		);
+		overflow: auto;
+	}
+	.channel-list {
+		height: calc(
+			100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)
+		);
+		overflow: auto;
+	}
+	nav[data-expanded='false'] {
+		translate: var(--translate, -100% 0);
+	}
 </style>
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index 7bd28d9..74ad28b 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -1,10 +1,10 @@
 <script>
-    import { page } from '$app/stores';
-    import ActiveChannel from '$lib/components/ActiveChannel.svelte';
+	import { page } from '$app/stores';
+	import ActiveChannel from '$lib/components/ActiveChannel.svelte';
 
-    $: channel = $page?.params?.channel;
+	$: channel = $page?.params?.channel;
 </script>
 
 <div class="active-channel">
-    <ActiveChannel {channel} />
+	<ActiveChannel {channel} />
 </div>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 82af3c7..26537ad 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -3,9 +3,12 @@
 
 	import Invites from '$lib/components/Invites.svelte';
 
-	let currentPassword = "", newPassword = "", confirmPassword = "", passwordForm;
+	let currentPassword = '',
+		newPassword = '',
+		confirmPassword = '',
+		passwordForm;
 	let pending = false;
-	$: valid = (newPassword === confirmPassword) && (newPassword !== currentPassword);
+	$: valid = newPassword === confirmPassword && newPassword !== currentPassword;
 	$: disabled = pending || !valid;
 
 	async function onPasswordChange() {
@@ -20,22 +23,41 @@
 	}
 </script>
 
-<form on:submit|preventDefault={onPasswordChange} bind:this={passwordForm} >
-	<label>current password
-		<input class="input" name="currentPassword" type="password" placeholder="password" bind:value={currentPassword}>
+<form on:submit|preventDefault={onPasswordChange} bind:this={passwordForm}>
+	<label
+		>current password
+		<input
+			class="input"
+			name="currentPassword"
+			type="password"
+			placeholder="password"
+			bind:value={currentPassword}
+		/>
 	</label>
 
-	<label>new password
-		<input class="input" name="newPassword" type="password" placeholder="password" bind:value={newPassword}>
+	<label
+		>new password
+		<input
+			class="input"
+			name="newPassword"
+			type="password"
+			placeholder="password"
+			bind:value={newPassword}
+		/>
 	</label>
 
-	<label>confirm new password
-		<input class="input" name="confirmPassword" type="password" placeholder="password" bind:value={confirmPassword}>
+	<label
+		>confirm new password
+		<input
+			class="input"
+			name="confirmPassword"
+			type="password"
+			placeholder="password"
+			bind:value={confirmPassword}
+		/>
 	</label>
 
-	<button class="btn variant-filled" type="submit" disabled={disabled}>
-		change password
-	</button>
+	<button class="btn variant-filled" type="submit" {disabled}> change password </button>
 </form>
 
 <Invites />