add message notifications

src/View/chatPage.css

@@ -125,15 +125,46 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 #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;

src/View/chatPage.tsx

@@ -34,6 +34,21 @@ export function ChatPage(chatViewModel: ChatViewModel) {
         },
     );
 
+    const marqueeContent = React.createProxyState(
+        [chatViewModel.notificationViewModel.marquee],
+        () => {
+            const value = chatViewModel.notificationViewModel.marquee.value;
+            if (value == undefined) return <span></span>;
+            return (
+                <span>
+                    <b>{value.sender}</b>
+                    <span class="secondary">{value.chat}: </span>
+                    <span>{value.body}</span>
+                </span>
+            );
+        },
+    );
+
     return (
         <article
             id="chat-page"
@@ -63,7 +78,9 @@ export function ChatPage(chatViewModel: ChatViewModel) {
                         <span class="icon">signal_disconnected</span>
                     </button>
 
-                    <span>
+                    <span class="marquee" children:set={marqueeContent}></span>
+
+                    <span class="navigation-buttons">
                         {ChatViewToggleButton(
                             translations.chatPage.pages.calendar,
                             "calendar_month",