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/lib/components/Message.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'ui/lib/components')

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: '.';
-- 
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/lib/components')

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


From 1776711aaad56efe67365d69e2e9f8aa76ee67ef Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Wed, 6 Nov 2024 11:25:05 -0500
Subject: Remove hover effect from message runs

---
 ui/lib/components/MessageRun.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/lib/components')

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}
 >
-- 
cgit v1.2.3