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,
-  [selected]:active {
+  button.tile.ghost:hover {
     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;
 }