composebox: Show 'Enter a topic (skip for general chat)' placeholder.

Use a more instructive placeholder instead of "Topic" when
topic is not mandatory in a realm.

Updated placeholder:
'Enter a topic (skip for general chat)'.

web/src/compose_recipient.ts

@@ -370,23 +370,36 @@ export function update_topic_displayed_text(
         compose_state.topic(topic_name);
         return;
     }
-    // Otherwise, we have some adjustments to make to display the
-    // general topic as a stylized placeholder
+    // Otherwise, we have some adjustments to make to display:
+    // * a placeholder with the default topic name stylized
+    // * the empty string topic stylized
     const $input = $("input#stream_message_recipient_topic");
     const is_empty_string_topic = topic_name === "";
-    let topic_placeholder_text = $t({defaultMessage: "Topic"});
     const recipient_widget_hidden =
         $(".compose_select_recipient-dropdown-list-container").length === 0;
+    const $topic_not_mandatory_placeholder = $("#topic-not-mandatory-placeholder");
 
-    // Remove any stale references to the empty topic display
+    // reset
+    $input.attr("placeholder", "");
     $input.removeClass("empty-topic-display");
+    $topic_not_mandatory_placeholder.css({visibility: "hidden"});
+    $topic_not_mandatory_placeholder.hide();
 
-    if (is_empty_string_topic && !has_topic_focus && recipient_widget_hidden) {
-        topic_placeholder_text = util.get_final_topic_display_name("");
-        $input.addClass("empty-topic-display");
+    function update_placeholder_visibility(): void {
+        $topic_not_mandatory_placeholder.css(
+            "visibility",
+            $input.val() === "" ? "visible" : "hidden",
+        );
+    }
+
+    if (is_empty_string_topic && !has_topic_focus && recipient_widget_hidden) {
+        $input.attr("placeholder", util.get_final_topic_display_name(""));
+        $input.addClass("empty-topic-display");
+    } else {
+        $topic_not_mandatory_placeholder.show(10, update_placeholder_visibility);
+        $input.on("input", update_placeholder_visibility);
     }
 
-    $input.attr("placeholder", topic_placeholder_text);
     compose_state.topic(topic_name);
 }
 

web/src/ui_init.js

@@ -154,6 +154,7 @@ import * as user_status from "./user_status.ts";
 import * as user_status_ui from "./user_status_ui.ts";
 import * as user_topic_popover from "./user_topic_popover.ts";
 import * as user_topics from "./user_topics.ts";
+import * as util from "./util.ts";
 import * as widgets from "./widgets.js";
 
 // This is where most of our initialization takes place.
@@ -187,6 +188,7 @@ function initialize_compose_box() {
                 giphy_enabled: giphy_state.is_giphy_enabled(),
                 max_stream_name_length: realm.max_stream_name_length,
                 max_topic_length: realm.max_topic_length,
+                empty_string_topic_display_name: util.get_final_topic_display_name(""),
             }),
         ),
     );

web/styles/compose.css

@@ -1068,6 +1068,14 @@ textarea.new_message_textarea {
         }
     }
 
+    #topic-not-mandatory-placeholder {
+        position: absolute;
+        padding: 5px 6px;
+        display: none;
+        visibility: hidden;
+        pointer-events: none;
+    }
+
     /* Styles for new conversation button in the recipient_box */
     #recipient_box_clear_topic_button {
         /* Set the border radius smaller, relative to the parent */
@@ -1093,7 +1101,7 @@ textarea.new_message_textarea {
     }
 
     #stream_message_recipient_topic:not(.empty-topic-display):placeholder-shown
-        + #recipient_box_clear_topic_button {
+        ~ #recipient_box_clear_topic_button {
         visibility: hidden;
     }
     /* This will reset the bootstrap margin-bottom: 10px value for the inputs */

web/templates/compose.hbs

@@ -57,6 +57,12 @@
                             </div>
                             <div id="compose_recipient_box">
                                 <input type="text" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
+                                <span id="topic-not-mandatory-placeholder" class="placeholder">
+                                    {{#tr}}
+                                        Enter a topic (skip for <z-empty-string-topic-display-name></z-empty-string-topic-display-name>)
+                                        {{#*inline "z-empty-string-topic-display-name"}}<span class="empty-topic-display">{{empty_string_topic_display_name}}</span>{{/inline}}
+                                    {{/tr}}
+                                </span>
                                 <button type="button" id="recipient_box_clear_topic_button" class="tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Clear topic' }}" tabindex="-1">
                                     <i class="zulip-icon zulip-icon-close"></i>
                                 </button>

web/tests/compose_actions.test.cjs

@@ -93,7 +93,7 @@ const stream_data = zrequire("stream_data");
 const compose_recipient = zrequire("compose_recipient");
 const {set_realm} = zrequire("state_data");
 
-const realm = {};
+const realm = {realm_mandatory_topics: true};
 set_realm(realm);
 
 const start = compose_actions.start;