dynamically translating kbd based on actions

src/public/javascripts/services/context_menu.js

@@ -1,3 +1,4 @@
+import keyboardActionService from './keyboard_actions.js';
 const $contextMenuContainer = $("#context-menu-container");
 
 let dateContextMenuOpenedMs = 0;
@@ -69,6 +70,8 @@ async function initContextMenu(event, contextMenu) {
 
     addItems($contextMenuContainer, await contextMenu.getContextMenuItems());
 
+    keyboardActionService.updateKbdElements($contextMenuContainer);
+
     // code below tries to detect when dropdown would overflow from page
     // in such case we'll position it above click coordinates so it will fit into client
     const clickPosition = event.pageY;

src/public/javascripts/services/entrypoints.js

@@ -121,7 +121,7 @@ function registerEntrypoints() {
     });
 
     $("#reload-frontend-button").on('click', utils.reloadApp);
-    keyboardActionService.setActionHandler("ReloadApp", utils.reloadApp);
+    keyboardActionService.setActionHandler("ReloadFrontendApp", utils.reloadApp);
 
     $("#open-dev-tools-button").toggle(utils.isElectron());
 

src/public/javascripts/services/keyboard_actions.js

@@ -61,20 +61,39 @@ async function triggerAction(actionName) {
 	await action.handler();
 }
 
