add composer, update cannotSendMessage guard to block empty messages

dist/index.css

@@ -344,6 +344,13 @@ main {
 }
 #message-page #composer {
   border-top: 1px solid var(--border);
+  display: flex;
+}
+#message-page #composer input {
+  margin: 0px;
+  width: 100%;
+  max-width: unset;
+  flex: 1;
 }
 
 /* src/View/Components/chatEntry.css */

dist/index.js

@@ -738,8 +738,8 @@
         () => this.encryptionKeyInput.value == this.chatModel.info.encryptionKey
       );
       this.cannotSendMessage = createProxyState(
-        [this.settingsViewModel.username],
+        [this.settingsViewModel.username, this.composingMessage],
-        () => this.settingsViewModel.username.value == ""
+        () => this.settingsViewModel.username.value == "" || this.composingMessage.value == ""
       );
       this.color.value = chatModel.color;
       this.restoreSecondaryChannels();
@@ -835,11 +835,6 @@
     );
   }
 
-  // src/View/ChatPages/messagePage.tsx
-  function MessagePage(chatViewModel) {
-    return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("div", { id: "message-container" }), /* @__PURE__ */ createElement("div", { id: "composer" })));
-  }
-
   // src/View/translations.ts
   var englishTranslations = {
     general: {
@@ -914,6 +909,10 @@
         setEncryptionKeyButtonAudioLabel: "set encryption key",
         showEncryptionKey: "Show encryption key",
         deleteChatButton: "Delete entire chat"
+      },
+      message: {
+        composerInputPlaceholder: "Type a message...",
+        sendMessageButtonAudioLabel: "send message"
       }
     }
   };
@@ -923,6 +922,27 @@
   var language = navigator.language.substring(0, 2);
   var translations = allTranslations[language] || allTranslations.en;
 
+  // src/View/ChatPages/messagePage.tsx
+  function MessagePage(chatViewModel) {
+    return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("div", { id: "message-container" }), /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement(
+      "input",
+      {
+        "bind:value": chatViewModel.composingMessage,
+        "on:enter": chatViewModel.sendMessage,
+        placeholder: translations.chatPage.message.composerInputPlaceholder
+      }
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary",
+        "aria-label": translations.chatPage.message.sendMessageButtonAudioLabel,
+        "on:click": chatViewModel.sendMessage,
+        "toggle:disabled": chatViewModel.cannotSendMessage
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "send")
+    ))));
+  }
+
   // src/View/Components/deletableListItem.tsx
   function DeletableListItem(text, primaryButton, ondelete) {
     return /* @__PURE__ */ createElement("div", { class: "tile flex-row justify-apart align-center padding-0" }, /* @__PURE__ */ createElement("span", { class: "padding-h" }, text), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, primaryButton, /* @__PURE__ */ createElement(

src/View/ChatPages/messagePage.css

@@ -15,4 +15,15 @@
 /* composer */
 #message-page #composer {
     border-top: 1px solid var(--border);
+
+    display: flex;
+}
+
+#message-page #composer input {
+    margin: 0px;
+
+    width: 100%;
+    max-width: unset;
+
+    flex: 1;
 }

src/View/ChatPages/messagePage.tsx

@@ -3,6 +3,7 @@ import "./messagePage.css";
 import * as React from "bloatless-react";
 
 import ChatViewModel from "../../ViewModel/chatViewModel";
+import { translations } from "../translations";
 
 export function MessagePage(chatViewModel: ChatViewModel) {
   return (
@@ -12,7 +13,23 @@ export function MessagePage(chatViewModel: ChatViewModel) {
       </div>
       <div class="content">
         <div id="message-container"></div>
-        <div id="composer"></div>
+        <div id="composer">
+          <input
+            bind:value={chatViewModel.composingMessage}
+            on:enter={chatViewModel.sendMessage}
+            placeholder={translations.chatPage.message.composerInputPlaceholder}
+          ></input>
+          <button
+            class="primary"
+            aria-label={
+              translations.chatPage.message.sendMessageButtonAudioLabel
+            }
+            on:click={chatViewModel.sendMessage}
+            toggle:disabled={chatViewModel.cannotSendMessage}
+          >
+            <span class="icon">send</span>
+          </button>
+        </div>
       </div>
     </div>
   );

src/View/translations.ts

@@ -98,6 +98,11 @@ const englishTranslations = {
 
       deleteChatButton: "Delete entire chat",
     },
+
+    message: {
+      composerInputPlaceholder: "Type a message...",
+      sendMessageButtonAudioLabel: "send message",
+    }
   },
 };
 

src/ViewModel/chatViewModel.tsx

@@ -155,8 +155,10 @@ export default class ChatViewModel {
     );
 
     this.cannotSendMessage = React.createProxyState(
-      [this.settingsViewModel.username],
+      [this.settingsViewModel.username, this.composingMessage],
-    () => this.settingsViewModel.username.value == ""
+      () =>
+        this.settingsViewModel.username.value == "" ||
+        this.composingMessage.value == ""
     );
 
     this.color.value = chatModel.color;