ui_update: Show the number of messages to be moved.

Added a feature to the move message confirmation box to display
the count of messages that will be moved. The count updates
dynamically based on the selected option in the dropdown. By
default, the count is set to 'Move this and all following messages
in this topic'.

Fixes #23115.

web/src/message_util.ts

@@ -84,6 +84,15 @@ export function add_new_messages_data(
     return msg_list_data.add_messages(messages);
 }
 
+export function get_count_of_messages_in_topic_sent_after_current_message(
+    stream_id: number,
+    topic: string,
+    message_id: number,
+): number {
+    const all_messages = get_messages_in_topic(stream_id, topic);
+    return all_messages.filter((msg) => msg.id >= message_id).length;
+}
+
 export function get_messages_in_topic(stream_id: number, topic: string): Message[] {
     return all_messages_data
         .all_messages()

web/src/stream_popover.js

@@ -15,7 +15,9 @@ import * as hash_util from "./hash_util.ts";
 import {$t, $t_html} from "./i18n.ts";
 import * as message_edit from "./message_edit.ts";
 import * as message_lists from "./message_lists.ts";
+import * as message_util from "./message_util.ts";
 import * as message_view from "./message_view.ts";
+import * as narrow_state from "./narrow_state.ts";
 import * as popover_menus from "./popover_menus.ts";
 import {left_sidebar_tippy_options} from "./popover_menus.ts";
 import {web_channel_default_view_values} from "./settings_config.ts";
@@ -562,6 +564,59 @@ export async function build_move_topic_to_stream_popover(
         $("#move_topic_form .move_messages_edit_topic").trigger("focus");
     }
 
+    // The following logic is correct only when
+    // both message_lists.current.data.fetch_status.has_found_newest
+    // and message_lists.current.data.fetch_status.has_found_oldest are true;
+    // otherwise, we cannot be certain of the correct count.
+    function get_count_of_messages_to_be_moved(selected_option) {
+        if (selected_option === "change_one") {
+            return 1;
+        }
+        if (selected_option === "change_later") {
+            return message_util.get_count_of_messages_in_topic_sent_after_current_message(
+                current_stream_id,
+                topic_name,
+                message.id,
+            );
+        }
+        return message_util.get_messages_in_topic(current_stream_id, topic_name).length;
+    }
+
+    function update_move_messages_count_text(selected_option) {
+        const message_move_count = get_count_of_messages_to_be_moved(selected_option);
+        const has_found_newest = message_lists.current.data.fetch_status.has_found_newest();
+        const has_found_oldest = message_lists.current.data.fetch_status.has_found_oldest();
+        const is_topic_narrowed = narrow_state.narrowed_by_topic_reply();
+        const is_stream_narrowed = narrow_state.narrowed_by_stream_reply();
+
+        let message_text;
+
+        if (
+            (is_topic_narrowed || is_stream_narrowed) &&
+            (selected_option === "change_one" ||
+                (selected_option === "change_later" && has_found_newest) ||
+                (selected_option === "change_all" && has_found_newest && has_found_oldest))
+        ) {
+            message_text = $t(
+                {
+                    defaultMessage:
+                        "{count, plural, one {# message} other {# messages}} will be moved.",
+                },
+                {count: message_move_count},
+            );
+        } else {
+            message_text = $t(
+                {
+                    defaultMessage:
+                        "At least {count, plural, one {# message} other {# messages}} will be moved.",
+                },
+                {count: message_move_count},
+            );
+        }
+
+        $("#move_messages_count").text(message_text);
+    }
+
     function move_topic_post_render() {
         $("#move_topic_modal .dialog_submit_button").prop("disabled", true);
 
@@ -607,6 +662,17 @@ export async function build_move_topic_to_stream_popover(
         $("#move_topic_modal .move_messages_edit_topic").on("input", () => {
             update_submit_button_disabled_state(stream_widget_value);
         });
+
+        if (!args.from_message_actions_popover) {
+            update_move_messages_count_text("change_all");
+        } else {
+            update_move_messages_count_text($("#message_move_select_options").val());
+
+            $("#message_move_select_options").on("change", function () {
+                const selected_option = $(this).val();
+                update_move_messages_count_text(selected_option);
+            });
+        }
     }
 
     function focus_on_move_modal_render() {

web/styles/zulip.css

@@ -937,7 +937,6 @@ div.focused-message-list {
 
 #move_topic_modal select {
     width: auto;
-    margin-bottom: 10px;
     max-width: 100%;
 }
 

web/templates/move_topic_to_stream.hbs

@@ -16,12 +16,13 @@
         <input name="old_topic_name" type="hidden" value="{{topic_name}}" />
         <input name="current_stream_id" type="hidden" value="{{current_stream_id}}" />
         {{#if from_message_actions_popover}}
-        <select class="message_edit_topic_propagate modal_select bootstrap-focus-style">
+        <select id="message_move_select_options" class="message_edit_topic_propagate modal_select bootstrap-focus-style">
             <option value="change_one" {{#if (eq message_placement "last")}}selected{{/if}}> {{t "Move only this message" }}</option>
             <option value="change_later" {{#if (eq message_placement "intermediate")}}selected{{/if}}> {{t "Move this and all following messages in this topic" }}</option>
             <option value="change_all" {{#if (eq message_placement "first")}}selected{{/if}}> {{t "Move all messages in this topic" }}</option>
         </select>
         {{/if}}
+        <p id="move_messages_count"></p>
         <div class="topic_move_breadcrumb_messages">
             <label class="checkbox">
                 <input class="send_notification_to_new_thread" name="send_notification_to_new_thread" type="checkbox" {{#if notify_new_thread}}checked="checked"{{/if}} />