add basic layout

dist/index.css

@@ -2,3 +2,66 @@
 [unread] {
   border-left: 10px solid var(--text-warn);
 }
+: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);
+  }
+}

dist/index.js

@@ -755,6 +755,7 @@
   var chats = new ListState();
   var chatIds = restoreListState("chat-ids");
   var selectedChat = new State(void 0);
+  var isShowingChatTools = new State(false);
   var newChatName = new State("");
   var cannotCreateChat = createProxyState(
     [newChatName],
@@ -766,6 +767,7 @@
     newChatName.value = "";
   }
   function closeChatView() {
+    isShowingChatTools.value = false;
     selectedChat.value = void 0;
     document.getElementById("settings-tab")?.scrollIntoView();
   }
@@ -774,6 +776,9 @@
     chat.hasUnreadMessages.value = false;
     document.getElementById("message-tab")?.scrollIntoView();
   }
+  function toggleChatTools() {
+    isShowingChatTools.value = !isShowingChatTools.value;
+  }
   chatIds.value.forEach((id) => chats.add(new Chat(id)));
   if (serverAddressInput.value != "" && didRequestConnection.value == true) {
     connect();
@@ -807,6 +812,7 @@
     addChat: "Add",
     // messages
     showChatOptions: "show chat options",
+    toggleChatTools: "toggle chat tools",
     configureChatTitle: "Configure Chat",
     secondaryChannel: "Secondary channel",
     secondaryChannelPlaceholder: "Add secondary channel",
@@ -1023,6 +1029,11 @@
     ), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": deleteChat }, translation.removeChat, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("button", { "on:click": closeModal }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
 
+  // src/Views/chatToolView.tsx
+  function ChatToolView(chat) {
+    return /* @__PURE__ */ createElement("div", { class: "chat-tool-view" }, /* @__PURE__ */ createElement("span", null, "Tools"));
+  }
+
   // src/Views/messageComposer.tsx
   function MessageComposer(chat) {
     return /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, " ", /* @__PURE__ */ createElement(
@@ -1108,7 +1119,7 @@
         "children:append": [chat.outbox, outboxMessageConverter]
       }
     );
-    const listWrapper = /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, messageList, outboxList);
+    const listWrapper = /* @__PURE__ */ createElement("div", { class: "thread-view flex-column gap" }, messageList, outboxList);
     function scrollToBottom() {
       const scrollFromBottom = listWrapper.scrollHeight - (listWrapper.scrollTop + listWrapper.offsetHeight);
       if (scrollFromBottom > 400) return;
@@ -1132,6 +1143,14 @@
       }
       return [
         /* @__PURE__ */ createElement("header", { class: "padding-0" }, /* @__PURE__ */ createElement("span", { class: "flex-row align-center" }, /* @__PURE__ */ createElement("button", { "aria-label": translation.back, "on:click": closeChatView }, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back")), /* @__PURE__ */ createElement("span", { "subscribe:innerText": chat.primaryChannel })), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
+          "button",
+          {
+            "aria-label": translation.toggleChatTools,
+            "on:click": toggleChatTools,
+            "toggle:selected": isShowingChatTools
+          },
+          /* @__PURE__ */ createElement("span", { class: "icon" }, "architecture")
+        ), /* @__PURE__ */ createElement(
           "button",
           {
             "aria-label": translation.showChatOptions,
@@ -1139,12 +1158,20 @@
           },
           /* @__PURE__ */ createElement("span", { class: "icon" }, "tune")
         ))),
+        ChatToolView(chat),
         ThreadView(chat),
         /* @__PURE__ */ createElement("footer", null, MessageComposer(chat)),
         ChatOptionModal(chat, isShowingOptions)
       ];
     });
-    return /* @__PURE__ */ createElement("article", { id: "message-tab", "children:set": messageTabContent });
+    return /* @__PURE__ */ createElement(
+      "article",
+      {
+        "toggle:showingchattools": isShowingChatTools,
+        id: "message-tab",
+        "children:set": messageTabContent
+      }
+    );
   }
 
   // src/Views/chatListSection.tsx

dist/styles.css

@@ -140,10 +140,12 @@ select,
 @media (hover: hover) {
   button:hover,
   select:hover,
-  button.tile.ghost:hover,
+  button.tile.ghost:hover {
-  [selected]:active {
     background-color: var(--surface-hover);
   }
+  [selected]:hover {
+    background-color: var(--surface);
+  }
 }
 button:active,
 select:active,
@@ -151,6 +153,9 @@ button.tile.ghost:active,
 [selected] {
   background-color: var(--surface-active);
 }
+[selected]:active {
+  background-color: var(--surface-hover);
+}
 header button {
   background-color: transparent;
 }

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",