improve UI, prepare settings page

dist/index.css

@@ -103,55 +103,68 @@ main {
   background-color: var(--background);
   z-index: 2;
 }
+#chat-page {
+  --ribbon-size: calc(var(--control-height) + 2 * var(--gap-between-tiles));
+}
+#chat-page #ribbon,
+#chat-page .toolbar,
+#chat-page #main,
+#chat-page #main .content {
+  display: flex;
+}
 #chat-page > div {
   padding: 0px;
   overflow: hidden;
-  display: grid;
-  --ribbon-size: calc(var(--control-height) + 2 * var(--gap-between-tiles));
-  grid-template-columns: var(--ribbon-size) 1fr;
-  grid-template-rows: var(--ribbon-size) 1fr;
-  border-top: 1px solid var(--border);
+  display: flex;
+}
+#chat-page #main {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  flex: 1;
+}
+#chat-page #main > div,
+#chat-page #main .content {
+  width: 100%;
+  height: 100%;
+}
+#chat-page #main .content {
+  overflow: auto;
+}
+#chat-page #ribbon,
+#chat-page #main,
+#chat-page #main .content {
+  flex-direction: column;
 }
 #chat-page #ribbon {
-  grid-column: 1 / 2;
-  grid-row: 1 / 3;
+  width: var(--ribbon-size);
   border-right: 1px solid var(--border);
+  overflow: auto;
+  justify-content: space-between;
 }
-#chat-page #toolbar {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
+#chat-page #main .toolbar {
+  height: var(--ribbon-size);
   border-bottom: 1px solid var(--border);
-}
-#chat-page #main {
-  grid-column: 2 / 3;
-  grid-row: 2 / 3;
+  overflow-x: auto;
+  padding-left: var(--content-padding);
 }
 #chat-page #ribbon,
-#chat-page #toolbar,
-#chat-page #main {
-  display: flex;
-}
-#chat-page #ribbon,
-#chat-page #main {
-  flex-direction: column;
+#chat-page .toolbar {
+  align-items: center;
 }
 #chat-page #ribbon > span,
-#chat-page #toolbar > span {
+#chat-page .toolbar > span {
   display: flex;
   flex-direction: column;
   padding: var(--gap-between-tiles);
-}
-#chat-page #ribbon > span,
-#chat-page #toolbar {
-  padding: var(--gap-between-tiles);
   gap: var(--gap-between-tiles);
 }
-#chat-page #ribbon {
-  justify-content: space-between;
-  justify-content: space-between;
+#chat-page #ribbon > span {
+  width: 100%;
 }
 #chat-page #ribbon button,
-#chat-page #toolbar button {
+#chat-page .toolbar button {
   padding: 0px;
   width: 100%;
   max-width: var(--control-height);

dist/index.js

@@ -650,6 +650,11 @@
     );
   }
 
+  // src/View/ChatPages/messagePage.tsx
+  function MessagePage(chatViewModel) {
+    return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })));
+  }
+
   // src/View/translations.ts
   var englishTranslations = {
     general: {
@@ -711,6 +716,9 @@
         kanban: "Kanban",
         calendar: "Calendar",
         progress: "Progress"
+      },
+      settings: {
+        settingsHeadline: "Settings"
       }
     }
   };
@@ -720,8 +728,22 @@
   var language = navigator.language.substring(0, 2);
   var translations = allTranslations[language] || allTranslations.en;
 
+  // src/View/ChatPages/settingsPage.tsx
+  function SettingsPage(chatViewModel) {
+    return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.settingsHeadline)));
+  }
+
   // src/View/chatPage.tsx
   function ChatPage(chatViewModel) {
+    const mainContent = new State(/* @__PURE__ */ createElement("div", null));
+    chatViewModel.selectedPage.subscribe((selectedPage) => {
+      switch (selectedPage) {
+        case "settings" /* Settings */:
+          return mainContent.value = SettingsPage(chatViewModel);
+        default:
+          return mainContent.value = MessagePage(chatViewModel);
+      }
+    });
     return /* @__PURE__ */ createElement("article", { id: "chat-page" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
       "button",
       {
@@ -760,7 +782,7 @@
       "settings",
       "settings" /* Settings */,
       chatViewModel
-    ))), /* @__PURE__ */ createElement("div", { id: "toolbar" }), /* @__PURE__ */ createElement("div", { id: "main" })));
+    ))), /* @__PURE__ */ createElement("div", { id: "main", "children:set": mainContent })));
   }
 
   // src/View/chatPageWrapper.tsx