update chat page color when selecting board

src/View/chatPage.tsx

@@ -14,6 +14,8 @@ export function ChatPage(chatViewModel: ChatViewModel) {
   const mainContent = new React.State(<div></div>);
 
   chatViewModel.selectedPage.subscribe((selectedPage) => {
+    chatViewModel.closeSubPages();
+
     switch (selectedPage) {
       case ChatPageType.Settings: {
         mainContent.value = SettingsPage(chatViewModel.settingsPageViewModel);
@@ -32,7 +34,7 @@ export function ChatPage(chatViewModel: ChatViewModel) {
   return (
     <article
       id="chat-page"
-      set:color={chatViewModel.settingsPageViewModel.color}
+      set:color={chatViewModel.displayedColor}
       class="subtle-background"
     >
       <div>

src/ViewModel/Chat/chatViewModel.ts

@@ -4,7 +4,7 @@ import ChatModel, { ChatMessage } from "../../Model/Chat/chatModel";
 import StorageModel, { filePaths } from "../../Model/Global/storageModel";
 
 import ChatListViewModel from "./chatListViewModel";
-import { FileContent } from "../../Model/Files/fileModel";
+import { Color } from "../../colors";
 import MessagePageViewModel from "../Pages/messagePageViewModel";
 import SettingsPageViewModel from "../Pages/settingsPageViewModel";
 import SettingsViewModel from "../Global/settingsViewModel";
@@ -21,12 +21,13 @@ export default class ChatViewModel {
   settingsPageViewModel: SettingsPageViewModel;
 
   // state
-  index: React.State<number> = new React.State(0);
-
+  displayedColor: React.State<Color> = new React.State<Color>(Color.Standard);
   selectedPage: React.State<ChatPageType> = new React.State<ChatPageType>(
     ChatPageType.Messages
   );
 
+  index: React.State<number> = new React.State(0);
+
   // view
   open = (): void => {
     this.chatListViewModel.openChat(this);
@@ -36,6 +37,14 @@ export default class ChatViewModel {
     this.chatListViewModel.closeChat();
   };
 
+  closeSubPages = (): void => {
+    this.taskPageViewModel.closeBoard();
+  }
+
+  resetColor = (): void => {
+    this.displayedColor.value = this.settingsPageViewModel.color.value;
+  };
+
   // load
   loadPageSelection = (): void => {
     const path: string[] = StorageModel.getPath(
@@ -68,18 +77,22 @@ export default class ChatViewModel {
     // page viewModels
     this.taskPageViewModel = new TaskPageViewModel(
       this.chatModel.fileModel.taskModel,
-      this.storageModel
+      this.storageModel,
+      this
     );
     this.messagePageViewModel = new MessagePageViewModel(this);
     this.settingsPageViewModel = new SettingsPageViewModel(this);
 
     // handlers
-    chatModel.chatMessageHandlerManager.addHandler((chatMessage: ChatMessage) => {
-      this.messagePageViewModel.showChatMessage(chatMessage);
-    });
+    chatModel.chatMessageHandlerManager.addHandler(
+      (chatMessage: ChatMessage) => {
+        this.messagePageViewModel.showChatMessage(chatMessage);
+      }
+    );
 
     // load
     this.loadPageSelection();
+    this.resetColor();
   }
 }
 

src/ViewModel/Pages/taskPageViewModel.ts

@@ -6,13 +6,17 @@ import TaskModel, {
 } from "../../Model/Files/taskModel";
 
 import BoardViewModel from "./boardViewModel";
+import ChatViewModel from "../Chat/chatViewModel";
 import { FileContent } from "../../Model/Files/fileModel";
 import StorageModel from "../../Model/Global/storageModel";
 import { checkMatchesObjectStructure } from "../../Model/Utility/typeSafety";
 
 export default class TaskPageViewModel {
+  storageModel: StorageModel;
   taskModel: TaskModel;
 
+  chatViewModel: ChatViewModel;
+
   // state
   newBoardNameInput: React.State<string> = new React.State("");
 
@@ -57,10 +61,12 @@ export default class TaskPageViewModel {
 
   selectBoard = (boardViewModel: BoardViewModel): void => {
     this.selectedBoard.value = boardViewModel;
+    this.chatViewModel.displayedColor.value = boardViewModel.color.value;
   };
 
   closeBoard = (): void => {
     this.selectedBoard.value = undefined;
+    this.chatViewModel.resetColor();
   };
 
   // load
@@ -78,8 +84,15 @@ export default class TaskPageViewModel {
   };
 
   // init
-  constructor(taskModel: TaskModel, storageModel: StorageModel) {
+  constructor(
+    taskModel: TaskModel,
+    storageModel: StorageModel,
+    chatViewModel: ChatViewModel
+  ) {
     this.taskModel = taskModel;
+    this.storageModel = storageModel;
+
+    this.chatViewModel = chatViewModel;
 
     // handlers
     taskModel.boardHandlerManager.addHandler(