From 8a74d7c389be3c8b80f945a592fbfe1e4de18c0a Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Tue, 9 Jul 2024 18:21:28 +0200
Subject: [PATCH] improve ui, scroll new messages

---
 bun.lockb                | Bin 11435 -> 11441 bytes
 dist/index.js            |  30 +++++++++++++-----------
 dist/styles.css          |   2 +-
 package.json             |   2 +-
 src/Tabs/messageTab.tsx  |  49 ++++++++++++++++++---------------------
 src/Views/threadView.tsx |   4 +++-
 6 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 03cb61d1c372159e5f380edeeaeffa4d789978eb..bef7116e0ca9844295db3e95a1c990b4d32cfdb9 100755
GIT binary patch
delta 193
zcmV;y06zb#S+QA=E+M!*bO*|n3i%SfrD^lx9)gxUoo*CHER-pC1clMB0+k`LPt6Do
zOaK6Y0RR910{{R30h6f$F9E2tSqWqdKtu}KdReaAL4GADV7HJ;UG2H)oq?FVtd>tW
z&tPZnNf<edkDWXQ87URRyUkEKQGlMf{*P53hvyWTE4dGBf3y7*mjVcz2><{M004lK
vQ35cNfE5I@&=)ZW2LfzibY*jNvj`s&0|6Pc8zQv{2Qe*TWprUNlhG^MFs(<I

delta 187
zcmV;s07U<>S*ux)E+JykT+VSw96G^)8Ef(RzZ(X4Rz7M@kHIouHnEnqw`Uu%Pt6Dk
zMgRbS0RR911Cvn#E0d4{2mzwASqWqdKuT|}BWd;Sr?AoxXZ@ED_(wgQYE!5jZ4R%a
z7*lA<Al@`P=K+w7Y-@k#oSz*%j=c$w6u*SSiSp4wPgbcCg|qz>mjVct2><{M004lK
pQ35cNfE5I@&=)ZW2LWC&E;24Qvj`s&0|67W8zQv{0Wg!-E81jjMrQy3

diff --git a/dist/index.js b/dist/index.js
index 9887b88a..e5695093 100644
--- a/dist/index.js
+++ b/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 });
   }
diff --git a/dist/styles.css b/dist/styles.css
index 4fff6a30..dfe09f5c 100644
--- a/dist/styles.css
+++ b/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);
 }
 
 /*
diff --git a/package.json b/package.json
index 88a71235..996bd862 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/Tabs/messageTab.tsx b/src/Tabs/messageTab.tsx
index 70203dc5..3c531d08 100644
--- a/src/Tabs/messageTab.tsx
+++ b/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>;
diff --git a/src/Views/threadView.tsx b/src/Views/threadView.tsx
index 38d6786f..59e4166d 100644
--- a/src/Views/threadView.tsx
+++ b/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;
 }