summaryrefslogtreecommitdiff
path: root/ui/routes/(app)
diff options
context:
space:
mode:
Diffstat (limited to 'ui/routes/(app)')
-rw-r--r--ui/routes/(app)/+layout.svelte202
-rw-r--r--ui/routes/(app)/ch/[channel]/+page.svelte24
-rw-r--r--ui/routes/(app)/me/+page.svelte102
3 files changed, 164 insertions, 164 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&hellip;</h2>
+ <h2>Loading&hellip;</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 />
generated by cgit v1.2.3 (git 2.39.1) at 2026-01-02 14:28:36 +0000