hotkeys: Show Level 2 Shift key symbol for Shift key in popovers.

web/src/common.ts

@@ -113,6 +113,19 @@ export function adjust_mac_hotkey_hints(hotkeys: string[]): void {
     }
 }
 
+// We convert the Shift key with ⇧ (Level 2 Select Symbol) in the
+// popover menu hotkey hints. This helps us reduce the width of
+// the popover menus.
+export function adjust_shift_hotkey(hotkeys: string[]): boolean {
+    for (const [index, hotkey] of hotkeys.entries()) {
+        if (hotkey === "Shift") {
+            hotkeys[index] = "⇧";
+            return true;
+        }
+    }
+    return false;
+}
+
 // See https://zulip.readthedocs.io/en/latest/development/authentication.html#password-form-implementation
 // for design details on this feature.
 function set_password_toggle_label(

web/src/templates.js

@@ -132,9 +132,16 @@ Handlebars.registerHelper("popover_hotkey_hints", (...hotkeys) => {
     hotkeys.pop(); // Handlebars options
     let hotkey_hints = "";
     common.adjust_mac_hotkey_hints(hotkeys);
+    const shift_hotkey_exists = common.adjust_shift_hotkey(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);
+    if (shift_hotkey_exists) {
+        return new Handlebars.SafeString(
+            `<span class="popover-menu-hotkey-hints popover-contains-shift-hotkey" data-hotkey-hints="${hotkeys}">${hotkey_hints}</span>`,
+        );
+    }
+    return new Handlebars.SafeString(
+        `<span class="popover-menu-hotkey-hints">${hotkey_hints}</span>`,
+    );
 });

web/src/tippyjs.ts

@@ -621,4 +621,19 @@ export function initialize(): void {
             instance.destroy();
         },
     });
+
+    delegate("body", {
+        target: ".popover-contains-shift-hotkey",
+        trigger: "mouseenter",
+        placement: "top",
+        appendTo: () => document.body,
+        onShow(instance) {
+            const hotkey_hints = $(instance.reference).attr("data-hotkey-hints");
+            if (hotkey_hints) {
+                instance.setContent(hotkey_hints.replace("⇧", "Shift").replaceAll(",", " + "));
+                return undefined;
+            }
+            return false;
+        },
+    });
 }

web/tests/templates.test.js

@@ -56,11 +56,23 @@ run_test("tooltip_hotkey_hints", () => {
 
 run_test("popover_hotkey_hints", () => {
     const args = {
-        hotkey_one: "Shift",
-        hotkey_two: "V",
+        hotkey_one: "Ctrl",
+        hotkey_two: "[",
     };
 
     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);
 });
+
+run_test("popover_hotkey_hints_shift_hotkey", () => {
+    const args = {
+        hotkey_one: "Shift",
+        hotkey_two: "V",
+    };
+
+    const html = require("./templates/popover_hotkey_hints.hbs")(args);
+    args.hotkey_one = "⇧"; // adjust_shift_hotkey
+    const expected_html = `<span class="popover-menu-hotkey-hints popover-contains-shift-hotkey" data-hotkey-hints="${args.hotkey_one},${args.hotkey_two}"><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);
+});