remodel message tab ui

src/Views/messageComposer.tsx

@@ -1,34 +1,26 @@
 import * as React from "bloatless-react";
 
 import { Chat } from "../Model/chatModel";
-import { selectedChat } from "../Model/model";
 import { translation } from "../translations";
 
-export function MessageComposer() {
-  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>;
+export function MessageComposer(chat: Chat) {
+  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>
+  );
 }

src/Views/threadView.tsx

@@ -2,77 +2,62 @@ import * as React from "bloatless-react";
 
 import { Chat, ChatMessage } from "../Model/chatModel";
 
-import { selectedChat } from "../Model/model";
 import { translation } from "../translations";
 
-export function ThreadView() {
-  const threadViewContent = React.createProxyState([selectedChat], () => {
-    if (selectedChat.value == undefined)
-      return <div>{translation.noChatSelected}</div>;
+export function ThreadView(chat: Chat) {
+  const messageConverter: React.ListItemConverter<ChatMessage> = (message) => {
+    function copyMessage() {
+      navigator.clipboard.writeText(message.body);
+    }
 
-    const chat = selectedChat.value;
+    function decrypt() {
+      chat.decryptReceivedMessage(message);
+    }
 
-    const messageConverter: React.ListItemConverter<ChatMessage> = (
-      message
-    ) => {
-      function copyMessage() {
-        navigator.clipboard.writeText(message.body);
-      }
-
-      function decrypt() {
-        chat.decryptReceivedMessage(message);
-      }
-
-      function remove() {
-        chat.deleteMessage(message);
-      }
-
-      return (
-        <div class="tile width-100 flex-no padding-0">
-          <div class="flex-column">
-            <div class="flex-row justify-apart align-center secondary">
-              <span class="padding-h ellipsis">
-                <b class="info">{message.sender}</b> - {message.channel}
-              </span>
-              <span class="flex-row">
-                <button
-                  aria-label={translation.copyMessage}
-                  on:click={copyMessage}
-                >
-                  <span class="icon">content_copy</span>
-                </button>
-                <button
-                  aria-label={translation.decryptMessage}
-                  on:click={decrypt}
-                >
-                  <span class="icon">key</span>
-                </button>
-                <button
-                  aria-label={translation.deleteMessage}
-                  on:click={remove}
-                >
-                  <span class="icon">delete</span>
-                </button>
-              </span>
-            </div>
-            <div class="flex-column padding-h padding-bottom">
-              <b class="break-word" subscribe:innerText={message.body}></b>
-              <span class="secondary">
-                {new Date(message.isoDate).toLocaleString()}
-              </span>
-            </div>
-          </div>
-        </div>
-      );
-    };
+    function remove() {
+      chat.deleteMessage(message);
+    }
 
     return (
-      <div
-        class="flex-column gap"
-        children:append={[chat.messages, messageConverter]}
-      ></div>
+      <div class="tile width-100 flex-no padding-0">
+        <div class="flex-column">
+          <div class="flex-row justify-apart align-center secondary">
+            <span class="padding-h ellipsis">
+              <b class="info">{message.sender}</b> - {message.channel}
+            </span>
+            <span class="flex-row">
+              <button
+                aria-label={translation.copyMessage}
+                on:click={copyMessage}
+              >
+                <span class="icon">content_copy</span>
+              </button>
+              <button
+                aria-label={translation.decryptMessage}
+                on:click={decrypt}
+              >
+                <span class="icon">key</span>
+              </button>
+              <button aria-label={translation.deleteMessage} on:click={remove}>
+                <span class="icon">delete</span>
+              </button>
+            </span>
+          </div>
+          <div class="flex-column padding-h padding-bottom">
+            <b class="break-word" subscribe:innerText={message.body}></b>
+            <span class="secondary">
+              {new Date(message.isoDate).toLocaleString()}
+            </span>
+          </div>
+        </div>
+      </div>
     );
-  });
+  };
 
-  return <div children:set={threadViewContent}></div>;
+  return (
+    <div
+      class="flex-column gap"
+      children:append={[chat.messages, messageConverter]}
+    ></div>
+  );
 }