compose: Introduce 'Start new conversation' button.

web/e2e-tests/drafts.test.ts

@@ -54,9 +54,9 @@ async function create_private_message_draft(page: Page): Promise<void> {
 }
 
 async function open_compose_markdown_preview(page: Page): Promise<void> {
-    const new_topic_button = "#left_bar_compose_stream_button_big";
+    const new_conversation_button = "#new_conversation_button";
-    await page.waitForSelector(new_topic_button, {visible: true});
+    await page.waitForSelector(new_conversation_button, {visible: true});
-    await page.click(new_topic_button);
+    await page.click(new_conversation_button);
 
     const markdown_preview_button = "#compose .markdown_preview"; // eye icon.
     await page.waitForSelector(markdown_preview_button, {visible: true});

web/e2e-tests/message-basics.test.ts

@@ -41,8 +41,8 @@ async function expect_verona_stream_test_topic(page: Page): Promise<void> {
         ["Verona > test", ["verona test a", "verona test b", "verona test d"]],
     ]);
     assert.strictEqual(
-        await common.get_text_from_selector(page, "#left_bar_compose_stream_button_big"),
+        await common.get_text_from_selector(page, "#new_conversation_button"),
-        "New topic",
+        "Start new conversation",
     );
 }
 
@@ -274,8 +274,8 @@ async function expect_all_direct_messages(page: Page): Promise<void> {
         ["You and Cordelia, Lear's daughter", ["direct message e"]],
     ]);
     assert.strictEqual(
-        await common.get_text_from_selector(page, "#left_bar_compose_stream_button_big"),
+        await common.get_text_from_selector(page, "#new_conversation_button"),
-        "New stream message",
+        "Start new conversation",
     );
     assert.strictEqual(await page.title(), "All direct messages - Zulip Dev - Zulip");
 }

web/src/compose_closed_ui.js

@@ -81,8 +81,8 @@ function update_reply_button_state(disable = false) {
     }
 }
 
-function update_stream_button(btn_text) {
+function update_new_conversation_button(btn_text) {
-    $("#left_bar_compose_stream_button_big").text(btn_text);
+    $("#new_conversation_button").text(btn_text);
 }
 
 function update_conversation_button(btn_text) {
@@ -91,18 +91,18 @@ function update_conversation_button(btn_text) {
 
 function update_buttons(text_stream, disable_reply) {
     const text_conversation = $t({defaultMessage: "New direct message"});
-    update_stream_button(text_stream);
+    update_new_conversation_button(text_stream);
     update_conversation_button(text_conversation);
     update_reply_button_state(disable_reply);
 }
 
 export function update_buttons_for_private() {
-    const text_stream = $t({defaultMessage: "New stream message"});
+    const text_stream = $t({defaultMessage: "Start new conversation"});
     if (
         !narrow_state.pm_ids_string() ||
         people.user_can_direct_message(narrow_state.pm_ids_string())
     ) {
-        $("#left_bar_compose_stream_button_big").attr(
+        $("#new_conversation_button").attr(
             "data-tooltip-template-id",
             "new_stream_message_button_tooltip_template",
         );
@@ -120,8 +120,8 @@ export function update_buttons_for_private() {
 }
 
 export function update_buttons_for_stream() {
-    const text_stream = $t({defaultMessage: "New topic"});
+    const text_stream = $t({defaultMessage: "Start new conversation"});
-    $("#left_bar_compose_stream_button_big").attr(
+    $("#new_conversation_button").attr(
         "data-tooltip-template-id",
         "new_topic_message_button_tooltip_template",
     );
@@ -129,8 +129,8 @@ export function update_buttons_for_stream() {
 }
 
 export function update_buttons_for_recent_view() {
-    const text_stream = $t({defaultMessage: "New stream message"});
+    const text_stream = $t({defaultMessage: "Start new conversation"});
-    $("#left_bar_compose_stream_button_big").attr(
+    $("#new_conversation_button").attr(
         "data-tooltip-template-id",
         "new_stream_message_button_tooltip_template",
     );
@@ -168,7 +168,7 @@ export function initialize() {
     });
 
     // Click handlers for buttons in the compose box.
-    $("body").on("click", ".compose_stream_button", () => {
+    $("body").on("click", ".compose_new_conversation_button", () => {
         compose_actions.start("stream", {trigger: "clear topic button"});
     });
 

web/src/compose_tooltips.js

@@ -19,7 +19,7 @@ export function initialize() {
             // reply button's actual area is its containing span.
             "#compose_buttons > .reply_button_container",
             "#left_bar_compose_mobile_button_big",
-            "#left_bar_compose_stream_button_big",
+            "#new_conversation_button",
             "#left_bar_compose_private_button_big",
         ],
         delay: EXTRA_LONG_HOVER_DELAY,

web/src/compose_ui.js

@@ -44,7 +44,8 @@ export function insert_and_scroll_into_view(content, $textarea) {
 }
 
 function get_focus_area(msg_type, opts) {
-    // Set focus to "Topic" when narrowed to a stream+topic and "New topic" button clicked.
+    // Set focus to "Topic" when narrowed to a stream+topic
+    // and "Start new conversation" button clicked.
     if (msg_type === "stream" && opts.stream_id && !opts.topic) {
         return "#stream_message_recipient_topic";
     } else if (

web/src/hotspots.js

@@ -50,7 +50,7 @@ const HOTSPOT_LOCATIONS = new Map([
     [
         "intro_compose",
         {
-            element: "#left_bar_compose_stream_button_big",
+            element: "#new_conversation_button",
             offset_x: 0,
             offset_y: 0,
         },

web/styles/compose.css

@@ -42,7 +42,7 @@
         }
     }
 
-    .stream_button_container,
+    .new_conversation_button_container,
     .private_button_container {
         @media (width < $sm_min) {
             display: none;

web/templates/compose.hbs

@@ -25,11 +25,11 @@
                     +
                 </button>
             </span>
-            <span class="new_message_button stream_button_container">
+            <span class="new_message_button new_conversation_button_container">
-                <button type="button" class="button small rounded compose_stream_button"
+                <button type="button" class="button small rounded compose_new_conversation_button"
-                  id="left_bar_compose_stream_button_big"
+                  id="new_conversation_button"
-                  data-tooltip-template-id="new_topic_message_button_tooltip_template">
+                  data-tooltip-template-id="new_stream_message_button_tooltip_template">
-                    {{t 'New topic' }}
+                    {{t 'Start new conversation' }}
                 </button>
             </span>
             {{#unless embedded }}

web/tests/compose.test.js

@@ -776,8 +776,8 @@ test_ui("narrow_button_titles", ({override}) => {
     override(narrow_state, "is_message_feed_visible", () => true);
     compose_closed_ui.update_buttons_for_private();
     assert.equal(
-        $("#left_bar_compose_stream_button_big").text(),
+        $("#new_conversation_button").text(),
-        $t({defaultMessage: "New stream message"}),
+        $t({defaultMessage: "Start new conversation"}),
     );
     assert.equal(
         $("#left_bar_compose_private_button_big").text(),
@@ -786,8 +786,8 @@ test_ui("narrow_button_titles", ({override}) => {
 
     compose_closed_ui.update_buttons_for_stream();
     assert.equal(
-        $("#left_bar_compose_stream_button_big").text(),
+        $("#new_conversation_button").text(),
-        $t({defaultMessage: "New topic"}),
+        $t({defaultMessage: "Start new conversation"}),
     );
     assert.equal(
         $("#left_bar_compose_private_button_big").text(),