From c9ac732da5b48b544a3823163780db5ea7c737ac Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Thu, 2 Apr 2026 19:22:10 +0000 Subject: [PATCH] link chat unread status to message page being open --- dist/index.css | 5 +++ dist/index.js | 36 +++++++++++++++---- src/View/Components/chatViewToggleButton.tsx | 9 ++++- src/View/Components/ribbonButton.tsx | 2 ++ src/View/chatPage.css | 6 ++++ src/View/chatPage.tsx | 6 +++- src/ViewModel/Chat/chatViewModel.ts | 15 ++++++-- src/ViewModel/Global/notificationViewModel.ts | 11 ++++-- 8 files changed, 78 insertions(+), 12 deletions(-) diff --git a/dist/index.css b/dist/index.css index 03fbc791..21b55b40 100644 --- a/dist/index.css +++ b/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; diff --git a/dist/index.js b/dist/index.js index 1a899e91..c0ff8ed1 100644 --- a/dist/index.js +++ b/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( diff --git a/src/View/Components/chatViewToggleButton.tsx b/src/View/Components/chatViewToggleButton.tsx index f84a37b7..f88dc620 100644 --- a/src/View/Components/chatViewToggleButton.tsx +++ b/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); } diff --git a/src/View/Components/ribbonButton.tsx b/src/View/Components/ribbonButton.tsx index c714d4d8..c3ab0c67 100644 --- a/src/View/Components/ribbonButton.tsx +++ b/src/View/Components/ribbonButton.tsx @@ -9,12 +9,14 @@ export function RibbonButton( icon: string, isSelected: React.State, select: () => void, + isHighlighted: React.State = new React.State(false), ) { return (