move name to settings modal

src/ViewModel/Chat/chatListViewModel.ts

@@ -2,11 +2,11 @@ import ChatViewModel from "./chatViewModel";
 import SettingsViewModel from "../Global/settingsViewModel";
 import NotificationViewModel from "../Global/notificationViewModel";
 import CoreViewModel from "../Global/coreViewModel";
+import ContactListViewModel from "../Global/contactViewModel";
 import ConnectionViewModel from "../Global/connectionViewModel";
 import * as React from "../../react";
 import { IndexManager } from "../../Model/Utility/utility";
 import ChatModel from "../../Model/Chat/chatModel";
-import ContactListViewModel from "../Global/contactViewModel";
 
 export default class ChatListViewModel {
     notificationViewModel: NotificationViewModel;
@@ -62,7 +62,7 @@ export default class ChatListViewModel {
             this.notificationViewModel,
             this.connectionViewModel,
             this,
-	    this.contactListViewModel,
+            this.contactListViewModel,
         );
     };
 
@@ -99,7 +99,7 @@ export default class ChatListViewModel {
         public readonly coreViewModel: CoreViewModel,
         public readonly settingsViewModel: SettingsViewModel,
         public readonly connectionViewModel: ConnectionViewModel,
-	public readonly contactListViewModel: ContactListViewModel,
+        public readonly contactListViewModel: ContactListViewModel,
     ) {
         this.notificationViewModel = new NotificationViewModel(this);
 

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -1,5 +1,6 @@
 import MessagePageViewModel from "../Pages/messagePageViewModel";
 import CoreViewModel from "../Global/coreViewModel";
+import { ContactViewModel } from "../Global/contactViewModel";
 import * as React from "../../react";
 import {
     ChatMessage,
@@ -7,7 +8,6 @@ import {
     ChatMessageStatuses,
     ReactionSymbols,
 } from "../../Model/Chat/chatModel";
-import {ContactViewModel} from "../Global/contactViewModel";
 
 export default class ChatMessageViewModel {
     // data
@@ -203,7 +203,7 @@ export default class ChatMessageViewModel {
         public readonly coreViewModel: CoreViewModel,
         public readonly messagePageViewModel: MessagePageViewModel,
         chatMessage: ChatMessage,
-	public contact: ContactViewModel,
+        public contact: ContactViewModel,
         sentByUser: boolean,
     ) {
         this.chatMessage = chatMessage;

src/ViewModel/Chat/chatViewModel.ts

@@ -8,6 +8,7 @@ import CalendarPageViewModel, {
 import SettingsViewModel from "../Global/settingsViewModel";
 import NotificationViewModel from "../Global/notificationViewModel";
 import CoreViewModel, { Context, ContextHost } from "../Global/coreViewModel";
+import ContactListViewModel from "../Global/contactViewModel";
 import ConnectionViewModel from "../Global/connectionViewModel";
 import * as React from "../../react";
 import { Colors } from "../../colors";
@@ -21,7 +22,6 @@ import ChatModel, {
     ChatMessage,
     ChatMessageReaction,
 } from "../../Model/Chat/chatModel";
-import ContactListViewModel from "../Global/contactViewModel";
 
 export default class ChatViewModel extends ContextHost<ChatPageTypes> {
     calendarViewModel: CalendarPageViewModel;
@@ -150,7 +150,7 @@ export default class ChatViewModel extends ContextHost<ChatPageTypes> {
         public readonly notificationViewModel: NotificationViewModel,
         public readonly connectionViewModel: ConnectionViewModel,
         public readonly chatListViewModel: ChatListViewModel,
-	public readonly contactListViewModel: ContactListViewModel,
+        public readonly contactListViewModel: ContactListViewModel,
     ) {
         super("chat", coreViewModel);
 
@@ -169,7 +169,7 @@ export default class ChatViewModel extends ContextHost<ChatPageTypes> {
         this.messagePageViewModel = new MessagePageViewModel(
             this.coreViewModel,
             this,
-	    this.contactListViewModel,
+            this.contactListViewModel,
         );
         this.settingsPageViewModel = new SettingsPageViewModel(
             this.coreViewModel,

src/ViewModel/Global/contactViewModel.ts

@@ -1,6 +1,6 @@
-import ContactListModel from "../../Model/Global/contactListModel";
-import * as React from "../../react";
 import SettingsViewModel from "./settingsViewModel";
+import * as React from "../../react";
+import ContactListModel from "../../Model/Global/contactListModel";
 
 export default class ContactListViewModel {
     // state
@@ -8,43 +8,49 @@ export default class ContactListViewModel {
 
     // main
     updateContact = (id: string, name: string): ContactViewModel => {
-	if (id == this.settingsViewModel.settingsModel.userid) {
-	    this.settingsViewModel.setName(name);
-	}
+        if (id == this.settingsViewModel.settingsModel.userid) {
+            this.settingsViewModel.setName(name);
+        }
 
-	const match = this.contacts.get(id);
-	if (match) {
-	    match.name.value = name;
-	    return match;
-	}
-	const vm = new ContactViewModel(id, name);
-	this.contacts.set(id, vm);
-	return vm;
-    }
+        const match = this.contacts.get(id);
+        if (match) {
+            match.name.value = name;
+            return match;
+        }
+        const vm = new ContactViewModel(id, name);
+        this.contacts.set(id, vm);
+        return vm;
+    };
 
     handleContact = (contact: [string, string]): void => {
-	this.updateContact(...contact);
-    }
+        this.updateContact(...contact);
+    };
 
     unwrapContact = (id: string, knownName: string): ContactViewModel => {
-	if (this.contacts.has(id))
-	    return this.contacts.get(id)!
-	return this.updateContact(id, knownName);
-    }
+        if (this.contacts.has(id)) return this.contacts.get(id)!;
+        return this.updateContact(id, knownName);
+    };
 
     // load
     loadData = (): void => {
-	const contacts: [string, string][] = this.contactListModel.loadContacts();
-	for (const contact of contacts) {
-	    const vm = new ContactViewModel(...contact);
-	    this.contacts.set(vm.id, vm);
-	}
-    }
-    
+        const contacts: [string, string][] =
+            this.contactListModel.loadContacts();
+        for (const contact of contacts) {
+            const vm = new ContactViewModel(...contact);
+            this.contacts.set(vm.id, vm);
+        }
+    };
+
     // init
-    constructor(public contactListModel: ContactListModel, public settingsViewModel: SettingsViewModel) {
-	this.loadData();
-	this.contactListModel.contactHandlerManager.setHandler("contact-list-view-model", this.handleContact);
+    constructor(
+        public contactListModel: ContactListModel,
+        public settingsViewModel: SettingsViewModel,
+    ) {
+        this.loadData();
+        this.contactListModel.contactHandlerManager.setHandler(
+            "contact-list-view-model",
+            this.handleContact,
+        );
     }
 }
 
@@ -53,7 +59,10 @@ export class ContactViewModel {
     name: React.State<string> = new React.State("");
 
     // init
-    constructor(public id: string, name: string) {
-	this.name.value = name;
+    constructor(
+        public id: string,
+        name: string,
+    ) {
+        this.name.value = name;
     }
 }

src/ViewModel/Global/settingsViewModel.ts

@@ -1,7 +1,10 @@
 import CoreViewModel, { Context } from "./coreViewModel";
 import * as React from "../../react";
 import { CommonKeys } from "../../View/keystrokes";
-import SettingsModel, { Languages, ThemeSettings } from "../../Model/Global/settingsModel";
+import SettingsModel, {
+    Languages,
+    ThemeSettings,
+} from "../../Model/Global/settingsModel";
 
 export default class SettingsViewModel extends Context {
     // state
@@ -31,154 +34,158 @@ export default class SettingsViewModel extends Context {
 
     // methods
     setName = (name?: string): void => {
-	if (typeof name == "string") {
-	    this.usernameInput.value = name;
-	}
-	this.coreViewModel.settingsModel.setName(this.usernameInput.value);
-	this.username.value = this.coreViewModel.settingsModel.username;
-	this.usernameInput.callSubscriptions();
+        if (typeof name == "string") {
+            this.usernameInput.value = name;
+        }
+        this.coreViewModel.settingsModel.setName(this.usernameInput.value);
+        this.username.value = this.coreViewModel.settingsModel.username;
+        this.usernameInput.callSubscriptions();
     };
 
     setFirstDayofWeek = (): void => {
-	this.coreViewModel.settingsModel.setFirstDayOfWeek(
-	    this.firstDayOfWeek.value,
-	);
+        this.coreViewModel.settingsModel.setFirstDayOfWeek(
+            this.firstDayOfWeek.value,
+        );
     };
 
     showSettingsModal = (): void => {
-	this.coreViewModel.context = this;
-	this.isShowingSettingsModal.value = true;
+        this.coreViewModel.context = this;
+        this.isShowingSettingsModal.value = true;
     };
 
     showModalPage = (page: SettingsModalPages): void => {
-	this.selectedModalPage.value = page;
+        this.selectedModalPage.value = page;
     };
 
     // view
     applyTheme = (): void => {
-	let theme: string = this.theme.value;
+        let theme: string = this.theme.value;
 
-	if (theme == ThemeSettings.System)
-	    theme = SettingsViewModel.getSystemTheme();
+        if (theme == ThemeSettings.System)
+            theme = SettingsViewModel.getSystemTheme();
 
-	switch (theme) {
-	    case ThemeSettings.Dynamic:
-		const scene = this.selectDynamicScene();
-		this.setScene(scene);
-		break;
-	    case ThemeSettings.Dark:
-		this.setScene(DynamicSceneNight);
-		break;
-	    case ThemeSettings.Black:
-		this.setScene(DynamicSceneBlack);
-		break;
-	    default:
-		this.setScene(DynamicSceneDay);
-	}
+        switch (theme) {
+            case ThemeSettings.Dynamic:
+                const scene = this.selectDynamicScene();
+                this.setScene(scene);
+                break;
+            case ThemeSettings.Dark:
+                this.setScene(DynamicSceneNight);
+                break;
+            case ThemeSettings.Black:
+                this.setScene(DynamicSceneBlack);
+                break;
+            default:
+                this.setScene(DynamicSceneDay);
+        }
     };
 
     selectDynamicScene = (): DynamicScene => {
-	let hour = new Date().getHours();
+        let hour = new Date().getHours();
 
-	if (hour >= 21 || hour <= 6) {
-	    return DynamicSceneNight;
-	} else if (hour > 6 && hour < 10) {
-	    return DynamicSceneSunrise;
-	} else if (hour < 14) {
-	    return DynamicSceneDay;
-	} else if (hour < 17) {
-	    return DynamicSceneAfternoon;
-	} else {
-	    return DynamicSceneSunset;
-	}
+        if (hour >= 21 || hour <= 6) {
+            return DynamicSceneNight;
+        } else if (hour > 6 && hour < 10) {
+            return DynamicSceneSunrise;
+        } else if (hour < 14) {
+            return DynamicSceneDay;
+        } else if (hour < 17) {
+            return DynamicSceneAfternoon;
+        } else {
+            return DynamicSceneSunset;
+        }
     };
 
     setScene = (scene: DynamicScene): void => {
-	document.body.style.setProperty(
-	    "--backdrop-grass-filter",
-	    `brightness(${scene.brightness})`,
-	);
+        document.body.style.setProperty(
+            "--backdrop-grass-filter",
+            `brightness(${scene.brightness})`,
+        );
 
-	function setSkyColor(
-	    tone: 1 | 2,
-	    hue: number,
-	    saturation: number,
-	    luma: number,
-	) {
-	    document.body.style.setProperty(
-		`--sky-${tone}`,
-		`hsl(${hue}, ${saturation}%, ${luma}%)`,
-	    );
-	}
-	setSkyColor(1, scene.hue1, scene.saturation, scene.luma);
-	setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma - 10);
+        function setSkyColor(
+            tone: 1 | 2,
+            hue: number,
+            saturation: number,
+            luma: number,
+        ) {
+            document.body.style.setProperty(
+                `--sky-${tone}`,
+                `hsl(${hue}, ${saturation}%, ${luma}%)`,
+            );
+        }
+        setSkyColor(1, scene.hue1, scene.saturation, scene.luma);
+        setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma - 10);
 
-	document.body.setAttribute("theme", scene.baseTheme);
+        document.body.setAttribute("theme", scene.baseTheme);
     };
 
     // exit
     close = (): void => {
-	this.coreViewModel.closeContext(this.contextId);
+        this.coreViewModel.closeContext(this.contextId);
     };
 
     handleContextClose = (): void => {
-	this.isShowingSettingsModal.value = false;
-	if (this.requiresReload.value == true) {
-	    window.location.reload();
-	}
+        this.isShowingSettingsModal.value = false;
+        if (this.requiresReload.value == true) {
+            window.location.reload();
+        }
     };
 
     // init
-    constructor(public readonly coreViewModel: CoreViewModel, public readonly settingsModel: SettingsModel) {
-	super("settings");
+    constructor(
+        public readonly coreViewModel: CoreViewModel,
+        public readonly settingsModel: SettingsModel,
+    ) {
+        super("settings");
 
-	this.username.value = coreViewModel.settingsModel.username;
-	this.usernameInput.value = coreViewModel.settingsModel.username;
-	this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
-	this.language.value = coreViewModel.settingsModel.language;
-	this.theme.value = coreViewModel.settingsModel.theme;
+        this.username.value = coreViewModel.settingsModel.username;
+        this.usernameInput.value = coreViewModel.settingsModel.username;
+        this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
+        this.language.value = coreViewModel.settingsModel.language;
+        this.theme.value = coreViewModel.settingsModel.theme;
 
-	// subscriptions
-	this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
-	this.language.subscribeSilent((newValue) => {
-	    this.coreViewModel.settingsModel.setLanguage(newValue);
-	    this.requiresReload.value = true;
-	});
-	this.theme.subscribeSilent((newValue) => {
-	    this.coreViewModel.settingsModel.setTheme(newValue);
-	});
+        // subscriptions
+        this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
+        this.language.subscribeSilent((newValue) => {
+            this.coreViewModel.settingsModel.setLanguage(newValue);
+            this.requiresReload.value = true;
+        });
+        this.theme.subscribeSilent((newValue) => {
+            this.coreViewModel.settingsModel.setTheme(newValue);
+        });
 
-	// set theme
-	this.theme.subscribe(() => {
-	    this.applyTheme();
-	});
-	SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
-	    this.applyTheme(),
-	);
-	const seconds = new Date().getSeconds();
-	const secondsUntilNewMinute = 60 - seconds;
-	setTimeout(() => {
-	    setInterval(this.applyTheme, 1000 * 60);
-	}, secondsUntilNewMinute);
+        // set theme
+        this.theme.subscribe(() => {
+            this.applyTheme();
+        });
+        SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
+            this.applyTheme(),
+        );
+        const seconds = new Date().getSeconds();
+        const secondsUntilNewMinute = 60 - seconds;
+        setTimeout(() => {
+            setInterval(this.applyTheme, 1000 * 60);
+        }, secondsUntilNewMinute);
 
-	// keystrokes
-	this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
     }
 
     static generateThemeMedia(): MediaQueryList {
-	return window.matchMedia("(prefers-color-scheme: dark)");
+        return window.matchMedia("(prefers-color-scheme: dark)");
     }
 
     static getSystemTheme(): string {
-	const media = SettingsViewModel.generateThemeMedia();
-	return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
+        const media = SettingsViewModel.generateThemeMedia();
+        return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
     }
 }
 
 export enum SettingsModalPages {
     Appearance,
-	Regional,
-	Info,
+    Account,
+    Regional,
+    Info,
 }
 
 export interface DynamicScene {

src/ViewModel/Pages/messagePageViewModel.ts

@@ -1,5 +1,6 @@
 import SearchViewModel from "../Utility/searchViewModel";
 import CoreViewModel, { Context } from "../Global/coreViewModel";
+import ContactListViewModel from "../Global/contactViewModel";
 import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
 import ChatMessageViewModel from "../Chat/chatMessageViewModel";
 import * as React from "../../react";
@@ -9,7 +10,6 @@ import {
     ChatMessageReaction,
     ReactionSymbols,
 } from "../../Model/Chat/chatModel";
-import ContactListViewModel from "../Global/contactViewModel";
 
 export default class MessagePageViewModel extends Context {
     // state
@@ -107,138 +107,141 @@ export default class MessagePageViewModel extends Context {
 
     // view
     showChatMessage = (chatMessage: ChatMessage): void => {
-	const contact = this.contactListViewModel.unwrapContact(chatMessage.senderId, chatMessage.senderName);
-	const chatMessageViewModel = new ChatMessageViewModel(
-	    this.coreViewModel,
-	    this,
-	    chatMessage,
-	    contact,
-	    chatMessage.senderId ==
-	    this.chatViewModel.settingsViewModel.settingsModel.userid
-	);
+        const contact = this.contactListViewModel.unwrapContact(
+            chatMessage.senderId,
+            chatMessage.senderName,
+        );
+        const chatMessageViewModel = new ChatMessageViewModel(
+            this.coreViewModel,
+            this,
+            chatMessage,
+            contact,
+            chatMessage.senderId ==
+                this.chatViewModel.settingsViewModel.settingsModel.userid,
+        );
 
-	const existingChatMessageViewModel: ChatMessageViewModel | undefined =
-	    this.chatMessageViewModels.value.get(chatMessage.fileId);
-	if (existingChatMessageViewModel != undefined) {
-	    existingChatMessageViewModel.body.value = chatMessage.body;
-	    existingChatMessageViewModel.status.value = chatMessage.status;
-	} else {
-	    this.chatMessageViewModels.set(
-		chatMessage.fileId,
-		chatMessageViewModel,
-	    );
-	}
+        const existingChatMessageViewModel: ChatMessageViewModel | undefined =
+            this.chatMessageViewModels.value.get(chatMessage.fileId);
+        if (existingChatMessageViewModel != undefined) {
+            existingChatMessageViewModel.body.value = chatMessage.body;
+            existingChatMessageViewModel.status.value = chatMessage.status;
+        } else {
+            this.chatMessageViewModels.set(
+                chatMessage.fileId,
+                chatMessageViewModel,
+            );
+        }
     };
 
     handleReaction = (reaction: ChatMessageReaction): void => {
-	const messageViewModel: ChatMessageViewModel | undefined =
-	    this.chatMessageViewModels.value.get(reaction.messageId);
-	if (messageViewModel == undefined) return;
-	messageViewModel.handleReaction(reaction);
+        const messageViewModel: ChatMessageViewModel | undefined =
+            this.chatMessageViewModels.value.get(reaction.messageId);
+        if (messageViewModel == undefined) return;
+        messageViewModel.handleReaction(reaction);
     };
 
     showFilterModal = (): void => {
-	this.isFilterModalOpen.value = true;
+        this.isFilterModalOpen.value = true;
     };
 
     hideFilterModal = (): void => {
-	this.isFilterModalOpen.value = false;
+        this.isFilterModalOpen.value = false;
     };
 
     revokeReactionFilter = (persist: boolean = true): void => {
-	this.reactionFilter.value = undefined;
-	if (persist) this.chatViewModel.chatModel.storeFilter("");
+        this.reactionFilter.value = undefined;
+        if (persist) this.chatViewModel.chatModel.storeFilter("");
     };
 
     setReactionFilter = (content: ReactionSymbols): void => {
-	this.reactionFilter.value = content;
-	this.chatViewModel.chatModel.storeFilter(content);
+        this.reactionFilter.value = content;
+        this.chatViewModel.chatModel.storeFilter(content);
     };
 
     resetFilter = (): void => {
-	this.revokeReactionFilter();
-	this.searchViewModel.search("");
+        this.revokeReactionFilter();
+        this.searchViewModel.search("");
     };
 
     setReplyView = (message: ChatMessageViewModel): void => {
-	this.replyViewSelectedMessage.value = message;
-	this.revokeReactionFilter(false);
-	this.setReply(message, false);
+        this.replyViewSelectedMessage.value = message;
+        this.revokeReactionFilter(false);
+        this.setReply(message, false);
     };
 
     resetReplyView = (): void => {
-	this.replyViewSelectedMessage.value = undefined;
-	this.resetReply(false);
-	this.restoreFilter();
+        this.replyViewSelectedMessage.value = undefined;
+        this.resetReply(false);
+        this.restoreFilter();
     };
 
     setFocus = (): void => {
-	this.focusSetter.callSubscriptions();
+        this.focusSetter.callSubscriptions();
     };
 
     // load
     loadData = (): void => {
-	this.chatMessageViewModels.clear();
-	for (const chatMessage of this.chatViewModel.chatModel.messages) {
-	    this.showChatMessage(chatMessage);
-	}
-	for (const reaction of this.chatViewModel.chatModel.reactions) {
-	    this.handleReaction(reaction);
-	}
+        this.chatMessageViewModels.clear();
+        for (const chatMessage of this.chatViewModel.chatModel.messages) {
+            this.showChatMessage(chatMessage);
+        }
+        for (const reaction of this.chatViewModel.chatModel.reactions) {
+            this.handleReaction(reaction);
+        }
     };
 
     restoreFilter = (): void => {
-	const previousFilter = this.chatViewModel.chatModel.getFilter() as any;
-	if (Object.values(ReactionSymbols).includes(previousFilter))
-	    this.setReactionFilter(previousFilter);
+        const previousFilter = this.chatViewModel.chatModel.getFilter() as any;
+        if (Object.values(ReactionSymbols).includes(previousFilter))
+            this.setReactionFilter(previousFilter);
     };
 
     // init
     constructor(
-	public readonly coreViewModel: CoreViewModel,
-	public readonly chatViewModel: ChatViewModel,
-	public readonly contactListViewModel: ContactListViewModel,
+        public readonly coreViewModel: CoreViewModel,
+        public readonly chatViewModel: ChatViewModel,
+        public readonly contactListViewModel: ContactListViewModel,
     ) {
-	super("message-page");
-	this.restoreFilter();
+        super("message-page");
+        this.restoreFilter();
 
-	// states
-	this.cannotSendMessage = React.createProxyState(
-	    [
-		this.chatViewModel.settingsViewModel.username,
-		this.composingMessage,
-	    ],
-	    () =>
-	    this.chatViewModel.settingsViewModel.username.value == "" ||
-	    this.composingMessage.value == "",
-	);
+        // states
+        this.cannotSendMessage = React.createProxyState(
+            [
+                this.chatViewModel.settingsViewModel.username,
+                this.composingMessage,
+            ],
+            () =>
+                this.chatViewModel.settingsViewModel.username.value == "" ||
+                this.composingMessage.value == "",
+        );
 
-	this.searchViewModel = new SearchViewModel(
-	    this.chatMessageViewModels,
-	    this.filteredMessageViewModels,
-	    (chatMessageViewModel) => [chatMessageViewModel.body.value],
-	    new React.ListState(),
-	);
+        this.searchViewModel = new SearchViewModel(
+            this.chatMessageViewModels,
+            this.filteredMessageViewModels,
+            (chatMessageViewModel) => [chatMessageViewModel.body.value],
+            new React.ListState(),
+        );
 
-	this.isFilterActive = React.createProxyState(
-	    [this.searchViewModel.appliedQuery, this.reactionFilter],
-	    () =>
-	    this.searchViewModel.appliedQuery.value != "" ||
-	    this.reactionFilter.value != undefined,
-	);
+        this.isFilterActive = React.createProxyState(
+            [this.searchViewModel.appliedQuery, this.reactionFilter],
+            () =>
+                this.searchViewModel.appliedQuery.value != "" ||
+                this.reactionFilter.value != undefined,
+        );
 
-	// keystrokes
-	this.registerKeyStroke(CommonKeys.Filter, this.showFilterModal);
-	this.registerKeyStroke(CommonKeys.CloseOrCancel, () => {
-	    if (this.isFilterModalOpen.value == true) {
-		this.hideFilterModal();
-	    } else {
-		this.replyingMessage.value = undefined;
-	    }
-	});
-	this.registerKeyStroke(CommonKeys.Reset, this.resetFilter);
-	this.registerKeyStroke(CommonKeys.Create, this.setFocus);
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.Filter, this.showFilterModal);
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, () => {
+            if (this.isFilterModalOpen.value == true) {
+                this.hideFilterModal();
+            } else {
+                this.replyingMessage.value = undefined;
+            }
+        });
+        this.registerKeyStroke(CommonKeys.Reset, this.resetFilter);
+        this.registerKeyStroke(CommonKeys.Create, this.setFocus);
 
-	this.chatViewModel.registerContext(ChatPageTypes.Messages, this);
+        this.chatViewModel.registerContext(ChatPageTypes.Messages, this);
     }
 }