remodel message tab ui

dist/index.js

@@ -657,6 +657,10 @@
   var isEncryptionUnavailable = window.crypto.subtle == void 0;
   var senderName = restoreState("sender-name", "");
   var selectedChat = new State(void 0);
+  function closeChat() {
+    selectedChat.value = void 0;
+    document.getElementById("settings-tab")?.scrollIntoView();
+  }
   if (serverAddressInput.value != "" && didRequestConnection.value == true) {
     connect();
   }
@@ -665,6 +669,7 @@
   var englishTranslations = {
     // general
     setInput: "Set",
+    back: "Back",
     // overview
     overview: "Overview",
     connection: "Connection",
@@ -785,10 +790,7 @@
   var translation = allTranslations[language] ?? allTranslations.en;
 
   // src/Views/messageComposer.tsx
-  function MessageComposer() {
-    const composerContent = createProxyState([selectedChat], () => {
-      if (selectedChat.value == void 0) return /* @__PURE__ */ createElement("div", null);
-      const chat = selectedChat.value;
+  function MessageComposer(chat) {
     return /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, " ", /* @__PURE__ */ createElement(
       "input",
       {
@@ -807,16 +809,10 @@
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "send")
     ));
-    });
-    return /* @__PURE__ */ createElement("div", { "children:set": composerContent });
   }
 
   // src/Views/threadView.tsx
-  function ThreadView() {
-    const threadViewContent = createProxyState([selectedChat], () => {
-      if (selectedChat.value == void 0)
-        return /* @__PURE__ */ createElement("div", null, translation.noChatSelected);
-      const chat = selectedChat.value;
+  function ThreadView(chat) {
     const messageConverter = (message) => {
       function copyMessage() {
         navigator.clipboard.writeText(message.body);
@@ -841,14 +837,7 @@
           "on:click": decrypt2
         },
         /* @__PURE__ */ createElement("span", { class: "icon" }, "key")
-        ), /* @__PURE__ */ createElement(
-          "button",
-          {
-            "aria-label": translation.deleteMessage,
-            "on:click": remove
-          },
-          /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")
-        ))), /* @__PURE__ */ createElement("div", { class: "flex-column padding-h padding-bottom" }, /* @__PURE__ */ createElement("b", { class: "break-word", "subscribe:innerText": message.body }), /* @__PURE__ */ createElement("span", { class: "secondary" }, new Date(message.isoDate).toLocaleString()))));
+      ), /* @__PURE__ */ createElement("button", { "aria-label": translation.deleteMessage, "on:click": remove }, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("div", { class: "flex-column padding-h padding-bottom" }, /* @__PURE__ */ createElement("b", { class: "break-word", "subscribe:innerText": message.body }), /* @__PURE__ */ createElement("span", { class: "secondary" }, new Date(message.isoDate).toLocaleString()))));
     };
     return /* @__PURE__ */ createElement(
       "div",
@@ -857,27 +846,27 @@
         "children:append": [chat.messages, messageConverter]
       }
     );
-    });
-    return /* @__PURE__ */ createElement("div", { "children:set": threadViewContent });
   }
 
   // src/Tabs/messageTab.tsx
   function MessageTab() {
+    const messageTabContent = createProxyState([selectedChat], () => {
+      if (selectedChat.value == void 0)
+        return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 flex-column align-center justify-center" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, translation.noChatSelected));
+      const chat = selectedChat.value;
       function clearMessageHistory() {
-      selectedChat.value?.clearMessages();
+        chat.clearMessages();
       }
-    const headerText = createProxyState(
-      [selectedChat],
-      () => selectedChat.value != void 0 ? selectedChat.value.currentChannel : translation.messages
-    );
-    return /* @__PURE__ */ createElement("article", { id: "message-tab" }, /* @__PURE__ */ createElement("header", null, /* @__PURE__ */ createElement("span", { "subscribe:innerText": headerText }), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
+      return /* @__PURE__ */ createElement("article", { id: "message-tab" }, /* @__PURE__ */ createElement("header", { class: "padding-0" }, /* @__PURE__ */ createElement("span", { class: "flex-row align-center" }, /* @__PURE__ */ createElement("button", { "aria-label": translation.back, "on:click": closeChat }, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back")), /* @__PURE__ */ createElement("span", { "subscribe:innerText": chat.currentChannel })), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
         "button",
         {
           "aria-label": translation.clearHistory,
           "on:click": clearMessageHistory
         },
         /* @__PURE__ */ createElement("span", { class: "icon" }, "delete_sweep")
-    ))), ThreadView(), /* @__PURE__ */ createElement("footer", null, MessageComposer()));
+      ))), ThreadView(chat), /* @__PURE__ */ createElement("footer", null, MessageComposer(chat)));
+    });
+    return /* @__PURE__ */ createElement("div", { "children:set": messageTabContent });
   }
 
   // src/Views/connectionSection.tsx

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,25 +1,35 @@
 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 headerText = React.createProxyState([selectedChat], () =>
-    selectedChat.value != undefined
-      ? selectedChat.value.currentChannel
-      : translation.messages
+  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 chat = selectedChat.value;
+
+    function clearMessageHistory() {
+      chat.clearMessages();
+    }
+
     return (
       <article id="message-tab">
-      <header>
-        <span subscribe:innerText={headerText}>
+        <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
@@ -30,8 +40,11 @@ export function MessageTab() {
             </button>
           </span>
         </header>
-      {ThreadView()}
-      <footer>{MessageComposer()}</footer>
+        {ThreadView(chat)}
+        <footer>{MessageComposer(chat)}</footer>
       </article>
     );
+  });
+
+  return <div children:set={messageTabContent}></div>;
 }

src/Views/messageComposer.tsx

@@ -1,14 +1,9 @@
 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;
+export function MessageComposer(chat: Chat) {
   return (
     <div class="flex-row width-100">
       {" "}
@@ -28,7 +23,4 @@ export function MessageComposer() {
       </button>
     </div>
   );
-  });
-
-  return <div children:set={composerContent}></div>;
 }

src/Views/threadView.tsx

@@ -2,19 +2,10 @@ 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>;
-
-    const chat = selectedChat.value;
-
-    const messageConverter: React.ListItemConverter<ChatMessage> = (
-      message
-    ) => {
+export function ThreadView(chat: Chat) {
+  const messageConverter: React.ListItemConverter<ChatMessage> = (message) => {
     function copyMessage() {
       navigator.clipboard.writeText(message.body);
     }
@@ -47,10 +38,7 @@ export function ThreadView() {
               >
                 <span class="icon">key</span>
               </button>
-                <button
-                  aria-label={translation.deleteMessage}
-                  on:click={remove}
-                >
+              <button aria-label={translation.deleteMessage} on:click={remove}>
                 <span class="icon">delete</span>
               </button>
             </span>
@@ -72,7 +60,4 @@ export function ThreadView() {
       children:append={[chat.messages, messageConverter]}
     ></div>
   );
-  });
-
-  return <div children:set={threadViewContent}></div>;
 }

src/translations.ts

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