Merge branch 'prop/stylize'

11 files changed, 43 insertions, 107 deletions

diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
index ba62d6c..9c181e4 100644
--- a/ui/lib/components/ActiveChannel.svelte
+++ b/ui/lib/components/ActiveChannel.svelte
@@ -5,7 +5,5 @@
 </script>
 
 {#each messageRuns as { sender, messages }}
-  <div>
-    <MessageRun {sender} {messages} />
-  </div>
+  <MessageRun {sender} {messages} />
 {/each}
diff --git a/ui/lib/components/ChangePassword.svelte b/ui/lib/components/ChangePassword.svelte
index 1e48bee..bf94ea7 100644
--- a/ui/lib/components/ChangePassword.svelte
+++ b/ui/lib/components/ChangePassword.svelte
@@ -22,11 +22,10 @@
   }
 </script>
 
-<form {onsubmit} bind:this={form}>
+<form class="form" {onsubmit} bind:this={form}>
   <label
     >current password
     <input
-      class="input"
       name="currentPassword"
       type="password"
       placeholder="password"
@@ -36,19 +35,12 @@
 
   <label
     >new password
-    <input
-      class="input"
-      name="newPassword"
-      type="password"
-      placeholder="password"
-      bind:value={newPassword}
-    />
+    <input name="newPassword" type="password" placeholder="password" bind:value={newPassword} />
   </label>
 
   <label
     >confirm new password
     <input
-      class="input"
       name="confirmPassword"
       type="password"
       placeholder="password"
@@ -56,5 +48,5 @@
     />
   </label>
 
-  <button class="btn bg-orange-500 mt-4" type="submit" {disabled}>change password</button>
+  <button type="submit" {disabled}>change password</button>
 </form>
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index 01b1c87..c73340f 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -2,13 +2,13 @@
   let { id, name, active, hasUnreads } = $props();
 </script>
 
-<li class="rounded-full" class:bg-slate-400={active}>
-  <a href="/ch/{id}">
+<a href="/ch/{id}">
+  <li class:active>
     {#if hasUnreads}
-      <span class="badge bg-warning-500">❦</span>
+      <span class="badge has-unreads">❦</span>
     {:else}
-      <span class="badge bg-primary-500">¶</span>
+      <span class="badge has-no-unreads">¶</span>
     {/if}
-    <span class="flex-auto">{name}</span>
-  </a>
-</li>
+    <span>{name}</span>
+  </li>
+</a>
diff --git a/ui/lib/components/CreateChannelForm.svelte b/ui/lib/components/CreateChannelForm.svelte
index d50e60d..85c85bb 100644
--- a/ui/lib/components/CreateChannelForm.svelte
+++ b/ui/lib/components/CreateChannelForm.svelte
@@ -15,16 +15,7 @@
   }
 </script>
 
-<form onsubmit={handleSubmit} class="form form-row flex-nowrap">
-  <input
-    type="text"
-    placeholder="create channel"
-    bind:value={name}
-    {disabled}
-    class="input flex-auto h-6 w-9/12"
-  />
-  <button type="submit" class="flex-none w-6 h-6">&#x2795;</button>
+<form onsubmit={handleSubmit}>
+  <input type="text" placeholder="create channel" bind:value={name} {disabled} />
+  <button type="submit">&#x2795;</button>
 </form>
-
-<style>
-</style>
diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte
index 937c911..29631f4 100644
--- a/ui/lib/components/Invite.svelte
+++ b/ui/lib/components/Invite.svelte
@@ -1,9 +1,13 @@
 <script>
-  import { clipboard } from '@skeletonlabs/skeleton';
+  import { copy } from 'svelte-copy';
 
   let { id } = $props();
   let inviteUrl = $derived(new URL(`/invite/${id}`, document.location));
+  // Nota bene: we cannot use:copy={inviteUrl}, because inviteUrl is not a
+  // string, and therefore will get treated as an options object. So we must
+  // explicitly build an options object, containing the value that will
+  // eventually be interpreted as a string.
 </script>
 
-<button class="btn bg-secondary-500" use:clipboard={inviteUrl}>copy</button>
-<span data-clipboard="inviteUrl">{inviteUrl}</span>
+<button use:copy={{ text: inviteUrl }}>copy</button>
+<span class="invite-url-literal">{inviteUrl}</span>
diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte
index 493bf1c..27d3754 100644
--- a/ui/lib/components/Invites.svelte
+++ b/ui/lib/components/Invites.svelte
@@ -13,12 +13,12 @@
   }
 </script>
 
