From 0f9a21934bfee61345894a38e89d7228cf1c07f1 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 5 Nov 2024 19:02:23 -0500
Subject: File off some rough spots in the DOM.

* We had an unused layer of divs in the main UI.
* The <div id="app"> div was superfluous with the body-level div in app.html.
* Some formatting changes in one component?? Weird.
---
 ui/routes/+layout.svelte | 42 +++++++++++++++---------------------------
 1 file changed, 15 insertions(+), 27 deletions(-)

(limited to 'ui/routes/+layout.svelte')

diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index d786389..30634e9 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -20,30 +20,18 @@
   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}
+      <CurrentUser />
+    {/if}
+  </svelte:fragment>
+</AppBar>
+
+{@render children?.()}
-- 
cgit v1.2.3


From fc73108b07e61ab0159ada120f2fb60c430b1d4c Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 5 Nov 2024 19:25:20 -0500
Subject: Move `showMenu` out of globals and into page state.

I generally don't love globals, and the scope of this global is pretty narrow. Let's use the context hierarchy for this, instead.

(Kit mentioned that it might be possible to use CSS variables for this.)
---
 ui/lib/store.js                |  1 -
 ui/routes/(app)/+layout.svelte |  7 ++++---
 ui/routes/+layout.svelte       | 12 +++++++++---
 3 files changed, 13 insertions(+), 7 deletions(-)

(limited to 'ui/routes/+layout.svelte')

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 ae3dc6a..0a8c58d 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/+layout.svelte b/ui/routes/+layout.svelte
index d786389..3c2849a 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -1,20 +1,26 @@
 <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();
-- 
cgit v1.2.3


From 969b02d0fe636507acf5ee8d99240d6bb8fae010 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Wed, 6 Nov 2024 11:22:19 -0500
Subject: Move the logout button into `/me`. Make the self link a little more
 prominent.

---
 ui/lib/components/CurrentUser.svelte | 26 --------------------------
 ui/routes/(app)/me/+page.svelte      | 17 ++++++++++++++++-
 ui/routes/+layout.svelte             |  6 +++---
 3 files changed, 19 insertions(+), 30 deletions(-)
 delete mode 100644 ui/lib/components/CurrentUser.svelte

(limited to 'ui/routes/+layout.svelte')

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/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 094cacb..ef3e823 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -7,8 +7,6 @@
   import { AppBar } from '@skeletonlabs/skeleton';
   import { currentUser } from '$lib/store';
 
-  import CurrentUser from '$lib/components/CurrentUser.svelte';
-
   let pageContext = $state({
     showMenu: false
   });
@@ -35,7 +33,9 @@
   <a href="/">understory</a>
   <svelte:fragment slot="trail">
     {#if $currentUser}
-      <CurrentUser />
+      <div class="rounded-full bg-secondary-400 px-2 py-1">
+        <a href="/me">@{$currentUser.username}</a>
+      </div>
     {/if}
   </svelte:fragment>
 </AppBar>
-- 
cgit v1.2.3

