From f68b253bb9e0bb7721630a28b9f4d2e773c6b7a1 Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Wed, 10 Jul 2024 15:40:25 +0200
Subject: [PATCH] add marker for unread messages

---
 dist/index.css                |  4 ++++
 dist/index.js                 | 24 ++++++++++++++++++++++--
 src/Model/chatModel.ts        |  9 ++++++++-
 src/Model/model.ts            |  1 +
 src/Views/chatListSection.tsx |  7 ++++++-
 src/index.tsx                 |  2 ++
 src/styles.css                |  3 +++
 src/utility.ts                |  4 ++++
 8 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 dist/index.css
 create mode 100644 src/styles.css

diff --git a/dist/index.css b/dist/index.css
new file mode 100644
index 00000000..bd34d2a3
--- /dev/null
+++ b/dist/index.css
@@ -0,0 +1,4 @@
+/* src/styles.css */
+[unread] {
+  border-left: 10px solid var(--text-warn);
+}
diff --git a/dist/index.js b/dist/index.js
index bc269af8..e3882af6 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -331,6 +331,9 @@
 
   // src/utility.ts
   var storageKeys = {
+    hasUnread(id) {
+      return id + "has-unread-messages";
+    },
     primaryChannel(id) {
       return id + "primary-channel";
     },
@@ -353,12 +356,13 @@
     id;
     isSubscribed = new State(false);
     primaryChannel = new State("");
+    hasUnreadMessages;
     secondaryChannels;
     encryptionKey;
     messages;
     composingMessage;
-    newSecondaryChannelName;
     primaryChannelInput;
+    newSecondaryChannelName;
     cannotSendMessage;
     cannotResendMessage;
     cannotAddSecondaryChannel;
@@ -375,6 +379,10 @@
       this.secondaryChannels = restoreListState(
         storageKeys.secondaryChannels(id)
       );
+      this.hasUnreadMessages = restoreState(
+        storageKeys.hasUnread(id),
+        false
+      );
       this.encryptionKey = restoreState(storageKeys.encyptionKey(id), "");
       this.messages = restoreListState(storageKeys.messages(id));
       this.composingMessage = restoreState(
@@ -442,6 +450,7 @@
     };
     handleMessage = (chatMessage) => {
       this.messages.add(chatMessage);
+      if (selectedChat.value != this) this.hasUnreadMessages.value = true;
     };
     // messages
     sendNewMessage = async () => {
@@ -735,6 +744,7 @@
   }
   function selectChat(chat) {
     selectedChat.value = chat;
+    chat.hasUnreadMessages.value = false;
     document.getElementById("message-tab")?.scrollIntoView();
   }
   chatIds.value.forEach((id) => chats.add(new Chat(id)));
@@ -1100,7 +1110,17 @@
       [selectedChat],
       () => selectedChat.value == chat
     );
-    return /* @__PURE__ */ createElement("button", { class: "tile", "on:click": select, "toggle:selected": isSelected }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis", "subscribe:innerText": chat.primaryChannel })), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward"));
+    return /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "tile",
+        "on:click": select,
+        "toggle:selected": isSelected,
+        "toggle:unread": chat.hasUnreadMessages
+      },
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis", "subscribe:innerText": chat.primaryChannel })),
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
+    );
   };
   function ChatListSection() {
     return /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("h2", null, translation.chats), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.primaryChannel), /* @__PURE__ */ createElement(
diff --git a/src/Model/chatModel.ts b/src/Model/chatModel.ts
index 18d1af1d..9526fe4b 100644
--- a/src/Model/chatModel.ts
+++ b/src/Model/chatModel.ts
@@ -5,6 +5,7 @@ import {
   chatIds,
   chats,
   isConnected,
+  selectedChat,
   senderName,
   updateMailbox,
 } from "../Model/model";
@@ -28,14 +29,15 @@ export class Chat {
 
   isSubscribed = new React.State(false);
   primaryChannel = new React.State("");
+  hasUnreadMessages: React.State<boolean>;
   secondaryChannels: React.ListState<string>;
 
   encryptionKey: React.State<string>;
   messages: React.ListState<ChatMessage>;
 
   composingMessage: React.State<string>;
-  newSecondaryChannelName: React.State<string>;
   primaryChannelInput: React.State<string>;
+  newSecondaryChannelName: React.State<string>;
 
   cannotSendMessage: React.State<boolean>;
   cannotResendMessage: React.State<boolean>;
@@ -58,6 +60,10 @@ export class Chat {
     );
 
     // messaging
+    this.hasUnreadMessages = React.restoreState(
+      storageKeys.hasUnread(id),
+      false
+    );
     this.encryptionKey = React.restoreState(storageKeys.encyptionKey(id), "");
     this.messages = React.restoreListState(storageKeys.messages(id));
 
@@ -147,6 +153,7 @@ export class Chat {
 
   handleMessage = (chatMessage: ChatMessage): void => {
     this.messages.add(chatMessage);
+    if (selectedChat.value != this) this.hasUnreadMessages.value = true;
   };
 
   // messages
diff --git a/src/Model/model.ts b/src/Model/model.ts
index 70cc2b05..c4fdf655 100644
--- a/src/Model/model.ts
+++ b/src/Model/model.ts
@@ -160,6 +160,7 @@ export function closeChatView() {
 
 export function selectChat(chat: Chat) {
   selectedChat.value = chat;
+  chat.hasUnreadMessages.value = false;
   document.getElementById("message-tab")?.scrollIntoView();
 }
 
diff --git a/src/Views/chatListSection.tsx b/src/Views/chatListSection.tsx
index 0e0e30f4..e70fc054 100644
--- a/src/Views/chatListSection.tsx
+++ b/src/Views/chatListSection.tsx
@@ -23,7 +23,12 @@ const chatConverter: React.ListItemConverter<Chat> = (chat) => {
   );
 
   return (
-    <button class="tile" on:click={select} toggle:selected={isSelected}>
+    <button
+      class="tile"
+      on:click={select}
+      toggle:selected={isSelected}
+      toggle:unread={chat.hasUnreadMessages}
+    >
       <div>
         <b class="ellipsis" subscribe:innerText={chat.primaryChannel}></b>
       </div>
diff --git a/src/index.tsx b/src/index.tsx
index aa7178fb..0913931c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,3 +1,5 @@
+import "./styles.css";
+
 import { MessageTab } from "./Tabs/messageTab";
 import { OverviewTab } from "./Tabs/overviewTab";
 
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 00000000..df744af6
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,3 @@
+[unread] {
+  border-left: 10px solid var(--text-warn);
+}
diff --git a/src/utility.ts b/src/utility.ts
index 95152fd0..c9d00706 100644
--- a/src/utility.ts
+++ b/src/utility.ts
@@ -1,4 +1,8 @@
 export const storageKeys = {
+  hasUnread(id: string): string {
+    return id + "has-unread-messages";
+  },
+  
   primaryChannel(id: string): string {
     return id + "primary-channel";
   },