addingg toggle to split or hide chat

dist/index.css

@@ -3,9 +3,8 @@
   border-left: 10px solid var(--text-warning);
 }
 :root {
-  --thread-view-height-with-tools: 8rem;
+  --split-thread-height: 8rem;
-  --thread-view-width-with-tools: 20rem;
+  --split-thread-width: 20rem;
-  --footer-top-line: calc(var(--control-height) + var(--safe-area-bottom));
 }
 .object-entry-wide {
   width: 320px;
@@ -14,58 +13,59 @@
 #message-tab {
   flex-direction: column;
 }
-.message-tab-content-wrapper {
-  display: flex;
-  flex-direction: column;
-}
 .chat-object-view {
   display: none;
 }
-#message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) {
+[showingobjects] header {
-  overflow: scroll;
-  position: absolute;
-  padding: 0px;
-}
-#message-tab:has([showingchattools]) header {
   border-bottom: 1px solid var(--border);
 }
-#message-tab:has([showingchattools]) .chat-object-view {
+[showingobjects] footer {
+  display: none;
+}
+[showingobjects] .chat-object-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);
 }
-#message-tab:has([showingchattools]) .thread-view {
+[showingobjects] .thread-view {
+  display: none;
+}
+[showingobjects][chatvisible] .chat-object-view {
+  right: var(--split-thread-width);
+  border-right: 1px solid var(--border);
+}
+[showingobjects][chatvisible] .thread-view {
+  top: var(--header-height);
+  padding-top: var(--content-padding);
+}
+[showingobjects][chatvisible] :is(.thread-view, footer) {
   display: flex;
-  height: var(--thread-view-height-with-tools);
+  right: 0px;
-  top: unset;
+  left: unset;
-  bottom: var(--footer-top-line);
+  width: var(--split-thread-width);
-  flex: 1;
 }
