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>