From ae9f3889de763d7841ab0acc7d7589da5bb830ff Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Wed, 6 Nov 2024 17:12:25 -0500
Subject: Sort out padding and wrapping for the chat input

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

(limited to 'ui/lib/components')

diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index c071bea..26521e1 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -31,7 +31,7 @@
     bind:value
     {disabled}
     type="search"
-    class="flex-auto h-6 input rounded-r-none"
+    class="flex-auto h-6 py-0 input rounded-r-none text-nowrap"
   ></textarea>
   <button
     color="primary variant-filled-secondary"
-- 
cgit v1.2.3


From b89ffe00fbb28fac3daafb1f7adc71be72b59433 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Wed, 6 Nov 2024 17:12:42 -0500
Subject: Be more consistent around margins and padding for the "main" pane

---
 ui/lib/components/ActiveChannel.svelte | 18 +++++-------------
 ui/lib/components/MessageRun.svelte    |  2 +-
 ui/routes/(app)/+layout.svelte         |  2 +-
 3 files changed, 7 insertions(+), 15 deletions(-)

(limited to 'ui/lib/components')

diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
index f939dbd..ba62d6c 100644
--- a/ui/lib/components/ActiveChannel.svelte
+++ b/ui/lib/components/ActiveChannel.svelte
@@ -4,16 +4,8 @@
   let { messageRuns } = $props();
 </script>
 
