prepare UI

src/Model/chatModel.ts

@@ -1,10 +1,9 @@
 import * as React from "bloatless-react";
 
-import { UDN, isConnected } from "./model";
+import { UDN, isConnected, senderName } from "./model";
 import { decryptString, encryptString } from "../cryptUtility";
 
 import { Message } from "udn-frontend";
-import { senderName } from "./viewModel";
 import { storageKeys } from "../utility";
 
 // TYPES

src/Model/model.ts

@@ -1,15 +1,17 @@
 import * as React from "bloatless-react";
 
+import { Chat, chats } from "./chatModel";
+
 import UDNFrontend from "udn-frontend";
-import { chats } from "./chatModel";
-import { serverAddress } from "./viewModel";
 
 export const UDN = new UDNFrontend();
 
 // CONNECTION
 // state
-export const isConnected = new React.State(false);
 export const currentAddress = new React.State("");
+export const isConnected = new React.State(false);
+
+export const serverAddressInput = React.restoreState("socket-address", "");
 
 export const cannotDisonnect = React.createProxyState(
   [isConnected],
@@ -17,18 +19,19 @@ export const cannotDisonnect = React.createProxyState(
 );
 
 export const cannotConnect = React.createProxyState(
-  [serverAddress, currentAddress, isConnected],
+  [serverAddressInput, currentAddress, isConnected],
   () =>
-    serverAddress.value == "" ||
-    (currentAddress.value == serverAddress.value && isConnected.value == true)
+    serverAddressInput.value == "" ||
+    (currentAddress.value == serverAddressInput.value &&
+      isConnected.value == true)
 );
 
 // methods
 export function connect(): void {
   if (cannotConnect.value == true) return;
-  currentAddress.value = serverAddress.value;
+  currentAddress.value = serverAddressInput.value;
   isConnected.value = false;
-  UDN.connect(serverAddress.value);
+  UDN.connect(serverAddressInput.value);
 }
 
 export function disconnect(): void {
@@ -36,23 +39,69 @@ export function disconnect(): void {
   UDN.disconnect();
 }
 
-// LISTENERS
+export function resetAddressInput(): void {
+  this.serverAddressInput.value = this.serverAddress.value;
+}
+
+// listeners
 UDN.onconnect = () => {
   isConnected.value = true;
 };
 
-
 UDN.onmessage = (data) => {
   chats.value.forEach((chat) => {
     chat.onmessage(data);
-  })
+  });
 };
 
 UDN.ondisconnect = () => {
   isConnected.value = false;
 };
 
+// MAILBOX
+export const mailboxId = React.restoreState("mailbox-id", "");
+export const isMailboxActive = new React.State(false);
+
+export const cannotDeleteMailbox = React.createProxyState(
+  [mailboxId, isMailboxActive],
+  () => mailboxId.value == "" || isMailboxActive.value == false
+);
+export const cannotRequestMailbox = React.createProxyState(
+  [isConnected, isMailboxActive],
+  () => isConnected.value == false || isMailboxActive.value == true
+);
+
+export function requestMailbox(): void {
+  if (cannotRequestMailbox.value == true) return;
+  UDN.requestMailbox();
+}
+
+export function deleteMailbox(): void {
+  if (cannotDeleteMailbox.value == true) return;
+  UDN.deleteMailbox(mailboxId.value);
+}
+
+UDN.onmailboxcreate = (id) => {
+  mailboxId.value = id;
+  UDN.connectMailbox(id);
+}
+
+UDN.onmailboxconnect = () => {
+  isMailboxActive.value = true;
+}
+
+UDN.onmailboxdelete = () => {
+  isMailboxActive.value = false;
+  mailboxId.value = "";
+}
+
+// MISC
+export const isEncryptionUnavailable = window.crypto.subtle == undefined;
+export const senderName = React.restoreState("sender-name", "");
+
+export const selectedChat = new React.State<Chat | undefined>(undefined);
+
 // INIT
