9 files changed, 47 insertions, 22 deletions
diff --git a/tools/test-all b/tools/test-all
new file mode 100755
index 0000000..0ad3ca3
--- /dev/null
+++ b/tools/test-all
@@ -0,0 +1,10 @@
+#!/bin/bash -e
+
+## tools/test-all
+##
+## Run the full test suite.
+
+cd "$(dirname "$0")/.."
+
+tools/test-ui
+tools/test-server
diff --git a/tools/test-server b/tools/test-server
new file mode 100755
index 0000000..44bdf76
--- /dev/null
+++ b/tools/test-server
@@ -0,0 +1,9 @@
+#!/bin/bash -e
+
+## tools/test-server
+##
+## Run the server test suite.
+
+cd "$(dirname "$0")/.."
+
+cargo test
diff --git a/tools/test-ui b/tools/test-ui
new file mode 100755
index 0000000..eff5a07
--- /dev/null
+++ b/tools/test-ui
@@ -0,0 +1,9 @@
+#!/bin/bash -e
+
+## tools/test-ui
+##
+## Run the UI test suite.
+
+cd "$(dirname "$0")/.."
+
+npm run test -- --run
diff --git a/ui/app.css b/ui/app.css
index b5c61c9..b316dea 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* This should help minimize swipe-to-go-back behaviour, enabling our
+* swipe-to-reveal-channel-menu behaviour. It won't work in all cases; in iOS
+* Safari, when swiping from the screen edge, the OS gets th event and
+* handles it before the browser does.
+*/
+html,
+body {
+  overscroll-behavior-x: none;
+}
diff --git a/ui/lib/components/CreateChannelForm.svelte b/ui/lib/components/CreateChannelForm.svelte
index afa3f78..d50e60d 100644
--- a/ui/lib/components/CreateChannelForm.svelte
+++ b/ui/lib/components/CreateChannelForm.svelte
@@ -2,17 +2,16 @@
   import { createChannel } from '$lib/apiServer';
 
   let name = $state('');
-  let pending = false;
-  let disabled = $derived(pending);
+  let disabled = $state(false);
 
   async function handleSubmit(event) {
     event.preventDefault();
-    pending = true;
+    disabled = true;
     const response = await createChannel(name);
     if (200 <= response.status && response.status < 300) {
       name = '';
     }
-    pending = false;
+    disabled = false;
   }
 </script>
 
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index fddeecd..1663696 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -23,7 +23,7 @@
   }
 </script>
 
-<div class="message relative" class:bg-warning-800={deleteArmed} {onmouseleave}>
+<div class="message relative" class:bg-warning-800={deleteArmed} {onmouseleave} role="article">
   <div class="handle chip bg-surface-700 absolute -top-6 right-0">
     {at}
     {#if editable}
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 26521e1..22456f3 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -5,16 +5,14 @@
 
   let form;
   let value = $state('');
-  let pending = false;
-
-  let disabled = $derived(pending);
+  let disabled = $state(false);
 
   async function onSubmit(event) {
     event.preventDefault();
-    pending = true;
+    disabled = true;
     await postToChannel(channel, value);
     form.reset();
-    pending = false;
+    disabled = false;
   }
 
   function onKeyDown(event) {
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index e542f24..ad8227e 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -103,21 +103,11 @@
   /* Just some global CSS variables, don't mind them.
    */
   :root {
-    --app-bar-height: 68px;
+    --app-bar-height: 48px;
     --input-row-height: 2rem;
     --interface-padding: 16px;
   }
 
-  /* This should help minimize swipe-to-go-back behaviour, enabling our
-   * swipe-to-reveal-channel-menu behaviour. It won't work in all cases; in iOS
-   * Safari, when swiping from the screen edge, the OS gets th event and
-   * handles it before the browser does.
-   */
-  html,
-  body {
-    overscroll-behavior-x: none;
-  }
-
   #interface {
     margin: unset;
     display: grid;
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 8940659..26033e0 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -24,7 +24,7 @@
   let { children } = $props();
 </script>
 
-<AppBar class="app-bar">
+<AppBar padding="px-4 pt-0 pb-4">
   <svelte:fragment slot="lead">
     <button onclick={toggleMenu} class="cursor-pointer">
       <img class="w-8 h-8" alt="logo" src={logo} />