improve ui, scroll new messages

dist/index.js

@@ -220,7 +220,7 @@
                 const state = value;
                 state.subscribe((newValue) => {
                   element.innerHTML = "";
-                  element.append(newValue);
+                  element.append(...[newValue].flat());
                 });
                 break;
               }
@@ -900,13 +900,15 @@
         /* @__PURE__ */ createElement("span", { class: "icon" }, "key")
       ), /* @__PURE__ */ createElement("button", { "aria-label": translation.deleteMessage, "on:click": remove }, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("div", { class: "flex-column padding-h padding-bottom" }, /* @__PURE__ */ createElement("b", { class: "break-word", "subscribe:innerText": messageBody }), /* @__PURE__ */ createElement("span", { class: "secondary" }, new Date(message.isoDate).toLocaleString()))));
     };
-    return /* @__PURE__ */ createElement(
+    const listElement = /* @__PURE__ */ createElement(
       "div",
       {
         class: "flex-column gap",
         "children:append": [chat.messages, messageConverter]
       }
     );
+    chat.messages.handleAddition(() => listElement.scrollTop = listElement.scrollHeight);
+    return listElement;
   }
 
   // src/Tabs/messageTab.tsx
@@ -919,17 +921,19 @@
       function showOptions() {
         isShowingOptions.value = true;
       }
-      function hideOptions() {
-        isShowingOptions.value = false;
-      }
-      return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("header", { class: "padding-0" }, /* @__PURE__ */ createElement("span", { class: "flex-row align-center" }, /* @__PURE__ */ createElement("button", { "aria-label": translation.back, "on:click": closeChatView }, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back")), /* @__PURE__ */ createElement("span", { "subscribe:innerText": chat.primaryChannel })), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
-        "button",
-        {
-          "aria-label": translation.showChatOptions,
-          "on:click": showOptions
-        },
-        /* @__PURE__ */ createElement("span", { class: "icon" }, "tune")
-      ))), ThreadView(chat), /* @__PURE__ */ createElement("footer", null, MessageComposer(chat)), ChatOptionModal(chat, isShowingOptions));
+      return [
+        /* @__PURE__ */ createElement("header", { class: "padding-0" }, /* @__PURE__ */ createElement("span", { class: "flex-row align-center" }, /* @__PURE__ */ createElement("button", { "aria-label": translation.back, "on:click": closeChatView }, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back")), /* @__PURE__ */ createElement("span", { "subscribe:innerText": chat.primaryChannel })), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
+          "button",
+          {
+            "aria-label": translation.showChatOptions,
+            "on:click": showOptions
+          },
+          /* @__PURE__ */ createElement("span", { class: "icon" }, "tune")
+        ))),
+        ThreadView(chat),
+        /* @__PURE__ */ createElement("footer", null, MessageComposer(chat)),
+        ChatOptionModal(chat, isShowingOptions)
+      ];
     });
     return /* @__PURE__ */ createElement("article", { id: "message-tab", "children:set": messageTabContent });
   }

dist/styles.css

@@ -246,7 +246,7 @@ SIZES
   --safe-area-top: env(safe-area-inset-top);
   --safe-area-left: env(safe-area-inset-left);
   --safe-area-right: env(safe-area-inset-right);
-  --safe-area-bottom: max(env(safe-area-inset-bottom), var(--control-padding));
+  --safe-area-bottom: env(safe-area-inset-bottom);
 }
 
 /*

package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "bloatless-react": "^1.3.0",
+    "bloatless-react": "^1.3.1-beta1",
     "esbuild": "latest",
     "udn-frontend": "^1.0.7-beta1"
   },

src/Tabs/messageTab.tsx

@@ -22,37 +22,32 @@ export function MessageTab() {
     function showOptions() {
       isShowingOptions.value = true;
     }
-    function hideOptions() {
-      isShowingOptions.value = false;
-    }
 
-    return (
-      <div>
-        <header class="padding-0">
-          <span class="flex-row align-center">
-            <button aria-label={translation.back} on:click={closeChatView}>
-              <span class="icon">arrow_back</span>
-            </button>
+    return [
+      <header class="padding-0">
+        <span class="flex-row align-center">
+          <button aria-label={translation.back} on:click={closeChatView}>
+            <span class="icon">arrow_back</span>
+          </button>
 
-            <span subscribe:innerText={chat.primaryChannel}></span>
-          </span>
-          <span>
-            <button
-              aria-label={translation.showChatOptions}
-              on:click={showOptions}
-            >
-              <span class="icon">tune</span>
-            </button>
-          </span>
-        </header>
+          <span subscribe:innerText={chat.primaryChannel}></span>
+        </span>
+        <span>
+          <button
+            aria-label={translation.showChatOptions}
+            on:click={showOptions}
+          >
+            <span class="icon">tune</span>
+          </button>
+        </span>
+      </header>,
 
-        {ThreadView(chat)}
-        
-        <footer>{MessageComposer(chat)}</footer>
+      ThreadView(chat),
 
-        {ChatOptionModal(chat, isShowingOptions)}
-      </div>
-    );
+      <footer>{MessageComposer(chat)}</footer>,
+
+      ChatOptionModal(chat, isShowingOptions),
+    ];
   });
 
   return <article id="message-tab" children:set={messageTabContent}></article>;

src/Views/threadView.tsx

@@ -59,10 +59,12 @@ export function ThreadView(chat: Chat) {
     );
   };
 
-  return (
+  const listElement = (
     <div
       class="flex-column gap"
       children:append={[chat.messages, messageConverter]}
     ></div>
   );
+  chat.messages.handleAddition(() => listElement.scrollTop = listElement.scrollHeight);
+  return listElement;
 }