add outbox status to overview

src/Model/chatModel.ts

@@ -5,6 +5,7 @@ import {
   chatIds,
   chats,
   isConnected,
+  outboxItemCount,
   selectedChat,
   senderName,
   updateMailbox,
@@ -95,6 +96,12 @@ export class Chat {
       () => this.outbox.value.size == 0
     );
 
+    // outbox
+    React.bulkSubscribe([this.outbox, this.objectOutbox], () =>
+      this.updateOutboxCount()
+    );
+    this.updateOutboxCount();
+
     // inputs
     this.composingMessage = React.restoreState(
       storageKeys.composingMessage(id),
@@ -209,6 +216,11 @@ export class Chat {
     });
   };
 
+  updateOutboxCount() {
+    outboxItemCount.value =
+      this.outbox.value.size + this.objectOutbox.value.size;
+  }
+
   // messages
   createChatMessage = async (
     messageText: string,
@@ -328,7 +340,7 @@ export class Chat {
       Object.values(messageObject.contentVersions).forEach((content) => {
         this.addObjectContent(existingObject, content);
       });
-      this.objects.set(existingObject.id, existingObject);  
+      this.objects.set(existingObject.id, existingObject);
     } else {
       this.objects.set(messageObject.id, messageObject);
     }
@@ -374,10 +386,12 @@ export class Chat {
     return contents[contents.length - 1].id;
   };
 
-  getMostRecentContent = (messageObject: MessageObject): MessageObjectContent => {
+  getMostRecentContent = (
+    messageObject: MessageObject
+  ): MessageObjectContent => {
     const id = this.getMostRecentContentId(messageObject);
     return this.getObjectContentFromId(messageObject, id);
-  }
+  };
 
   getObjectContentFromId = (
     messageObject: MessageObject,

src/Model/model.ts

@@ -3,6 +3,7 @@ import * as React from "bloatless-react";
 import { Chat, createChatWithName } from "./chatModel";
 
 import UDNFrontend from "udn-frontend";
+import { translation } from "../translations";
 
 export const UDN = new UDNFrontend();
 
@@ -130,6 +131,15 @@ UDN.onmailboxdelete = () => {
   subscribeChannels();
 };
 
+// OUTBOX
+export const outboxItemCount = new React.State(0);
+export const outboxText = React.createProxyState([outboxItemCount], () =>
+  translation.outboxText(outboxItemCount.value)
+);
+export const outboxTextStyle = React.createProxyState([outboxItemCount], () =>
+  outboxItemCount.value == 0 ? "success" : "warning"
+);
+
 // MISC
 export const isEncryptionAvailable = window.crypto.subtle != undefined;
 export const senderName = React.restoreState("sender-name", "");

src/Views/Overview/connectionSection.tsx

@@ -9,6 +9,8 @@ import {
   connect,
   deleteMailbox,
   disconnect,
+  outboxText,
+  outboxTextStyle,
   previousAddresses,
   requestMailbox,
   resetAddressInput,
@@ -96,6 +98,16 @@ export function ConnectionSection() {
           <span class="icon">arrow_forward</span>
         </button>
       </div>
+
+      <hr></hr>
+
+      <div class="tile">
+        <span class="icon">outbox</span>
+        <div>
+          <b>{translation.outbox}</b>
+          <span set:class={outboxTextStyle} subscribe:innerText={outboxText}></span>
+        </div>
+      </div>
     </div>
   );
 }

src/styles.css

@@ -1,5 +1,5 @@
 [unread] {
-  border-left: 10px solid var(--text-warn);
+  border-left: 10px solid var(--text-warning);
 }
 
 /* TOOLS */

src/translations.ts

@@ -35,6 +35,18 @@ const englishTranslations = {
   mailboxExplanation:
     "When you're disconnected, messages will be kept on the server temporarily",
 
+  outbox: "Outbox",
+  outboxText: (count: number) => {
+    switch (count) {
+      case 0:
+        return "All items sent";
+      case 1:
+        return "1 item in outbox";
+      default:
+        return `${count} items in outbox`;
+    }
+  },
+
   primaryChannel: "Primary channel",
   primaryChannelPlaceholder: "my-channel",
   addChat: "Add",
@@ -130,6 +142,18 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     mailboxExplanation:
       "Si estás sin conexión, los mensajes se guardarán temporalmente en el servidor",
 
+    outbox: "Bandeja de salida",
+    outboxText: (count: number) => {
+      switch (count) {
+        case 0:
+          return "Todos los elementos enviados";
+        case 1:
+          return "1 elemento en bandeja de salida";
+        default:
+          return `${count} elementos en bandeja de salida`;
+      }
+    },
+
     primaryChannel: "Canal principal",
     primaryChannelPlaceholder: "mi-canal",
     addChat: "Añadir",
@@ -222,6 +246,18 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     mailboxExplanation:
       "Wenn du offline bist, werden Nachrichten auf dem Server gelagert",
 
+    outbox: "Ausgang",
+    outboxText: (count: number) => {
+      switch (count) {
+        case 0:
+          return "Alle Nachrichten gesendet";
+        case 1:
+          return "Eine Nachricht ausstehend";
+        default:
+          return `${count} Nachrichten ausstehend`;
+      }
+    },
+
     primaryChannel: "Hauptkanal",
     primaryChannelPlaceholder: "mein-kanal",
     addChat: "Hinzufügen",