add basic layout

src/Tabs/messageTab.tsx

@@ -1,8 +1,9 @@
 import * as React from "bloatless-react";
 
-import { closeChatView, selectedChat } from "../Model/model";
+import { closeChatView, isShowingChatTools, selectedChat, toggleChatTools } from "../Model/model";
 
 import { ChatOptionModal } from "../Views/chatOptionModal";
+import { ChatToolView } from "../Views/chatToolView";
 import { MessageComposer } from "../Views/messageComposer";
 import { ThreadView } from "../Views/threadView";
 import { translation } from "../translations";
@@ -33,6 +34,13 @@ export function MessageTab() {
           <span subscribe:innerText={chat.primaryChannel}></span>
         </span>
         <span>
+          <button
+            aria-label={translation.toggleChatTools}
+            on:click={toggleChatTools}
+            toggle:selected={isShowingChatTools}
+          >
+            <span class="icon">architecture</span>
+          </button>
           <button
             aria-label={translation.showChatOptions}
             on:click={showOptions}
@@ -42,6 +50,7 @@ export function MessageTab() {
         </span>
       </header>,
 
+      ChatToolView(chat),
       ThreadView(chat),
 
       <footer>{MessageComposer(chat)}</footer>,
@@ -50,5 +59,11 @@ export function MessageTab() {
     ];
   });
 
-  return <article id="message-tab" children:set={messageTabContent}></article>;
+  return (
+    <article
+      toggle:showingchattools={isShowingChatTools}
+      id="message-tab"
+      children:set={messageTabContent}
+    ></article>
+  );
 }