add composer, update cannotSendMessage guard to block empty messages

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",
+    }
   },
 };