add keystrokes for chat navigation

dist/index.js

@@ -1693,7 +1693,8 @@
       this.close = () => {
         this.containingModel.closeTask();
       };
-      this.closeAndDiscard = () => {
+      this.closeAndDiscard = (e) => {
+        e.preventDefault();
         this.close();
         this.loadTaskData();
       };
@@ -2751,9 +2752,34 @@
       // view
       this.open = () => {
         this.chatListViewModel.openChat(this);
+        document.body.addEventListener("keydown", this.handleKeystroke);
       };
       this.close = () => {
         this.chatListViewModel.closeChat();
+        document.body.removeEventListener("keydown", this.handleKeystroke);
+      };
+      this.handleKeystroke = (e) => {
+        if (!e.metaKey && !e.ctrlKey) return;
+        switch (e.key) {
+          case "e":
+            this.close();
+            break;
+          case "1":
+            this.selectedPage.value = "messages" /* Messages */;
+            break;
+          case "2":
+            this.selectedPage.value = "tasks" /* Tasks */;
+            break;
+          case "3":
+            this.selectedPage.value = "calendar" /* Calendar */;
+            break;
+          case ",":
+            this.selectedPage.value = "settings" /* Settings */;
+            break;
+          default:
+            return;
+        }
+        e.preventDefault();
       };
       this.closeSubPages = () => {
       };
@@ -3125,107 +3151,116 @@
       const isSelected = entry[0] == taskViewModel.task.boardId;
       return Option(entry[1], entry[0], isSelected);
     };
