From bb6e7ab537b464c30d0f5e56e920fee86352a4e9 Mon Sep 17 00:00:00 2001
From: N-Shar-ma <bablinaneh@gmail.com>
Date: Wed, 8 May 2024 02:16:10 +0530
Subject: [PATCH] compose: Add keyboard shortcuts to compose control buttons'
 tooltips.

For more discoverability, the keyboard shortcuts for preview, and bold,
italic and link formatting are now displayed in the tooltips of those
compose buttons.
---
 web/templates/compose_control_buttons.hbs        |  2 +-
 .../compose_control_buttons_in_popover_2.hbs     |  6 +++---
 web/templates/tooltip_templates.hbs              | 16 ++++++++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/web/templates/compose_control_buttons.hbs b/web/templates/compose_control_buttons.hbs
index 52557e609f..a67fafcb8b 100644
--- a/web/templates/compose_control_buttons.hbs
+++ b/web/templates/compose_control_buttons.hbs
@@ -1,6 +1,6 @@
 <div class="compose-control-buttons-container order-1">
     <input type="file" class="file_input notvisible" multiple />
-    <div class="compose_control_button_container" data-tippy-content="{{t 'Preview' }}">
+    <div class="compose_control_button_container" data-tooltip-template-id="preview-tooltip" data-tippy-maxWidth="none">
         <a role="button" class="markdown_preview compose_control_button zulip-icon zulip-icon-preview" aria-label="{{t 'Preview' }}" tabindex=0></a>
     </div>
     <div class="compose_control_button_container" data-tippy-content="{{t 'Write' }}">
diff --git a/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover_2.hbs b/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover_2.hbs
index 107c1b281e..b3bbabf8f2 100644
--- a/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover_2.hbs
+++ b/web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover_2.hbs
@@ -1,7 +1,7 @@
 <div class="compose-control-buttons-container preview_mode_disabled {{#if inside_popover}} show_in_popover {{/if}}">
-    <a role="button" data-format-type="link" class="compose_control_button zulip-icon zulip-icon-link formatting_button" aria-label="{{t 'Link' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Link' }}"></a>
-    <a role="button" data-format-type="bold" class="compose_control_button zulip-icon zulip-icon-bold formatting_button" aria-label="{{t 'Bold' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bold' }}"></a>
-    <a role="button" data-format-type="italic" class="compose_control_button zulip-icon zulip-icon-italic formatting_button" aria-label="{{t 'Italic' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Italic' }}"></a>
+    <a role="button" data-format-type="link" class="compose_control_button zulip-icon zulip-icon-link formatting_button" aria-label="{{t 'Link' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tooltip-template-id="link-tooltip" data-tippy-maxWidth="none"></a>
+    <a role="button" data-format-type="bold" class="compose_control_button zulip-icon zulip-icon-bold formatting_button" aria-label="{{t 'Bold' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tooltip-template-id="bold-tooltip" data-tippy-maxWidth="none"></a>
+    <a role="button" data-format-type="italic" class="compose_control_button zulip-icon zulip-icon-italic formatting_button" aria-label="{{t 'Italic' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tooltip-template-id="italic-tooltip" data-tippy-maxWidth="none"></a>
     <a role="button" data-format-type="strikethrough" class="compose_control_button zulip-icon zulip-icon-strikethrough formatting_button" aria-label="{{t 'Strikethrough' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Strikethrough' }}"></a>
     {{#if inside_popover}}
         <div class="divider">|</div>
diff --git a/web/templates/tooltip_templates.hbs b/web/templates/tooltip_templates.hbs
index fb7e1e569c..f6826adb18 100644
--- a/web/templates/tooltip_templates.hbs
+++ b/web/templates/tooltip_templates.hbs
@@ -53,6 +53,10 @@
     {{t 'Send' }}
     {{tooltip_hotkey_hints "Ctrl" "Enter"}}
 </template>
+<template id="preview-tooltip">
+    {{t 'Preview' }}
+    {{tooltip_hotkey_hints "Alt" "P"}}
+</template>
 <template id="add-global-time-tooltip">
     <div>
         <div>{{t "Add global time" }}</div>
@@ -65,6 +69,18 @@
         <span class="tooltip-inner-content italic">{{t "A poll must be an entire message." }}</span>
     </div>
 </template>
+<template id="link-tooltip">
+    {{t 'Link' }}
+    {{tooltip_hotkey_hints "Ctrl" "Shift" "L"}}
+</template>
+<template id="bold-tooltip">
+    {{t 'Bold' }}
+    {{tooltip_hotkey_hints "Ctrl" "B"}}
+</template>
+<template id="italic-tooltip">
+    {{t 'Italic' }}
+    {{tooltip_hotkey_hints "Ctrl" "I"}}
+</template>
 <template id="delete-draft-tooltip-template">
     {{t 'Delete draft' }}
     {{tooltip_hotkey_hints "Backspace"}}