remodel message tab ui

src/Model/model.ts

@@ -115,6 +115,11 @@ export const senderName = React.restoreState("sender-name", "");
 
 export const selectedChat = new React.State<Chat | undefined>(undefined);
 
+export function closeChat() {
+  selectedChat.value = undefined;
+  document.getElementById("settings-tab")?.scrollIntoView();
+}
+
 // INIT
 if (serverAddressInput.value != "" && didRequestConnection.value == true) {
   connect();

src/Tabs/messageTab.tsx

@@ -1,37 +1,50 @@
 import * as React from "bloatless-react";
 
+import { closeChat, selectedChat } from "../Model/model";
+
 import { MessageComposer } from "../Views/messageComposer";
 import { ThreadView } from "../Views/threadView";
-import { selectedChat } from "../Model/model";
 import { translation } from "../translations";
 
 export function MessageTab() {
-  function clearMessageHistory() {
-    selectedChat.value?.clearMessages();
-  }
+  const messageTabContent = React.createProxyState([selectedChat], () => {
+    if (selectedChat.value == undefined)
+      return (
+        <div class="width-100 height-100 flex-column align-center justify-center">
+          <span class="secondary">{translation.noChatSelected}</span>
+        </div>
+      );
 
-  const headerText = React.createProxyState([selectedChat], () =>
-    selectedChat.value != undefined
-      ? selectedChat.value.currentChannel
-      : translation.messages
-  );
+    const chat = selectedChat.value;
 
-  return (
-    <article id="message-tab">
-      <header>
-        <span subscribe:innerText={headerText}>
-        </span>
-        <span>
-          <button
-            aria-label={translation.clearHistory}
-            on:click={clearMessageHistory}
-          >
-            <span class="icon">delete_sweep</span>
-          </button>
-        </span>
-      </header>
-      {ThreadView()}
-      <footer>{MessageComposer()}</footer>
-    </article>
-  );
+    function clearMessageHistory() {
+      chat.clearMessages();
+    }
+
+    return (
+      <article id="message-tab">
+        <header class="padding-0">
+          <span class="flex-row align-center">
+            <button aria-label={translation.back} on:click={closeChat}>
+              <span class="icon">arrow_back</span>
+            </button>
+
+            <span subscribe:innerText={chat.currentChannel}></span>
+          </span>
+          <span>
+            <button
+              aria-label={translation.clearHistory}
+              on:click={clearMessageHistory}
+            >
+              <span class="icon">delete_sweep</span>
+            </button>
+          </span>
+        </header>
+        {ThreadView(chat)}
+        <footer>{MessageComposer(chat)}</footer>
+      </article>
+    );
+  });
+
+  return <div children:set={messageTabContent}></div>;
 }

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>
+  );
 }

src/translations.ts

@@ -1,6 +1,7 @@
 const englishTranslations = {
   // general
   setInput: "Set",
+  back: "Back",
 
   // overview
   overview: "Overview",