add message notifications

dist/index.css

@@ -340,12 +340,37 @@ body[showing-chat] #chat-page-wrapper {
   justify-content: space-between;
 }
 #chat-page > div > #ribbon > span {
-  height: 100%;
-  flex: 1;
   overflow-y: auto;
   flex-direction: column;
   justify-content: end;
 }
+#chat-page > div > #ribbon > span.marquee {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+#chat-page > div > #ribbon > span.marquee > span {
+  transform: rotate(270deg);
+  transform-origin: left;
+  position: absolute;
+  bottom: -10px;
+  left: calc(var(--control-height) / 2);
+  height: var(--control-height);
+  min-width: 100vh;
+  overflow: visible;
+  text-overflow: visible;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-between-tiles);
+}
+#chat-page > div > #ribbon > span.marquee > span > * {
+  animation: slide-up var(--animation-duration);
+}
+#chat-page > div > #ribbon > .navigation-buttons {
+  min-height: calc(var(--control-height) * 4);
+  flex: 0;
+}
 #chat-page > div > #ribbon button,
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
   padding: 0px;

dist/index.js

@@ -651,6 +651,9 @@
       ],
       files: (id) => [...filePaths.chat.chatBase(id), "files"]
     },
+    notificationModel: {
+      base: []
+    },
     settingsModel: {
       username: ["user-name"],
       firstDayOfWeek: ["first-day-of-week"]
@@ -1373,8 +1376,11 @@
       );
       return sorted;
     }
+    // utility
+    static splitChannel(channelString) {
+      return channelString.split("/");
+    }
     static {
-      // utility
       this.generateChatInfo = (primaryChannel) => {
         return {
           dataVersion: DATA_VERSION,
@@ -3024,7 +3030,7 @@
   // src/ViewModel/Chat/chatViewModel.ts
   var ChatViewModel = class {
     // init
-    constructor(coreViewModel, storageModel2, chatModel, settingsViewModel2, connectionViewModel2, chatListViewModel2) {
+    constructor(coreViewModel, storageModel2, chatModel, settingsViewModel2, notificationViewModel, connectionViewModel2, chatListViewModel2) {
       this.coreViewModel = coreViewModel;
       // state
       this.displayedColor = new State("standard" /* Standard */);
@@ -3094,6 +3100,7 @@
       this.chatModel = chatModel;
       this.settingsViewModel = settingsViewModel2;
       this.connectionViewModel = connectionViewModel2;
+      this.notificationViewModel = notificationViewModel;
       this.chatListViewModel = chatListViewModel2;
       this.calendarViewModel = new CalendarPageViewModel(
         coreViewModel,
@@ -3120,6 +3127,7 @@
         (chatMessage) => {
           this.messagePageViewModel.showChatMessage(chatMessage);
           this.updateReadStatus();
+          this.notificationViewModel.showNotification(chatMessage);
         }
       );
       this.loadPageSelection();
@@ -3128,6 +3136,59 @@
     }
   };
 
+  // src/ViewModel/Global/notificationViewModel.ts
+  var NotificationViewModel = class _NotificationViewModel {
+    // init
+    constructor(chatListViewModel2) {
+      // data
+      this.seenMessageIds = /* @__PURE__ */ new Set();
+      this.messagesInMarquee = [];
+      this.marquee = new State(void 0);
+      this.currentIndex = 0;
+      this.interval = void 0;
+      // main
+      this.showNotification = (message) => {
+        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;
+        this.messagesInMarquee.push(notification);
+        this.startLoop();
+      };
+      // loop
+      this.loop = () => {
+        if (this.messagesInMarquee.length == 0) {
+          this.marquee.value = void 0;
+          return this.stopLoop();
+        }
+        const notification = this.messagesInMarquee.shift();
+        this.seenMessageIds.delete(notification.messageId);
+        this.marquee.value = notification;
+      };
+      this.startLoop = () => {
+        if (this.interval != void 0) return;
+        this.loop();
+        this.interval = setInterval(() => {
+          this.loop();
+        }, 5e3);
+      };
+      this.stopLoop = () => {
+        clearInterval(this.interval);
+        this.interval = void 0;
+      };
+      this.chatListViewModel = chatListViewModel2;
+    }
+    // util
+    static createNotification(message) {
+      return {
+        messageId: message.id,
+        chat: ChatModel.splitChannel(message.channel)[0],
+        sender: message.sender,
+        body: message.body
+      };
+    }
+  };
+
   // src/ViewModel/Chat/chatListViewModel.ts
   var ChatListViewModel = class {
     // init
@@ -3171,6 +3232,7 @@
           this.storageModel,
           chatModel,
           this.settingsViewModel,
+          this.notificationViewModel,
           this.connectionViewModel,
           this
         );
@@ -3200,6 +3262,7 @@
       this.storageModel = storageModel2;
       this.chatListModel = chatListModel2;
       this.settingsViewModel = settingsViewModel2;
+      this.notificationViewModel = new NotificationViewModel(this);
       this.connectionViewModel = connectionViewModel2;
       this.loadChats();
     }
@@ -3680,7 +3743,7 @@
   }
 
   // src/View/Components/chatMessage.tsx
-  function ChatMessage2(chatMessageViewModel) {
+  function ChatMessage3(chatMessageViewModel) {
     const statusIcon = createProxyState(
       [chatMessageViewModel.status],
       () => {
@@ -3726,7 +3789,7 @@
     );
   }
   var ChatMessageViewModelToView = (chatMessageViewModel) => {
-    return ChatMessage2(chatMessageViewModel);
+    return ChatMessage3(chatMessageViewModel);
   };
 
   // src/View/ChatPages/messagePage.tsx
@@ -4555,6 +4618,14 @@
         }
       }
     );
+    const marqueeContent = createProxyState(
+      [chatViewModel.notificationViewModel.marquee],
+      () => {
+        const value = chatViewModel.notificationViewModel.marquee.value;
+        if (value == void 0) return /* @__PURE__ */ createElement("span", null);
+        return /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement("b", null, value.sender), /* @__PURE__ */ createElement("span", { class: "secondary" }, value.chat, ": "), /* @__PURE__ */ createElement("span", null, value.body));
+      }
+    );
     return /* @__PURE__ */ createElement(
       "article",
       {
@@ -4579,7 +4650,7 @@
           "toggle:hidden": chatViewModel.connectionViewModel.isConnected
         },
         /* @__PURE__ */ createElement("span", { class: "icon" }, "signal_disconnected")
-      ), /* @__PURE__ */ createElement("span", null, ChatViewToggleButton(
+      ), /* @__PURE__ */ createElement("span", { class: "marquee", "children:set": marqueeContent }), /* @__PURE__ */ createElement("span", { class: "navigation-buttons" }, ChatViewToggleButton(
         translations.chatPage.pages.calendar,
         "calendar_month",
         "calendar" /* Calendar */,