diff options
Diffstat (limited to 'ui/routes/(app)/+layout.svelte')
| -rw-r--r-- | ui/routes/(app)/+layout.svelte | 202 |
1 files changed, 101 insertions, 101 deletions
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte index 356a096..94e4509 100644 --- a/ui/routes/(app)/+layout.svelte +++ b/ui/routes/(app)/+layout.svelte @@ -1,122 +1,122 @@ <script> - import { page } from '$app/stores'; - import { goto } from '$app/navigation'; - import { onMount, onDestroy } from 'svelte'; + 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 { 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 ChannelList from '$lib/components/ChannelList.svelte'; + import CreateChannelForm from '$lib/components/CreateChannelForm.svelte'; - let events = null; + let events = null; - let loading = $state(true); - let channel = $derived($page.params.channel); + let loading = $state(true); + let channel = $derived($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; - }); + 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; + }); - 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…</h2> + <h2>Loading…</h2> {:else} - <div id="interface" class="p-2"> - <nav id="sidebar" data-expanded={$showMenu}> - <div class="channel-list"> - <ChannelList active={channel} channels={$channelsList.channels} /> - </div> - <div class="create-channel"> - <CreateChannelForm /> - </div> - </nav> - <main> - <slot /> - </main> - </div> + <div id="interface" class="p-2"> + <nav id="sidebar" data-expanded={$showMenu}> + <div class="channel-list"> + <ChannelList active={channel} channels={$channelsList.channels} /> + </div> + <div class="create-channel"> + <CreateChannelForm /> + </div> + </nav> + <main> + <slot /> + </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; - } - main { - grid-area: main; - height: calc(100vh - var(--app-bar-height) - var(--interface-padding)); - } - .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; + } + main { + grid-area: main; + height: calc(100vh - var(--app-bar-height) - var(--interface-padding)); + } + .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> |