-if (serverAddress.value != "") {
+if (serverAddressInput.value != "") {
   connect();
 }

src/Model/viewModel.ts

@@ -1,20 +0,0 @@
-import * as React from "bloatless-react";
-
-import { Chat } from "./chatModel";
-import { translation } from "../translations";
-
-// connection
-export const currentAddress = new React.State("");
-
-export const serverAddress = React.restoreState("socket-address", "");
-export const isConnected = new React.State(false);
-export const connectionMessage = React.createProxyState([serverAddress], () =>
-  translation.connectedTo(serverAddress.value)
-);
-
-// misc
-export const isEncryptionUnavailable = window.crypto.subtle == undefined;
-export const senderName = React.restoreState("sender-name", "");
-
-// chat
-export const selectedChat = new React.State<Chat | undefined>(undefined);

src/Tabs/messageTab.tsx

@@ -2,14 +2,25 @@ import * as React from "bloatless-react";
 
 import { MessageComposer } from "../Views/messageComposer";
 import { ThreadView } from "../Views/threadView";
-import { clearMessageHistory } from "../model";
+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
+  );
+
   return (
     <article id="message-tab">
       <header>
-        {translation.messages}
+        <span subscribe:innerText={headerText}>
+        </span>
         <span>
           <button
             aria-label={translation.clearHistory}

src/Tabs/settingsTab.tsx

@@ -1,20 +1,14 @@
 import * as React from "bloatless-react";
 
-import { CommunicationSection } from "../Views/communicationSection";
 import { ConnectionSection } from "../Views/connectionSection";
-import { EncryptionSection } from "../Views/encryptionSection";
-import { isConnected } from "../model";
+import { isConnected } from "../Model/model";
 import { translation } from "../translations";
 
 export function SettingsTab() {
   return (
     <article id="settings-tab" toggle:connected={isConnected}>
-      <header>{translation.settings}</header>
-      <div>
-        {ConnectionSection()}
-        {CommunicationSection()}
-        {EncryptionSection()}
-      </div>
+      <header>{translation.overview}</header>
+      <div>{ConnectionSection()}</div>
     </article>
   );
 }

src/Views/communicationSection.tsx

@@ -1,116 +0,0 @@
-import * as React from "bloatless-react";
-
-import {
-  Channel,
-  addSecondaryChannel,
-  cannotAddSecondaryChannel,
-  cannotLeaveChannel,
-  cannotSetChannel,
-  leaveChannel,
-  newSecondaryChannelName,
-  primaryChannel,
-  removeSecondaryChannel,
-  secondaryChannels,
-  senderName,
-  setChannel,
-} from "../model";
-
-import { translation } from "../translations";
-
-const secondaryChannelConverter: React.ListItemConverter<Channel> = (
-  channel
-) => {
-  function remove() {
-    removeSecondaryChannel(channel);
-  }
-
-  return (
-    <div class="tile padding-0">
-      <div class="flex-row justify-apart align-center">
-        <b class="padding-h">{channel.channelName}</b>
-
-        <button
-          class="danger"
-          aria-label={translation.removeSecondaryChannel}
-          on:click={remove}
-        >
-          <span class="icon">delete</span>
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export function CommunicationSection() {
-  return (
-    <div>
-      <h2>{translation.communication}</h2>
-
-      <label class="tile">
-        <span class="icon">account_circle</span>
-        <div>
-          <span>{translation.myName}</span>
-          <input
-            bind:value={senderName}
-            placeholder={translation.yourNamePlaceholder}
-          ></input>
-        </div>
-      </label>
-
-      <hr></hr>
-
-      <label class="tile">
-        <span class="icon">forum</span>
-        <div>
-          <span>{translation.primaryChannel}</span>
-          <input
-            bind:value={primaryChannel}
-            on:enter={setChannel}
-            placeholder={translation.channelPlaceholder}
-          ></input>
-        </div>
-      </label>
-      <div class="flex-row width-input justify-end">
-        <button
-          class="danger width-50"
-          on:click={leaveChannel}
-          toggle:disabled={cannotLeaveChannel}
-        >
-          {translation.leaveChannel}
-        </button>
-        <button
-          class="primary width-50"
-          on:click={setChannel}
-          toggle:disabled={cannotSetChannel}
-        >
-          {translation.setInput}
-          <span class="icon">check</span>
-        </button>
-      </div>
-
-      <hr></hr>
-
-      <div class="flex-row width-input margin-bottom">
-        <input
-          bind:value={newSecondaryChannelName}
-          on:enter={addSecondaryChannel}
-          placeholder={translation.newSecondaryChannelPlaceholder}
-          class="width-100 flex"
-        ></input>
-        <button
-          class="primary"
-          on:click={addSecondaryChannel}
-          toggle:disabled={cannotAddSecondaryChannel}
-          aria-label={translation.addSecondaryChannel}
-        >
-          <span class="icon">add</span>
-        </button>
-      </div>
-
-      <div
-        class="flex-column gap"
-        subscribe:children={[secondaryChannels, secondaryChannelConverter]}
-      ></div>
-    </div>
-  );
-}

src/Views/connectionSection.tsx

@@ -1,16 +1,86 @@
 import * as React from "bloatless-react";
 
-import { ConnectionInputView } from "./connectionSettingsView";
-import { ConnectionStatusView } from "./connectionStatusView";
+import {
+  cannotConnect,
+  cannotDeleteMailbox,
+  cannotDisonnect,
+  cannotRequestMailbox,
+  connect,
+  deleteMailbox,
+  disconnect,
+  requestMailbox,
+  serverAddressInput,
+} from "../Model/model";
+
 import { translation } from "../translations";
 
 export function ConnectionSection() {
   return (
-    <div>
-        <h2>{translation.connection}</h2>
-        {ConnectionStatusView()}
-        <hr></hr>
-        {ConnectionInputView()}
+    <div class="flex-column">
+      <label class="tile">
+        <span class="icon">cell_tower</span>
+        <div>
+          <span>{translation.serverAddress}</span>
+          <input
+            bind:value={serverAddressInput}
+            on:enter={connect}
+            placeholder={translation.serverAddressPlaceholder}
+          ></input>
+        </div>
+      </label>
+      <div class="flex-row width-input justify-end">
+        <button
+          class="danger width-100 flex-1"
+          aria-label={translation.disconnect}
+          on:click={disconnect}
+          toggle:disabled={cannotDisonnect}
+        >
+          <span class="icon">close</span>
+        </button>
+        <button
+          class="width-100 flex-1"
+          aria-label={translation.resetAddress}
+          on:click={disconnect}
+          toggle:disabled={cannotDisonnect}
+        >
+          <span class="icon">undo</span>
+        </button>
+        <button
+          class="primary width-100 flex-1"
+          aria-label={translation.connectToServer}
+          on:click={connect}
+          toggle:disabled={cannotConnect}
+        >
+          <span class="icon">arrow_forward</span>
+        </button>
+      </div>
+
+      <hr></hr>
+
+      <div class="tile">
+        <span class="icon">inbox</span>
+        <div>
+          <b>{translation.mailbox}</b>
+          <span class="secondary">{translation.mailboxExplanation}</span>
+        </div>
+      </div>
+      <div class="flex-row width-input justify-end">
+        <button
+          class="danger width-100 flex-1"
+          on:click={deleteMailbox}
+          toggle:disabled={cannotDeleteMailbox}
+        >
+          {translation.deleteMailbox}
+        </button>
+        <button
+          class="primary width-100 flex-1"
+          on:click={requestMailbox}
+          toggle:disabled={cannotRequestMailbox}
+        >
+          {translation.requestMailbox}
+          <span class="icon">arrow_forward</span>
+        </button>
+      </div>
     </div>
   );
 }

src/Views/connectionSettingsView.tsx

@@ -1,77 +0,0 @@
-import * as React from "bloatless-react";
-
-import {
-  cannotConnect,
-  cannotDeleteMailbox,
-  cannotDisonnect,
-  cannotRequestMailbox,
-  connect,
-  deleteMailbox,
-  disconnect,
-  requestMailbox,
-  serverAddress,
-} from "../model";
-
-import { translation } from "../translations";
-
-export function ConnectionInputView() {
-  return (
-    <div class="flex-column">
-      <label class="tile">
-        <span class="icon">cell_tower</span>
-        <div>
-          <span>{translation.serverAddress}</span>
-          <input
-            bind:value={serverAddress}
-            on:enter={connect}
-            placeholder={translation.serverAddressPlaceholder}
-          ></input>
-        </div>
-      </label>
-      <div class="flex-row width-input justify-end">
-        <button
-          class="danger width-50"
-          on:click={disconnect}
-          toggle:disabled={cannotDisonnect}
-        >
-          {translation.disconnect}
-        </button>
-        <button
-          class="primary width-50"
-          on:click={connect}
-          toggle:disabled={cannotConnect}
-        >
-          {translation.connectToServer}
-          <span class="icon">arrow_forward</span>
-        </button>
-      </div>
-
-      <hr></hr>
-
-      <div class="tile">
-        <span class="icon">inbox</span>
-        <div>
-          <b>{translation.mailbox}</b>
-          <span class="secondary">{translation.mailboxExplanation}</span>
-        </div>
-      </div>
-      <div class="flex-row width-input justify-end">
-        <button
-          class="danger width-50"
-          on:click={deleteMailbox}
-          toggle:disabled={cannotDeleteMailbox}
-        >
-          {translation.deleteMailbox}
-        </button>
-        <button
-          class="primary width-50"
-          on:click={requestMailbox}
-          toggle:disabled={cannotRequestMailbox}
-        >
-          {translation.requestMailbox}
-          <span class="icon">arrow_forward</span>
-        </button>
-      </div>
-    </div>
-  );
-}

src/Views/connectionStatusView.tsx

@@ -1,19 +0,0 @@
-import * as React from "bloatless-react";
-
-import { connectionMessage } from "../model";
-import { translation } from "../translations";
-
-export function ConnectionStatusView() {
-  return (
-    <div class="tile width-input">
-      <div>
-        <b>{translation.connectionStatus}</b>
-        <span
-          class="success connected-only"
-          subscribe:innerText={connectionMessage}
-        ></span>
-        <span class="error disconnected-only">{translation.disconnected}</span>
-      </div>
-    </div>
-  );
-}

src/Views/encryptionSection.tsx

@@ -1,45 +0,0 @@
-import * as React from "bloatless-react";
-
-import { encryptionKey, isEncryptionUnavailable } from "../model";
-
-import { translation } from "../translations";
-
-const shouldShowKey = new React.State(false);
-const inputType = React.createProxyState([shouldShowKey], () =>
-  shouldShowKey.value ? "text" : "password"
-);
-
-export function EncryptionSection() {
-  return (
-    <div>
-      <h2>{translation.encryption}</h2>
-      <div
-        class="error tile margin-bottom"
-        toggle:hidden={!isEncryptionUnavailable}
-      >
-        <span class="icon">warning</span>
-        <div>
-          <b>{translation.encryptionUnavailableTitle}</b>
-          <p>{translation.encryptionUnavailableMessage}</p>
-        </div>
-      </div>
-
-      <label class="tile">
-        <span class="icon">key</span>
-        <div>
-          <span>{translation.encryptionKey}</span>
-          <input
-            toggle:disabled={isEncryptionUnavailable}
-            bind:value={encryptionKey}
-            set:type={inputType}
-            placeholder={translation.encryptionKeyPlaceholder}
-          ></input>
-        </div>
-      </label>
-      <label class="inline">
-        <input type="checkbox" bind:checked={shouldShowKey}></input>
-        {translation.showEncryptionKey}
-      </label>
-    </div>
-  );
-}

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

src/Views/threadView.tsx

@@ -1,64 +1,78 @@
 import * as React from "bloatless-react";
 
-import {
-  Message,
-  decryptReceivedMessage,
-  deleteMessage,
-  messages,
-} from "../model";
+import { Chat, ChatMessage } from "../Model/chatModel";
 
+import { selectedChat } from "../Model/model";
 import { translation } from "../translations";
 
-const messageConverter: React.ListItemConverter<Message> = (message) => {
-  const messageBody = React.createProxyState([messages], () => message.body);
-
-  function copyMessage() {
-    navigator.clipboard.writeText(message.body);
-  }
-
-  function decrypt() {
-    decryptReceivedMessage(message);
-  }
-
-  function remove() {
-    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={messageBody}></b>
-          <span class="secondary">
-            {new Date(message.isoDate).toLocaleString()}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
 export function ThreadView() {
-  return (
-    <div
-      class="flex-column gap"
-      subscribe:children={[messages, messageConverter]}
-    ></div>
-  );
+  const threadViewContent = React.createProxyState([selectedChat], () => {
+    if (selectedChat.value == undefined)
+      return <div>{translation.noChatSelected}</div>;
+
+    const chat = selectedChat.value;
+
+    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>
+      );
+    };
+
+    return (
+      <div
+        class="flex-column gap"
+        children:append={[chat.messages, messageConverter]}
+      ></div>
+    );
+  });
+
+  return <div children:set={threadViewContent}></div>;
 }

src/index.tsx

@@ -1,22 +1,5 @@
-import "./styles.css";
-
-import * as React from "bloatless-react";
-
 import { MessageTab } from "./Tabs/messageTab";
 import { SettingsTab } from "./Tabs/settingsTab";
-import { translation } from "./translations";
 
-document.body.prepend(
-  <menu class="mobile-only">
-    <a class="tab-link" href="#settings-tab" active>
-        <span class="icon">settings</span>
-        {translation.settings}
-    </a>
-    <a class="tab-link" href="#message-tab">
-        <span class="icon">forum</span>
-        {translation.messages}
-    </a>
-  </menu>
-);
 document.querySelector("main")!.append(SettingsTab(), MessageTab());
 document.querySelector("main")!.classList.add("split");

src/styles.css

@@ -1,30 +0,0 @@
-#settings-tab > div {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-#settings-tab > div > div {
-  width: var(--max-input-width);
-  min-width: 100%;
-  max-width: 100%;
-  flex: 1;
-}
-
-/* CONNECTION */
-
-article:not([connected]) .connected-only {
-  display: none;
-}
-
-article:not([connected]) .disconnected-only {
-  display: flex;
-}
-
-article[connected] .connected-only {
-  display: flex;
-}
-
-article[connected] .disconnected-only {
-  display: none;
-}

src/translations.ts

@@ -1,19 +1,23 @@
 const englishTranslations = {
   // general
   setInput: "Set",
-  connectionStatus: "Connection status",
-  connectedTo: (server: string) => `Connected to "${server}"`,
-  disconnected: "Disconnected",
 
-  // settings
-  settings: "Settings",
+  // overview
+  overview: "Overview",
+
   connection: "Connection",
   communication: "Communication",
   encryption: "Encryption",
+
   serverAddress: "Server Address",
   serverAddressPlaceholder: "wss://192.168.0.69:3000",
+
   connectToServer: "Connect",
   disconnect: "Disonnect",
+  resetAddress: "Reset address",
+  
+  noChatSelected: "No chat selected",
+
   primaryChannel: "Primary channel",
   leaveChannel: "Leave",
   channelPlaceholder: "my-channel",
@@ -50,12 +54,9 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
   es: {
     // general
     setInput: "OK",
-    connectionStatus: "Estado de Conexión",
-    connectedTo: (server: string) => `Conectado a "${server}"`,
-    disconnected: "Desconectado",
 
     // settings
-    settings: "Configuración",
+    overview: "Configuración",
     connection: "Conexión",
     communication: "Comunicación",
     encryption: "Cifrado",
@@ -96,12 +97,9 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
   de: {
     // general
     setInput: "OK",
-    connectionStatus: "Verbindungsstatus",
-    connectedTo: (server: string) => `Verbunden mit "${server}"`,
-    disconnected: "Verbindung getrennt",
 
     // settings
-    settings: "Einstellungen",
+    overview: "Einstellungen",
     connection: "Verbindung",
     communication: "Kommunikation",
     encryption: "Verschlüsselung",