frontend: show pending messages in a different color

frontend/public/global.css

@@ -10,7 +10,8 @@
 :root {
 	--background-color-1: hsl(180, 11%, 7%);
 	--background-color-2: hsl(180, 11%, 12%);
-	--foreground-color-1: #FFFFFF;
+	--foreground-color-1: hsl(0, 0%, 100%);
+	--foreground-color-2: hsl(0, 0%, 60%);
 
 	--space-unit: 1em;
 	--space-xxs: calc(0.25 * var(--space-unit));

frontend/src/components/pages/main/ChannelView.svelte

@@ -25,7 +25,8 @@
             channel_id: channel.id,
             author_id: $userInfoStore.id,
             author_username: $userInfoStore.username,
-            createdAt: Date.now().toString()
+            created_at: Date.now().toString(),
+            _isPending: true
         };
         messages.addMessage(optimisticMessage);
         messageInput = "";
@@ -35,7 +36,7 @@
         });
         
         if (res.success && res.ok) {
-            messages.updateId(optimisticMessageId, res.json.id);
+            messages.setMessage(optimisticMessageId, res.json);
         } else {
             messages.deleteMessage({
                 id: optimisticMessageId

frontend/src/components/pages/main/Messages.svelte

@@ -41,13 +41,17 @@
         overflow-y: auto;
         background-color: var(--background-color-1);
     }
+
+    .pending {
+        color: var(--foreground-color-2);
+    }
 </style>
 
 <div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
     {#each $messages as message (message.id)}
         <div>
             <b>{ message.author_username }</b>
-            <span>{ message.content }</span>
+            <span class:pending={ message._isPending }>{ message.content }</span>
         </div>
     {/each}
 </div>

frontend/src/stores.js

@@ -104,6 +104,16 @@ class MessageStore extends Store {
         this.didDoInitialLoad = false;
     }
 
+    setMessage(id, message) {
+        const index = this.value.findIndex(e => e.id === id);
+        if (index === -1)
+            return;
+
+        this.value[index] = message;
+
+        this.updated();
+    }
+
     addMessage(message) {
         this.value.push(message);
         // only dispatch update if collectOldMessages didn't