improve message display

WatchedGuild.js

@@ -59,6 +59,10 @@ class WatchedGuild extends EventEmitter {
             if (message.guild_id !== this.upstreamGuildId)
                 return;
 
+            const maybeKnownWebhook = this.knownWebhooks.get(message.channel_id);
+            if (maybeKnownWebhook.id === message.webhook_id)
+                return; // ignore messages coming from our webhook
+
             this.pushEvent({
                 eventType: "MESSAGE_CREATE",
                 message: message

frontend/public/global.css

@@ -2,10 +2,12 @@
     --body-bg-color: #2e2e2e;
     --accent-bg-color: #d4d3d3;
     --accent-color: #949494;
-    --grayed-text-color: #949494;
+    --grayed-text-color: #494949;
     --button-accent-color: #3d3d3d;
     --selected-bg-color: #2e2e2e;
     --hover-bg-color: #4d4d4d;
+	/* stolen from horizon theme */
+	--color-red: #F43E5C;
     --card-border-radius: 1rem;
     --button-border-radius: 0.5rem; 
 }

frontend/src/components/App.svelte

@@ -8,6 +8,12 @@
 	let selectedGuild = null;
 	let selectedChannel = null;
 	let guilds = [];
+	let user = null;
+	apiClient.getRequest("/users/@self")
+		.then((res) => {
+			user = res.user;
+		});
+
 	apiClient.getRequest("/users/@self/guilds")
 		.then((res) => {
 			guilds = res.guilds
@@ -42,8 +48,28 @@
 			return false;
 		}
 
+		const nonce = Math.floor(Math.random() * (Number.MAX_SAFE_INTEGER - 10));
+		messageStore[selectedGuild.id] = [
+			...messageStore[selectedGuild.id] || [],
+			{
+				channel_id: selectedChannel.id,
+				content: event.detail,
+				author: user,
+				flags: 0,
+				_pendingStatus: "waiting",
+				_nonce: nonce,
+				_dummy: true
+			}
+		];
+		// we could just get the length and subtract 1 but that might introduce some race conditions
+		const thisMessageIndex = messageStore[selectedGuild.id].findIndex(e => e._nonce === nonce);
+
 		apiClient.postRequest(`/guilds/${selectedGuild.id}/channels/${selectedChannel.id}/messages/create`, {
 			content: event.detail
+		}).then(() => {
+			messageStore[selectedGuild.id][thisMessageIndex]._pendingStatus = "success";
+		}).catch(() => {
+			messageStore[selectedGuild.id][thisMessageIndex]._pendingStatus = "error";
 		});
 	}
 </script>

frontend/src/components/Message.svelte

@@ -1,5 +1,15 @@
 <script>
     export let message;
+
+    let textClass;
+
+    $:  if (message._pendingStatus === "waiting") {
+            textClass = "content pending-waiting";
+        } else if (message._pendingStatus === "error") {
+            textClass = "content pending-error";
+        } else {
+            textClass = "content";
+        }
 </script>
 
 <style>
@@ -14,9 +24,17 @@
     .content {
         margin-left: 4px;
     }
+
+    .pending-waiting {
+        color: var(--grayed-text-color);
+    }
+
+    .pending-error {
+        color: var(--color-red);
+    }
 </style>
 
 <div class="container">
     <span class="author">{message.author.username}</span>
-    <span class="content">{message.content}</span>
+    <span class="{textClass}">{message.content}</span>
 </div>