-@media (min-width: 640px) and (max-width: 1400px) {
+@media (max-width: 1300px) {
-  main.split:has(#message-tab [showingchattools]) {
+  main:has([showingobjects][chatopen]) {
     display: flex;
   }
-  main.split:has(#message-tab [showingchattools]) #settings-tab {
+  main:has([showingobjects][chatopen]) #settings-tab {
     display: none;
   }
 }
-@media (min-width: 640px) {
+@media (max-width: 640px) {
-  #message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) {
+  [showingobjects][chatvisible][chatopen] .chat-object-view {
-    top: var(--header-height);
+    width: 100%;
-    bottom: var(--footer-top-line);
+    bottom: calc(var(--split-thread-height) + var(--control-height));
+    border-right: none;
+    border-bottom: 1px solid var(--border);
   }
-  #message-tab:has([showingchattools]) .chat-object-view {
+  [showingobjects][chatvisible][chatopen] .thread-view {
-    left: 0px;
+    top: unset;
-    right: var(--thread-view-width-with-tools);
+    bottom: var(--control-height);
-    border-bottom: none;
+    width: 100%;
-    border-right: 1px solid var(--border);
+    height: var(--split-thread-height);
+    padding: 0px;
   }
-  #message-tab:has([showingchattools]) .thread-view {
+  [showingobjects][chatvisible][chatopen] footer {
-    display: flex;
+    width: 100%;
-    left: unset;
-    right: 0px;
-    height: unset;
-    width: var(--thread-view-width-with-tools);
   }
 }

dist/index.js

@@ -1319,6 +1319,18 @@
   var chatIds = restoreListState("chat-ids");
   var selectedChat = new State(void 0);
   var isShowingObjects = restoreState("showing-objects", false);
+  var isShowingChatInSplit = restoreState(
+    "showing-chat-split",
+    false
+  );
+  var isChatOpen = createProxyState(
+    [selectedChat],
+    () => selectedChat.value != void 0
+  );
+  var isChatVisible = createProxyState(
+    [isShowingObjects, isShowingChatInSplit],
+    () => isShowingObjects.value == false || isShowingChatInSplit.value == true
+  );
   var newChatName = new State("");
   var cannotCreateChat = createProxyState(
     [newChatName],
@@ -1338,9 +1350,12 @@
     chat.hasUnreadMessages.value = false;
     document.getElementById("message-tab")?.scrollIntoView();
   }
-  function toggleChatTools() {
+  function toggleObjects() {
     isShowingObjects.value = !isShowingObjects.value;
   }
+  function toggleChat() {
+    isShowingChatInSplit.value = !isShowingChatInSplit.value;
+  }
   chatIds.value.forEach((id) => chats.add(new Chat(id)));
   if (serverAddressInput.value != "" && didRequestConnection.value == true) {
     connect();
@@ -2049,7 +2064,7 @@
       selectedObject.value = newObject;
       isShowingObjectModal.value = true;
     }
-    return /* @__PURE__ */ createElement("div", { class: "chat-object-view flex-column scroll-no" }, /* @__PURE__ */ createElement("div", { class: "flex-row align-center border-bottom" }, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { class: "chat-object-view flex-column scroll-no padding-0" }, /* @__PURE__ */ createElement("div", { class: "flex-row align-center border-bottom" }, /* @__PURE__ */ createElement(
       "button",
       {
         class: "primary height-100",
@@ -2062,7 +2077,7 @@
     )), /* @__PURE__ */ createElement("button", { class: "height-100", disabled: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "visibility"))), /* @__PURE__ */ createElement(
       "div",
       {
-        class: "width-100 height-100 flex scroll-no",
+        class: "object-content width-100 height-100 flex scroll-no",
         "children:set": mainView
       }
     ), /* @__PURE__ */ createElement("div", { "children:set": objectModal }));
@@ -2142,15 +2157,7 @@
         "children:append": [chat.outbox, outboxMessageConverter]
       }
     );
-    const listWrapper = /* @__PURE__ */ createElement(
+    const listWrapper = /* @__PURE__ */ createElement("div", { class: "thread-view flex-column gap" }, messageList, outboxList);
-      "div",
-      {
-        class: "thread-view flex-column gap",
-        "toggle:showingchattools": isShowingObjects
-      },
-      messageList,
-      outboxList
-    );
     function scrollToBottom() {
       listWrapper.scrollTop = listWrapper.scrollHeight;
     }
@@ -2181,10 +2188,18 @@
           "button",
           {
             "aria-label": translation.showObjects,
-            "on:click": toggleChatTools,
+            "on:click": toggleObjects,
             "toggle:selected": isShowingObjects
           },
           /* @__PURE__ */ createElement("span", { class: "icon" }, "deployed_code")
+        ), /* @__PURE__ */ createElement(
+          "button",
+          {
+            "aria-label": translation.showObjects,
+            "on:click": toggleChat,
+            "toggle:selected": isChatVisible
+          },
+          /* @__PURE__ */ createElement("span", { class: "icon" }, "forum")
         ), /* @__PURE__ */ createElement(
           "button",
           {
@@ -2203,7 +2218,10 @@
       "article",
       {
         id: "message-tab",
-        "children:set": messageTabContent
+        "children:set": messageTabContent,
+        "toggle:showingobjects": isShowingObjects,
+        "toggle:chatvisible": isChatVisible,
+        "toggle:chatopen": isChatOpen
       }
     );
   }

src/Model/model.ts

@@ -209,7 +209,21 @@ 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 isShowingObjects = React.restoreState("showing-objects", false);
+export const isShowingChatInSplit = React.restoreState(
+  "showing-chat-split",
+  false
+);
+export const isChatOpen = React.createProxyState(
+  [selectedChat],
+  () => selectedChat.value != undefined
+);
+export const isChatVisible = React.createProxyState(
+  [isShowingObjects, isShowingChatInSplit],
+  () => isShowingObjects.value == false || isShowingChatInSplit.value == true
+);
+
 export const newChatName = new React.State("");
 
 export const cannotCreateChat = React.createProxyState(
@@ -235,10 +249,14 @@ export function selectChat(chat: Chat) {
   document.getElementById("message-tab")?.scrollIntoView();
 }
 
-export function toggleChatTools() {
+export function toggleObjects() {
   isShowingObjects.value = !isShowingObjects.value;
 }
 
+export function toggleChat() {
+  isShowingChatInSplit.value = !isShowingChatInSplit.value;
+}
+
 chatIds.value.forEach((id) => chats.add(new Chat(id)));
 
 // INIT

src/Tabs/messageTab.tsx

@@ -1,6 +1,14 @@
 import * as React from "bloatless-react";
 
-import { closeChatView, isShowingObjects, selectedChat, toggleChatTools } from "../Model/model";
+import {
+  closeChatView,
+  isChatOpen,
+  isChatVisible,
+  isShowingObjects,
+  selectedChat,
+  toggleChat,
+  toggleObjects,
+} from "../Model/model";
 
 import { ChatOptionModal } from "../Views/Chat/chatOptionModal";
 import { MessageComposer } from "../Views/Chat/messageComposer";
@@ -36,11 +44,18 @@ export function MessageTab() {
         <span>
           <button
             aria-label={translation.showObjects}
-            on:click={toggleChatTools}
+            on:click={toggleObjects}
             toggle:selected={isShowingObjects}
           >
             <span class="icon">deployed_code</span>
           </button>
+          <button
+            aria-label={translation.showObjects} // TODO
+            on:click={toggleChat}
+            toggle:selected={isChatVisible}
+          >
+            <span class="icon">forum</span>
+          </button>
           <button
             aria-label={translation.showChatOptions}
             on:click={showOptions}
@@ -63,6 +78,9 @@ export function MessageTab() {
     <article
       id="message-tab"
       children:set={messageTabContent}
+      toggle:showingobjects={isShowingObjects}
+      toggle:chatvisible={isChatVisible}
+      toggle:chatopen={isChatOpen}
     ></article>
   );
 }

src/Views/Chat/threadView.tsx

@@ -2,6 +2,7 @@ import * as React from "bloatless-react";
 
 import { Chat, ChatMessage } from "../../Model/chatModel";
 
+import { MessageComposer } from "./messageComposer";
 import { isShowingObjects } from "../../Model/model";
 import { translation } from "../../translations";
 
@@ -117,10 +118,7 @@ export function ThreadView(chat: Chat) {
     ></div>
   );
   const listWrapper = (
-    <div
+    <div class="thread-view flex-column gap">
-      class="thread-view flex-column gap"
-      toggle:showingchattools={isShowingObjects}
-    >
       {messageList}
       {outboxList}
     </div>

src/Views/Objects/objectPane.tsx

@@ -61,7 +61,7 @@ export function ObjectPane(chat: Chat) {
   }
 
   return (
-    <div class="chat-object-view flex-column scroll-no">
+    <div class="chat-object-view flex-column scroll-no padding-0">
       <div class="flex-row align-center border-bottom">
         <button
           class="primary height-100"
@@ -83,7 +83,7 @@ export function ObjectPane(chat: Chat) {
       </div>
 
       <div
-        class="width-100 height-100 flex scroll-no"
+        class="object-content width-100 height-100 flex scroll-no"
         children:set={mainView}
       ></div>
 

src/styles.css

@@ -4,9 +4,8 @@
 
 /* OBJECTS */
 :root {
-  --thread-view-height-with-tools: 8rem;
+  --split-thread-height: 8rem;
-  --thread-view-width-with-tools: 20rem;
+  --split-thread-width: 20rem;
-  --footer-top-line: calc(var(--control-height) + var(--safe-area-bottom));
 }
 
 .object-entry-wide {
@@ -18,77 +17,79 @@
   flex-direction: column;
 }
 
-.message-tab-content-wrapper {
+/* standard */
-  display: flex;
-  flex-direction: column;
-}
-
 .chat-object-view {
   display: none;
 }
 
-#message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) {
+/* objects */
-  overflow: scroll;
+[showingobjects] header {
-  position: absolute;
-
-  padding: 0px;
-}
-
-#message-tab:has([showingchattools]) header {
   border-bottom: 1px solid var(--border);
 }
 
-#message-tab:has([showingchattools]) .chat-object-view {
+[showingobjects] footer {
-  display: flex;
+  display: none;
+}
 
+[showingobjects] .chat-object-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);
 }
 
-#message-tab:has([showingchattools]) .thread-view {
+[showingobjects] .thread-view {
+  display: none;
+}
+
+/* objects split */
+[showingobjects][chatvisible] .chat-object-view {
+  right: var(--split-thread-width);
+  border-right: 1px solid var(--border);
+}
+
+[showingobjects][chatvisible] .thread-view {
+  top: var(--header-height);
+  padding-top: var(--content-padding);
+}
+
+[showingobjects][chatvisible] :is(.thread-view, footer) {
   display: flex;
 
-  height: var(--thread-view-height-with-tools);
+  right: 0px;
+  left: unset;
 
-  top: unset;
+  width: var(--split-thread-width);
-  bottom: var(--footer-top-line);
-
-  flex: 1;
 }
 
-@media (min-width: 640px) and (max-width: 1400px) {
+@media (max-width: 1300px) {
-  main.split:has(#message-tab [showingchattools]) {
+  main:has([showingobjects][chatopen]) {
     display: flex;
   }
 
-  main.split:has(#message-tab [showingchattools]) #settings-tab {
+  main:has([showingobjects][chatopen]) #settings-tab {
     display: none;
   }
 }
 
-@media (min-width: 640px) {
+@media (max-width: 640px) {
-  #message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) {
+  [showingobjects][chatvisible][chatopen] .chat-object-view {
-    top: var(--header-height);
+    width: 100%;
-    bottom: var(--footer-top-line);
+    bottom: calc(var(--split-thread-height) + var(--control-height));
+
+    border-right: none;
+    border-bottom: 1px solid var(--border);
   }
 
-  #message-tab:has([showingchattools]) .chat-object-view {
+  [showingobjects][chatvisible][chatopen] .thread-view {
-    left: 0px;
+    top: unset;
-    right: var(--thread-view-width-with-tools);
+    bottom: var(--control-height);
 
-    border-bottom: none;
+    width: 100%;
-    border-right: 1px solid var(--border);
+    height: var(--split-thread-height);
+
+    padding: 0px;
   }
 
-  #message-tab:has([showingchattools]) .thread-view {
+  [showingobjects][chatvisible][chatopen] footer {
-    display: flex;
+    width: 100%;
-
-    left: unset;
-    right: 0px;
-
-    height: unset;
-    width: var(--thread-view-width-with-tools);
   }
 }