add marker for unread messages

dist/index.css

@@ -426,6 +426,13 @@ body[showing-chat] #chat-page-wrapper {
   gap: var(--gap-between-tiles);
   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;

dist/index.js

@@ -1191,6 +1191,8 @@
       if (chatMessage == null) return;
       chatMessage.status = "received" /* Received */;
       this.addMessage(chatMessage);
+      this.info.hasUnreadMessages = true;
+      this.storeInfo();
     };
     handleMessageSent = (chatMessage) => {
       chatMessage.status = "sent" /* Sent */;
@@ -1258,6 +1260,10 @@
     subscribe = () => {
       this.connectionModel.addChannel(this.info.primaryChannel);
     };
+    markUnread = () => {
+      this.info.hasUnreadMessages = false;
+      this.storeInfo();
+    };
     // storage
     storeInfo = () => {
       this.storageModel.writeStringifiable(this.getInfoPath(), this.info);
@@ -2424,10 +2430,14 @@
       chatModel.chatMessageHandlerManager.addHandler(
         (chatMessage) => {
           this.messagePageViewModel.showChatMessage(chatMessage);
+          if (this.chatListViewModel.selectedChat.value != this) {
+            this.hasUnreadMessages.value = true;
+          }
         }
       );
       this.loadPageSelection();
       this.resetColor();
+      this.loadInfo();
     }
     chatModel;
     storageModel;
@@ -2443,9 +2453,11 @@
       "messages" /* Messages */
     );
     index = new State(0);
+    hasUnreadMessages = new State(false);
     // view
     open = () => {
       this.chatListViewModel.openChat(this);
+      this.markUnread();
     };
     close = () => {
       this.chatListViewModel.closeChat();
@@ -2466,6 +2478,10 @@
       const index = this.chatListViewModel.chatIndexManager.getIndex(this);
       this.index.value = index;
     };
+    markUnread = () => {
+      this.hasUnreadMessages.value = false;
+      this.chatModel.markUnread();
+    };
     // load
     loadPageSelection = () => {
       const path = StorageModel.getPath(
@@ -2481,6 +2497,9 @@
         this.resetColor();
       });
     };
+    loadInfo = () => {
+      this.hasUnreadMessages.value = this.chatModel.info.hasUnreadMessages;
+    };
   };
 
   // src/ViewModel/Chat/chatListViewModel.ts
@@ -4352,10 +4371,11 @@
     const view = /* @__PURE__ */ createElement(
       "button",
       {
-        class: "tile colored-tile",
+        class: "tile colored-tile chat-entry",
         "set:color": chatViewModel.settingsPageViewModel.color,
         style: "height: 8rem",
-        "on:click": chatViewModel.open
+        "on:click": chatViewModel.open,
+        "toggle:unread": chatViewModel.hasUnreadMessages
       },
       /* @__PURE__ */ createElement(
         "span",

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();
   }
 }