add basic layout

src/Model/model.ts

@@ -139,6 +139,7 @@ export const chats = new React.ListState<Chat>();
 export const chatIds = React.restoreListState<string>("chat-ids");
 
 export const selectedChat = new React.State<Chat | undefined>(undefined);
+export const isShowingChatTools = new React.State(false);
 export const newChatName = new React.State("");
 
 export const cannotCreateChat = React.createProxyState(
@@ -154,6 +155,7 @@ export function createChat() {
 }
 
 export function closeChatView() {
+  isShowingChatTools.value = false;
   selectedChat.value = undefined;
   document.getElementById("settings-tab")?.scrollIntoView();
 }
@@ -164,6 +166,10 @@ export function selectChat(chat: Chat) {
   document.getElementById("message-tab")?.scrollIntoView();
 }
 
+export function toggleChatTools() {
+  isShowingChatTools.value = !isShowingChatTools.value;
+}
+
 chatIds.value.forEach((id) => chats.add(new Chat(id)));
 
 // INIT

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

src/Views/chatToolView.tsx

@@ -0,0 +1,12 @@
+import * as React from "bloatless-react";
+
+import { Chat } from "../Model/chatModel";
+import { translation } from "../translations";
+
+export function ChatToolView(chat: Chat) {
+  return (
+    <div class="chat-tool-view">
+      <span>Tools</span>
+    </div>
+  );
+}

src/Views/threadView.tsx

@@ -116,7 +116,7 @@ export function ThreadView(chat: Chat) {
     ></div>
   );
   const listWrapper = (
-    <div class="flex-column gap">
+    <div class="thread-view flex-column gap">
       {messageList}
       {outboxList}
     </div>

src/styles.css

@@ -1,3 +1,89 @@
 [unread] {
   border-left: 10px solid var(--text-warn);
 }
+
+/* TOOLS */
+:root {
+  --thread-view-height-with-tools: 8rem;
+  --thread-view-width-with-tools: 20rem;
+  --footer-top-line: calc(var(--control-height) + var(--safe-area-bottom));
+}
+
+#message-tab {
+  flex-direction: column;
+}
+
+.message-tab-content-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-tool-view {
+  display: none;
+}
+
+[showingchattools] :is(.thread-view, .chat-tool-view) {
+  overflow: scroll;
+  position: absolute;
+
+  padding: 0px;
+}
+
+[showingchattools] header {
+  border-bottom: 1px solid var(--border);
+}
+
+[showingchattools] .chat-tool-view {
+  display: flex;
+
+  top: var(--header-height);
+  bottom: calc(var(--thread-view-height-with-tools) + var(--footer-top-line));
+
+  border-bottom: 1px solid var(--border);
+}
+
+[showingchattools] .thread-view {
+  display: flex;
+
+  height: var(--thread-view-height-with-tools);
+
+  top: unset;
+  bottom: var(--footer-top-line);
+
+  flex: 1;
+}
+
+@media (max-height: 700px) and (min-width: 640px) {
+  main.split:has([showingchattools]) {
+    display: flex;
+  }
+
+  main.split:has([showingchattools]) #settings-tab {
+    display: none;
+  }
+}
+
+@media (min-width: 1400px) or ((max-height: 700px) and (min-width: 640px)) {
+  [showingchattools] :is(.thread-view, .chat-tool-view) {
+    top: var(--header-height);
+    bottom: var(--footer-top-line);
+  }
+
+  [showingchattools] .chat-tool-view {
+    left: 0px;
+    right: var(--thread-view-width-with-tools);
+
+    border-bottom: none;
+    border-right: 1px solid var(--border);
+  }
+
+  [showingchattools] .thread-view {
+    display: flex;
+
+    left: unset;
+    right: 0px;
+
+    height: unset;
+    width: var(--thread-view-width-with-tools);
+  }
+}

src/translations.ts

@@ -36,6 +36,7 @@ const englishTranslations = {
 
   // messages
   showChatOptions: "show chat options",
+  toggleChatTools: "toggle chat tools",
   configureChatTitle: "Configure Chat",
 
   secondaryChannel: "Secondary channel",