remodel ChatViewModel

src/View/ChatPages/messagePage.tsx

@@ -3,15 +3,17 @@ import "./messagePage.css";
 import * as React from "bloatless-react";
 
 import { ChatMessageViewModelToView } from "../Components/chatMessage";
-import ChatViewModel from "../../ViewModel/Chat/chatViewModel";
+import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";
 import { translations } from "../translations";
 
-export function MessagePage(chatViewModel: ChatViewModel) {
+export function MessagePage(messagePageViewModel: MessagePageViewModel) {
+  messagePageViewModel.loadMessages();
+
   const messageContainer = (
     <div
       id="message-container"
       children:append={[
-        chatViewModel.chatMessageViewModels,
+        messagePageViewModel.chatMessageViewModels,
         ChatMessageViewModelToView,
       ]}
     ></div>
@@ -28,14 +30,16 @@ export function MessagePage(chatViewModel: ChatViewModel) {
 
     scrollDown();
   }
-  chatViewModel.chatMessageViewModels.subscribeSilent(scrollDownIfApplicable);
+  messagePageViewModel.chatMessageViewModels.subscribeSilent(
+    scrollDownIfApplicable
+  );
   setTimeout(() => scrollDown(), 100);
 
   return (
     <div id="message-page">
       <div class="pane">
         <div class="toolbar">
-          <span subscribe:innerText={chatViewModel.primaryChannel}></span>
+          <span>{translations.chatPage.message.messagesHeadline}</span>
         </div>
         <div class="content">
           {messageContainer}
@@ -43,8 +47,8 @@ export function MessagePage(chatViewModel: ChatViewModel) {
             <div class="content-width-constraint">
               <div class="input-width-constraint">
                 <input
-                  bind:value={chatViewModel.composingMessage}
-                  on:enter={chatViewModel.sendMessage}
+                  bind:value={messagePageViewModel.composingMessage}
+                  on:enter={messagePageViewModel.sendMessage}
                   placeholder={
                     translations.chatPage.message.composerInputPlaceholder
                   }
@@ -54,8 +58,8 @@ export function MessagePage(chatViewModel: ChatViewModel) {
                   aria-label={
                     translations.chatPage.message.sendMessageButtonAudioLabel
                   }
-                  on:click={chatViewModel.sendMessage}
-                  toggle:disabled={chatViewModel.cannotSendMessage}
+                  on:click={messagePageViewModel.sendMessage}
+                  toggle:disabled={messagePageViewModel.cannotSendMessage}
                 >
                   <span class="icon">send</span>
                 </button>

src/View/ChatPages/settingsPage.tsx

@@ -1,17 +1,19 @@
 import * as React from "bloatless-react";
 
-import ChatViewModel from "../../ViewModel/chatViewModel";
 import { Color } from "../../colors";
 import { DangerousActionButton } from "../Components/dangerousActionButton";
 import { DeletableListItem } from "../Components/deletableListItem";
+import SettingsPageViewModel from "../../ViewModel/Pages/settingsPageViewModel";
 import { translations } from "../translations";
 
-export function SettingsPage(chatViewModel: ChatViewModel) {
+export function SettingsPage(settingsPageViewModel: SettingsPageViewModel) {
+  settingsPageViewModel.loadData();
+
   const secondaryChannelConverter: React.StateItemConverter<string> = (
     secondaryChannel: string
   ) => {
     return DeletableListItem(secondaryChannel, <span></span>, () => {
-      chatViewModel.removeSecondaryChannel(secondaryChannel);
+      settingsPageViewModel.removeSecondaryChannel(secondaryChannel);
     });
   };
 
@@ -27,8 +29,8 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
             <div>
               <span>{translations.chatPage.settings.primaryChannelLabel}</span>
               <input
-                bind:value={chatViewModel.primaryChannelInput}
-                on:enter={chatViewModel.setPrimaryChannel}
+                bind:value={settingsPageViewModel.primaryChannelInput}
+                on:enter={settingsPageViewModel.setPrimaryChannel}
               ></input>
             </div>
           </label>
@@ -38,8 +40,8 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
               aria-label={
                 translations.chatPage.settings.setPrimaryChannelButtonAudioLabel
               }
-              on:click={chatViewModel.setPrimaryChannel}
-              toggle:disabled={chatViewModel.cannotSetPrimaryChannel}
+              on:click={settingsPageViewModel.setPrimaryChannel}
+              toggle:disabled={settingsPageViewModel.cannotSetPrimaryChannel}
             >
               {translations.general.setButton}
               <span class="icon">check</span>
@@ -56,8 +58,8 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
               placeholder={
                 translations.chatPage.settings.newSecondaryChannelPlaceholder
               }
-              bind:value={chatViewModel.newSecondaryChannelInput}
-              on:enter={chatViewModel.addSecondaryChannel}
+              bind:value={settingsPageViewModel.newSecondaryChannelInput}
+              on:enter={settingsPageViewModel.addSecondaryChannel}
             ></input>
             <button
               class="primary"
@@ -65,8 +67,8 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
                 translations.chatPage.settings
                   .addSecondaryChannelButtonAudioLabel
               }
-              on:click={chatViewModel.addSecondaryChannel}
-              toggle:disabled={chatViewModel.cannotAddSecondaryChannel}
+              on:click={settingsPageViewModel.addSecondaryChannel}
+              toggle:disabled={settingsPageViewModel.cannotAddSecondaryChannel}
             >
               <span class="icon">add</span>
             </button>
@@ -75,7 +77,7 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
           <div
             class="flex-column gap width-input"
             children:append={[
-              chatViewModel.secondaryChannels,
+              settingsPageViewModel.secondaryChannels,
               secondaryChannelConverter,
             ]}
           ></div>
@@ -87,9 +89,9 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
             <div>
               <span>{translations.chatPage.settings.encryptionKeyLabel}</span>
               <input
-                bind:value={chatViewModel.encryptionKeyInput}
-                on:enter={chatViewModel.setEncryptionKey}
-                set:type={chatViewModel.encryptionKeyInputType}
+                bind:value={settingsPageViewModel.encryptionKeyInput}
+                on:enter={settingsPageViewModel.setEncryptionKey}
+                set:type={settingsPageViewModel.encryptionKeyInputType}
               ></input>
             </div>
           </label>
@@ -99,8 +101,8 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
               aria-label={
                 translations.chatPage.settings.setEncryptionKeyButtonAudioLabel
               }
-              on:click={chatViewModel.setEncryptionKey}
-              toggle:disabled={chatViewModel.cannotSetEncryptionKey}
+              on:click={settingsPageViewModel.setEncryptionKey}
+              toggle:disabled={settingsPageViewModel.cannotSetEncryptionKey}
             >
               {translations.general.setButton}
               <span class="icon">check</span>
@@ -110,7 +112,7 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
           <label class="inline">
             <input
               type="checkbox"
-              bind:checked={chatViewModel.shouldShowEncryptionKey}
+              bind:checked={settingsPageViewModel.shouldShowEncryptionKey}
             ></input>
             {translations.chatPage.settings.showEncryptionKey}
           </label>
@@ -120,12 +122,12 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
           <div class="flex-row gap width-input">
             {...Object.values(Color).map((color) => {
               const isSelected = React.createProxyState(
-                [chatViewModel.color],
-                () => chatViewModel.color.value == color
+                [settingsPageViewModel.color],
+                () => settingsPageViewModel.color.value == color
               );
 
               function setColor() {
-                chatViewModel.setColor(color);
+                settingsPageViewModel.setColor(color);
               }
 
               return (
@@ -146,7 +148,7 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
             {DangerousActionButton(
               translations.chatPage.settings.deleteChatButton,
               "chat_error",
-              chatViewModel.remove
+              settingsPageViewModel.remove
             )}
           </div>
         </div>

src/View/ChatPages/taskPage.tsx

@@ -1,17 +1,17 @@
 import * as React from "bloatless-react";
 
-import TaskViewModel from "../../ViewModel/Files/taskViewModel";
+import TaskPageViewModel from "../../ViewModel/Pages/taskPageViewModel";
 import { translations } from "../translations";
 
-export function TaskPage(taskViewModel: TaskViewModel) {
+export function TaskPage(taskPageViewModel: TaskPageViewModel) {
   return (
     <div id="task-page">
       <div class="pane side">
         <div class="content">
           <div class="flex-row width-input">
             <input
-              bind:value={taskViewModel.newBoardNameInput}
-              on:enter={taskViewModel.createBoard}
+              bind:value={taskPageViewModel.newBoardNameInput}
+              on:enter={taskPageViewModel.createBoard}
               placeholder={translations.chatPage.task.newBoardNamePlaceholder}
             ></input>
             <button
@@ -19,8 +19,8 @@ export function TaskPage(taskViewModel: TaskViewModel) {
               aria-label={
                 translations.chatPage.task.createBoardButtonAudioLabel
               }
-              on:click={taskViewModel.createBoard}
-              toggle:disabled={taskViewModel.cannotCreateBoard}
+              on:click={taskPageViewModel.createBoard}
+              toggle:disabled={taskPageViewModel.cannotCreateBoard}
             >
               <span class="icon">add</span>
             </button>