diff options
| author | Owen Jacobson <owen@grimoire.ca> | 2024-11-03 21:47:30 -0500 |
|---|---|---|
| committer | Owen Jacobson <owen@grimoire.ca> | 2024-11-03 21:47:30 -0500 |
| commit | 65381f49cc9abce98c1c63c399fdcfc8ce76c3f5 (patch) | |
| tree | e0b1eea57aa8b431aa83e2efc4577c12d3cc2b29 /ui/routes | |
| parent | 30fa0c4c1faece6b054105fe3cce5107f24a2fa2 (diff) | |
| parent | f38881f3253b3a128154ffd95655859e3dc629dc (diff) | |
Merge remote-tracking branch 'origin/wip/actually-configure-prettier'
Diffstat (limited to 'ui/routes')
| -rw-r--r-- | ui/routes/(app)/+layout.svelte | 202 | ||||
| -rw-r--r-- | ui/routes/(app)/ch/[channel]/+page.svelte | 24 | ||||
| -rw-r--r-- | ui/routes/(app)/me/+page.svelte | 102 | ||||
| -rw-r--r-- | ui/routes/(login)/invite/[invite]/+page.js | 32 | ||||
| -rw-r--r-- | ui/routes/(login)/invite/[invite]/+page.svelte | 52 | ||||
| -rw-r--r-- | ui/routes/(login)/login/+page.svelte | 36 | ||||
| -rw-r--r-- | ui/routes/(login)/setup/+page.svelte | 36 | ||||
| -rw-r--r-- | ui/routes/+layout.svelte | 66 |
8 files changed, 275 insertions, 275 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> diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte index a5836fc..49c1c29 100644 --- a/ui/routes/(app)/ch/[channel]/+page.svelte +++ b/ui/routes/(app)/ch/[channel]/+page.svelte @@ -1,23 +1,23 @@ <script> - import { page } from '$app/stores'; - import ActiveChannel from '$lib/components/ActiveChannel.svelte'; - import MessageInput from '$lib/components/MessageInput.svelte'; + import { page } from '$app/stores'; + import ActiveChannel from '$lib/components/ActiveChannel.svelte'; + import MessageInput from '$lib/components/MessageInput.svelte'; - let channel = $derived($page.params.channel); + let channel = $derived($page.params.channel); </script> <div class="active-channel"> - <ActiveChannel {channel} /> + <ActiveChannel {channel} /> </div> <div class="create-message max-h-full"> - <MessageInput {channel} /> + <MessageInput {channel} /> </div> <style> - .active-channel { - height: calc( - 100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height) - ); - overflow: auto; - } + .active-channel { + height: calc( + 100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height) + ); + overflow: auto; + } </style> diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte index 4531a91..30da6f0 100644 --- a/ui/routes/(app)/me/+page.svelte +++ b/ui/routes/(app)/me/+page.svelte @@ -1,64 +1,64 @@ <script> - import { changePassword } from '$lib/apiServer.js'; + import { changePassword } from '$lib/apiServer.js'; - import Invites from '$lib/components/Invites.svelte'; + import Invites from '$lib/components/Invites.svelte'; - let currentPassword = $state(''), - newPassword = $state(''), - confirmPassword = $state(''), - passwordForm; - let pending = $state(false); - let valid = $derived(newPassword === confirmPassword && newPassword !== currentPassword); - let disabled = $derived(pending || !valid); + let currentPassword = $state(''), + newPassword = $state(''), + confirmPassword = $state(''), + passwordForm; + let pending = $state(false); + let valid = $derived(newPassword === confirmPassword && newPassword !== currentPassword); + let disabled = $derived(pending || !valid); - async function onPasswordChange(event) { - event.preventDefault(); - pending = true; - let response = await changePassword(currentPassword, newPassword); - switch (response.status) { - case 200: - passwordForm.reset(); - break; - } - pending = false; - } + async function onPasswordChange(event) { + event.preventDefault(); + pending = true; + let response = await changePassword(currentPassword, newPassword); + switch (response.status) { + case 200: + passwordForm.reset(); + break; + } + pending = false; + } </script> <form onsubmit={onPasswordChange} bind:this={passwordForm}> - <label - >current password - <input - class="input" - name="currentPassword" - type="password" - placeholder="password" - bind:value={currentPassword} - /> - </label> + <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> + <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> + <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}> change password </button> + <button class="btn variant-filled" type="submit" {disabled}> change password </button> </form> <Invites /> diff --git a/ui/routes/(login)/invite/[invite]/+page.js b/ui/routes/(login)/invite/[invite]/+page.js index 32c9290..5d526df 100644 --- a/ui/routes/(login)/invite/[invite]/+page.js +++ b/ui/routes/(login)/invite/[invite]/+page.js @@ -1,23 +1,23 @@ import { getInvite } from '$lib/apiServer'; async function loadInvite(invite) { - let response = await getInvite(invite); - switch (response.status) { - case 200: { - let invite = response.data; - return invite; - } - case 404: - return null; - default: - // TODO: display error. - break; - } + let response = await getInvite(invite); + switch (response.status) { + case 200: { + let invite = response.data; + return invite; + } + case 404: + return null; + default: + // TODO: display error. + break; + } } export function load({ params }) { - let { invite } = params; - return { - invite: loadInvite(invite) - }; + let { invite } = params; + return { + invite: loadInvite(invite) + }; } diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte index 65f5a97..18bf437 100644 --- a/ui/routes/(login)/invite/[invite]/+page.svelte +++ b/ui/routes/(login)/invite/[invite]/+page.svelte @@ -1,36 +1,36 @@ <script> - import { goto } from '$app/navigation'; - import { acceptInvite } from '$lib/apiServer'; + import { goto } from '$app/navigation'; + import { acceptInvite } from '$lib/apiServer'; - import LogIn from '$lib/components/LogIn.svelte'; + import LogIn from '$lib/components/LogIn.svelte'; - let { data } = $props(); + let { data } = $props(); - let username = $state(''), - password = $state(''); - let pending = false; - let disabled = $derived(pending); + let username = $state(''), + password = $state(''); + let pending = false; + let disabled = $derived(pending); - async function onSubmit(event) { - event.preventDefault(); - pending = true; - const response = await acceptInvite(data.invite.id, username, password); - if (200 <= response.status && response.status < 300) { - username = ''; - password = ''; - goto('/'); - } - pending = false; - } + async function onSubmit(event) { + event.preventDefault(); + pending = true; + const response = await acceptInvite(data.invite.id, username, password); + if (200 <= response.status && response.status < 300) { + username = ''; + password = ''; + goto('/'); + } + pending = false; + } </script> {#await data.invite} - <div class="card m-4 p-4"> - <p>Loading invitation…</p> - </div> + <div class="card m-4 p-4"> + <p>Loading invitation…</p> + </div> {:then invite} - <div class="card m-4 p-4"> - <p>Hi there! {invite.issuer} invites you to the conversation.</p> - </div> - <LogIn {disabled} bind:username bind:password onsubmit={onSubmit} /> + <div class="card m-4 p-4"> + <p>Hi there! {invite.issuer} invites you to the conversation.</p> + </div> + <LogIn {disabled} bind:username bind:password onsubmit={onSubmit} /> {/await} diff --git a/ui/routes/(login)/login/+page.svelte b/ui/routes/(login)/login/+page.svelte index 77c2d62..a1291ea 100644 --- a/ui/routes/(login)/login/+page.svelte +++ b/ui/routes/(login)/login/+page.svelte @@ -1,25 +1,25 @@ <script> - import { goto } from '$app/navigation'; - import { logIn } from '$lib/apiServer'; + import { goto } from '$app/navigation'; + import { logIn } from '$lib/apiServer'; - import LogIn from '$lib/components/LogIn.svelte'; + import LogIn from '$lib/components/LogIn.svelte'; - let username = '', - password = ''; - let pending = false; - $: disabled = pending; + let username = '', + password = ''; + let pending = false; + $: disabled = pending; - async function onSubmit(event) { - event.preventDefault(); - pending = true; - const response = await logIn(username, password); - if (200 <= response.status && response.status < 300) { - username = ''; - password = ''; - goto('/'); - } - pending = false; - } + async function onSubmit(event) { + event.preventDefault(); + pending = true; + const response = await logIn(username, password); + if (200 <= response.status && response.status < 300) { + username = ''; + password = ''; + goto('/'); + } + pending = false; + } </script> <LogIn {disabled} bind:username bind:password onsubmit={onSubmit} /> diff --git a/ui/routes/(login)/setup/+page.svelte b/ui/routes/(login)/setup/+page.svelte index f95403f..f162ded 100644 --- a/ui/routes/(login)/setup/+page.svelte +++ b/ui/routes/(login)/setup/+page.svelte @@ -1,25 +1,25 @@ <script> - import { goto } from '$app/navigation'; - import { setup } from '$lib/apiServer'; + import { goto } from '$app/navigation'; + import { setup } from '$lib/apiServer'; - import LogIn from '$lib/components/LogIn.svelte'; + import LogIn from '$lib/components/LogIn.svelte'; - let username = $state(''), - password = $state(''); - let pending = false; - let disabled = $derived(pending); + let username = $state(''), + password = $state(''); + let pending = false; + let disabled = $derived(pending); - async function onSubmit(event) { - event.preventDefault(); - pending = true; - const response = await setup(username, password); - if (200 <= response.status && response.status < 300) { - username = ''; - password = ''; - goto('/'); - } - pending = false; - } + async function onSubmit(event) { + event.preventDefault(); + pending = true; + const response = await setup(username, password); + if (200 <= response.status && response.status < 300) { + username = ''; + password = ''; + goto('/'); + } + pending = false; + } </script> <LogIn {disabled} bind:username bind:password legend="set up" onsubmit={onSubmit} /> diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte index e0355dd..0477195 100644 --- a/ui/routes/+layout.svelte +++ b/ui/routes/+layout.svelte @@ -1,46 +1,46 @@ <script> - import { onNavigate } from '$app/navigation'; - import '../app.css'; - import logo from '$lib/assets/logo.png'; + import { onNavigate } from '$app/navigation'; + import '../app.css'; + import logo from '$lib/assets/logo.png'; - import { AppBar } from '@skeletonlabs/skeleton'; - import { showMenu, currentUser } from '$lib/store'; + import { AppBar } from '@skeletonlabs/skeleton'; + import { showMenu, currentUser } from '$lib/store'; - import CurrentUser from '$lib/components/CurrentUser.svelte'; + import CurrentUser from '$lib/components/CurrentUser.svelte'; - function toggleMenu() { - showMenu.update((value) => !value); - } + function toggleMenu() { + showMenu.update((value) => !value); + } - onNavigate(() => { - showMenu.update(() => false); - }); + onNavigate(() => { + showMenu.update(() => false); + }); </script> <div id="app" class="m-0 p-0 h-vh w-full"> - <div class="w-full"> - <AppBar class="app-bar"> - <svelte:fragment slot="lead"> - <button on:click|preventDefault={toggleMenu} class="cursor-pointer"> - <img class="w-8 h-8" alt="logo" src={logo} /> - </button> - </svelte:fragment> - <a href="/">understory</a> - <svelte:fragment slot="trail"> - {#if $currentUser} - <CurrentUser /> - {/if} - </svelte:fragment> - </AppBar> - </div> + <div class="w-full"> + <AppBar class="app-bar"> + <svelte:fragment slot="lead"> + <button on:click|preventDefault={toggleMenu} class="cursor-pointer"> + <img class="w-8 h-8" alt="logo" src={logo} /> + </button> + </svelte:fragment> + <a href="/">understory</a> + <svelte:fragment slot="trail"> + {#if $currentUser} + <CurrentUser /> + {/if} + </svelte:fragment> + </AppBar> + </div> - <slot /> + <slot /> </div> <style> - #app { - margin: 0; - height: 100vh; - width: 100%; - } + #app { + margin: 0; + height: 100vh; + width: 100%; + } </style> |