-<div class="container">
-  {#each messageRuns as { sender, messages }}
-    <div>
-      <MessageRun {sender} {messages} />
-    </div>
-  {/each}
-</div>
-
-<style>
-  .container {
-    overflow: auto;
-  }
-</style>
+{#each messageRuns as { sender, messages }}
+  <div>
+    <MessageRun {sender} {messages} />
+  </div>
+{/each}
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index b71e972..2e8c613 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div
-  class="card m-4 px-4 py-1 relative"
+  class="card my-4 px-4 py-1 relative"
   class:own-message={ownMessage}
   class:other-message={!ownMessage}
 >
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 0a8c58d..db400c4 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -71,7 +71,7 @@
         <CreateChannelForm />
       </div>
     </nav>
-    <main>
+    <main class="pl-4">
       {@render children?.()}
     </main>
   </div>
-- 
cgit v1.2.3


From 9f0ba2e243be772a7677f8250893f5da7b2acbfe Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Wed, 6 Nov 2024 17:42:02 -0500
Subject: Factor out the elements of the `/me` page, and style them a little.

---
 ui/lib/components/ChangePassword.svelte | 60 +++++++++++++++++++++++
 ui/lib/components/Invite.svelte         |  5 +-
 ui/lib/components/Invites.svelte        | 13 ++---
 ui/lib/components/LogOut.svelte         | 18 +++++++
 ui/routes/(app)/me/+page.svelte         | 84 +++++----------------------------
 5 files changed, 97 insertions(+), 83 deletions(-)
 create mode 100644 ui/lib/components/ChangePassword.svelte
 create mode 100644 ui/lib/components/LogOut.svelte

(limited to 'ui/lib/components')

diff --git a/ui/lib/components/ChangePassword.svelte b/ui/lib/components/ChangePassword.svelte
new file mode 100644
index 0000000..1e48bee
--- /dev/null
+++ b/ui/lib/components/ChangePassword.svelte
@@ -0,0 +1,60 @@
+<script>
+  import { changePassword } from '$lib/apiServer.js';
+
+  let currentPassword = $state(''),
+    newPassword = $state(''),
+    confirmPassword = $state(''),
+    pending = $state(false),
+    form;
+  let valid = $derived(newPassword === confirmPassword && newPassword !== currentPassword);
+  let disabled = $derived(pending || !valid);
+
+  async function onsubmit(event) {
+    event.preventDefault();
+    pending = true;
+    let response = await changePassword(currentPassword, newPassword);
+    switch (response.status) {
+      case 200:
+        form.reset();
+        break;
+    }
+    pending = false;
+  }
+</script>
+
+<form {onsubmit} bind:this={form}>
+  <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
+    >confirm new password
+    <input
+      class="input"
+      name="confirmPassword"
+      type="password"
+      placeholder="password"
+      bind:value={confirmPassword}
+    />
+  </label>
+
+  <button class="btn bg-orange-500 mt-4" type="submit" {disabled}>change password</button>
+</form>
diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte
index 35e00b4..381f483 100644
--- a/ui/lib/components/Invite.svelte
+++ b/ui/lib/components/Invite.svelte
@@ -5,8 +5,5 @@
   let inviteUrl = $derived(new URL(`/invite/${id}`, document.location));
 </script>
 
-<button
-  class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
-  use:clipboard={inviteUrl}>Copy</button
->
+<button class="btn bg-secondary-500" use:clipboard={inviteUrl}>Copy</button>
 <span data-clipboard="inviteUrl">{inviteUrl}</span>
diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte
index cc14f3b..314782a 100644
--- a/ui/lib/components/Invites.svelte
+++ b/ui/lib/components/Invites.svelte
@@ -4,7 +4,7 @@
 
   let invites = $state([]);
 
-  async function onSubmit(event) {
+  async function onsubmit(event) {
     event.preventDefault();
     let response = await createInvite();
     if (response.status == 200) {
@@ -13,11 +13,12 @@
   }
 </script>
 
-<ul>
+<form {onsubmit}>
+  <button class="btn bg-primary-500" type="submit"> Create Invitation </button>
+</form>
+
+<ul class="mt-4">
   {#each invites as invite}
-    <li><Invite id={invite.id} /></li>
+    <li class="my-1"><Invite id={invite.id} /></li>
   {/each}
 </ul>
-<form onsubmit={onSubmit}>
-  <button class="btn variant-filled" type="submit"> Create Invitation </button>
-</form>
diff --git a/ui/lib/components/LogOut.svelte b/ui/lib/components/LogOut.svelte
new file mode 100644
index 0000000..25dd5e9
--- /dev/null
+++ b/ui/lib/components/LogOut.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { goto } from '$app/navigation';
+  import { logOut } from '$lib/apiServer.js';
+  import { currentUser } from '$lib/store';
+
+  async function onsubmit(event) {
+    event.preventDefault();
+    const response = await logOut();
+    if (200 <= response.status && response.status < 300) {
+      currentUser.update(() => null);
+      goto('/login');
+    }
+  }
+</script>
+
+<form {onsubmit}>
+  <button class="btn bg-orange-400" type="submit">log out</button>
+</form>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 8d24a61..e02bde5 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -1,79 +1,17 @@
 <script>
-  import { goto } from '$app/navigation';
-  import { changePassword, logOut } from '$lib/apiServer.js';
-  import { currentUser } from '$lib/store';
-
+  import LogOut from '$lib/components/LogOut.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);
-
-  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;
-    let response = await changePassword(currentPassword, newPassword);
-    switch (response.status) {
-      case 200:
-        passwordForm.reset();
-        break;
-    }
-    pending = false;
-  }
+  import ChangePassword from '$lib/components/ChangePassword.svelte';
 </script>
 
-<form onsubmit={onLogOut}>
-  <button class="btn variant-filled" type="submit">log out</button>
-</form>
-
-<form onsubmit={onPasswordChange} bind:this={passwordForm}>
-  <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
-    >confirm new password
-    <input
-      class="input"
-      name="confirmPassword"
-      type="password"
-      placeholder="password"
-      bind:value={confirmPassword}
-    />
-  </label>
+<div class="my-4">
+  <ChangePassword />
+</div>
 
-  <button class="btn variant-filled" type="submit" {disabled}> change password </button>
-</form>
+<div class="my-4">
+  <Invites />
+</div>
 
-<Invites />
+<div class="my-4">
+  <LogOut />
+</div>
-- 
cgit v1.2.3


From d38344003092e53a84facdef1bff4fdd0ac3a017 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Wed, 6 Nov 2024 17:45:37 -0500
Subject: Better choices of margins and caps

---
 ui/lib/components/Invite.svelte  | 2 +-
 ui/lib/components/Invites.svelte | 2 +-
 ui/routes/(app)/me/+page.svelte  | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'ui/lib/components')

diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte
index 381f483..937c911 100644
--- a/ui/lib/components/Invite.svelte
+++ b/ui/lib/components/Invite.svelte
@@ -5,5 +5,5 @@
   let inviteUrl = $derived(new URL(`/invite/${id}`, document.location));
 </script>
 
-<button class="btn bg-secondary-500" use:clipboard={inviteUrl}>Copy</button>
+<button class="btn bg-secondary-500" use:clipboard={inviteUrl}>copy</button>
 <span data-clipboard="inviteUrl">{inviteUrl}</span>
diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte
index 314782a..493bf1c 100644
--- a/ui/lib/components/Invites.svelte
+++ b/ui/lib/components/Invites.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <form {onsubmit}>
-  <button class="btn bg-primary-500" type="submit"> Create Invitation </button>
+  <button class="btn bg-primary-500" type="submit">create invitation</button>
 </form>
 
 <ul class="mt-4">
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index e02bde5..aded292 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -4,14 +4,14 @@
   import ChangePassword from '$lib/components/ChangePassword.svelte';
 </script>
 
-<div class="my-4">
+<div class="mb-4">
   <ChangePassword />
 </div>
 
-<div class="my-4">
+<div class="mb-4">
   <Invites />
 </div>
 
-<div class="my-4">
+<div>
   <LogOut />
 </div>
-- 
cgit v1.2.3