add basic model and interface

src/Views/communicationSection.tsx

@@ -0,0 +1,107 @@
+import * as React from "bloatless-react";
+
+import {
+  Channel,
+  addSecondaryChannel,
+  cannotAddSecondaryChannel,
+  cannotSetChannel,
+  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.yourName}</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="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

@@ -0,0 +1,16 @@
+import * as React from "bloatless-react";
+
+import { ConnectionInputView } from "./connectionSettingsView";
+import { ConnectionStatusView } from "./connectionStatusView";
+import { translation } from "../translations";
+
+export function ConnectionSection() {
+  return (
+    <div>
+        <h2>{translation.connection}</h2>
+        {ConnectionStatusView()}
+        <hr></hr>
+        {ConnectionInputView()}
+    </div>
+  );
+}

src/Views/connectionSettingsView.tsx

@@ -0,0 +1,37 @@
+import * as React from "bloatless-react";
+
+import {
+  cannotConnect,
+  connect,
+  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="primary width-50"
+          on:click={connect}
+          toggle:disabled={cannotConnect}
+        >
+          {translation.connectToServer}
+          <span class="icon">arrow_forward</span>
+        </button>
+      </div>
+    </div>
+  );
+}

src/Views/connectionStatusView.tsx

@@ -0,0 +1,18 @@
+import * as React from "bloatless-react";
+
+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={translation.connectedTo}
+        ></span>
+        <span class="error disconnected-only">{translation.disconnected}</span>
+      </div>
+    </div>
+  );
+}

src/Views/encryptionSection.tsx

@@ -0,0 +1,32 @@
+import * as React from "bloatless-react";
+
+import { encryptionKey } 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>
+      <label class="tile">
+        <span class="icon">key</span>
+        <div>
+          <span>{translation.encryptionKey}</span>
+          <input
+            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

@@ -0,0 +1,26 @@
+import * as React from "bloatless-react";
+
+import { cannotSendMessage, messageBody, sendMessage } from "../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>
+  );
+}

src/Views/threadView.tsx

@@ -0,0 +1,28 @@
+import * as React from "bloatless-react";
+
+import {
+  Message,
+  messages,
+} from "../model";
+
+const messageConverter: React.ListItemConverter<Message> = (message) => {
+  return (
+    <div class="tile width-100 flex-no">
+      <div class="flex-column">
+        <span class="secondary">
+          {message.sender}@{message.channel}
+        </span>
+        <b>{message.body}</b>
+        <span class="secondary">
+          {new Date(message.isoDate).toLocaleString()}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export function ThreadView() {
+  return (
+    <div class="flex-column gap" subscribe:children={[messages, messageConverter]}></div>
+  );
+}