add navigation for chat page

src/View/Components/chatEntry.tsx

@@ -2,19 +2,22 @@ import "./chatEntry.css";
 
 import * as React from "bloatless-react";
 
-import { ChatModel } from "../../Model/chatModel";
+import ChatViewModel from "../../ViewModel/chatViewModel";
 
-export function ChatEntry(chatModel: ChatModel) {
+export function ChatEntry(chatViewModel: ChatViewModel) {
   return (
-    <button class="chat-entry tile">
-      <span class="shadow">{chatModel.info.primaryChannel}</span>
-      <h2>{chatModel.info.primaryChannel}</h2>
+    <button class="chat-entry tile" on:click={chatViewModel.open}>
+      <span
+        class="shadow"
+        subscribe:innerText={chatViewModel.primaryChannel}
+      ></span>
+      <h2 subscribe:innerText={chatViewModel.primaryChannel}></h2>
     </button>
   );
 }
 
-export const ChatModelToChatEntry: React.StateItemConverter<ChatModel> = (
-  chatModel: ChatModel
-) => {
-  return ChatEntry(chatModel);
+export const ChatViewModelToChatEntry: React.StateItemConverter<
+  ChatViewModel
+> = (chatViewModel: ChatViewModel) => {
+  return ChatEntry(chatViewModel);
 };

src/View/chatPage.css

@@ -0,0 +1,15 @@
+#chat-page-wrapper {
+    display: none;
+}
+
+#chat-page-wrapper[open] {
+    display: flex;
+
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+
+    background-color: var(--background);
+}

src/View/chatPage.tsx

@@ -0,0 +1,17 @@
+import "./homePage.css";
+
+import * as React from "bloatless-react";
+
+import ChatViewModel from "../ViewModel/chatViewModel";
+import { translations } from "./translations";
+
+export function ChatPage(chatViewModel: ChatViewModel) {
+  return (
+    <article id="chat-page">
+      <header>
+        <span subscribe:innerText={chatViewModel.primaryChannel}></span>
+      </header>
+      <div></div>
+    </article>
+  );
+}

src/View/chatPageWrapper.tsx

@@ -0,0 +1,31 @@
+import "./chatPage.css";
+
+import * as React from "bloatless-react";
+
+import ChatListViewModel from "../ViewModel/chatListViewModel";
+import { ChatPage } from "./chatPage";
+
+export function ChatPageWrapper(chatListViewModel: ChatListViewModel) {
+  const chatPageContent = React.createProxyState(
+    [chatListViewModel.selectedChat],
+    () => {
+      if (chatListViewModel.selectedChat.value == undefined) {
+        return <div></div>;
+      } else {
+        return ChatPage(chatListViewModel.selectedChat.value);
+      }
+    }
+  );
+  const isShowingChat = React.createProxyState(
+    [chatListViewModel.selectedChat],
+    () => chatListViewModel.selectedChat.value != undefined
+  );
+
+  return (
+    <div
+      id="chat-page-wrapper"
+      toggle:open={isShowingChat}
+      children:set={chatPageContent}
+    ></div>
+  );
+}

src/View/homePage.tsx

@@ -5,7 +5,7 @@ import * as React from "bloatless-react";
 import { Option, StringToOption } from "./Components/option";
 
 import ChatListViewModel from "../ViewModel/chatListViewModel";
-import { ChatModelToChatEntry } from "./Components/chatEntry";
+import { ChatViewModelToChatEntry } from "./Components/chatEntry";
 import ConnectionViewModel from "../ViewModel/connectionViewModel";
 import SettingsViewModel from "../ViewModel/settingsViewModel";
 import { translations } from "./translations";
@@ -167,7 +167,7 @@ export function HomePage(
 
       <div
         id="chat-grid"
-        children:append={[chatListViewModel.chatModels, ChatModelToChatEntry]}
+        children:append={[chatListViewModel.chatViewModels, ChatViewModelToChatEntry]}
       ></div>
     </div>
   );

src/View/translations.ts

@@ -72,6 +72,10 @@ const englishTranslations = {
 
     connectButtonAudioLabel: "connect",
   },
+
+  chatPage: {
+    
+  }
 };
 
 const allTranslations: { [language: string]: typeof englishTranslations } = {