add context, rewrite keystrokes

src/View/ChatPages/messagePage.tsx

@@ -63,7 +63,7 @@ export function MessagePage(
                         <span>
                             <button
                                 class="ghost"
-                                on:click={messagePageViewModel.openFilterModal}
+                                on:click={messagePageViewModel.showFilterModal}
                                 aria-label={
                                     coreViewModel.translations.chatPage.message
                                         .filterMessagesButtonAudioLabel

src/View/Modals/messageFilterModal.tsx

@@ -105,7 +105,7 @@ export function MessageFilterModal<T>(
                         </div>
                     </div>
                 </main>
-                <button on:click={messagePageViewModel.closeFilterModal}>
+                <button on:click={messagePageViewModel.hideFilterModal}>
                     {coreViewModel.translations.general.closeButton}
                     <span class="icon">close</span>
                 </button>

src/View/Modals/taskSettingsModal.tsx

@@ -27,12 +27,7 @@ export function TaskSettingsModal(
     };
 
     return (
-        <div
+        <div class="modal" open>
-            class="modal"
-            open
-            keystroke:s={taskViewModel.closeAndSave}
-            keystroke:Escape={taskViewModel.closeAndDiscard}
-        >
             <div>
                 <main>
                     <h2>

src/View/keystrokes.ts

@@ -0,0 +1,8 @@
+export enum CommonKeys {
+    Home = " ",
+    Filter = "=",
+    Reset = "-",
+    CloseOrCancel = "backspace",
+    Apply = "enter",
+    Settings = ",",
+}

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -133,7 +133,6 @@ export default class ChatMessageViewModel {
         this.loadData();
 
         this.messagePageViewModel.reactionFilter.subscribe((content) => {
-            console.log(content, content == undefined);
             if (content == undefined) {
                 this.isHidden.value = false;
                 return;

src/ViewModel/Chat/chatViewModel.ts

@@ -14,7 +14,7 @@ import StorageModel, {
 
 import ChatListViewModel from "./chatListViewModel";
 import { Colors } from "../../colors";
-import CoreViewModel from "../Global/coreViewModel";
+import CoreViewModel, { Context, ContextHost } from "../Global/coreViewModel";
 import { Entry } from "../../View/Components/option";
 import MessagePageViewModel from "../Pages/messagePageViewModel";
 import SettingsPageViewModel from "../Pages/settingsPageViewModel";
@@ -22,8 +22,12 @@ import SettingsViewModel from "../Global/settingsViewModel";
 import TaskPageViewModel from "../Pages/taskPageViewModel";
 import ConnectionViewModel from "../Global/connectionViewModel";
 import NotificationViewModel from "../Global/notificationViewModel";
+import { v4 } from "uuid";
+import { CommonKeys } from "../../View/keystrokes";
+
+export default class ChatViewModel extends ContextHost<ChatPageTypes> {
+    contextDebugDescription = "chat";
 
-export default class ChatViewModel {
     calendarViewModel: CalendarPageViewModel;
     taskPageViewModel: TaskPageViewModel;
     messagePageViewModel: MessagePageViewModel;
@@ -34,47 +38,36 @@ export default class ChatViewModel {
     selectedPage: React.State<ChatPageTypes> = new React.State<any>(
         ChatPageTypes.Messages,
     );
+    pageContexts = new React.MapState<Context>();
 
     index: React.State<number> = new React.State(0);
     hasUnreadMessages: React.State<boolean> = new React.State(false);
 
     taskBoardSuggestions: React.MapState<Entry> = new React.MapState();
 
+    // context
+    get isOpen(): boolean {
+        return this.chatListViewModel.selectedChat.value == this;
+    }
+
+    get contextSelection(): ChatPageTypes {
+        return this.selectedPage.value;
+    }
+
     // view
     open = (): void => {
+        this.coreViewModel.context = this;
         this.chatListViewModel.openChat(this);
-        document.body.addEventListener("keydown", this.handleKeystroke);
     };
 
     close = (): void => {
+        this.coreViewModel.closeContext(this.contextId);
         this.chatListViewModel.closeChat();
-        document.body.removeEventListener("keydown", this.handleKeystroke);
     };
 
-    handleKeystroke = (e: KeyboardEvent): any => {
+    openPage = (page: ChatPageTypes): void => {
-        if (!e.metaKey && !e.ctrlKey) return;
+        this.closeContext();
-
+        this.selectedPage.value = page;
-        switch (e.key) {
-            case "e":
-                this.close();
-                break;
-            case "1":
-                this.selectedPage.value = ChatPageTypes.Messages;
-                break;
-            case "2":
-                this.selectedPage.value = ChatPageTypes.Tasks;
-                break;
-            case "3":
-                this.selectedPage.value = ChatPageTypes.Calendar;
-                break;
-            case ",":
-                this.selectedPage.value = ChatPageTypes.Settings;
-                break;
-            default:
-                return;
-        }
-
-        e.preventDefault();
     };
 
     closeSubPages = (): void => {};
@@ -159,6 +152,8 @@ export default class ChatViewModel {
         public connectionViewModel: ConnectionViewModel,
         public chatListViewModel: ChatListViewModel,
     ) {
+        super();
+
         // page viewModels
         this.calendarViewModel = new CalendarPageViewModel(
             coreViewModel,
@@ -200,6 +195,23 @@ export default class ChatViewModel {
         this.resetColor();
         this.loadInfo();
         this.subscribeReadStatus();
+
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.Home, this.close);
+        this.registerKeyStroke("h", () =>
+            this.openPage(ChatPageTypes.Messages),
+        );
+        this.registerKeyStroke("j", () => this.openPage(ChatPageTypes.Tasks));
+        this.registerKeyStroke("k", () =>
+            this.openPage(ChatPageTypes.Calendar),
+        );
+        this.registerKeyStroke(CommonKeys.Settings, () =>
+            this.openPage(ChatPageTypes.Settings),
+        );
+
+        // context
+        this.chatListViewModel.selectedChat.subscribeSilent(this.updateContexts);
+        this.selectedPage.subscribeSilent(this.updateContexts);
     }
 }
 

src/ViewModel/Global/coreViewModel.ts

@@ -5,12 +5,55 @@ import StorageModel from "../../Model/Global/storageModel";
 import ConnectionModel from "../../Model/Global/connectionModel";
 import ChatListModel from "../../Model/Chat/chatListModel";
 import FileTransferModel from "../../Model/Global/fileTransferModel";
+import { v4 } from "uuid";
 
 export default class CoreViewModel {
     readonly BUILD = "Build 26.04.12.A";
 
     translations: Translations;
 
+    // CONTEXT
+    private contextStack = new Map<string, Context>();
+    get contexts(): Context[] {
+        return [...this.contextStack.values()];
+    }
+    get context(): Context | undefined {
+        return this.contexts.pop();
+    }
+    logContexts = (): void => {
+        console.log(
+            "context",
+            this.contexts.map(
+                (x) => x.contextDebugDescription + "-" + x.contextId,
+            ),
+        );
+    };
+    set context(context: Context) {
+        if (this.contextStack.has(context.contextId)) return;
+        this.contextStack.set(context.contextId, context);
+        this.logContexts();
+    }
+    closeContext = (contextId: string): void => {
+        if (!this.contexts.map(context=>context.contextId).includes(contextId)) return;
+        while (this.contexts.length > 0) {
+            const currentContext = this.context;
+            this.contextStack.delete(currentContext.contextId);
+            if (currentContext.contextId == contextId) break;
+        }
+        this.logContexts();
+    };
+
+    handleKeyDown = (e: KeyboardEvent): void => {
+        if (!CoreViewModel.checkIsKeystroke(e)) return;
+        const contexts = this.contexts;
+        while (contexts.length > 0) {
+            const currentContext = contexts.pop();
+            if (!currentContext) contexts;
+            const isHandled: boolean = currentContext.handleKeystroke(e);
+            if (isHandled == true) break;
+        }
+    };
+
     // DRAG & DROP
     draggedObject: React.State<any> = new React.State<any>(undefined);
 
@@ -32,5 +75,71 @@ export default class CoreViewModel {
     ) {
         this.translations =
             allTranslations[settingsModel.language] || allTranslations.en;
+
+        document.body.addEventListener("keydown", this.handleKeyDown);
+    }
+
+    // util
+    static checkIsKeystroke(e: KeyboardEvent): boolean {
+        return (e.metaKey || e.ctrlKey) && e.shiftKey;
     }
 }
+
+export class Context {
+    contextId = v4();
+    contextDebugDescription: string;
+    keystrokes = new Map<string, () => void>();
+
+    handleKeystroke = (e: KeyboardEvent): boolean => {
+        const fn = this.keystrokes.get(e.key.toLowerCase());
+        if (!fn) return false;
+        e.preventDefault();
+        fn();
+        return true;
+    };
+
+    close: () => void;
+
+    registerKeyStroke = (key: string, fn: () => void): void => {
+        this.keystrokes.set(key, fn);
+    };
+}
+
+export class ContextHost<T> extends Context {
+    coreViewModel: CoreViewModel;
+    contexts = new Map<T, Context>();
+    currentContext = new React.State<Context | undefined>(undefined);
+
+    get isOpen(): boolean {
+        return false;
+    }
+    get contextSelection(): T | undefined {
+        return undefined;
+    }
+
+    registerContext = (key: T, context: Context): void => {
+        this.contexts.set(key, context);
+    };
+
+    closeContext = (): void => {
+        if (this.currentContext.value) {
+            this.coreViewModel.closeContext(this.currentContext.value.contextId);
+        }
+        this.currentContext.value = undefined;
+    };
+
+    updateContexts = (): void => {
+        if (this.isOpen == false) return;
+
+        const selectedContext = this.contexts.get(this.contextSelection);
+        if (!selectedContext) return;
+        if (selectedContext != this.currentContext.value) {
+            this.closeContext();
+        };
+
+        this.coreViewModel.logContexts();
+
+        this.coreViewModel.context = selectedContext;
+        this.currentContext.value = selectedContext;
+    };
+}

src/ViewModel/Global/fileTransferViewModel.ts

@@ -9,9 +9,12 @@ import StorageModel, {
 } from "../../Model/Global/storageModel";
 
 import ChatModel from "../../Model/Chat/chatModel";
-import CoreViewModel from "./coreViewModel";
+import CoreViewModel, { Context } from "./coreViewModel";
+import { CommonKeys } from "../../View/keystrokes";
+
+export default class FileTransferViewModel extends Context {
+    contextDebugDescription = "transfer";
 
-export default class FileTransferViewModel {
     // state
     presentedModal: React.State<FileTransferModals | undefined> =
         new React.State<any>(undefined);
@@ -116,6 +119,7 @@ export default class FileTransferViewModel {
 
     // view
     showDirectionSelectionModal = (): void => {
+        this.coreViewModel.context = this;
         this.presentedModal.value = FileTransferModals.DirectionSelection;
         this.getOptions();
     };
@@ -162,11 +166,14 @@ export default class FileTransferViewModel {
     };
 
     hideModal = (): void => {
+        this.coreViewModel.closeContext(this.contextId);
         this.presentedModal.value = undefined;
     };
 
     // init
     constructor(public coreViewModel: CoreViewModel) {
+        super();
+
         this.coreViewModel.fileTransferModel.fileHandlerManager.addHandler(
             this.handleReceivedFile,
         );
@@ -174,6 +181,9 @@ export default class FileTransferViewModel {
         this.coreViewModel.fileTransferModel.readyToSendHandlerManager.addHandler(
             () => this.initiateTransfer(),
         );
+
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.hideModal);
     }
 }
 

src/ViewModel/Global/settingsViewModel.ts

@@ -1,9 +1,12 @@
 import * as React from "bloatless-react";
 
-import CoreViewModel from "./coreViewModel";
+import CoreViewModel, { Context } from "./coreViewModel";
 import { Languages, ThemeSettings } from "../../Model/Global/settingsModel";
+import { CommonKeys } from "../../View/keystrokes";
+
+export default class SettingsViewModel extends Context {
+    contextDebugDescription = "settings";
 
-export default class SettingsViewModel {
     // state
     username: React.State<string> = new React.State("");
     usernameInput: React.State<string> = new React.State("");
@@ -43,10 +46,12 @@ export default class SettingsViewModel {
     };
 
     showSettingsModal = (): void => {
+        this.coreViewModel.context = this;
         this.isShowingSettingsModal.value = true;
     };
 
     hideSettingsModal = (): void => {
+        this.coreViewModel.closeContext(this.contextId);
         this.isShowingSettingsModal.value = false;
         if (this.requiresReload.value == true) {
             window.location.reload();
@@ -68,6 +73,8 @@ export default class SettingsViewModel {
 
     // init
     constructor(public coreViewModel: CoreViewModel) {
+        super();
+
         this.username.value = coreViewModel.settingsModel.username;
         this.usernameInput.value = coreViewModel.settingsModel.username;
         this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
@@ -91,6 +98,9 @@ export default class SettingsViewModel {
         SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
             this.applyTheme(),
         );
+
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.hideSettingsModal);
     }
 
     static generateThemeMedia(): MediaQueryList {

src/ViewModel/Global/storageViewModel.ts

@@ -4,9 +4,12 @@ import StorageModel, {
     PATH_COMPONENT_SEPARATOR,
 } from "../../Model/Global/storageModel";
 
-import CoreViewModel from "./coreViewModel";
+import CoreViewModel, { Context } from "./coreViewModel";
+import { CommonKeys } from "../../View/keystrokes";
+
+export default class StorageViewModel extends Context {
+    contextDebugDescription = "storage";
 
-export default class StorageViewModel {
     // state
     isShowingStorageModal: React.State<boolean> = new React.State(false);
     selectedPath: React.State<string> = new React.State(
@@ -48,10 +51,12 @@ export default class StorageViewModel {
 
     // view
     showStorageModal = (): void => {
+        this.coreViewModel.context = this;
         this.isShowingStorageModal.value = true;
     };
 
     hideStorageModal = (): void => {
+        this.coreViewModel.closeContext(this.contextId);
         if (this.didMakeChanges.value == true) {
             window.location.reload();
             return;
@@ -61,6 +66,8 @@ export default class StorageViewModel {
 
     // init
     constructor(public coreViewModel: CoreViewModel) {
+        super();
+
         this.selectedFileName = React.createProxyState(
             [this.selectedPath],
             () => StorageModel.getFileNameFromString(this.selectedPath.value),
@@ -69,5 +76,8 @@ export default class StorageViewModel {
             [this.selectedPath],
             () => this.getSelectedItemContent(),
         );
+
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.hideStorageModal);
     }
 }

src/ViewModel/Pages/boardViewModel.ts

@@ -13,8 +13,11 @@ import StorageModel from "../../Model/Global/storageModel";
 import TaskContainingPageViewModel from "./taskContainingPageViewModel";
 import TaskPageViewModel from "./taskPageViewModel";
 import TaskViewModel from "./taskViewModel";
+import { CommonKeys } from "../../View/keystrokes";
 
 export default class BoardViewModel extends TaskContainingPageViewModel {
+    contextDebugDescription = "board";
+
     // state
     name: React.State<string> = new React.State("");
     color: React.State<Colors> = new React.State<any>(Colors.Standard);
@@ -180,6 +183,10 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
         this.isPresentingFilterModal.value = false;
     };
 
+    resetFilter = (): void => {
+        this.searchViewModel.search("");
+    };
+
     updateIndex = (): void => {
         const index: number =
             this.taskPageViewModel.boardIndexManager.getIndex(this);
@@ -295,6 +302,13 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
             [this.searchViewModel.appliedQuery],
             () => this.searchViewModel.appliedQuery.value != "",
         );
+
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.Filter, this.showFilterModal);
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.hideFilterModal);
+        this.registerKeyStroke(CommonKeys.Reset, this.resetFilter);
+
+        this.taskPageViewModel.registerContext(this.boardInfo.fileId, this);
     }
 }
 

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -5,15 +5,17 @@ import BoardsAndTasksModel, {
 } from "../../Model/Files/boardsAndTasksModel";
 import CalendarModel, { MonthGrid } from "../../Model/Files/calendarModel";
 
-import ChatViewModel from "../Chat/chatViewModel";
+import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
 import CoreViewModel from "../Global/coreViewModel";
-import StorageModel from "../../Model/Global/storageModel";
 import TaskContainingPageViewModel from "./taskContainingPageViewModel";
 import TaskViewModel from "./taskViewModel";
+import { CommonKeys } from "../../View/keystrokes";
 
 export const CALENDAR_EVENT_BOARD_ID = "events";
 
 export default class CalendarPageViewModel extends TaskContainingPageViewModel {
+    contextDebugDescription = "calendar";
+
     // data
     get monthString(): string {
         return CalendarModel.getMonthString(
@@ -208,6 +210,13 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
 
         // initiate
         this.showToday();
+
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.Reset, this.showToday);
+        this.registerKeyStroke("p", this.showNextMonth);
+        this.registerKeyStroke("o", this.showPreviousMonth);
+
+        this.chatViewModel.registerContext(ChatPageTypes.Calendar, this);
     }
 }
 

src/ViewModel/Pages/homeViewModel.ts

@@ -0,0 +1,34 @@
+import { CommonKeys } from "../../View/keystrokes";
+import ConnectionViewModel from "../Global/connectionViewModel";
+import CoreViewModel, { Context } from "../Global/coreViewModel";
+import FileTransferViewModel from "../Global/fileTransferViewModel";
+import SettingsViewModel from "../Global/settingsViewModel";
+import StorageViewModel from "../Global/storageViewModel";
+
+export default class HomeViewModel extends Context {
+    contextDebugDescription = "home";
+
+    constructor(
+        public coreViewModel: CoreViewModel,
+        public settingsViewModel: SettingsViewModel,
+        public fileTransferViewModel: FileTransferViewModel,
+        public storageViewModel: StorageViewModel,
+        public connectionViewModel: ConnectionViewModel,
+    ) {
+        super();
+
+        this.coreViewModel.context = this;
+
+        this.registerKeyStroke(
+            CommonKeys.Settings,
+            this.settingsViewModel.showSettingsModal,
+        );
+        this.registerKeyStroke(
+            "d",
+            this.fileTransferViewModel.showDirectionSelectionModal,
+        );
+        this.registerKeyStroke("e", this.storageViewModel.showStorageModal);
+        this.registerKeyStroke("x", this.connectionViewModel.disconnect);
+        this.registerKeyStroke("c", this.connectionViewModel.connect);
+    }
+}

src/ViewModel/Pages/messagePageViewModel.ts

@@ -6,11 +6,15 @@ import {
     ReactionSymbols,
 } from "../../Model/Chat/chatModel";
 import ChatMessageViewModel from "../Chat/chatMessageViewModel";
-import ChatViewModel from "../Chat/chatViewModel";
+import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
-import CoreViewModel from "../Global/coreViewModel";
+import CoreViewModel, { Context } from "../Global/coreViewModel";
 import SearchViewModel from "../Utility/searchViewModel";
+import { v4 } from "uuid";
+import { CommonKeys } from "../../View/keystrokes";
+
+export default class MessagePageViewModel extends Context {
+    contextDebugDescription = "message-page";
 
-export default class MessagePageViewModel {
     // state
     chatMessageViewModels: React.MapState<ChatMessageViewModel> =
         new React.MapState();
@@ -89,11 +93,11 @@ export default class MessagePageViewModel {
         messageViewModel.handleReaction(reaction);
     };
 
-    openFilterModal = (): void => {
+    showFilterModal = (): void => {
         this.isFilterModalOpen.value = true;
     };
 
-    closeFilterModal = (): void => {
+    hideFilterModal = (): void => {
         this.isFilterModalOpen.value = false;
     };
 
@@ -105,6 +109,11 @@ export default class MessagePageViewModel {
         this.reactionFilter.value = content;
     };
 
+    resetFilter = (): void => {
+        this.revokeReactionFilter();
+        this.searchViewModel.search("");
+    };
+
     // load
     loadData = (): void => {
         this.chatMessageViewModels.clear();
@@ -121,6 +130,9 @@ export default class MessagePageViewModel {
         public coreViewModel: CoreViewModel,
         public chatViewModel: ChatViewModel,
     ) {
+        super();
+
+        // states
         this.cannotSendMessage = React.createProxyState(
             [
                 this.chatViewModel.settingsViewModel.username,
@@ -144,5 +156,12 @@ export default class MessagePageViewModel {
                 this.searchViewModel.appliedQuery.value != "" ||
                 this.reactionFilter.value != undefined,
         );
+
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.Filter, this.showFilterModal);
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.hideFilterModal);
+        this.registerKeyStroke(CommonKeys.Reset, this.resetFilter);
+
+        this.chatViewModel.registerContext(ChatPageTypes.Messages, this);
     }
 }

src/ViewModel/Pages/settingsPageViewModel.ts

@@ -1,10 +1,12 @@
 import * as React from "bloatless-react";
 
-import ChatViewModel from "../Chat/chatViewModel";
+import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
 import { Colors } from "../../colors";
-import CoreViewModel from "../Global/coreViewModel";
+import CoreViewModel, { Context } from "../Global/coreViewModel";
+
+export default class SettingsPageViewModel extends Context {
+    contextDebugDescription = "settings";
 
-export default class SettingsPageViewModel {
     // state
     primaryChannel: React.State<string> = new React.State("");
     primaryChannelInput: React.State<string> = new React.State("");
@@ -113,6 +115,8 @@ export default class SettingsPageViewModel {
         public coreViewModel: CoreViewModel,
         public chatViewModel: ChatViewModel,
     ) {
+        super();
+
         this.loadListRelevantData();
 
         this.cannotSetEncryptionKey = React.createProxyState(
@@ -125,5 +129,7 @@ export default class SettingsPageViewModel {
         this.color.subscribe((newColor) => {
             this.applyColor(newColor);
         });
+
+        this.chatViewModel.registerContext(ChatPageTypes.Settings, this);
     }
 }

src/ViewModel/Pages/taskContainingPageViewModel.ts

@@ -5,11 +5,11 @@ import BoardsAndTasksModel, {
 } from "../../Model/Files/boardsAndTasksModel";
 
 import ChatViewModel from "../Chat/chatViewModel";
-import CoreViewModel from "../Global/coreViewModel";
+import CoreViewModel, { Context } from "../Global/coreViewModel";
 import { IndexManager } from "../../Model/Utility/utility";
 import TaskViewModel from "./taskViewModel";
 
-export default class TaskContainingPageViewModel {
+export default class TaskContainingPageViewModel extends Context {
     // state
     taskIndexManager: IndexManager<TaskViewModel> = new IndexManager(
         (taskViewModel: TaskViewModel) => taskViewModel.sortingString,
@@ -59,5 +59,7 @@ export default class TaskContainingPageViewModel {
         public coreViewModel: CoreViewModel,
         public chatViewModel: ChatViewModel,
         public boardsAndTasksModel: BoardsAndTasksModel,
-    ) {}
+    ) {
+        super();
+    }
 }

src/ViewModel/Pages/taskPageViewModel.ts

@@ -4,12 +4,14 @@ import BoardsAndTasksModel, {
     BoardInfoFileContent,
 } from "../../Model/Files/boardsAndTasksModel";
 
-import BoardViewModel from "./boardViewModel";
+import BoardViewModel, { BoardPageTypes } from "./boardViewModel";
-import ChatViewModel from "../Chat/chatViewModel";
+import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
-import CoreViewModel from "../Global/coreViewModel";
+import CoreViewModel, { Context, ContextHost } from "../Global/coreViewModel";
 import { IndexManager } from "../../Model/Utility/utility";
 
-export default class TaskPageViewModel {
+export default class TaskPageViewModel extends ContextHost<string> {
+    contextDebugDescription = "task-page";
+
     // data
     boardIndexManager: IndexManager<BoardViewModel> = new IndexManager(
         (boardViewModel: BoardViewModel) => boardViewModel.name.value,
@@ -19,26 +21,33 @@ export default class TaskPageViewModel {
     getBasePath = (): string[] => {
         return [...this.boardsAndTasksModel.getViewPath()];
     };
-
     getBoardViewPath = (boardId): string[] => {
         return [...this.getBasePath(), boardId];
     };
-
     getLastUsedBoardPath = (): string[] => {
         return [...this.getBasePath(), TaskPageViewModelSubPaths.LastUsedBoard];
     };
 
     // state
     newBoardNameInput: React.State<string> = new React.State("");
-
     boardViewModels: React.MapState<BoardViewModel> = new React.MapState();
-
     isShowingBoadList: React.State<boolean> = new React.State(true);
-
     selectedBoardId: React.State<string | undefined> = new React.State<any>(
         undefined,
     );
 
+    // context
+    get isOpen(): boolean {
+        return (
+            this.chatViewModel.isOpen &&
+            this.chatViewModel.selectedPage.value == ChatPageTypes.Tasks
+        );
+    }
+
+    get contextSelection(): string {
+        return this.selectedBoardId.value;
+    }
+
     // guards
     cannotCreateBoard: React.State<boolean> = React.createProxyState(
         [this.newBoardNameInput],
@@ -98,6 +107,8 @@ export default class TaskPageViewModel {
     };
 
     closeBoard = (): void => {
+        this.closeContext();
+
         this.selectedBoardId.value = undefined;
         this.chatViewModel.resetColor();
 
@@ -154,6 +165,8 @@ export default class TaskPageViewModel {
         public chatViewModel: ChatViewModel,
         public boardsAndTasksModel: BoardsAndTasksModel,
     ) {
+        super();
+
         this.chatViewModel = chatViewModel;
 
         this.loadData();
@@ -165,6 +178,11 @@ export default class TaskPageViewModel {
                 this.updateBoardIndices();
             },
         );
+
+        // context
+        this.chatViewModel.registerContext(ChatPageTypes.Tasks, this);
+
+        this.selectedBoardId.subscribeSilent(this.updateContexts);
     }
 }
 

src/ViewModel/Pages/taskViewModel.ts

@@ -6,11 +6,16 @@ import BoardsAndTasksModel, {
 import { localeCompare, padZero } from "../../Model/Utility/utility";
 
 import ChatViewModel from "../Chat/chatViewModel";
-import CoreViewModel from "../Global/coreViewModel";
+import CoreViewModel, { Context } from "../Global/coreViewModel";
 import TaskContainingPageViewModel from "./taskContainingPageViewModel";
 import { allowDrag } from "../../View/utility";
+import { v4 } from "uuid";
+import { CommonKeys } from "../../View/keystrokes";
 
-export default class TaskViewModel {
+export default class TaskViewModel extends Context {
+    contextDebugDescription = "task";
+
+    // util
     get sortingString(): string {
         const splitDate: string[] = this.date.value.split("-");
         const year = padZero(splitDate[0], 4);
@@ -82,21 +87,21 @@ export default class TaskViewModel {
 
     // view
     open = (): void => {
+        this.coreViewModel.context = this;
         this.containingModel.selectTask(this);
     };
 
     close = (): void => {
+        this.coreViewModel.closeContext(this.contextId);
         this.containingModel.closeTask();
     };
 
-    closeAndDiscard = (e: Event): void => {
+    closeAndDiscard = (): void => {
-        e.preventDefault();
         this.close();
         this.loadTaskData();
     };
 
-    closeAndSave = (e: Event): void => {
+    closeAndSave = (): void => {
-        e.preventDefault();
         this.close();
         this.save();
     };
@@ -211,6 +216,8 @@ export default class TaskViewModel {
         public containingModel: TaskContainingPageViewModel,
         public task: TaskFileContent,
     ) {
+        super();
+
         // load
         this.loadAllData();
 
@@ -218,6 +225,10 @@ export default class TaskViewModel {
         this.selectedVersionId.subscribeSilent((selectedVersionId) => {
             this.switchVersion(selectedVersionId);
         });
+
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.Apply, this.closeAndSave);
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.closeAndDiscard);
     }
 
     // utility

src/index.tsx

@@ -22,6 +22,7 @@ import StorageModel from "./Model/Global/storageModel";
 import StorageViewModel from "./ViewModel/Global/storageViewModel";
 import v1Upgrader from "./Upgrader/v1";
 import { SettingsModal } from "./View/Modals/settingsModal";
+import HomeViewModel from "./ViewModel/Pages/homeViewModel";
 
 // models
 const storageModel = new StorageModel();
@@ -56,6 +57,14 @@ const chatListViewModel = new ChatListViewModel(
 );
 const fileTransferViewModel = new FileTransferViewModel(coreViewModel);
 
+const homeViewModel = new HomeViewModel(
+    coreViewModel,
+    settingsViewModel,
+    fileTransferViewModel,
+    storageViewModel,
+    connectionViewModel,
+);
+
 // view
 chatListViewModel.selectedChat.subscribe(() => {
     document.body.toggleAttribute(