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

src/View/ChatPages/messagePage.tsx

@@ -0,0 +1,13 @@
+import * as React from "bloatless-react";
+
+import ChatViewModel from "../../ViewModel/chatViewModel";
+
+export function MessagePage(chatViewModel: ChatViewModel) {
+  return (
+    <div>
+      <div class="toolbar">
+        <span subscribe:innerText={chatViewModel.primaryChannel}></span>
+      </div>
+    </div>
+  );
+}

src/View/ChatPages/settingsPage.tsx

@@ -0,0 +1,14 @@
+import * as React from "bloatless-react";
+
+import ChatViewModel from "../../ViewModel/chatViewModel";
+import { translations } from "../translations";
+
+export function SettingsPage(chatViewModel: ChatViewModel) {
+  return (
+    <div>
+      <div class="toolbar">
+        <span>{translations.chatPage.settings.settingsHeadline}</span>
+      </div>
+    </div>
+  );
+}

src/View/chatPage.css

@@ -18,70 +18,88 @@
 }
 
 /* layout */
+#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);
-}
-
-#chat-page #ribbon {
-  grid-column: 1 / 2;
-  grid-row: 1 / 3;
-
-  border-right: 1px solid var(--border);
-}
-
-#chat-page #toolbar {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
-
-  border-bottom: 1px solid var(--border);
-}
-
-#chat-page #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);
+
+  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;
 }
 
 /* ribbon, toolbar */
+#chat-page #ribbon {
+  width: var(--ribbon-size);
+  border-right: 1px solid var(--border);
+
+  overflow: auto;
+
+  justify-content: space-between;
+}
+
+#chat-page #main .toolbar {
+  height: var(--ribbon-size);
+  border-bottom: 1px solid var(--border);
+
+  overflow-x: auto;
+
+  padding-left: var(--content-padding);
+}
+
+#chat-page #ribbon,
+#chat-page .toolbar {
+  align-items: center;
+}
+
 #chat-page #ribbon > span,
-#chat-page #toolbar {
+#chat-page .toolbar > span {
+  display: flex;
+  flex-direction: column;
+
   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%;

src/View/chatPage.tsx

@@ -5,9 +5,22 @@ import * as React from "bloatless-react";
 import ChatViewModel, { ChatPageType } from "../ViewModel/chatViewModel";
 
 import { ChatViewToggleButton } from "./Components/chatViewToggleButton";
+import { MessagePage } from "./ChatPages/messagePage";
+import { SettingsPage } from "./ChatPages/settingsPage";
 import { translations } from "./translations";
 
 export function ChatPage(chatViewModel: ChatViewModel) {
+  const mainContent = new React.State(<div></div>);
+
+  chatViewModel.selectedPage.subscribe((selectedPage) => {
+    switch (selectedPage) {
+      case ChatPageType.Settings:
+        return (mainContent.value = SettingsPage(chatViewModel));
+      default:
+        return (mainContent.value = MessagePage(chatViewModel));
+    }
+  });
+
   return (
     <article id="chat-page">
       <div>
@@ -61,8 +74,7 @@ export function ChatPage(chatViewModel: ChatViewModel) {
             )}
           </span>
         </div>
-        <div id="toolbar"></div>
-        <div id="main"></div>
+        <div id="main" children:set={mainContent}></div>
       </div>
     </article>
   );

src/View/translations.ts

@@ -79,6 +79,10 @@ const englishTranslations = {
       calendar: "Calendar",
       progress: "Progress",
     },
+
+    settings: {
+      settingsHeadline: "Settings",
+    }
   },
 };