addingg toggle to split or hide chat

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