add marker for unread messages

dist/index.css

@@ -0,0 +1,4 @@
+/* src/styles.css */
+[unread] {
+  border-left: 10px solid var(--text-warn);
+}

dist/index.js

@@ -331,6 +331,9 @@
 
   // src/utility.ts
   var storageKeys = {
+    hasUnread(id) {
+      return id + "has-unread-messages";
+    },
     primaryChannel(id) {
       return id + "primary-channel";
     },
@@ -353,12 +356,13 @@
     id;
     isSubscribed = new State(false);
     primaryChannel = new State("");
+    hasUnreadMessages;
     secondaryChannels;
     encryptionKey;
     messages;
     composingMessage;
-    newSecondaryChannelName;
     primaryChannelInput;
+    newSecondaryChannelName;
     cannotSendMessage;
     cannotResendMessage;
     cannotAddSecondaryChannel;
@@ -375,6 +379,10 @@
       this.secondaryChannels = restoreListState(
         storageKeys.secondaryChannels(id)
       );
+      this.hasUnreadMessages = restoreState(
+        storageKeys.hasUnread(id),
+        false
+      );
       this.encryptionKey = restoreState(storageKeys.encyptionKey(id), "");
       this.messages = restoreListState(storageKeys.messages(id));
       this.composingMessage = restoreState(
@@ -442,6 +450,7 @@
     };
     handleMessage = (chatMessage) => {
       this.messages.add(chatMessage);
+      if (selectedChat.value != this) this.hasUnreadMessages.value = true;
     };
     // messages
     sendNewMessage = async () => {
@@ -735,6 +744,7 @@
   }
   function selectChat(chat) {
     selectedChat.value = chat;
+    chat.hasUnreadMessages.value = false;
     document.getElementById("message-tab")?.scrollIntoView();
   }
   chatIds.value.forEach((id) => chats.add(new Chat(id)));
@@ -1100,7 +1110,17 @@
       [selectedChat],
       () => selectedChat.value == chat
     );
-    return /* @__PURE__ */ createElement("button", { class: "tile", "on:click": select, "toggle:selected": isSelected }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis", "subscribe:innerText": chat.primaryChannel })), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward"));
+    return /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "tile",
+        "on:click": select,
+        "toggle:selected": isSelected,
+        "toggle:unread": chat.hasUnreadMessages
+      },
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis", "subscribe:innerText": chat.primaryChannel })),
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
+    );
   };
   function ChatListSection() {
     return /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("h2", null, translation.chats), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.primaryChannel), /* @__PURE__ */ createElement(

src/Model/chatModel.ts

@@ -5,6 +5,7 @@ import {
   chatIds,
   chats,
   isConnected,
+  selectedChat,
   senderName,
   updateMailbox,
 } from "../Model/model";
@@ -28,14 +29,15 @@ export class Chat {
 
   isSubscribed = new React.State(false);
   primaryChannel = new React.State("");
+  hasUnreadMessages: React.State<boolean>;
   secondaryChannels: React.ListState<string>;
 
   encryptionKey: React.State<string>;
   messages: React.ListState<ChatMessage>;
 
   composingMessage: React.State<string>;
-  newSecondaryChannelName: React.State<string>;
   primaryChannelInput: React.State<string>;
+  newSecondaryChannelName: React.State<string>;
 
   cannotSendMessage: React.State<boolean>;
   cannotResendMessage: React.State<boolean>;
@@ -58,6 +60,10 @@ export class Chat {
     );
 
     // messaging
+    this.hasUnreadMessages = React.restoreState(
+      storageKeys.hasUnread(id),
+      false
+    );
     this.encryptionKey = React.restoreState(storageKeys.encyptionKey(id), "");
     this.messages = React.restoreListState(storageKeys.messages(id));
 
@@ -147,6 +153,7 @@ export class Chat {
 
   handleMessage = (chatMessage: ChatMessage): void => {
     this.messages.add(chatMessage);
+    if (selectedChat.value != this) this.hasUnreadMessages.value = true;
   };
 
   // messages

src/Model/model.ts

@@ -160,6 +160,7 @@ export function closeChatView() {
 
 export function selectChat(chat: Chat) {
   selectedChat.value = chat;
+  chat.hasUnreadMessages.value = false;
   document.getElementById("message-tab")?.scrollIntoView();
 }
 

src/Views/chatListSection.tsx

@@ -23,7 +23,12 @@ const chatConverter: React.ListItemConverter<Chat> = (chat) => {
   );
 
   return (
-    <button class="tile" on:click={select} toggle:selected={isSelected}>
+    <button
+      class="tile"
+      on:click={select}
+      toggle:selected={isSelected}
+      toggle:unread={chat.hasUnreadMessages}
+    >
       <div>
         <b class="ellipsis" subscribe:innerText={chat.primaryChannel}></b>
       </div>

src/index.tsx

@@ -1,3 +1,5 @@
+import "./styles.css";
+
 import { MessageTab } from "./Tabs/messageTab";
 import { OverviewTab } from "./Tabs/overviewTab";
 

src/styles.css

@@ -0,0 +1,3 @@
+[unread] {
+  border-left: 10px solid var(--text-warn);
+}

src/utility.ts

@@ -1,4 +1,8 @@
 export const storageKeys = {
+  hasUnread(id: string): string {
+    return id + "has-unread-messages";
+  },
+  
   primaryChannel(id: string): string {
     return id + "primary-channel";
   },