finish chat so far

src/Tabs/messageTab.tsx

@@ -2,6 +2,7 @@ import * as React from "bloatless-react";
 
 import { closeChatView, selectedChat } from "../Model/model";
 
+import { ChatOptionModal } from "../Views/chatOptionModal";
 import { MessageComposer } from "../Views/messageComposer";
 import { ThreadView } from "../Views/threadView";
 import { translation } from "../translations";
@@ -16,9 +17,13 @@ export function MessageTab() {
       );
 
     const chat = selectedChat.value;
+    const isShowingOptions = new React.State(false);
 
-    function clearMessageHistory() {
-      chat.clearMessages();
+    function showOptions() {
+      isShowingOptions.value = true;
+    }
+    function hideOptions() {
+      isShowingOptions.value = false;
     }
 
     return (
@@ -29,19 +34,21 @@ export function MessageTab() {
               <span class="icon">arrow_back</span>
             </button>
 
-            <span subscribe:innerText={chat.currentChannel}></span>
+            <span subscribe:innerText={chat.primaryChannel}></span>
           </span>
           <span>
             <button
-              aria-label={translation.clearHistory}
-              on:click={clearMessageHistory}
+              aria-label={translation.showChatOptions}
+              on:click={showOptions}
             >
-              <span class="icon">delete_sweep</span>
+              <span class="icon">tune</span>
             </button>
           </span>
         </header>
         {ThreadView(chat)}
         <footer>{MessageComposer(chat)}</footer>
+
+        {ChatOptionModal(chat, isShowingOptions)}
       </article>
     );
   });

src/Tabs/overviewTab.tsx

@@ -1,15 +1,28 @@
 import * as React from "bloatless-react";
 
+import { isConnected, isEncryptionAvailable } from "../Model/model";
+
 import { ChatListSection } from "../Views/chatListSection";
 import { ConnectionSection } from "../Views/connectionSection";
-import { isConnected } from "../Model/model";
 import { translation } from "../translations";
 
-export function SettingsTab() {
+export function OverviewTab() {
   return (
     <article id="settings-tab" toggle:connected={isConnected}>
       <header>{translation.overview}</header>
+
       <div class="flex-column large-gap">
+        
+        <div class="tile error flex-no" toggle:hidden={isEncryptionAvailable}>
+          <span class="icon">warning</span>
+          <div>
+            <b>{translation.encryptionUnavailableTitle}</b>
+            <span class="secondary">
+              {translation.encryptionUnavailableMessage}
+            </span>
+          </div>
+        </div>
+
         {ConnectionSection()}
         {ChatListSection()}
       </div>