prepare UI

src/Views/messageComposer.tsx

@@ -1,26 +1,34 @@
 import * as React from "bloatless-react";
 
-import { cannotSendMessage, messageBody, sendMessage } from "../model";
-
+import { Chat } from "../Model/chatModel";
+import { selectedChat } from "../Model/model";
 import { translation } from "../translations";
 
 export function MessageComposer() {
-  return (
-    <div class="flex-row width-100">
-      <input
-        class="width-100 flex-1"
-        style="max-width: unset"
-        placeholder={translation.composerPlaceholder}
-        bind:value={messageBody}
-        on:enter={sendMessage}
-      ></input>
-      <button
-        class="primary"
-        on:click={sendMessage}
-        toggle:disabled={cannotSendMessage}
-      >
-        <span class="icon">send</span>
-      </button>
-    </div>
-  );
+  const composerContent = React.createProxyState([selectedChat], () => {
+    if (selectedChat.value == undefined) return <div></div>;
+
+    const chat = selectedChat.value;
+    return (
+      <div class="flex-row width-100">
+        {" "}
+        <input
+          class="width-100 flex-1"
+          style="max-width: unset"
+          placeholder={translation.composerPlaceholder}
+          bind:value={chat.composingMessage}
+          on:enter={chat.sendMessage}
+        ></input>
+        <button
+          class="primary"
+          on:click={chat.sendMessage}
+          toggle:disabled={chat.cannotSendMessage}
+        >
+          <span class="icon">send</span>
+        </button>
+      </div>
+    );
+  });
+
+  return <div children:set={composerContent}></div>;
 }