-<form {onsubmit}>
-  <button class="btn bg-primary-500" type="submit">create invitation</button>
+<form class="form" {onsubmit}>
+  <button type="submit">create invitation</button>
 </form>
 
-<ul class="mt-4">
+<ul class="invite-list">
   {#each invites as invite}
-    <li class="my-1"><Invite id={invite.id} /></li>
+    <li><Invite id={invite.id} /></li>
   {/each}
 </ul>
diff --git a/ui/lib/components/LogIn.svelte b/ui/lib/components/LogIn.svelte
index 7fb91e8..5bfdae2 100644
--- a/ui/lib/components/LogIn.svelte
+++ b/ui/lib/components/LogIn.svelte
@@ -8,23 +8,15 @@
   } = $props();
 </script>
 
-<div class="card m-4 p-4">
-  <form {onsubmit}>
-    <label class="label" for="username">
+<div>
+  <form class="form" {onsubmit}>
+    <label for="username">
       username
-      <input
-        class="input"
-        name="username"
-        type="text"
-        placeholder="username"
-        bind:value={username}
-        {disabled}
-      />
+      <input name="username" type="text" placeholder="username" bind:value={username} {disabled} />
     </label>
-    <label class="label" for="password">
+    <label for="password">
       password
       <input
-        class="input"
         name="password"
         type="password"
         placeholder="password"
@@ -32,7 +24,7 @@
         {disabled}
       />
     </label>
-    <button class="btn variant-filled" type="submit">
+    <button type="submit">
       {legend}
     </button>
   </form>
diff --git a/ui/lib/components/LogOut.svelte b/ui/lib/components/LogOut.svelte
index 52aa039..b699cfd 100644
--- a/ui/lib/components/LogOut.svelte
+++ b/ui/lib/components/LogOut.svelte
@@ -13,6 +13,6 @@
   }
 </script>
 
-<form {onsubmit}>
-  <button class="btn bg-orange-400" type="submit">log out</button>
+<form class="form" {onsubmit}>
+  <button type="submit">log out</button>
 </form>
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index 5673248..1b1598b 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -25,42 +25,15 @@
   }
 </script>
 
-<div
-    class="message relative"
-    class:bg-warning-800={deleteArmed}
-    role="article"
-    data-at={at}
-    {onmouseleave}
-    >
-  <div class="handle chip bg-surface-700 absolute -top-6 right-0">
+<div class="message" class:delete-armed={deleteArmed} role="article" data-at={at} {onmouseleave}>
+  <div class="handle">
     {atFormatted}
     {#if editable}
       <button onclick={onDelete}>&#x1F5D1;&#xFE0F;</button>
     {/if}
   </div>
-  <section use:scroll class="py-1 message-body">
+  <section use:scroll class="message-body">
     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     {@html renderedBody}
   </section>
 </div>
-
-<style>
-  .message .handle {
-    display: none;
-  }
-  .message:hover .handle {
-    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;
-  }
-</style>
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 22456f3..162db1b 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -23,17 +23,7 @@
   }
 </script>
 
-<form bind:this={form} onsubmit={onSubmit} class="flex flex-row flex-nowrap">
-  <textarea
-    onkeydown={onKeyDown}
-    bind:value
-    {disabled}
-    type="search"
-    class="flex-auto h-6 py-0 input rounded-r-none text-nowrap"
-  ></textarea>
-  <button
-    color="primary variant-filled-secondary"
-    type="submit"
-    class="flex-none w-6 h-6 btn-icon variant-filled rounded-l-none">&raquo;</button
-  >
+<form bind:this={form} onsubmit={onSubmit}>
+  <textarea onkeydown={onKeyDown} bind:value {disabled} type="search"></textarea>
+  <button type="submit">&raquo;</button>
 </form>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index 39ee155..bee64e8 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -8,15 +8,11 @@
   let ownMessage = $derived($currentUser !== null && $currentUser.id == sender);
 </script>
 
-<div
-  class="card my-4 px-4 py-1 relative"
-  class:own-message={ownMessage}
-  class:other-message={!ownMessage}
->
-  <span class="chip variant-soft sticky top-o left-0">
+<div class="message-run" class:own-message={ownMessage} class:other-message={!ownMessage}>
+  <span class="username">
     @{name}:
   </span>
-  {#each messages as { id, at, body, renderedBody }}
-    <Message {id} {at} {body} {renderedBody} editable={ownMessage} />
+  {#each messages as message}
+    <Message {...message} editable={ownMessage} />
   {/each}
 </div>