sync changes to chat info

src/Model/Chat/chatModel.ts

@@ -47,10 +47,11 @@ export default class ChatModel {
     }
 
     // handler managers
-    chatMessageHandlerManager: HandlerManager<ChatMessage> =
+    readonly chatMessageHandlerManager: HandlerManager<ChatMessage> =
 	new HandlerManager();
     readonly reactionHandlerManager: HandlerManager<ChatMessageReaction> =
 	new HandlerManager();
+    readonly changeHandlerManager: HandlerManager<null> = new HandlerManager();
 
     // paths
     readonly getBasePath = (): string[] => {
@@ -140,6 +141,7 @@ export default class ChatModel {
     readonly setName = (name: string): void => {
 	this.info.name = name;
 	this.storeInfo();
+	this.syncInfo();
 	this.subscribe();
     };
 
@@ -155,6 +157,7 @@ export default class ChatModel {
 
     readonly setColor = (color: Colors): void => {
 	this.info.color = color;
+	this.syncInfo();
 	this.storeInfo();
     };
 
@@ -260,6 +263,10 @@ export default class ChatModel {
 	this.storageModel.writeStringifiable(this.getInfoPath(), this.info);
     };
 
+    readonly syncInfo = (): void => {
+	this.sendMessage("", undefined, this.info);
+    }
+
     readonly storeFilter = (filter: string): void => {
 	this.storageModel.write(this.getPreviousFilterPath(), filter);
     }
@@ -283,13 +290,15 @@ export default class ChatModel {
 	    this.getInfoPath(),
 	    ChatInfoReference,
 	);
-	if (info != null) {
-	    this.info = info;
-	} else {
-	    this.info = ChatModel.generateChatInfo("0", "0", Colors.Standard );
-	}
+	this.info = (info || ChatModel.generateChatInfo("0", "0", Colors.Standard));
     };
 
+    readonly handleInfo = (info: ChatInfoFileContent): void => {
+	this.info = info;
+	this.changeHandlerManager.trigger(null);
+	this.storeInfo();
+    }
+
     get messages(): ChatMessage[] {
 	const messageIds: string[] = this.storageModel.list(
 	    this.getMessageDirPath(),

src/Model/Files/fileModel.ts

@@ -8,13 +8,13 @@ import {
     parseValidObject,
     stringify,
 } from "../Utility/utility";
-import { DATA_VERSION, ValidObject } from "../Utility/typeSafety";
+import { checkIsValidObject, checkMatchesObjectStructure, DATA_VERSION, ValidObject } from "../Utility/typeSafety";
 import StorageModel, {
     StorageModelSubPaths,
     filePaths,
 } from "../Global/storageModel";
 import SettingsModel from "../Global/settingsModel";
-import ChatModel from "../Chat/chatModel";
+import ChatModel, {ChatInfoFileContent, ChatInfoReference} from "../Chat/chatModel";
 
 export default class FileModel {
     readonly storageModel: StorageModel;
@@ -67,6 +67,12 @@ export default class FileModel {
     };
 
     readonly handleFileContent = (fileContent: FileContent<string>): void => {
+	if (fileContent.type == "chat-info") {
+	    if (checkMatchesObjectStructure(fileContent, ChatInfoReference) == false) return;
+	    console.log("CHANGING");
+	    this.chatModel.handleInfo(fileContent as ChatInfoFileContent);
+	}
+
 	const didStore: boolean = this.storeFileContent(fileContent);
 	if (didStore == false) return;
 
@@ -214,7 +220,7 @@ export interface FileContent<T extends string>
 	readonly creationDate: string;
 
 	readonly type: T;
-}
+    }
 
 // references
 export const FileContentReference: FileContent<string> = {

src/View/ChatPages/settingsPage.tsx

@@ -179,6 +179,23 @@ export function SettingsPage(
 
 			{ColorPicker(settingsPageViewModel.color)}
 
+                        <div class="flex-row justify-end width-input">
+                            <button
+                                class="width-50"
+                                aria-label={
+                                    coreViewModel.translations.chatPage.settings
+                                        .setNameButtonAudioLabel
+                                }
+                                on:click={
+                                    settingsPageViewModel.applyColor
+                                }
+                            >
+                                {coreViewModel.translations.general.setButton}
+                                <span class="icon">check</span>
+                            </button>
+                        </div>
+
+
                         <hr></hr>
 
                         <div class="width-input">

src/ViewModel/Chat/chatViewModel.ts

@@ -189,6 +189,7 @@ export default class ChatViewModel extends ContextHost<ChatPageTypes> {
 		this.messagePageViewModel.handleReaction(reaction);
 	    },
 	);
+	chatModel.changeHandlerManager.setHandler(this.chatModel.id, this.settingsPageViewModel.preloadData);
 
 	// load
 	this.loadPageSelection();

src/ViewModel/Pages/settingsPageViewModel.ts

@@ -71,8 +71,8 @@ export default class SettingsPageViewModel extends Context {
         this.encryptionKeyInput.callSubscriptions();
     };
 
-    applyColor = (newColor: Colors): void => {
-        this.chatViewModel.setColor(newColor);
+    applyColor = (): void => {
+        this.chatViewModel.setColor(this.color.value);
     };
 
     remove = (): void => {
@@ -122,10 +122,6 @@ export default class SettingsPageViewModel extends Context {
                 this.chatViewModel.chatModel.info.encryptionKey,
         );
 
-        this.color.subscribe((newColor) => {
-            this.applyColor(newColor);
-        });
-
         this.chatViewModel.registerContext(ChatPageTypes.Settings, this);
     }
 }