3 files changed, 44 insertions, 9 deletions
diff --git a/ui/lib/outbox.svelte.js b/ui/lib/outbox.svelte.js
index 0681f29..de7f80e 100644
--- a/ui/lib/outbox.svelte.js
+++ b/ui/lib/outbox.svelte.js
@@ -1,12 +1,36 @@
 import * as api from './apiServer.js';
 import * as md from './markdown.js';
 
-class Message {
+class PostToChannel {
   constructor(channel, body) {
     this.channel = channel;
     this.body = body;
     this.renderedBody = md.render(body);
   }
+
+  async send() {
+    return await api.retry(() => api.postToChannel(this.channel, this.body));
+  }
+}
+
+class DeleteMessage {
+  constructor(messageId) {
+    this.messageId = messageId;
+  }
+
+  async send() {
+    return await api.retry(() => api.deleteMessage(this.messageId));
+  }
+}
+
+class CreateChannel {
+  constructor(name) {
+    this.name = name;
+  }
+
+  async send() {
+    return await api.retry(() => api.createChannel(this.name));
+  }
 }
 
 export class Outbox {
@@ -20,11 +44,23 @@ export class Outbox {
     this.pending = pending;
   }
 
-  send(channel, body) {
-    this.pending.push(new Message(channel, body));
+  enqueue(operation) {
+    this.pending.push(operation);
     this.start();
   }
 
+  createChannel(name) {
+    this.enqueue(new CreateChannel(name));
+  }
+
+  postToChannel(channel, body) {
+    this.enqueue(new PostToChannel(channel, body));
+  }
+
+  deleteMessage(messageId) {
+    this.enqueue(new DeleteMessage(messageId));
+  }
+
   start() {
     if (this.sending) {
       return;
@@ -38,9 +74,9 @@ export class Outbox {
 
   async drain() {
     while (this.pending.length > 0) {
-      const { channel, body } = this.pending[0];
+      const operation = this.pending[0];
 
-      await api.retry(() => api.postToChannel(channel, body));
+      await operation.send();
       this.pending.shift();
     }
   }
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 116767d..a4ae442 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -87,7 +87,7 @@
   });
 
   async function createChannel(name) {
-    await api.createChannel(name);
+    outbox.createChannel(name);
   }
 
   function onbeforeunload(event) {
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index 9506b67..abec00d 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -4,7 +4,6 @@
   import ActiveChannel from '$lib/components/ActiveChannel.svelte';
   import MessageInput from '$lib/components/MessageInput.svelte';
   import { runs } from '$lib/runs.js';
-  import * as api from '$lib/apiServer';
 
   const { data } = $props();
   const { session, outbox } = data;
@@ -65,11 +64,11 @@
   }
 
   async function sendMessage(message) {
-    outbox.send(channel, message);
+    outbox.postToChannel(channel, message);
   }
 
   async function deleteMessage(id) {
-    await api.deleteMessage(id);
+    outbox.deleteMessage(id);
   }
 </script>