continue layout, add button to close chat page

dist/index.css

@@ -125,6 +125,31 @@ main {
   grid-column: 2 / 3;
   grid-row: 2 / 3;
 }
+#chat-page #ribbon,
+#chat-page #toolbar,
+#chat-page #main {
+  display: flex;
+}
+#chat-page #ribbon,
+#chat-page #main {
+  flex-direction: column;
+}
+#chat-page #ribbon > span,
+#chat-page #toolbar > span {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gap-between-tiles);
+}
+#chat-page #ribbon {
+  justify-content: space-between;
+}
+#chat-page #ribbon button {
+  padding: 0px;
+  width: 100%;
+  height: var(--control-height);
+  align-items: center;
+  justify-content: center;
+}
 
 /* src/View/homePage.css */
 #home-page > div {

dist/index.js

@@ -525,6 +525,9 @@
     open = () => {
       this.chatListViewModel.openChat(this);
     };
+    close = () => {
+      this.chatListViewModel.closeChat();
+    };
     // init
     constructor(chatListViewModel2, chatModel) {
       this.chatModel = chatModel;
@@ -582,37 +585,6 @@
     }
   };
 
-  // src/View/chatPage.tsx
-  function ChatPage(chatViewModel) {
-    return /* @__PURE__ */ createElement("article", { id: "chat-page" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }), /* @__PURE__ */ createElement("div", { id: "toolbar" }), /* @__PURE__ */ createElement("div", { id: "main" })));
-  }
-
-  // src/View/chatPageWrapper.tsx
-  function ChatPageWrapper(chatListViewModel2) {
-    const chatPageContent = createProxyState(
-      [chatListViewModel2.selectedChat],
-      () => {
-        if (chatListViewModel2.selectedChat.value == void 0) {
-          return /* @__PURE__ */ createElement("div", null);
-        } else {
-          return ChatPage(chatListViewModel2.selectedChat.value);
-        }
-      }
-    );
-    const isShowingChat = createProxyState(
-      [chatListViewModel2.selectedChat],
-      () => chatListViewModel2.selectedChat.value != void 0
-    );
-    return /* @__PURE__ */ createElement(
-      "div",
-      {
-        id: "chat-page-wrapper",
-        "toggle:open": isShowingChat,
-        "children:set": chatPageContent
-      }
-    );
-  }
-
   // src/View/translations.ts
   var englishTranslations = {
     general: {
@@ -672,7 +644,10 @@
       ///
       connectButtonAudioLabel: "connect"
     },
-    chatPage: {}
+    chatPage: {
+      closeChatAudioLabe: "close chat",
+      chatSettingsAudioLabel: "chat settings"
+    }
   };
   var allTranslations = {
     en: englishTranslations
@@ -680,6 +655,44 @@
   var language = navigator.language.substring(0, 2);
   var translations = allTranslations[language] || allTranslations.en;
 
+  // src/View/chatPage.tsx
+  function ChatPage(chatViewModel) {
+    return /* @__PURE__ */ createElement("article", { id: "chat-page" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        "aria-label": translations.chatPage.closeChatAudioLabe,
+        "on:click": chatViewModel.close
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "close")
+    ), /* @__PURE__ */ createElement("span", null)), /* @__PURE__ */ createElement("div", { id: "toolbar" }), /* @__PURE__ */ createElement("div", { id: "main" })));
+  }
+
+  // src/View/chatPageWrapper.tsx
+  function ChatPageWrapper(chatListViewModel2) {
+    const chatPageContent = createProxyState(
+      [chatListViewModel2.selectedChat],
+      () => {
+        if (chatListViewModel2.selectedChat.value == void 0) {
+          return /* @__PURE__ */ createElement("div", null);
+        } else {
+          return ChatPage(chatListViewModel2.selectedChat.value);
+        }
+      }
+    );
+    const isShowingChat = createProxyState(
+      [chatListViewModel2.selectedChat],
+      () => chatListViewModel2.selectedChat.value != void 0
+    );
+    return /* @__PURE__ */ createElement(
+      "div",
+      {
+        id: "chat-page-wrapper",
+        "toggle:open": isShowingChat,
+        "children:set": chatPageContent
+      }
+    );
+  }
+
   // src/View/Components/deletableListItem.tsx
   function DeletableListItem(text, primaryButton, ondelete) {
     return /* @__PURE__ */ createElement("div", { class: "tile flex-row justify-apart align-center padding-0" }, /* @__PURE__ */ createElement("span", { class: "padding-h" }, text), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, primaryButton, /* @__PURE__ */ createElement(

src/View/chatPage.css

@@ -1,3 +1,4 @@
+/* show/hide */
 #chat-page-wrapper {
   display: none;
 }
@@ -16,6 +17,7 @@
   z-index: 2;
 }
 
+/* layout */
 #chat-page > div {
   padding: 0px;
 
@@ -46,3 +48,36 @@
   grid-column: 2 / 3;
   grid-row: 2 / 3;
 }
+
+#chat-page #ribbon,
+#chat-page #toolbar,
+#chat-page #main {
+  display: flex;
+}
+
+#chat-page #ribbon,
+#chat-page #main {
+  flex-direction: column;
+}
+
+#chat-page #ribbon > span,
+#chat-page #toolbar > span {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gap-between-tiles);
+}
+
+/* ribbon */
+#chat-page #ribbon {
+  justify-content: space-between;
+}
+
+#chat-page #ribbon button {
+  padding: 0px;
+
+  width: 100%;
+  height: var(--control-height);
+
+  align-items: center;
+  justify-content: center;
+}

src/View/chatPage.tsx

@@ -9,7 +9,15 @@ export function ChatPage(chatViewModel: ChatViewModel) {
   return (
     <article id="chat-page">
       <div>
-        <div id="ribbon"></div>
+        <div id="ribbon">
+          <button
+            aria-label={translations.chatPage.closeChatAudioLabe}
+            on:click={chatViewModel.close}
+          >
+            <span class="icon">close</span>
+          </button>
+          <span></span>
+        </div>
         <div id="toolbar"></div>
         <div id="main"></div>
       </div>

src/View/translations.ts

@@ -74,7 +74,8 @@ const englishTranslations = {
   },
 
   chatPage: {
-    
+    closeChatAudioLabe: "close chat",
+    chatSettingsAudioLabel: "chat settings",
   }
 };
 

src/ViewModel/chatViewModel.tsx

@@ -25,6 +25,10 @@ export default class ChatViewModel {
     this.chatListViewModel.openChat(this);
   }
 
+  close = () => {
+    this.chatListViewModel.closeChat();
+  }
+
   // init
   constructor(chatListViewModel: ChatListViewModel, chatModel: ChatModel) {
     this.chatModel = chatModel;