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/routes/(app)/+layout.svelte | 238 +++++++++++++++++++++--------------------
 1 file changed, 120 insertions(+), 118 deletions(-)

(limited to 'ui/routes/(app)/+layout.svelte')

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