From 280fd4089209939f9d8198ec955c5dfb2b1ab15a Mon Sep 17 00:00:00 2001
From: Prakhar Pratyush <prakhar@zulip.com>
Date: Wed, 12 Mar 2025 17:47:57 +0530
Subject: [PATCH] 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                       | 36 ++++++++++++++++++-
 web/styles/zulip.css                          | 20 +++++++++++
 web/templates/compose.hbs                     |  5 +--
 web/templates/topic_edit_form.hbs             |  7 ++--
 .../topic_not_mandatory_placeholder_text.hbs  |  4 +++
 5 files changed, 64 insertions(+), 8 deletions(-)
 create mode 100644 web/templates/topic_not_mandatory_placeholder_text.hbs

diff --git a/web/src/message_edit.ts b/web/src/message_edit.ts
index 38504d046d..19750b4809 100644
--- a/web/src/message_edit.ts
+++ b/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 {
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 8b73e4e683..fbd590cc61 100644
--- a/web/styles/zulip.css
+++ b/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 {
diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs
index ee6a69dcda..5301fb711a 100644
--- a/web/templates/compose.hbs
+++ b/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}}
-                                        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}}
+                                    {{> topic_not_mandatory_placeholder_text empty_string_topic_display_name=empty_string_topic_display_name}}
                                 </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>
diff --git a/web/templates/topic_edit_form.hbs b/web/templates/topic_edit_form.hbs
index 033da41478..14e9785a05 100644
--- a/web/templates/topic_edit_form.hbs
+++ b/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 }}"
-      class="inline_topic_edit header-v {{#unless realm_mandatory_topics}}empty-topic-placeholder-display{{/unless}}"
-      {{#unless realm_mandatory_topics}}placeholder="{{empty_string_topic_display_name}}"{{/unless}} />
+    <input type="text" value="" autocomplete="off" maxlength="{{ max_topic_length }}" class="inline_topic_edit header-v"/>
+    <span class="inline-topic-edit-placeholder placeholder">
+        {{> 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>
diff --git a/web/templates/topic_not_mandatory_placeholder_text.hbs b/web/templates/topic_not_mandatory_placeholder_text.hbs
new file mode 100644
index 0000000000..ac5de58eed
--- /dev/null
+++ b/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}}