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(