inline_topic_edit: Improve placeholder when topic is not mandatory.

Earlier, we used to show "general chat" as the placeholder.

This commit adds support to show "Enter a topic (skip for general
chat)" as the placeholder when topic is not mandatory in the
inline topic edit input box.

We show "general chat" (as we show in compose topic input box)
when inline topic edit input box is not focused and topic="".

Fixes part of #33846.

web/src/message_edit.ts

@@ -477,6 +477,15 @@ function handle_inline_topic_edit_change(this: HTMLInputElement): void {
         // the error. So, we re-enable the save button and remove the tooltip.
         ui_util.enable_element_and_remove_tooltip($topic_edit_save_button);
     }
+
+    if (!realm.realm_mandatory_topics) {
+        const $topic_not_mandatory_placeholder = $(".inline-topic-edit-placeholder");
+        if ($inline_topic_edit_input.val() === "") {
+            $topic_not_mandatory_placeholder.addClass("inline-topic-edit-placeholder-visible");
+        } else {
+            $topic_not_mandatory_placeholder.removeClass("inline-topic-edit-placeholder-visible");
+        }
+    }
 }
 
 function timer_text(seconds_left: number): string {
@@ -935,7 +944,6 @@ export function start_inline_topic_edit($recipient_row: JQuery): void {
     const $form = $(
         render_topic_edit_form({
             max_topic_length: realm.max_topic_length,
-            realm_mandatory_topics: realm.realm_mandatory_topics,
             empty_string_topic_display_name: util.get_final_topic_display_name(""),
         }),
     );
@@ -957,6 +965,32 @@ export function start_inline_topic_edit($recipient_row: JQuery): void {
     $form.on("keydown", handle_inline_topic_edit_keydown);
 
     $inline_topic_edit_input.on("input", handle_inline_topic_edit_change);
+
+    if (!realm.realm_mandatory_topics) {
+        const $topic_not_mandatory_placeholder = $(".inline-topic-edit-placeholder");
+
+        if (topic === "") {
+            $topic_not_mandatory_placeholder.addClass("inline-topic-edit-placeholder-visible");
+        }
+
+        $inline_topic_edit_input.on("blur", () => {
+            if ($inline_topic_edit_input.val() === "") {
+                $topic_not_mandatory_placeholder.removeClass(
+                    "inline-topic-edit-placeholder-visible",
+                );
+                $inline_topic_edit_input.attr("placeholder", util.get_final_topic_display_name(""));
+                $inline_topic_edit_input.addClass("empty-topic-display");
+            }
+        });
+
+        $inline_topic_edit_input.on("focus", () => {
+            if ($inline_topic_edit_input.val() === "") {
+                $inline_topic_edit_input.attr("placeholder", "");
+                $inline_topic_edit_input.removeClass("empty-topic-display");
+                $topic_not_mandatory_placeholder.addClass("inline-topic-edit-placeholder-visible");
+            }
+        });
+    }
 }
 
 export function end_inline_topic_edit($row: JQuery): void {

web/styles/zulip.css

@@ -953,6 +953,7 @@ div.focused-message-list.is-conversation-view .recipient_row {
     gap: 5px;
     margin: 0;
     padding-right: 5px;
+    position: relative;
 }
 
 .inline_topic_edit {
@@ -977,6 +978,25 @@ div.focused-message-list.is-conversation-view .recipient_row {
             inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
             0 0 8px hsl(206deg 80% 62% / 60%);
     }
+
+    &.empty-topic-display::placeholder {
+        color: inherit;
+    }
+}
+
+.inline-topic-edit-placeholder {
+    position: absolute;
+    left: 5px;
+    max-width: 65%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    visibility: hidden;
+}
+
+.inline-topic-edit-placeholder-visible {
+    visibility: visible;
 }
 
 .topic_edit_save {

web/templates/compose.hbs

@@ -58,10 +58,7 @@
                             <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}}
+                                    {{> topic_not_mandatory_placeholder_text empty_string_topic_display_name=empty_string_topic_display_name}}
-                                        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>

web/templates/topic_edit_form.hbs

@@ -1,9 +1,10 @@
 {{! Client-side Handlebars template for rendering the topic edit form. }}
 
 <form class="topic_edit_form">
-    <input type="text" value="" autocomplete="off" maxlength="{{ max_topic_length }}"
+    <input type="text" value="" autocomplete="off" maxlength="{{ max_topic_length }}" class="inline_topic_edit header-v"/>
-      class="inline_topic_edit header-v {{#unless realm_mandatory_topics}}empty-topic-placeholder-display{{/unless}}"
+    <span class="inline-topic-edit-placeholder placeholder">
-      {{#unless realm_mandatory_topics}}placeholder="{{empty_string_topic_display_name}}"{{/unless}} />
+        {{> topic_not_mandatory_placeholder_text empty_string_topic_display_name=empty_string_topic_display_name}}
+    </span>
     {{> components/action_button custom_classes="topic_edit_save tippy-zulip-delayed-tooltip" icon="check" attention="primary" intent="brand" data-tooltip-template-id="save-button-tooltip-template" }}
     {{> components/action_button custom_classes="topic_edit_cancel tippy-zulip-delayed-tooltip" icon="circle-x" attention="borderless" intent="neutral" data-tooltip-template-id="cancel-button-tooltip-template" }}
     <div class="topic_edit_spinner"></div>

web/templates/topic_not_mandatory_placeholder_text.hbs

@@ -0,0 +1,4 @@
+{{#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}}