add marker for unread messages

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";
   },