fix outbox, add indicator for message status

src/View/ChatPages/messagePage.css

@@ -118,11 +118,22 @@
 }
 
 .message-bubble .main .timestamp,
+.message-bubble .main .timestamp .icon,
 .message-bubble .main .sender-name {
   font-size: 0.8rem;
   opacity: 0.6;
 }
 
+.message-bubble .main .timestamp {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-between-tiles);
+}
+
+.message-bubble .main .timestamp .icon {
+  display: none;
+}
+
 .message-bubble .main .sender-name {
   font-weight: bold;
 }
@@ -139,10 +150,15 @@
   align-items: flex-end;
 }
 
-.message-bubble[sentbyuser] .main {
+.message-bubble[sentbyuser] .main,
+.message-bubble[sentbyuser] .main .timestamp {
   flex-direction: row-reverse;
 }
 
+.message-bubble[sentbyuser] .main .timestamp .icon {
+  display: flex;
+}
+
 .message-bubble[sentbyuser] .main span {
   text-align: right;
-}
+}

src/View/Components/chatMessage.tsx

@@ -1,6 +1,7 @@
 import * as React from "bloatless-react";
 
 import { ChatMessageInfoModal } from "./chatMessageInfoModal";
+import { ChatMessageStatus } from "../../Model/chatModel";
 import ChatMessageViewModel from "../../Model/chatMessageViewModel";
 import { translations } from "../translations";
 
@@ -10,6 +11,22 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
     isInfoModalOpen.value = true;
   }
 
+  const statusIcon = React.createProxyState(
+    [chatMessageViewModel.status],
+    () => {
+      switch (chatMessageViewModel.status.value) {
+        case ChatMessageStatus.Outbox:
+          return "hourglass_top";
+        case ChatMessageStatus.Sent:
+          return "check";
+        case ChatMessageStatus.Received:
+          return "done_all";
+        default:
+          return "warning";
+      }
+    }
+  );
+
   return (
     <div
       class="message-bubble"
@@ -25,6 +42,7 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
             subscribe:innerText={chatMessageViewModel.body}
           ></span>
           <span class="timestamp ellipsis">
+            <span class="icon" subscribe:innerText={statusIcon}></span>
             {chatMessageViewModel.dateSent}
           </span>
         </div>