summaryrefslogtreecommitdiff
path: root/ui
diff options
context:
space:
mode:
authorKit La Touche <kit@transneptune.net>2024-11-06 14:11:46 -0500
committerKit La Touche <kit@transneptune.net>2024-11-06 14:11:46 -0500
commit742b358724619eedbc41680694094735d899d046 (patch)
tree93e5e8355623f2eea38e81d1f23205e259c1c0ae /ui
parentc68ebc39096d93867058f011b4e6313f53128819 (diff)
parent1776711aaad56efe67365d69e2e9f8aa76ee67ef (diff)
Merge branch 'main' into wip/pwa
Diffstat (limited to 'ui')
-rw-r--r--ui/app.html2
-rw-r--r--ui/lib/components/CurrentUser.svelte26
-rw-r--r--ui/lib/components/Message.svelte12
-rw-r--r--ui/lib/components/MessageRun.svelte2
-rw-r--r--ui/lib/store.js1
-rw-r--r--ui/routes/(app)/+layout.svelte7
-rw-r--r--ui/routes/(app)/me/+page.svelte17
-rw-r--r--ui/routes/+layout.svelte56
8 files changed, 53 insertions, 70 deletions
diff --git a/ui/app.html b/ui/app.html
index 4dc66f4..5e7d92b 100644
--- a/ui/app.html
+++ b/ui/app.html
@@ -8,6 +8,6 @@
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" data-theme="skeleton">
- <div style="display: contents">%sveltekit.body%</div>
+ <div class="m-0 p-0 h-vh w-full">%sveltekit.body%</div>
</body>
</html>
diff --git a/ui/lib/components/CurrentUser.svelte b/ui/lib/components/CurrentUser.svelte
deleted file mode 100644
index 56bf915..0000000
--- a/ui/lib/components/CurrentUser.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
- import { goto } from '$app/navigation';
- import { logOut } from '$lib/apiServer';
- import { currentUser } from '$lib/store';
-
- async function handleLogout(event) {
- event.preventDefault();
- const response = await logOut();
- if (200 <= response.status && response.status < 300) {
- currentUser.update(() => null);
- goto('/login');
- }
- }
-</script>
-
-<form onsubmit={handleLogout}>
- {#if $currentUser}
- <a href="/me">@{$currentUser.username}</a>
- {/if}
- <button class="border-slate-500 border-solid border-2 font-bold p-1 rounded" type="submit"
- >log out</button
- >
-</form>
-
-<style>
-</style>
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index ea6e304..68c5c91 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -26,12 +26,12 @@
display: flex;
}
.message-body {
- overflow: auto;
- max-width: 80vw;
- @media (width > 640px) {
- /* 21rem is width of the nav bar in full-screen mode. */
- max-width: calc(90vw - 21rem);
- }
+ overflow: auto;
+ max-width: 80vw;
+ @media (width > 640px) {
+ /* 21rem is width of the nav bar in full-screen mode. */
+ max-width: calc(90vw - 21rem);
+ }
}
.message-body:empty:after {
content: '.';
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index b3e3eee..b71e972 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -9,7 +9,7 @@
</script>
<div
- class="card card-hover m-4 px-4 py-1 relative"
+ class="card m-4 px-4 py-1 relative"
class:own-message={ownMessage}
class:other-message={!ownMessage}
>
diff --git a/ui/lib/store.js b/ui/lib/store.js
index bdd3e3b..ae17ffa 100644
--- a/ui/lib/store.js
+++ b/ui/lib/store.js
@@ -3,7 +3,6 @@ import { Channels } from '$lib/store/channels';
import { Messages } from '$lib/store/messages';
import { Logins } from '$lib/store/logins';
-export const showMenu = writable(false);
export const currentUser = writable(null);
export const logins = writable(new Logins());
export const channelsList = writable(new Channels());
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 2725c65..f876338 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -1,16 +1,17 @@
<script>
import { page } from '$app/stores';
import { goto } from '$app/navigation';
- import { onMount, onDestroy } from 'svelte';
+ import { onMount, onDestroy, getContext } from 'svelte';
import { boot, subscribeToEvents } from '$lib/apiServer';
- import { showMenu, currentUser, logins, channelsList, messages } from '$lib/store';
+ import { currentUser, logins, channelsList, messages } from '$lib/store';
import ChannelList from '$lib/components/ChannelList.svelte';
import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
let events = null;
+ let pageContext = getContext('page');
let { children } = $props();
let loading = $state(true);
let channel = $derived($page.params.channel);
@@ -62,7 +63,7 @@
<h2>Loading&hellip;</h2>
{:else}
<div id="interface" class="p-2">
- <nav id="sidebar" data-expanded={$showMenu}>
+ <nav id="sidebar" data-expanded={pageContext.showMenu}>
<div class="channel-list">
<ChannelList active={channel} channels={$channelsList.channels} />
</div>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 30da6f0..8d24a61 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -1,5 +1,7 @@
<script>
- import { changePassword } from '$lib/apiServer.js';
+ import { goto } from '$app/navigation';
+ import { changePassword, logOut } from '$lib/apiServer.js';
+ import { currentUser } from '$lib/store';
import Invites from '$lib/components/Invites.svelte';
@@ -11,6 +13,15 @@
let valid = $derived(newPassword === confirmPassword && newPassword !== currentPassword);
let disabled = $derived(pending || !valid);
+ async function onLogOut(event) {
+ event.preventDefault();
+ const response = await logOut();
+ if (200 <= response.status && response.status < 300) {
+ currentUser.update(() => null);
+ goto('/login');
+ }
+ }
+
async function onPasswordChange(event) {
event.preventDefault();
pending = true;
@@ -24,6 +35,10 @@
}
</script>
+<form onsubmit={onLogOut}>
+ <button class="btn variant-filled" type="submit">log out</button>
+</form>
+
<form onsubmit={onPasswordChange} bind:this={passwordForm}>
<label
>current password
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index da5bbe0..dbf109f 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -1,49 +1,43 @@
<script>
+ import { setContext } from 'svelte';
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 { currentUser } from '$lib/store';
- import CurrentUser from '$lib/components/CurrentUser.svelte';
+ let pageContext = $state({
+ showMenu: false
+ });
+ setContext('page', pageContext);
function toggleMenu(event) {
event.preventDefault();
- showMenu.update((value) => !value);
+ pageContext.showMenu = !pageContext.showMenu;
}
onNavigate(() => {
- showMenu.update(() => false);
+ pageContext.showMenu = false;
});
let { children } = $props();
</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 onclick={toggleMenu} class="cursor-pointer">
- <img class="w-8 h-8" alt="logo" src={logo} />
- </button>
- </svelte:fragment>
- <a href="/">pilcrow</a>
- <svelte:fragment slot="trail">
- {#if $currentUser}
- <CurrentUser />
- {/if}
- </svelte:fragment>
- </AppBar>
- </div>
-
- {@render children?.()}
-</div>
-
-<style>
- #app {
- margin: 0;
- height: 100vh;
- width: 100%;
- }
-</style>
+<AppBar class="app-bar">
+ <svelte:fragment slot="lead">
+ <button onclick={toggleMenu} class="cursor-pointer">
+ <img class="w-8 h-8" alt="logo" src={logo} />
+ </button>
+ </svelte:fragment>
+ <a href="/">pilcrow</a>
+ <svelte:fragment slot="trail">
+ {#if $currentUser}
+ <div class="rounded-full bg-secondary-400 px-2 py-1">
+ <a href="/me">@{$currentUser.username}</a>
+ </div>
+ {/if}
+ </svelte:fragment>
+</AppBar>
+
+{@render children?.()}
generated by cgit v1.2.3 (git 2.39.1) at 2026-01-02 10:37:32 +0000