Implement pending/delivered status for messages

src/locutus.ts

@@ -148,9 +148,18 @@ export class App {
         this.windows.appendChild(win);
     }
 
-    addMessage(message: string) {
+    addMessage(id: string, message: string, delivered: boolean = true) {
+        const test = document.getElementById(`msg-${id}`);
+        if (test) return;
+
         const msg = document.createElement("div");
+        msg.id = `msg-${id}`;
         msg.classList.add("message");
+        if (delivered) {
+            msg.classList.add("delivered");
+        } else {
+            msg.classList.add("pending");
+        }
 
         msg.innerText = message;
 
@@ -161,6 +170,14 @@ export class App {
         chat.scrollTop = chat.scrollHeight;
     }
 
+    confirmMessage(id: string) {
+        const msg = document.getElementById(`msg-${id}`);
+        if (!msg) return;
+
+        msg.classList.remove("pending");
+        msg.classList.add("delivered");
+    }
+
     addLoginWindow() {
         const win = document.createElement("div");
         win.classList.add("window-login");
@@ -243,21 +260,28 @@ export class App {
         const input = document.getElementsByTagName("input")[0];
         if (!input) throw new Error("Element <input> not found");
 
-        input.addEventListener("keyup", async event => {
+        input.addEventListener("keydown", event => {
             if (event.key === "Enter" && input.value.length > 0) {
                 if (!this.session) throw new Error("No session found");
 
-                this.addMessage(input.value);
+                const id = crypto.randomUUID();
                 const val = input.value;
-                input.value = "";
-                await this.session.newEvent("24595934-4540-4333-ac2b-78796ac3f25f", {
-                    message: val,
+                this.addMessage(id, input.value, false);
+
+                this.session.newEvent(
+                    "24595934-4540-4333-ac2b-78796ac3f25f",
+                    {message: val},
+                    id
+                ).then(() => {
+                    this.confirmMessage(id);
                 });
+
+                input.value = "";
             }
         });
 
         this.session.subscribe(event => {
-            this.addMessage(event.data.message);
-        });
+            this.addMessage(event.id, event.data.message);
+        }).then();
     }
 }