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,99 +790,83 @@
   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;
-      return /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, " ", /* @__PURE__ */ createElement(
-        "input",
-        {
-          class: "width-100 flex-1",
-          style: "max-width: unset",
-          placeholder: translation.composerPlaceholder,
-          "bind:value": chat.composingMessage,
-          "on:enter": chat.sendMessage
-        }
-      ), /* @__PURE__ */ createElement(
-        "button",
-        {
-          class: "primary",
-          "on:click": chat.sendMessage,
-          "toggle:disabled": chat.cannotSendMessage
-        },
-        /* @__PURE__ */ createElement("span", { class: "icon" }, "send")
-      ));
-    });
-    return /* @__PURE__ */ createElement("div", { "children:set": composerContent });
+  function MessageComposer(chat) {
+    return /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, " ", /* @__PURE__ */ createElement(
+      "input",
+      {
+        class: "width-100 flex-1",
+        style: "max-width: unset",
+        placeholder: translation.composerPlaceholder,
+        "bind:value": chat.composingMessage,
+        "on:enter": chat.sendMessage
+      }
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary",
+        "on:click": chat.sendMessage,
+        "toggle:disabled": chat.cannotSendMessage
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "send")
+    ));
   }
 
   // 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;
-      const messageConverter = (message) => {
-        function copyMessage() {
-          navigator.clipboard.writeText(message.body);
-        }
-        function decrypt2() {
-          chat.decryptReceivedMessage(message);
-        }
-        function remove() {
-          chat.deleteMessage(message);
-        }
-        return /* @__PURE__ */ createElement("div", { class: "tile width-100 flex-no padding-0" }, /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("div", { class: "flex-row justify-apart align-center secondary" }, /* @__PURE__ */ createElement("span", { class: "padding-h ellipsis" }, /* @__PURE__ */ createElement("b", { class: "info" }, message.sender), " - ", message.channel), /* @__PURE__ */ createElement("span", { class: "flex-row" }, /* @__PURE__ */ createElement(
-          "button",
-          {
-            "aria-label": translation.copyMessage,
-            "on:click": copyMessage
-          },
-          /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")
-        ), /* @__PURE__ */ createElement(
-          "button",
-          {
-            "aria-label": translation.decryptMessage,
-            "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()))));
-      };
-      return /* @__PURE__ */ createElement(
-        "div",
+  function ThreadView(chat) {
+    const messageConverter = (message) => {
+      function copyMessage() {
+        navigator.clipboard.writeText(message.body);
+      }
+      function decrypt2() {
+        chat.decryptReceivedMessage(message);
+      }
+      function remove() {
+        chat.deleteMessage(message);
+      }
+      return /* @__PURE__ */ createElement("div", { class: "tile width-100 flex-no padding-0" }, /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("div", { class: "flex-row justify-apart align-center secondary" }, /* @__PURE__ */ createElement("span", { class: "padding-h ellipsis" }, /* @__PURE__ */ createElement("b", { class: "info" }, message.sender), " - ", message.channel), /* @__PURE__ */ createElement("span", { class: "flex-row" }, /* @__PURE__ */ createElement(
+        "button",
         {
-          class: "flex-column gap",
-          "children:append": [chat.messages, messageConverter]
-        }
-      );
-    });
-    return /* @__PURE__ */ createElement("div", { "children:set": threadViewContent });
+          "aria-label": translation.copyMessage,
+          "on:click": copyMessage
+        },
+        /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")
+      ), /* @__PURE__ */ createElement(
+        "button",
+        {
+          "aria-label": translation.decryptMessage,
+          "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()))));
+    };
+    return /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "flex-column gap",
+        "children:append": [chat.messages, messageConverter]
+      }
+    );
   }
 
   // src/Tabs/messageTab.tsx
   function MessageTab() {
-    function clearMessageHistory() {
-      selectedChat.value?.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(
-      "button",
-      {
-        "aria-label": translation.clearHistory,
-        "on:click": clearMessageHistory
-      },
-      /* @__PURE__ */ createElement("span", { class: "icon" }, "delete_sweep")
-    ))), ThreadView(), /* @__PURE__ */ createElement("footer", null, MessageComposer()));
+    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() {
+        chat.clearMessages();
+      }
+      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(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,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",