link chat unread status to message page being open

dist/index.css

@@ -397,6 +397,11 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #ribbon > span {
   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);
   overflow-x: auto;

dist/index.js

@@ -3043,7 +3043,6 @@
       // view
       this.open = () => {
         this.chatListViewModel.openChat(this);
-        this.setReadStatus(false);
       };
       this.close = () => {
         this.chatListViewModel.closeChat();
@@ -3087,7 +3086,7 @@
         ]);
       };
       this.updateReadStatus = () => {
-        if (this.chatListViewModel.selectedChat.value == this) {
+        if (this.chatListViewModel.selectedChat.value == this && this.selectedPage.value == "messages" /* Messages */) {
           this.chatModel.setReadStatus(false);
         }
         this.hasUnreadMessages.value = this.chatModel.info.hasUnreadMessages;
@@ -3096,6 +3095,13 @@
         this.chatModel.setReadStatus(hasUnreadMessages);
         this.hasUnreadMessages.value = hasUnreadMessages;
       };
+      this.subscribeReadStatus = () => {
+        createProxyState([this.selectedPage, this.chatListViewModel.selectedChat], () => {
+          if (this.chatListViewModel.selectedChat.value != this) return;
+          if (this.selectedPage.value != "messages" /* Messages */) return;
+          this.setReadStatus(false);
+        });
+      };
       this.storageModel = storageModel2;
       this.chatModel = chatModel;
       this.settingsViewModel = settingsViewModel2;
@@ -3133,6 +3139,7 @@
       this.loadPageSelection();
       this.resetColor();
       this.loadInfo();
+      this.subscribeReadStatus();
     }
   };
 
@@ -3151,7 +3158,9 @@
         const notification = _NotificationViewModel.createNotification(message);
         if (this.seenMessageIds.has(message.id)) return;
         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 == "messages" /* Messages */)
+          return;
         this.messagesInMarquee.push(notification);
         this.startLoop();
       };
@@ -3714,13 +3723,14 @@
   }
 
   // src/View/Components/ribbonButton.tsx
-  function RibbonButton(label, icon, isSelected, select) {
+  function RibbonButton(label, icon, isSelected, select, isHighlighted = new State(false)) {
     return /* @__PURE__ */ createElement(
       "button",
       {
         class: "ribbon-button",
         "aria-label": label,
         "toggle:selected": isSelected,
+        "toggle:highlight": isHighlighted,
         "on:click": select
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, icon)
@@ -3736,7 +3746,13 @@
       [chatViewModel.selectedPage],
       () => chatViewModel.selectedPage.value == page
     );
-    return RibbonButton(label, icon, isSelected, select);
+    const isHighlighted = new State(false);
+    if (page == "messages" /* Messages */) {
+      chatViewModel.hasUnreadMessages.subscribe(
+        (hasUnreadMessages) => isHighlighted.value = hasUnreadMessages
+      );
+    }
+    return RibbonButton(label, icon, isSelected, select, isHighlighted);
   }
 
   // src/View/Modals/chatMessageInfoModal.tsx
@@ -4638,7 +4654,15 @@
       () => {
         const value = chatViewModel.notificationViewModel.marquee.value;
         if (value == void 0) return /* @__PURE__ */ createElement("span", null);
-        return /* @__PURE__ */ createElement("span", { "on:click": chatViewModel.notificationViewModel.openNotification }, /* @__PURE__ */ createElement("b", null, value.sender), /* @__PURE__ */ createElement("span", { class: "secondary" }, value.chat, ": "), /* @__PURE__ */ createElement("span", null, value.body));
+        return /* @__PURE__ */ createElement(
+          "span",
+          {
+            "on:click": chatViewModel.notificationViewModel.openNotification
+          },
+          /* @__PURE__ */ createElement("b", null, value.sender),
+          /* @__PURE__ */ createElement("span", { class: "secondary" }, value.chat, ": "),
+          /* @__PURE__ */ createElement("span", null, value.body)
+        );
       }
     );
     return /* @__PURE__ */ createElement(

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) {