tooltips: Add hotkey hints support for tooltips.

We add the support for hotkey hints for the tippyjs tooltips through
the hotkey_hints handlebar helper.

The hotkey_hints helper takes space seperated string arguments and
returns a span containing all the hotkeys with the required classes
for styling.

We also add a simple node test for the hotkey_hints handlebar helper.

Part of #21753

frontend_tests/node_tests/templates.js

@@ -42,3 +42,14 @@ run_test("numberFormat", () => {
     const html = require("./templates/numberFormat.hbs")(args);
     assert.equal(html, "1,000,000\n");
 });
+
+run_test("hotkey_hints", () => {
+    const args = {
+        hotkey_one: "Ctrl",
+        hotkey_two: "C",
+    };
+
+    const html = require("./templates/hotkey_hints.hbs")(args);
+    const expected_html = `<span class="hotkey-hints"><span class="hotkey-hint">${args.hotkey_one}</span><span class="hotkey-hint">${args.hotkey_two}</span></span>\n`;
+    assert.equal(html, expected_html);
+});

frontend_tests/node_tests/templates/hotkey_hints.hbs

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

static/js/templates.js

@@ -104,3 +104,13 @@ Handlebars.registerHelper(
 );
 
 Handlebars.registerHelper("numberFormat", (number) => number.toLocaleString());
+
+Handlebars.registerHelper("hotkey_hints", (...hotkeys) => {
+    hotkeys.pop(); // Handlebars options
+    let hotkey_hints = "";
+    for (const hotkey of hotkeys) {
+        hotkey_hints += `<span class="hotkey-hint">${hotkey}</span>`;
+    }
+    const result = `<span class="hotkey-hints">${hotkey_hints}</span>`;
+    return new Handlebars.SafeString(result);
+});

static/styles/tooltips.css

@@ -10,13 +10,17 @@
     .tippy-box:not([data-theme]) {
         background: hsla(0, 0%, 20%, 1);
         border-radius: 5px;
+        min-height: 25px;
+        box-sizing: border-box;
 
-        > .tippy-content {
+        .tippy-content {
-            display: inline-block;
+            box-sizing: inherit;
+            display: flex;
+            align-items: center;
             padding: 5px 10px;
             font-size: 14px;
             line-height: 15px;
-            color: #FFFFFF;
+            color: hsla(0, 0%, 100%, 1);
         }
 
         &[data-placement^="top"] > .tippy-arrow::before {
@@ -55,4 +59,23 @@
      * by default.
      */
     text-align: left;
+
+    .hotkey-hints {
+        box-sizing: inherit;
+        display: flex;
+        align-self: flex-start;
+        margin: -2px -7px -2px 10px;
+        gap: 4px;
+    }
+
+    .hotkey-hint {
+        box-sizing: inherit;
+        border: 1px solid hsla(225, 100%, 84%, 1);
+        border-radius: 3px;
+        color: hsla(225, 100%, 84%, 1);
+        padding: 2px 5px;
+        min-width: 20px;
+        text-align: center;
+        line-height: 14px;
+    }
 }

static/styles/zulip.css

@@ -2721,10 +2721,6 @@ select.invite-as {
     display: none !important;
 }
 
-.hotkey-hint {
-    opacity: 0.75;
-}
-
 .flatpickr-calendar {
     /* Hide the up and down arrows in the Flatpickr datepicker year */
     .flatpickr-months .numInputWrapper span {

webpack.config.ts

@@ -143,6 +143,7 @@ export default (env: {minimize?: boolean} = {}, argv: {mode?: string}): webpack.
                             "t",
                             "tr",
                             "rendered_markdown",
+                            "hotkey_hints",
                         ],
                         preventIndent: true,
                     },