add marker for unread messages

src/Model/Chat/chatModel.ts

@@ -83,6 +83,9 @@ export default class ChatModel {
 
     chatMessage.status = ChatMessageStatus.Received;
     this.addMessage(chatMessage);
+
+    this.info.hasUnreadMessages = true;
+    this.storeInfo();
   };
 
   handleMessageSent = (chatMessage: ChatMessage): void => {
@@ -171,6 +174,11 @@ export default class ChatModel {
     this.connectionModel.addChannel(this.info.primaryChannel);
   };
 
+  markUnread = (): void => {
+    this.info.hasUnreadMessages = false;
+    this.storeInfo();
+  }
+
   // storage
   storeInfo = (): void => {
     this.storageModel.writeStringifiable(this.getInfoPath(), this.info);

src/View/Components/chatEntry.tsx

@@ -5,10 +5,11 @@ import ChatViewModel from "../../ViewModel/Chat/chatViewModel";
 export function ChatEntry(chatViewModel: ChatViewModel) {
   const view = (
     <button
-      class="tile colored-tile"
+      class="tile colored-tile chat-entry"
       set:color={chatViewModel.settingsPageViewModel.color}
       style="height: 8rem"
       on:click={chatViewModel.open}
+      toggle:unread={chatViewModel.hasUnreadMessages}
     >
       <span
         class="shadow"

src/View/homePage.css

@@ -31,7 +31,9 @@
 
 #home-page #overview-section,
 #home-page #chat-section {
-  padding-bottom: calc(var(--content-padding) + var(--header-height) + var(--safe-area-bottom));
+  padding-bottom: calc(
+    var(--content-padding) + var(--header-height) + var(--safe-area-bottom)
+  );
 }
 
 #home-page #chat-grid {
@@ -43,6 +45,15 @@
   grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
 }
 
+.chat-entry[unread] {
+  border: var(--outline-width) solid black;
+}
+
+.chat-entry[unread]:not(:hover):not(:active) {
+  background: rgb(255, 217, 0) !important;
+  color: black;
+}
+
 @media (min-width: 640px) {
   #home-page #overview-section {
     width: 20rem;

src/ViewModel/Chat/chatViewModel.ts

@@ -33,10 +33,12 @@ export default class ChatViewModel {
   );
 
   index: React.State<number> = new React.State(0);
+  hasUnreadMessages: React.State<boolean> = new React.State(false);
 
   // view
   open = (): void => {
     this.chatListViewModel.openChat(this);
+    this.markUnread();
   };
 
   close = (): void => {
@@ -64,6 +66,11 @@ export default class ChatViewModel {
     this.index.value = index;
   };
 
+  markUnread = (): void => {
+    this.hasUnreadMessages.value = false;
+    this.chatModel.markUnread();
+  };
+
   // load
   loadPageSelection = (): void => {
     const path: string[] = StorageModel.getPath(
@@ -81,6 +88,10 @@ export default class ChatViewModel {
     });
   };
 
+  loadInfo = (): void => {
+    this.hasUnreadMessages.value = this.chatModel.info.hasUnreadMessages;
+  };
+
   // init
   constructor(
     public coreViewModel: CoreViewModel,
@@ -101,7 +112,7 @@ export default class ChatViewModel {
       this.storageModel,
       this.chatModel.fileModel.boardsAndTasksModel.calendarModel,
       this.chatModel.fileModel.boardsAndTasksModel,
-      this,
+      this
     );
     this.taskPageViewModel = new TaskPageViewModel(
       this.coreViewModel,
@@ -122,12 +133,17 @@ export default class ChatViewModel {
     chatModel.chatMessageHandlerManager.addHandler(
       (chatMessage: ChatMessage) => {
         this.messagePageViewModel.showChatMessage(chatMessage);
+        
+        if (this.chatListViewModel.selectedChat.value != this) {
+          this.hasUnreadMessages.value = true;
+        }
       }
     );
 
     // load
     this.loadPageSelection();
     this.resetColor();
+    this.loadInfo();
   }
 }