continue layout, add button to close chat page

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;