link chat unread status to message page being open

src/View/Components/chatViewToggleButton.tsx

@@ -21,5 +21,12 @@ export function ChatViewToggleButton(
         () => chatViewModel.selectedPage.value == page,
     );
 
-    return RibbonButton(label, icon, isSelected, select);
+    const isHighlighted = new React.State(false);
+    if (page == ChatPageType.Messages) {
+        chatViewModel.hasUnreadMessages.subscribe(
+            (hasUnreadMessages) => (isHighlighted.value = hasUnreadMessages),
+        );
+    }
+
+    return RibbonButton(label, icon, isSelected, select, isHighlighted);
 }

src/View/Components/ribbonButton.tsx

@@ -9,12 +9,14 @@ export function RibbonButton(
     icon: string,
     isSelected: React.State<boolean>,
     select: () => void,
+    isHighlighted: React.State<boolean> = new React.State(false),
 ) {
     return (
         <button
             class="ribbon-button"
             aria-label={label}
             toggle:selected={isSelected}
+            toggle:highlight={isHighlighted}
             on:click={select}
         >
             <span class="icon">{icon}</span>

src/View/chatPage.css

@@ -214,6 +214,12 @@ body[showing-chat] #chat-page-wrapper {
     width: 100%;
 }
 
+#chat-page > div > #ribbon .ribbon-button[highlight] {
+    background: rgb(255, 217, 0) !important;
+    color: black;
+    outline-color: black;
+}
+
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
     height: var(--ribbon-size);
 

src/View/chatPage.tsx

@@ -40,7 +40,11 @@ export function ChatPage(chatViewModel: ChatViewModel) {
             const value = chatViewModel.notificationViewModel.marquee.value;
             if (value == undefined) return <span></span>;
             return (
-                <span on:click={chatViewModel.notificationViewModel.openNotification}>
+                <span
+                    on:click={
+                        chatViewModel.notificationViewModel.openNotification
+                    }
+                >
                     <b>{value.sender}</b>
                     <span class="secondary">{value.chat}: </span>
                     <span>{value.body}</span>

src/ViewModel/Chat/chatViewModel.ts

@@ -48,7 +48,6 @@ export default class ChatViewModel {
     // view
     open = (): void => {
         this.chatListViewModel.openChat(this);
-        this.setReadStatus(false);
     };
 
     close = (): void => {
@@ -102,7 +101,10 @@ export default class ChatViewModel {
     };
 
     updateReadStatus = (): void => {
-        if (this.chatListViewModel.selectedChat.value == this) {
+        if (
+            this.chatListViewModel.selectedChat.value == this &&
+            this.selectedPage.value == ChatPageType.Messages
+        ) {
             this.chatModel.setReadStatus(false);
         }
         this.hasUnreadMessages.value = this.chatModel.info.hasUnreadMessages;
@@ -113,6 +115,14 @@ export default class ChatViewModel {
         this.hasUnreadMessages.value = hasUnreadMessages;
     };
 
+    subscribeReadStatus = (): void => {
+        React.createProxyState([this.selectedPage, this.chatListViewModel.selectedChat], () => {
+            if (this.chatListViewModel.selectedChat.value != this) return;
+            if (this.selectedPage.value != ChatPageType.Messages) return;
+            this.setReadStatus(false);
+        })
+    }
+
     // init
     constructor(
         public coreViewModel: CoreViewModel,
@@ -168,6 +178,7 @@ export default class ChatViewModel {
         this.loadPageSelection();
         this.resetColor();
         this.loadInfo();
+        this.subscribeReadStatus();
     }
 }
 

src/ViewModel/Global/notificationViewModel.ts

@@ -1,6 +1,7 @@
 import * as React from "bloatless-react";
 import ChatModel, { ChatMessage } from "../../Model/Chat/chatModel";
 import ChatListViewModel from "../Chat/chatListViewModel";
+import { ChatPageType } from "../Chat/chatViewModel";
 
 export default class NotificationViewModel {
     chatListViewModel: ChatListViewModel;
@@ -20,7 +21,13 @@ export default class NotificationViewModel {
         const currentChat =
             this.chatListViewModel.selectedChat.value.chatModel.info
                 .primaryChannel;
-        if (notification.chat == currentChat) return;
+        const currentPage =
+            this.chatListViewModel.selectedChat.value.selectedPage.value;
+        if (
+            notification.chat == currentChat &&
+            currentPage == ChatPageType.Messages
+        )
+            return;
 
         this.messagesInMarquee.push(notification);
         this.startLoop();
@@ -67,7 +74,7 @@ export default class NotificationViewModel {
     skipLoop = () => {
         this.stopLoop();
         this.startLoop();
-    }
+    };
 
     // init
     constructor(chatListViewModel: ChatListViewModel) {