Merge branch 'main' into wip/touch-events

author: Kit La Touche <kit@transneptune.net> 2024-11-06 14:11:57 -0500
committer: Kit La Touche <kit@transneptune.net> 2024-11-06 14:11:57 -0500
commit: 91ce856f63bd1d7a188488476bdbec60b5bd58ff (patch)
tree: eb10eff2c50de1f7cfee86a203fdbeda9b0ebc93 /ui
parent: 1614fea76a6fc1f4d70ddb14b95e3004c79365ef (diff)
parent: 1776711aaad56efe67365d69e2e9f8aa76ee67ef (diff)
8 files changed, 55 insertions, 64 deletions
diff --git a/ui/app.html b/ui/app.html
index 51a6780..10525fe 100644
--- a/ui/app.html
+++ b/ui/app.html
@@ -7,6 +7,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 f0e7045..68c5c91 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -25,6 +25,14 @@
   .message:hover .timestamp {
     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);
+    }
+  }
   .message-body:empty:after {
     content: '.';
     visibility: hidden;
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 acaea53..84090e7 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);
@@ -97,7 +98,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 d786389..ef3e823 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="/">understory</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="/">understory</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?.()}
author	Kit La Touche <kit@transneptune.net>	2024-11-06 14:11:57 -0500
committer	Kit La Touche <kit@transneptune.net>	2024-11-06 14:11:57 -0500
commit	91ce856f63bd1d7a188488476bdbec60b5bd58ff (patch)
tree	eb10eff2c50de1f7cfee86a203fdbeda9b0ebc93 /ui
parent	1614fea76a6fc1f4d70ddb14b95e3004c79365ef (diff)
parent	1776711aaad56efe67365d69e2e9f8aa76ee67ef (diff)