add basic model and interface

src/Tabs/messageTab.tsx

@@ -0,0 +1,15 @@
+import * as React from "bloatless-react";
+
+import { MessageComposer } from "../Views/messageComposer";
+import { ThreadView } from "../Views/threadView";
+import { translation } from "../translations";
+
+export function MessageTab() {
+  return (
+    <article id="message-tab">
+      <header>{translation.messages}</header>
+      {ThreadView()}
+      <footer>{MessageComposer()}</footer>
+    </article>
+  );
+}

src/Tabs/settingsTab.tsx

@@ -0,0 +1,28 @@
+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 { translation } from "../translations";
+
+export function SettingsTab() {
+  return (
+    <article id="settings-tab" toggle:connected={isConnected}>
+      <header>{translation.settings}</header>
+      <div>
+        {ConnectionSection()}
+        {CommunicationSection()}
+        {EncryptionSection()}
+        <hr class="mobile-only"></hr>
+        <a
+          href="#message-tab"
+          class="mobile-only width-100 flex-row justify-end control-gap"
+        >
+          {translation.messages}
+          <span class="icon">arrow_forward</span>
+        </a>
+      </div>
+    </article>
+  );
+}