prepare UI

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