-    return /* @__PURE__ */ createElement("div", { class: "modal", open: true, "keystroke:s": taskViewModel.closeAndSave }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.chatPage.task.taskSettingsHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.general.fileVersionLabel), /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement(
-      "select",
+      "div",
       {
-        "bind:value": taskViewModel.selectedVersionId,
+        class: "modal",
-        "children:append": [
+        open: true,
-          taskViewModel.versionIds,
+        "keystroke:s": taskViewModel.closeAndSave,
-          VersionIdToOption
+        "keystroke:Escape": taskViewModel.closeAndDiscard
-        ]
-      }
-    ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskNameLabel), /* @__PURE__ */ createElement(
-      "input",
-      {
-        "bind:value": taskViewModel.name,
-        id: "focused"
-      }
-    ))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskBoardLabel), /* @__PURE__ */ createElement(
-      "select",
-      {
-        "bind:value": taskViewModel.boardId,
-        "children:append": [
-          taskViewModel.chatViewModel.taskBoardSuggestions,
-          BoardOptionConverter
-        ]
-      }
-    ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "description"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskDescriptionLabel), /* @__PURE__ */ createElement(
-      "textarea",
-      {
-        rows: "10",
-        "bind:value": taskViewModel.description
-      }
-    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskCategoryLabel), /* @__PURE__ */ createElement(
-      "input",
-      {
-        "bind:value": taskViewModel.category,
-        list: categorySuggestionId
-      }
-    ))), /* @__PURE__ */ createElement(
-      "datalist",
-      {
-        hidden: true,
-        id: categorySuggestionId,
-        "children:append": [
-          taskViewModel.coreViewModel.taskCategorySuggestions,
-          StringToOption
-        ]
-      }
-    ), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "clock_loader_40"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskStatusLabel), /* @__PURE__ */ createElement(
-      "input",
-      {
-        "bind:value": taskViewModel.status,
-        list: statusSuggestionId
-      }
-    ))), /* @__PURE__ */ createElement(
-      "datalist",
-      {
-        hidden: true,
-        id: statusSuggestionId,
-        "children:append": [
-          taskViewModel.coreViewModel.taskStatusSuggestions,
-          StringToOption
-        ]
-      }
-    ), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "priority_high"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskPriorityLabel), /* @__PURE__ */ createElement(
-      "input",
-      {
-        type: "number",
-        "bind:value": taskViewModel.priority
-      }
-    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "calendar_month"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskDateLabel), /* @__PURE__ */ createElement(
-      "input",
-      {
-        type: "date",
-        "bind:value": taskViewModel.date
-      }
-    ))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskTimeLabel), /* @__PURE__ */ createElement(
-      "input",
-      {
-        type: "time",
-        "bind:value": taskViewModel.time
-      }
-    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "width-input" }, DangerousActionButton(
-      coreViewModel2,
-      coreViewModel2.translations.chatPage.task.deleteTaskButton,
-      "delete_forever",
-      taskViewModel.deleteTask
-    ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
-      "button",
-      {
-        class: "flex",
-        "on:click": taskViewModel.closeAndDiscard
       },
-      coreViewModel2.translations.general.closeButton
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.chatPage.task.taskSettingsHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.general.fileVersionLabel), /* @__PURE__ */ createElement(
-    ), /* @__PURE__ */ createElement(
+        "select",
-      "button",
+        {
-      {
+          "bind:value": taskViewModel.selectedVersionId,
-        class: "flex primary",
+          "children:append": [
-        "on:click": taskViewModel.closeAndSave
+            taskViewModel.versionIds,
-      },
+            VersionIdToOption
-      coreViewModel2.translations.general.saveButton,
+          ]
-      /* @__PURE__ */ createElement("span", { class: "icon" }, "save")
+        }
-    ))));
+      ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskNameLabel), /* @__PURE__ */ createElement(
+        "input",
+        {
+          "bind:value": taskViewModel.name,
+          id: "focused"
+        }
+      ))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskBoardLabel), /* @__PURE__ */ createElement(
+        "select",
+        {
+          "bind:value": taskViewModel.boardId,
+          "children:append": [
+            taskViewModel.chatViewModel.taskBoardSuggestions,
+            BoardOptionConverter
+          ]
+        }
+      ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "description"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskDescriptionLabel), /* @__PURE__ */ createElement(
+        "textarea",
+        {
+          rows: "10",
+          "bind:value": taskViewModel.description
+        }
+      ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskCategoryLabel), /* @__PURE__ */ createElement(
+        "input",
+        {
+          "bind:value": taskViewModel.category,
+          list: categorySuggestionId
+        }
+      ))), /* @__PURE__ */ createElement(
+        "datalist",
+        {
+          hidden: true,
+          id: categorySuggestionId,
+          "children:append": [
+            taskViewModel.coreViewModel.taskCategorySuggestions,
+            StringToOption
+          ]
+        }
+      ), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "clock_loader_40"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskStatusLabel), /* @__PURE__ */ createElement(
+        "input",
+        {
+          "bind:value": taskViewModel.status,
+          list: statusSuggestionId
+        }
+      ))), /* @__PURE__ */ createElement(
+        "datalist",
+        {
+          hidden: true,
+          id: statusSuggestionId,
+          "children:append": [
+            taskViewModel.coreViewModel.taskStatusSuggestions,
+            StringToOption
+          ]
+        }
+      ), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "priority_high"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskPriorityLabel), /* @__PURE__ */ createElement(
+        "input",
+        {
+          type: "number",
+          "bind:value": taskViewModel.priority
+        }
+      ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "calendar_month"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskDateLabel), /* @__PURE__ */ createElement(
+        "input",
+        {
+          type: "date",
+          "bind:value": taskViewModel.date
+        }
+      ))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskTimeLabel), /* @__PURE__ */ createElement(
+        "input",
+        {
+          type: "time",
+          "bind:value": taskViewModel.time
+        }
+      ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "width-input" }, DangerousActionButton(
+        coreViewModel2,
+        coreViewModel2.translations.chatPage.task.deleteTaskButton,
+        "delete_forever",
+        taskViewModel.deleteTask
+      ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
+        "button",
+        {
+          class: "flex",
+          "on:click": taskViewModel.closeAndDiscard
+        },
+        coreViewModel2.translations.general.closeButton
+      ), /* @__PURE__ */ createElement(
+        "button",
+        {
+          class: "flex primary",
+          "on:click": taskViewModel.closeAndSave
+        },
+        coreViewModel2.translations.general.saveButton,
+        /* @__PURE__ */ createElement("span", { class: "icon" }, "save")
+      )))
+    );
   }
 
   // src/View/Components/taskEntry.tsx

src/View/Modals/taskSettingsModal.tsx

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

src/ViewModel/Chat/chatViewModel.ts

@@ -43,10 +43,38 @@ export default class ChatViewModel {
     // view
     open = (): void => {
         this.chatListViewModel.openChat(this);
+        document.body.addEventListener("keydown", this.handleKeystroke);
     };
 
     close = (): void => {
         this.chatListViewModel.closeChat();
+        document.body.removeEventListener("keydown", this.handleKeystroke);
+    };
+
+    handleKeystroke = (e: KeyboardEvent): any => {
+        if (!e.metaKey && !e.ctrlKey) return;
+
+        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 => {};

src/ViewModel/Pages/taskViewModel.ts

@@ -89,7 +89,8 @@ export default class TaskViewModel {
         this.containingModel.closeTask();
     };
 
-    closeAndDiscard = (): void => {
+    closeAndDiscard = (e: Event): void => {
+        e.preventDefault();
         this.close();
         this.loadTaskData();
     };