-async function getAction(actionName) {
+async function getAction(actionName, silent = false) {
 	await keyboardActionsLoaded;
 
 	const action = keyboardActionRepo[actionName];
 
 	if (!action) {
+		if (silent) {
+			console.log(`Cannot find action ${actionName}`);
+		}
+		else {
 			throw new Error(`Cannot find action ${actionName}`);
 		}
+	}
 
 	return action;
 }
 
+function updateKbdElements($container) {
+	$container.find('kbd[data-kb-action]').each(async (i, el) => {
+		const actionName = $(el).attr('data-kb-action');
+		const action = await getAction(actionName, true);
+
+		if (action) {
+			$(el).text(action.effectiveShortcuts.join(', '));
+		}
+	});
+}
+
+$(() => updateKbdElements($(document)));
+
 export default {
 	setActionHandler,
 	triggerAction,
-	getAction
+	getAction,
+	updateKbdElements
 };

src/public/javascripts/services/tree_context_menu.js

@@ -46,39 +46,39 @@ class TreeContextMenu {
         const insertNoteAfterEnabled = isNotRoot && !isHoisted && parentNotSearch;
 
         return [
-            { title: "Open in new tab", cmd: "openInTab", uiIcon: "empty", enabled: noSelectedNotes },
+            { title: 'Open in new tab', cmd: "openInTab", uiIcon: "empty", enabled: noSelectedNotes },
-            { title: "Insert note after <kbd>Ctrl+O</kbd>", cmd: "insertNoteAfter", uiIcon: "plus",
+            { title: 'Insert note after <kbd data-kb-action="CreateNoteAfter"></kbd>', cmd: "insertNoteAfter", uiIcon: "plus",
                 items: insertNoteAfterEnabled ? this.getNoteTypeItems("insertNoteAfter") : null,
                 enabled: insertNoteAfterEnabled && noSelectedNotes },
-            { title: "Insert child note <kbd>Ctrl+P</kbd>", cmd: "insertChildNote", uiIcon: "plus",
+            { title: 'Insert child note <kbd data-kb-action="CreateNoteInto"></kbd>', cmd: "insertChildNote", uiIcon: "plus",
                 items: notSearch ? this.getNoteTypeItems("insertChildNote") : null,
                 enabled: notSearch && noSelectedNotes },
-            { title: "Delete <kbd>Delete</kbd>", cmd: "delete", uiIcon: "trash",
+            { title: 'Delete <kbd data-kb-action="DeleteNotes"></kbd>', cmd: "delete", uiIcon: "trash",
                 enabled: isNotRoot && !isHoisted && parentNotSearch },
             { title: "----" },
-            { title: "Search in subtree <kbd>Ctrl+Shift+S</kbd>", cmd: "searchInSubtree", uiIcon: "search",
+            { title: 'Search in subtree <kbd data-kb-action="SearchInSubtree"></kbd>', cmd: "searchInSubtree", uiIcon: "search",
                 enabled: notSearch && noSelectedNotes },
-            isHoisted ? null : { title: "Hoist note <kbd>Ctrl-H</kbd>", cmd: "hoist", uiIcon: "empty", enabled: noSelectedNotes && notSearch },
+            isHoisted ? null : { title: 'Hoist note <kbd data-kb-action="ToggleNoteHoisting"></kbd>', cmd: "hoist", uiIcon: "empty", enabled: noSelectedNotes && notSearch },
-            !isHoisted || !isNotRoot ? null : { title: "Unhoist note <kbd>Ctrl-H</kbd>", cmd: "unhoist", uiIcon: "arrow-up" },
+            !isHoisted || !isNotRoot ? null : { title: 'Unhoist note <kbd data-kb-action="ToggleNoteHoisting"></kbd>', cmd: "unhoist", uiIcon: "arrow-up" },
-            { title: "Edit branch prefix <kbd>F2</kbd>", cmd: "editBranchPrefix", uiIcon: "empty",
+            { title: 'Edit branch prefix <kbd data-kb-action="EditBranchPrefix"></kbd>', cmd: "editBranchPrefix", uiIcon: "empty",
                 enabled: isNotRoot && parentNotSearch && noSelectedNotes},
             { title: "----" },
             { title: "Protect subtree", cmd: "protectSubtree", uiIcon: "check-shield", enabled: noSelectedNotes },
             { title: "Unprotect subtree", cmd: "unprotectSubtree", uiIcon: "shield", enabled: noSelectedNotes },
             { title: "----" },
-            { title: "Copy / clone <kbd>Ctrl+C</kbd>", cmd: "copy", uiIcon: "copy",
+            { title: 'Copy / clone <kbd data-kb-action="CopyNotesToClipboard"></kbd>', cmd: "copy", uiIcon: "copy",
                 enabled: isNotRoot && !isHoisted },
-            { title: "Clone to ... <kbd>Ctrl+Shift+C</kbd>", cmd: "cloneTo", uiIcon: "empty",
+            { title: 'Clone to ... <kbd data-kb-action="CloneNotesTo"></kbd>', cmd: "cloneTo", uiIcon: "empty",
                 enabled: isNotRoot && !isHoisted },
-            { title: "Cut <kbd>Ctrl+X</kbd>", cmd: "cut", uiIcon: "cut",
+            { title: 'Cut <kbd data-kb-action="CutNotesToClipboard"></kbd>', cmd: "cut", uiIcon: "cut",
                 enabled: isNotRoot && !isHoisted && parentNotSearch },
-            { title: "Move to ... <kbd>Ctrl+Shift+X</kbd>", cmd: "moveTo", uiIcon: "empty",
+            { title: 'Move to ... <kbd data-kb-action="MoveNotesTo">Ctrl+Shift+X</kbd>', cmd: "moveTo", uiIcon: "empty",
                 enabled: isNotRoot && !isHoisted && parentNotSearch },
-            { title: "Paste into <kbd>Ctrl+V</kbd>", cmd: "pasteInto", uiIcon: "paste",
+            { title: 'Paste into <kbd data-kb-action="PasteNotesFromClipboard">Ctrl+V</kbd>', cmd: "pasteInto", uiIcon: "paste",
                 enabled: !clipboard.isClipboardEmpty() && notSearch && noSelectedNotes },
-            { title: "Paste after", cmd: "pasteAfter", uiIcon: "paste",
+            { title: 'Paste after', cmd: "pasteAfter", uiIcon: "paste",
                 enabled: !clipboard.isClipboardEmpty() && isNotRoot && !isHoisted && parentNotSearch && noSelectedNotes },
-            { title: "Duplicate note here", cmd: "duplicateNote", uiIcon: "empty",
+            { title: 'Duplicate note here', cmd: "duplicateNote", uiIcon: "empty",
                 enabled: noSelectedNotes && parentNotSearch && (!note.isProtected || protectedSessionHolder.isProtectedSessionAvailable()) },
             { title: "----" },
             { title: "Export", cmd: "export", uiIcon: "empty",
@@ -86,9 +86,9 @@ class TreeContextMenu {
             { title: "Import into note", cmd: "importIntoNote", uiIcon: "empty",
                 enabled: notSearch && noSelectedNotes },
             { title: "----" },
-            { title: "Collapse subtree <kbd>Alt+-</kbd>", cmd: "collapseSubtree", uiIcon: "align-justify", enabled: noSelectedNotes },
+            { title: 'Collapse subtree <kbd data-kb-action="CollapseSubtree">Alt+-</kbd>', cmd: "collapseSubtree", uiIcon: "align-justify", enabled: noSelectedNotes },
             { title: "Force note sync", cmd: "forceNoteSync", uiIcon: "recycle", enabled: noSelectedNotes },
-            { title: "Sort alphabetically <kbd>Alt+S</kbd>", cmd: "sortAlphabetically", uiIcon: "empty", enabled: noSelectedNotes && notSearch }
+            { title: 'Sort alphabetically <kbd data-kb-action="SortChildNotes">Alt+S</kbd>', cmd: "sortAlphabetically", uiIcon: "empty", enabled: noSelectedNotes && notSearch }
         ].filter(row => row !== null);
     }
 

src/public/javascripts/services/tree_keybindings.js

@@ -34,7 +34,7 @@ const fixedKeyBindings = {
 };
 
 const templates = {
-    "DeleteNote": node => {
+    "DeleteNotes": node => {
         treeChangesService.deleteNodes(treeService.getSelectedOrActiveNodes(node));
     },
     "MoveNoteUp": node => {

src/services/keyboard_actions.js

@@ -114,7 +114,7 @@ const DEFAULT_KEYBOARD_ACTIONS = [
         defaultShortcuts: ["CommandOrControl+return"]
     },
     {
-        actionName: "DeleteNote",
+        actionName: "DeleteNotes",
         defaultShortcuts: ["Delete"],
         description: "Delete note"
     },
@@ -185,7 +185,7 @@ const DEFAULT_KEYBOARD_ACTIONS = [
     },
     {
         actionName: "ToggleNoteHoisting",
-        defaultShortcuts: ["Alt+h"],
+        defaultShortcuts: ["Alt+H"],
         description: "Toggles note hoisting of active note"
     },
     {
@@ -195,7 +195,7 @@ const DEFAULT_KEYBOARD_ACTIONS = [
     },
     {
         actionName: "EditNoteTitle",
-        defaultShortcuts: ["return"],
+        defaultShortcuts: ["Return"],
         description: "Edit active note title"
     },
     {
@@ -236,7 +236,7 @@ const DEFAULT_KEYBOARD_ACTIONS = [
         defaultShortcuts: ["Alt+T"]
     },
     {
-        actionName: "ReloadApp",
+        actionName: "ReloadFrontendApp",
         defaultShortcuts: ["F5", "CommandOrControl+R"]
     },
     {

src/views/desktop.ejs

@@ -66,37 +66,37 @@
                     <a class="dropdown-item" id="open-dev-tools-button">
                         <span class="bx bx-terminal"></span>
                         Open Dev Tools
-                        <kbd>CTRL+SHIFT+I</kbd>
+                        <kbd data-kb-action="OpenDevTools"></kbd>
                     </a>
 
                     <a class="dropdown-item" id="open-sql-console-button">
                         <span class="bx bx-data"></span>
                         Open SQL Console
-                        <kbd>ALT+O</kbd>
+                        <kbd data-kb-action="ShowSQLConsole"></kbd>
                     </a>
 
                     <a class="dropdown-item" id="reload-frontend-button" title="Reload can help with some visual glitches without restarting the whole app.">
                         <span class="bx bx-empty"></span>
                         Reload frontend
-                        <kbd>CTRL+R</kbd>
+                        <kbd data-kb-action="ReloadFrontendApp"></kbd>
                     </a>
 
                     <a class="dropdown-item" id="toggle-zen-mode-button">
                         <span class="bx bx-empty"></span>
                         Toggle Zen mode
-                        <kbd>ALT+M</kbd>
+                        <kbd data-kb-action="ToggleZenMode"></kbd>
                     </a>
 
                     <a class="dropdown-item" id="toggle-fullscreen-button">
                         <span class="bx bx-empty"></span>
                         Toggle fullscreen
-                        <kbd>F11</kbd>
+                        <kbd data-kb-action="ToggleFullscreen"></kbd>
                     </a>
 
                     <a class="dropdown-item" id="show-help-button">
                         <span class="bx bx-info-circle"></span>
                         Show Help
-                        <kbd>F1</kbd>
+                        <kbd data-kb-action="ShowHelp"></kbd>
                     </a>
 
                     <a class="dropdown-item" id="show-about-dialog-button">