add basic thread view

src/View/ChatPages/messagePage.css

@@ -1,29 +1,39 @@
 /* layout */
 #chat-page #main #message-page .content {
-    padding: 0px;
+  padding: 0px;
 
-    overflow: hidden;
+  overflow: hidden;
 
-    display: grid;
-    grid-template-rows: 1fr var(--control-height) var(--safe-area-bottom);
+  display: grid;
+  grid-template-rows: 1fr var(--control-height) var(--safe-area-bottom);
 }
 
 #message-page #message-container {
-    overflow: auto;
+  overflow: auto;
 }
 
 /* composer */
 #message-page #composer {
-    border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border);
 
-    display: flex;
+  display: flex;
 }
 
 #message-page #composer input {
-    margin: 0px;
+  margin: 0px;
 
-    width: 100%;
-    max-width: unset;
+  width: 100%;
+  max-width: unset;
 
-    flex: 1;
-}
+  flex: 1;
+}
+
+#message-page #message-container {
+  display: flex;
+  flex-direction: column;
+
+  padding: var(--content-padding);
+  gap: var(--gap-between-tiles);
+
+  scroll-behavior: smooth;
+}

src/View/ChatPages/messagePage.tsx

@@ -2,17 +2,43 @@ import "./messagePage.css";
 
 import * as React from "bloatless-react";
 
+import { ChatMessageViewModelToView } from "../Components/chatMessage";
 import ChatViewModel from "../../ViewModel/chatViewModel";
 import { translations } from "../translations";
 
 export function MessagePage(chatViewModel: ChatViewModel) {
+  const messageContainer = (
+    <div
+      id="message-container"
+      children:append={[
+        chatViewModel.chatMessageViewModels,
+        ChatMessageViewModelToView,
+      ]}
+    ></div>
+  );
+
+  function scrollDown() {
+    console.log("down");
+    messageContainer.scrollTop = messageContainer.scrollHeight;
+  }
+  function scrollDownIfApplicable() {
+    const scrollFromBottom =
+      messageContainer.scrollHeight -
+      (messageContainer.scrollTop + messageContainer.offsetHeight);
+    if (scrollFromBottom > 400) return;
+
+    scrollDown();
+  }
+  chatViewModel.chatMessageViewModels.subscribeSilent(scrollDownIfApplicable);
+  setTimeout(() => scrollDown(), 100)
+
   return (
     <div id="message-page">
       <div class="toolbar">
         <span subscribe:innerText={chatViewModel.primaryChannel}></span>
       </div>
       <div class="content">
-        <div id="message-container"></div>
+        {messageContainer}
         <div id="composer">
           <input
             bind:value={chatViewModel.composingMessage}