update chat page color when selecting board

dist/index.js

@@ -1412,7 +1412,9 @@
 
   // src/ViewModel/Pages/taskPageViewModel.ts
   var TaskPageViewModel = class {
+    storageModel;
     taskModel;
+    chatViewModel;
     // state
     newBoardNameInput = new State("");
     boardViewModels = new MapState();
@@ -1442,9 +1444,11 @@
     };
     selectBoard = (boardViewModel) => {
       this.selectedBoard.value = boardViewModel;
+      this.chatViewModel.displayedColor.value = boardViewModel.color.value;
     };
     closeBoard = () => {
       this.selectedBoard.value = void 0;
+      this.chatViewModel.resetColor();
     };
     // load
     loadData = () => {
@@ -1457,8 +1461,10 @@
       }
     };
     // init
-    constructor(taskModel, storageModel2) {
+    constructor(taskModel, storageModel2, chatViewModel) {
       this.taskModel = taskModel;
+      this.storageModel = storageModel2;
+      this.chatViewModel = chatViewModel;
       taskModel.boardHandlerManager.addHandler(
         (boardInfoFileContent) => {
           this.showBoardInList(boardInfoFileContent);
@@ -1477,10 +1483,11 @@
     messagePageViewModel;
     settingsPageViewModel;
     // state
-    index = new State(0);
+    displayedColor = new State("standard" /* Standard */);
     selectedPage = new State(
       "messages" /* Messages */
     );
+    index = new State(0);
     // view
     open = () => {
       this.chatListViewModel.openChat(this);
@@ -1488,6 +1495,12 @@
     close = () => {
       this.chatListViewModel.closeChat();
     };
+    closeSubPages = () => {
+      this.taskPageViewModel.closeBoard();
+    };
+    resetColor = () => {
+      this.displayedColor.value = this.settingsPageViewModel.color.value;
+    };
     // load
     loadPageSelection = () => {
       const path = StorageModel.getPath(
@@ -1510,14 +1523,18 @@
       this.chatListViewModel = chatListViewModel2;
       this.taskPageViewModel = new TaskPageViewModel(
         this.chatModel.fileModel.taskModel,
-        this.storageModel
+        this.storageModel,
+        this
       );
       this.messagePageViewModel = new MessagePageViewModel(this);
       this.settingsPageViewModel = new SettingsPageViewModel(this);
-      chatModel.chatMessageHandlerManager.addHandler((chatMessage) => {
-        this.messagePageViewModel.showChatMessage(chatMessage);
-      });
+      chatModel.chatMessageHandlerManager.addHandler(
+        (chatMessage) => {
+          this.messagePageViewModel.showChatMessage(chatMessage);
+        }
+      );
       this.loadPageSelection();
+      this.resetColor();
     }
   };
 
@@ -2021,6 +2038,7 @@
   function ChatPage(chatViewModel) {
     const mainContent = new State(/* @__PURE__ */ createElement("div", null));
     chatViewModel.selectedPage.subscribe((selectedPage) => {
+      chatViewModel.closeSubPages();
       switch (selectedPage) {
         case "settings" /* Settings */: {
           mainContent.value = SettingsPage(chatViewModel.settingsPageViewModel);
@@ -2039,7 +2057,7 @@
       "article",
       {
         id: "chat-page",
-        "set:color": chatViewModel.settingsPageViewModel.color,
+        "set:color": chatViewModel.displayedColor,
         class: "subtle-background"
       },
       /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement(

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(