compose: Add tooltip over compose-reply button.

This commit adds the tooltip content for disabled stream reply button.

Fixes part of #28410.

Co-authored-by: Kunal Sharma <v.shm.kunal@gmail.com>

web/src/compose_tooltips.ts

@@ -51,6 +51,12 @@ export function initialize(): void {
                     instance.setContent(pick_empty_narrow_banner().title);
                     return;
                 }
+                case "stream_disabled": {
+                    instance.setContent(
+                        $("#compose_disable_stream_reply_button_tooltip_template").html(),
+                    );
+                    return;
+                }
                 case "selected_message": {
                     instance.setContent(
                         parse_html($("#compose_reply_message_button_tooltip_template").html()),
@@ -73,13 +79,21 @@ export function initialize(): void {
                 }
             }
         },
+        onTrigger(instance, event) {
+            assert(event.currentTarget instanceof HTMLElement);
+            if (event.currentTarget.classList.contains("disabled-on-hover")) {
+                instance.setProps({delay: INSTANT_HOVER_DELAY});
+            } else {
+                instance.setProps({delay: LONG_HOVER_DELAY});
+            }
+        },
         onHidden(instance) {
             instance.destroy();
         },
     });
 
     tippy.delegate("body", {
-        target: "#new_conversation_button",
+        target: "#compose_buttons .compose_new_conversation_button",
         delay: EXTRA_LONG_HOVER_DELAY,
         // Only show on mouseenter since for spectators, clicking on these
         // buttons opens login modal, and Micromodal returns focus to the
@@ -87,12 +101,18 @@ export function initialize(): void {
         trigger: "mouseenter",
         appendTo: () => document.body,
         onShow(instance) {
-            const $elem = $(instance.reference);
-            const conversation_type = $elem.attr("data-conversation-type");
+            const $new_conversation_button = $("#new_conversation_button");
+            const conversation_type = $new_conversation_button.attr("data-conversation-type");
             if (conversation_type === "stream") {
+                if ($new_conversation_button.prop("disabled")) {
+                    instance.setContent(
+                        $("#compose_disable_stream_reply_button_tooltip_template").html(),
+                    );
+                } else {
                     instance.setContent(
                         parse_html($("#new_topic_message_button_tooltip_template").html()),
                     );
+                }
                 return undefined;
             }
             // Use new_stream_message_button_tooltip_template when the

web/templates/tooltip_templates.hbs

@@ -10,6 +10,9 @@
     {{t 'Scroll to bottom' }}
     {{tooltip_hotkey_hints "End"}}
 </template>
+<template id="compose_disable_stream_reply_button_tooltip_template">
+    {{t 'You do not have permission to post in this channel.' }}
+</template>
 <template id="compose_reply_message_button_tooltip_template">
     {{t 'Reply to selected message' }}
     {{tooltip_hotkey_hints "R"}}