support creating new chats, list chats

src/View/Components/chatEntry.tsx

@@ -0,0 +1,17 @@
+import * as React from "bloatless-react";
+
+import { ChatModel } from "../../Model/chatModel";
+
+export function ChatEntry(chatModel: ChatModel) {
+  return (
+    <div class="tile flex-column justify-end align-start">
+      <h2>{chatModel.info.primaryChannel}</h2>
+    </div>
+  );
+}
+
+export const ChatModelToChatEntry: React.StateItemConverter<ChatModel> = (
+  chatModel: ChatModel
+) => {
+  return ChatEntry(chatModel);
+};

src/View/homePage.tsx

@@ -4,13 +4,16 @@ import * as React from "bloatless-react";
 
 import { Option, StringToOption } from "./Components/option";
 
+import ChatListViewModel from "../ViewModel/chatListViewModel";
+import { ChatModelToChatEntry } from "./Components/chatEntry";
 import ConnectionViewModel from "../ViewModel/connectionViewModel";
 import SettingsViewModel from "../ViewModel/settingsViewModel";
 import { translations } from "./translations";
 
 export function HomePage(
   settingsViewModel: SettingsViewModel,
-  connectionViewModel: ConnectionViewModel
+  connectionViewModel: ConnectionViewModel,
+  chatListViewModel: ChatListViewModel
 ) {
   // sections
   const overviewSection = (
@@ -149,14 +152,23 @@ export function HomePage(
         <input
           placeholder={translations.homePage.addChatPlaceholder}
           aria-label={translations.homePage.addChatAudioLabel}
+          bind:value={chatListViewModel.newChatPrimaryChannel}
+          on:enter={chatListViewModel.createChat}
         ></input>
         <button
           class="primary"
           aria-label={translations.homePage.addChatButton}
+          on:click={chatListViewModel.createChat}
+          toggle:disabled={chatListViewModel.cannotCreateChat}
         >
           <span class="icon">add</span>
         </button>
       </div>
+
+      <div
+        class="grid gap"
+        children:append={[chatListViewModel.chatModels, ChatModelToChatEntry]}
+      ></div>
     </div>
   );