From 903dbda79bd176702d3175a7c8a5450a64b6eccb Mon Sep 17 00:00:00 2001
From: Hardik Dharmani <Ddharmani99@gmail.com>
Date: Tue, 2 May 2023 00:55:17 +0530
Subject: [PATCH] tooltips: Add `S` hotkey hint to `narrow-to` tippy tooltips.

Added hotkey hint to Narrow to stream/topic/DM tooltips by creating
new tippy for `tippy-narrow-tooltip` with LONG_HOVER_DELAY which
appends `S` hotkey to the existing tippy content set by
data-tippy-content attribute on the element.

Using this approach instead of a <template> with
data-tooltip-template-id avoids issues with context, where
{display_recipient}/{topic}/{display_reply_to} inside <template>
would always show the same stream/topic name regardless of the
actual stream/topic being hovered over.
---
 web/src/tippyjs.js                  | 10 ++++++++++
 web/templates/recipient_row.hbs     |  6 +++---
 web/templates/tooltip_templates.hbs |  3 +++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/web/src/tippyjs.js b/web/src/tippyjs.js
index 139b8c495c..7a236a9e7c 100644
--- a/web/src/tippyjs.js
+++ b/web/src/tippyjs.js
@@ -185,6 +185,16 @@ export function initialize() {
         },
     });
 
+    delegate("body", {
+        target: ".tippy-narrow-tooltip",
+        delay: LONG_HOVER_DELAY,
+        appendTo: () => document.body,
+        onCreate(instance) {
+            const content = instance.props.content + $("#narrow-hotkey-tooltip-template").html();
+            instance.setContent(parse_html(content));
+        },
+    });
+
     delegate("body", {
         target: ".toggle-subscription-tooltip",
         delay: EXTRA_LONG_HOVER_DELAY,
diff --git a/web/templates/recipient_row.hbs b/web/templates/recipient_row.hbs
index 85b9e6441b..768ca2e3bd 100644
--- a/web/templates/recipient_row.hbs
+++ b/web/templates/recipient_row.hbs
@@ -2,7 +2,7 @@
 <div class="message_header message_header_stream right_part" data-stream-id="{{stream_id}}">
     <div class="message-header-contents" style="background: {{recipient_bar_color}};">
         {{! stream link }}
-        <a class="message_label_clickable narrows_by_recipient stream_label tippy-zulip-delayed-tooltip"
+        <a class="message_label_clickable narrows_by_recipient stream_label tippy-narrow-tooltip"
           href="{{stream_url}}"
           data-tippy-content="{{t 'Narrow to stream "{display_recipient}"' }}">
             <span class="stream-privacy-modified-color-{{stream_id}} stream-privacy filter-icon"  style="color: {{stream_privacy_icon_color}}">
@@ -20,7 +20,7 @@
         {{! topic stuff }}
         <span class="stream_topic">
             {{! topic link }}
-            <a class="message_label_clickable narrows_by_topic tippy-zulip-delayed-tooltip"
+            <a class="message_label_clickable narrows_by_topic tippy-narrow-tooltip"
               href="{{topic_url}}"
               data-tippy-content="{{t 'Narrow to stream "{display_recipient}", topic "{topic}"' }}">
                 {{#if use_match_properties}}
@@ -80,7 +80,7 @@
 {{else}}
 <div class="message_header message_header_private_message">
     <div class="message-header-contents">
-        <a class="message_label_clickable narrows_by_recipient stream_label tippy-zulip-delayed-tooltip"
+        <a class="message_label_clickable narrows_by_recipient stream_label tippy-narrow-tooltip"
           href="{{pm_with_url}}"
           data-tippy-content="{{t 'Narrow to your direct messages with {display_reply_to}' }}">
         <span class="private_message_header_icon"><i class="zulip-icon zulip-icon-user"></i></span>
diff --git a/web/templates/tooltip_templates.hbs b/web/templates/tooltip_templates.hbs
index 6d65c8a2a8..1299baad76 100644
--- a/web/templates/tooltip_templates.hbs
+++ b/web/templates/tooltip_templates.hbs
@@ -2,3 +2,6 @@
     {{t 'View user card' }}
     {{tooltip_hotkey_hints "U"}}
 </template>
+<template id="narrow-hotkey-tooltip-template">
+    {{tooltip_hotkey_hints "S"}}
+</template>