popovers: Add hotkey hints support via a new handlebar template.

web/src/templates.js

@@ -127,3 +127,14 @@ Handlebars.registerHelper("tooltip_hotkey_hints", (...hotkeys) => {
     const result = `<span class="tooltip-hotkey-hints">${hotkey_hints}</span>`;
     return new Handlebars.SafeString(result);
 });
+
+Handlebars.registerHelper("popover_hotkey_hints", (...hotkeys) => {
+    hotkeys.pop(); // Handlebars options
+    let hotkey_hints = "";
+    common.adjust_mac_hotkey_hints(hotkeys);
+    for (const hotkey of hotkeys) {
+        hotkey_hints += `<span class="popover-menu-hotkey-hint">${hotkey}</span>`;
+    }
+    const result = `<span class="popover-menu-hotkey-hints">${hotkey_hints}</span>`;
+    return new Handlebars.SafeString(result);
+});

web/styles/popovers.css

@@ -1476,17 +1476,23 @@ ul.popover-menu-outer-list {
     }
 }
 
-.popover-menu-hotkey-hint {
+.popover-menu-hotkey-hints {
-    color: var(--color-hotkey-hint);
+    display: flex;
-    text-align: center;
+    gap: 4px;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 14px;
-    padding: 2px 4px;
-    border-radius: 3px;
-    border: 1px solid var(--color-hotkey-hint);
     margin-left: auto;
+    padding-left: 5px;
+
+    > .popover-menu-hotkey-hint {
+        color: var(--color-hotkey-hint);
+        text-align: center;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 14px;
+        padding: 2px 4px;
+        border-radius: 3px;
+        border: 1px solid var(--color-hotkey-hint);
+    }
 }
 
 #theme-switcher {

web/templates/navbar_help_menu.hbs

@@ -9,7 +9,8 @@
                 </li>
                 <li class="link-item popover-menu-inner-list-item">
                     <a tabindex="0" class="navigate-link-on-enter popover-menu-link" data-overlay-trigger="keyboard-shortcuts">
-                        <i class="popover-menu-icon zulip-icon zulip-icon-keyboard" aria-hidden="true"></i> {{t 'Keyboard shortcuts' }} <span class="popover-menu-hotkey-hint">?</span>
+                        <i class="popover-menu-icon zulip-icon zulip-icon-keyboard" aria-hidden="true"></i> {{t 'Keyboard shortcuts' }}
+                        {{popover_hotkey_hints "?"}}
                     </a>
                 </li>
                 <li class="link-item popover-menu-inner-list-item hidden-for-spectators">

web/templates/popovers/actions_popover.hbs

@@ -8,7 +8,7 @@
                     <a data-message-id="{{message_id}}" class="respond_button popover-menu-link" tabindex="0">
                         <i class="popover-menu-icon fa fa-reply" aria-hidden="true"></i>
                         {{t "Quote and reply" }}
-                        <span class="hotkey-hint">(>)</span>
+                        {{popover_hotkey_hints ">"}}
                     </a>
                 </li>
             </ul>
@@ -22,7 +22,7 @@
                     <a data-message-id="{{message_id}}" class="popover_edit_message popover-menu-link" tabindex="0">
                         <i class="popover-menu-icon zulip-icon zulip-icon-edit" aria-hidden="true"></i>
                         {{editability_menu_item}}
-                        <span class="hotkey-hint">(e)</span>
+                        {{popover_hotkey_hints "E"}}
                     </a>
                 </li>
                 {{/if}}
@@ -31,7 +31,7 @@
                     <a data-message-id="{{message_id}}" class="popover_move_message popover-menu-link" tabindex="0">
                         <i class="popover-menu-icon zulip-icon zulip-icon-move-alt" aria-hidden="true"></i>
                         {{move_message_menu_item}}
-                        <span class="hotkey-hint">(m)</span>
+                        {{popover_hotkey_hints "M"}}
                     </a>
                 </li>
                 {{/if}}
@@ -53,7 +53,7 @@
                     <a data-message-id="{{message_id}}" class="reaction_button popover-menu-link" tabindex="0">
                         <i class="popover-menu-icon zulip-icon zulip-icon-smile" aria-hidden="true"></i>
                         {{t "Add emoji reaction" }}
-                        <span class="hotkey-hint">(:)</span>
+                        {{popover_hotkey_hints ":"}}
                     </a>
                 </li>
             </ul>
@@ -67,7 +67,7 @@
                     <a data-message-id="{{message_id}}" class="mark_as_unread popover-menu-link" tabindex="0">
                         <span class="unread_count">1</span>
                         {{t "Mark as unread from here" }}
-                        <span class="hotkey-hint">(U)</span>
+                        {{popover_hotkey_hints "Shift" "U"}}
                     </a>
                 </li>
                 {{/if}}
@@ -84,7 +84,7 @@
                     <a data-message-id="{{message_id}}" class="popover_toggle_collapse popover-menu-link" tabindex="0">
                         <i class="popover-menu-icon fa fa-minus" aria-hidden="true"></i>
                         {{t "Collapse message" }}
-                        <span class="hotkey-hint">(–)</span>
+                        {{popover_hotkey_hints "-"}}
                     </a>
                 </li>
                 {{/if}}
@@ -93,7 +93,7 @@
                     <a data-message-id="{{message_id}}" class="popover_toggle_collapse popover-menu-link" tabindex="0">
                         <i class="popover-menu-icon fa fa-plus" aria-hidden="true"></i>
                         {{t "Expand message" }}
-                        <span class="hotkey-hint">(–)</span>
+                        {{popover_hotkey_hints "-"}}
                     </a>
                 </li>
                 {{/if}}
@@ -107,7 +107,7 @@
                     <a data-message-id="{{message_id}}" class="popover_view_source popover-menu-link" tabindex="0">
                         <i class="popover-menu-icon fa fa-file-code-o" aria-hidden="true"></i>
                         {{view_source_menu_item}}
-                        <span class="hotkey-hint">(e)</span>
+                        {{popover_hotkey_hints "E"}}
                     </a>
                 </li>
                 {{/if}}
@@ -116,7 +116,7 @@
                     <a data-message-id="{{message_id}}" class="view_read_receipts popover-menu-link" tabindex="0">
                         <i class="popover-menu-icon zulip-icon zulip-icon-readreceipts" aria-hidden="true"></i>
                         {{t "View read receipts" }}
-                        <span class="hotkey-hint">(V)</span>
+                        {{popover_hotkey_hints "Shift" "V"}}
                     </a>
                 </li>
                 {{/if}}

web/tests/templates.test.js

@@ -53,3 +53,14 @@ run_test("tooltip_hotkey_hints", () => {
     const expected_html = `<span class="tooltip-hotkey-hints"><span class="tooltip-hotkey-hint">${args.hotkey_one}</span><span class="tooltip-hotkey-hint">${args.hotkey_two}</span></span>\n`;
     assert.equal(html, expected_html);
 });
+
+run_test("popover_hotkey_hints", () => {
+    const args = {
+        hotkey_one: "Shift",
+        hotkey_two: "V",
+    };
+
+    const html = require("./templates/popover_hotkey_hints.hbs")(args);
+    const expected_html = `<span class="popover-menu-hotkey-hints"><span class="popover-menu-hotkey-hint">${args.hotkey_one}</span><span class="popover-menu-hotkey-hint">${args.hotkey_two}</span></span>\n`;
+    assert.equal(html, expected_html);
+});

web/tests/templates/popover_hotkey_hints.hbs

@@ -0,0 +1 @@
+{{popover_hotkey_hints hotkey_one hotkey_two}}

web/webpack.config.ts

@@ -145,6 +145,7 @@ export default (
                             "tr",
                             "rendered_markdown",
                             "tooltip_hotkey_hints",
+                            "popover_hotkey_hints",
                         ],
                         precompileOptions: {strict: true},
                         preventIndent: true,