compose: Use an icon for the mac command hotkey hint.

web/shared/icons/mac-command.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.02049 1.53649C5.50776 1.73832 5.92424 2.08011 6.21725 2.51864C6.51027 2.95717 6.66667 3.47275 6.66667 4.00016V5.3335H9.33333V4.00016C9.33333 3.47275 9.48973 2.95717 9.78275 2.51864C10.0758 2.08011 10.4922 1.73832 10.9795 1.53649C11.4668 1.33465 12.003 1.28184 12.5202 1.38474C13.0375 1.48763 13.5127 1.74161 13.8856 2.11455C14.2586 2.48749 14.5125 2.96264 14.6154 3.47992C14.7183 3.99721 14.6655 4.53338 14.4637 5.02065C14.2618 5.50792 13.9201 5.9244 13.4815 6.21742C13.043 6.51043 12.5274 6.66683 12 6.66683H10.6667V9.3335H12C12.5274 9.3335 13.043 9.48989 13.4815 9.78291C13.9201 10.0759 14.2618 10.4924 14.4637 10.9797C14.6655 11.4669 14.7183 12.0031 14.6154 12.5204C14.5125 13.0377 14.2586 13.5128 13.8856 13.8858C13.5127 14.2587 13.0375 14.5127 12.5202 14.6156C12.003 14.7185 11.4668 14.6657 10.9795 14.4638C10.4922 14.262 10.0758 13.9202 9.78275 13.4817C9.48973 13.0432 9.33333 12.5276 9.33333 12.0002V10.6668H6.66667V12.0002C6.66667 12.5276 6.51027 13.0432 6.21725 13.4817C5.92424 13.9202 5.50776 14.262 5.02049 14.4638C4.53322 14.6657 3.99704 14.7185 3.47976 14.6156C2.96248 14.5127 2.48732 14.2587 2.11438 13.8858C1.74144 13.5128 1.48747 13.0377 1.38457 12.5204C1.28168 12.0031 1.33449 11.4669 1.53632 10.9797C1.73815 10.4924 2.07995 10.0759 2.51848 9.78291C2.95701 9.48989 3.47258 9.3335 4 9.3335H5.33333V6.66683H4C3.47258 6.66683 2.95701 6.51043 2.51848 6.21742C2.07995 5.9244 1.73815 5.50792 1.53632 5.02065C1.33449 4.53338 1.28168 3.99721 1.38457 3.47992C1.48747 2.96264 1.74144 2.48749 2.11438 2.11455C2.48732 1.74161 2.96248 1.48763 3.47976 1.38474C3.99704 1.28184 4.53322 1.33465 5.02049 1.53649ZM5.10863 3.2594C4.96212 3.04014 4.75388 2.86924 4.51024 2.76832C4.26661 2.66741 3.99852 2.641 3.73988 2.69245C3.48124 2.7439 3.24366 2.87088 3.05719 3.05735C2.87072 3.24383 2.74373 3.4814 2.69229 3.74004C2.64084 3.99869 2.66724 4.26677 2.76816 4.51041C2.86908 4.75404 3.03997 4.96228 3.25924 5.10879C3.47851 5.2553 3.73629 5.3335 4 5.3335H5.33333V4.00016C5.33333 3.73646 5.25513 3.47867 5.10863 3.2594ZM3.25924 10.8915C3.03997 11.038 2.86908 11.2463 2.76816 11.4899C2.66724 11.7336 2.64084 12.0016 2.69229 12.2603C2.74373 12.5189 2.87072 12.7565 3.05719 12.943C3.24366 13.1294 3.48124 13.2564 3.73988 13.3079C3.99852 13.3593 4.26661 13.3329 4.51024 13.232C4.75388 13.1311 4.96212 12.9602 5.10863 12.7409C5.25513 12.5217 5.33333 12.2639 5.33333 12.0002V10.6668H4C3.73629 10.6668 3.47851 10.745 3.25924 10.8915ZM10.8914 12.7409C11.0379 12.9602 11.2461 13.1311 11.4898 13.232C11.7334 13.3329 12.0015 13.3593 12.2601 13.3079C12.5188 13.2564 12.7563 13.1294 12.9428 12.943C13.1293 12.7565 13.2563 12.5189 13.3077 12.2603C13.3592 12.0016 13.3328 11.7336 13.2318 11.4899C13.1309 11.2463 12.96 11.038 12.7408 10.8915C12.5215 10.745 12.2637 10.6668 12 10.6668H10.6667V12.0002C10.6667 12.2639 10.7449 12.5217 10.8914 12.7409ZM12.7408 5.10879C12.96 4.96228 13.1309 4.75404 13.2318 4.51041C13.3328 4.26677 13.3592 3.99869 13.3077 3.74004C13.2563 3.4814 13.1293 3.24383 12.9428 3.05735C12.7563 2.87088 12.5188 2.7439 12.2601 2.69245C12.0015 2.641 11.7334 2.66741 11.4898 2.76832C11.2461 2.86924 11.0379 3.04014 10.8914 3.2594C10.7449 3.47867 10.6667 3.73646 10.6667 4.00016V5.3335H12C12.2637 5.3335 12.5215 5.2553 12.7408 5.10879ZM6.66667 9.3335H9.33333V6.66683H6.66667V9.3335Z" fill="black"/>
+</svg>

web/src/templates.ts

@@ -157,7 +157,12 @@ Handlebars.registerHelper("popover_hotkey_hints", (...args) => {
     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>`;
+        // The ⌘ symbol isn't vertically centered, so we use an icon.
+        if (hotkey === "⌘") {
+            hotkey_hints += `<span class="popover-menu-hotkey-hint"><i class="zulip-icon zulip-icon-mac-command" aria-hidden="true"></i></span>`;
+        } else {
+            hotkey_hints += `<span class="popover-menu-hotkey-hint">${hotkey}</span>`;
+        }
     }
     if (shift_hotkey_exists) {
         return new Handlebars.SafeString(

web/styles/compose.css

@@ -1131,6 +1131,7 @@ textarea.new_message_textarea {
 
         .popover-menu-hotkey-hint {
             padding: 2px 5px;
+            display: flex;
         }
     }
 

web/tests/templates.test.cjs

@@ -2,8 +2,12 @@
 
 const assert = require("node:assert/strict");
 
+const {set_global, with_overrides} = require("./lib/namespace.cjs");
 const {run_test} = require("./lib/test.cjs");
 
+const navigator = {};
+set_global("navigator", navigator);
+
 /*
     Note that the test runner automatically registers
     all of our handlers.
@@ -65,6 +69,21 @@ run_test("popover_hotkey_hints", () => {
     assert.equal(html, expected_html);
 });
 
+run_test("popover_hotkey_hints mac command", () => {
+    const args = {
+        hotkey_one: "Ctrl",
+        hotkey_two: "[",
+    };
+
+    with_overrides(({override}) => {
+        override(navigator, "platform", "MacIntel");
+        const html = require("./templates/popover_hotkey_hints.hbs")(args);
+        const expected_html =
+            '<span class="popover-menu-hotkey-hints"><span class="popover-menu-hotkey-hint"><i class="zulip-icon zulip-icon-mac-command" aria-hidden="true"></i></span><span class="popover-menu-hotkey-hint">[</span></span>\n';
+        assert.equal(html, expected_html);
+    });
+});
+
 run_test("popover_hotkey_hints_shift_hotkey", () => {
     const args = {
         hotkey_one: "Shift",