composebox_typeahead: Support empty topic.

Fixes: https://chat.zulip.org/#narrow/channel/9-issues/topic/compose.20box.20typeahead.20bug/near/2075003.

Author: apoorvapendse

web/src/composebox_typeahead.ts

@@ -80,8 +80,9 @@ export type LanguageSuggestion = {
 };
 
 export type TopicSuggestion = {
-    topic: string;
+    topic_display_name: string;
     type: "topic_list";
+    is_empty_string_topic: boolean;
     // is_channel_link will be used when we want to only render the stream as an
     // option in the topic typeahead while having #**stream_name> as the token.
     is_channel_link: boolean;
@@ -954,9 +955,17 @@ export function get_candidates(
                     topic_list.push(token);
                 }
                 const matcher = get_topic_matcher(token);
+                // We want the empty topic's display name to match the query
+                // while searching for topics in the typeahead.
+                const empty_string_topic_display_name = util.get_final_topic_display_name("");
+                const empty_string_topic_idx = topic_list.indexOf("");
+                if (empty_string_topic_idx !== -1) {
+                    topic_list[empty_string_topic_idx] = empty_string_topic_display_name;
+                }
                 const matches = topic_list.filter((item) => matcher(item));
                 const matches_list: TopicSuggestion[] = matches.map((topic) => ({
-                    topic,
+                    topic_display_name: topic,
+                    is_empty_string_topic: topic === empty_string_topic_display_name,
                     type: "topic_list",
                     is_channel_link: false,
                     stream_data: {
@@ -970,13 +979,14 @@ export function get_candidates(
                 const topic_suggestion_candidates = typeahead_helper.sorter(
                     token,
                     matches_list,
-                    (x) => x.topic,
+                    (x) => x.topic_display_name,
                 );
 
                 // Add link to channel if and only if nothing is typed after '>'
                 if (token.length === 0) {
                     topic_suggestion_candidates.unshift({
-                        topic: stream_name,
+                        topic_display_name: stream_name,
+                        is_empty_string_topic: false,
                         type: "topic_list",
                         is_channel_link: true,
                         stream_data: {
@@ -1231,10 +1241,14 @@ export function content_typeahead_selected(
                 beginning = beginning.slice(0, syntax_start_index) + "#**" + stream_name + "** ";
                 break;
             }
-            beginning =
-                beginning.slice(0, syntax_start_index) +
-                topic_link_util.get_stream_topic_link_syntax(stream_name, item.topic) +
-                " ";
+            const stream_topic_link_syntax =
+                item.topic_display_name === util.get_final_topic_display_name("")
+                    ? topic_link_util.get_stream_topic_link_syntax(stream_name, "")
+                    : topic_link_util.get_stream_topic_link_syntax(
+                          stream_name,
+                          item.topic_display_name,
+                      );
+            beginning = beginning.slice(0, syntax_start_index) + stream_topic_link_syntax + " ";
             break;
         }
         case "time_jump": {

web/templates/typeahead_list_item.hbs

@@ -24,14 +24,14 @@
     <span role="button" class="conversation-arrow zulip-icon zulip-icon-chevron-right stream-to-topic-arrow"></span>
 </div>
 <div class="typeahead-text-container">
-    <strong class="typeahead-strong-section">
-        {{~ topic ~}}
+    <strong class="typeahead-strong-section{{#if is_empty_string_topic}} empty-topic-display{{/if}}">
+        {{~ topic_display_name ~}}
     </strong>
 </div>
 {{else}}
 {{!-- Separate container to ensure overflowing text remains in this container. --}}
 <div class="typeahead-text-container{{#if has_secondary_html}} has_secondary_html{{/if}}">
-    <strong class="typeahead-strong-section{{#if is_empty_string_topic}} empty-topic-display{{/if}}">
+    <strong class="typeahead-strong-section">
         {{~#if stream~}}
             {{~> inline_decorated_stream_name stream=stream ~}}
             {{~else~}}

web/tests/composebox_typeahead.test.cjs

@@ -2,12 +2,15 @@
 
 const assert = require("node:assert/strict");
 
+const {get_final_topic_display_name} = require("../src/util.ts");
+
 const {mock_banners} = require("./lib/compose_banner.cjs");
 const {mock_esm, set_global, with_overrides, zrequire} = require("./lib/namespace.cjs");
 const {run_test, noop} = require("./lib/test.cjs");
 const $ = require("./lib/zjquery.cjs");
 
 let autosize_called;
+const REALM_EMPTY_TOPIC_DISPLAY_NAME = "general chat";
 
 const bootstrap_typeahead = mock_esm("../src/bootstrap_typeahead");
 const compose_ui = mock_esm("../src/compose_ui", {
@@ -61,7 +64,7 @@ const {initialize_user_settings} = zrequire("user_settings");
 
 const current_user = {};
 set_current_user(current_user);
-const realm = {};
+const realm = {realm_empty_topic_display_name: REALM_EMPTY_TOPIC_DISPLAY_NAME};
 set_realm(realm);
 const user_settings = {};
 initialize_user_settings({user_settings});
@@ -853,7 +856,7 @@ test("content_typeahead_selected", ({override}) => {
     ct.get_or_set_token_for_testing("test");
     actual_value = ct.content_typeahead_selected(
         {
-            topic: "testing",
+            topic_display_name: "testing",
             type: "topic_list",
         },
         query,
@@ -866,7 +869,7 @@ test("content_typeahead_selected", ({override}) => {
     ct.get_or_set_token_for_testing("");
     actual_value = ct.content_typeahead_selected(
         {
-            topic: "testing",
+            topic_display_name: "testing",
             type: "topic_list",
         },
         query,
@@ -879,7 +882,7 @@ test("content_typeahead_selected", ({override}) => {
     ct.get_or_set_token_for_testing("");
     actual_value = ct.content_typeahead_selected(
         {
-            topic: "Sweden",
+            topic_display_name: "Sweden",
             type: "topic_list",
             is_channel_link: false,
         },
@@ -889,10 +892,24 @@ test("content_typeahead_selected", ({override}) => {
     expected_value = "Hello #**Sweden>Sweden** ";
     assert.equal(actual_value, expected_value);
 
+    query = "Hello #**Sweden>general";
+    ct.get_or_set_token_for_testing("");
+    actual_value = ct.content_typeahead_selected(
+        {
+            topic_display_name: get_final_topic_display_name(""),
+            type: "topic_list",
+            is_channel_link: false,
+        },
+        query,
+        input_element,
+    );
+    expected_value = `Hello #**Sweden>** `;
+    assert.equal(actual_value, expected_value);
+
     ct.get_or_set_token_for_testing("");
     actual_value = ct.content_typeahead_selected(
         {
-            topic: "Sweden",
+            topic_display_name: "Sweden",
             type: "topic_list",
             is_channel_link: true,
         },
@@ -955,7 +972,15 @@ function sorted_names_from(subs) {
     return subs.map((sub) => sub.name).sort();
 }
 
-const sweden_topics_to_show = ["<&>", "even more ice", "furniture", "ice", "kronor", "more ice"];
+const sweden_topics_to_show = [
+    "<&>",
+    "even more ice",
+    "furniture",
+    "ice",
+    "kronor",
+    "more ice",
+    "",
+];
 
 test("initialize", ({override, override_rewire, mock_template}) => {
     mock_banners();
@@ -1923,21 +1948,32 @@ test("begins_typeahead", ({override, override_rewire}) => {
 
     // topic_list
     // includes "more ice"
-    function typed_topics(topics) {
-        const matches_list = topics.map((topic) => ({
-            is_channel_link: false,
+    function typed_topics(stream, topics) {
+        const matches_list = topics.map((topic, index) => ({
+            is_channel_link: topic === stream && index === 0,
             stream_data: {
                 ...stream_data.get_sub_by_name("Sweden"),
                 rendered_description: "",
             },
-            topic,
+            is_empty_string_topic: topic === get_final_topic_display_name(""),
+            topic_display_name: get_final_topic_display_name(topic),
             type: "topic_list",
         }));
         return matches_list;
     }
-    assert_typeahead_equals("#**Sweden>more ice", typed_topics(["more ice", "even more ice"]));
-    assert_typeahead_equals("#**Sweden>totally new topic", typed_topics(["totally new topic"]));
-    assert_typeahead_equals("#**Sweden>\n\nmore ice", typed_topics([]));
+    assert_typeahead_equals(
+        "#**Sweden>more ice",
+        typed_topics("Sweden", ["more ice", "even more ice"]),
+    );
+    assert_typeahead_equals(
+        "#**Sweden>",
+        typed_topics("Sweden", ["Sweden", ...sweden_topics_to_show]),
+    );
+    assert_typeahead_equals(
+        "#**Sweden>totally new topic",
+        typed_topics("Sweden", ["totally new topic"]),
+    );
+    assert_typeahead_equals("#**Sweden>\n\nmore ice", typed_topics("Sweden", []));
 
     // time_jump
     const time_jump = [