popovers: Refactor the Move messages and Move topic modals.

This commit refactors the move messages and move topic modals
to follow standard patterns from other modals (e.g. the invite user
modal).

Fixes #32168.

web/src/stream_popover.js

@@ -343,9 +343,11 @@ export async function build_move_topic_to_stream_popover(
     message,
 ) {
     const current_stream_name = sub_store.maybe_get_stream_name(current_stream_id);
+    const stream = sub_store.get(current_stream_id);
     const args = {
         topic_name,
         current_stream_id,
+        stream,
         notify_new_thread: message_edit.notify_new_thread_default,
         notify_old_thread: message_edit.notify_old_thread_default,
         from_message_actions_popover: message !== undefined,

web/styles/popovers.css

@@ -882,14 +882,12 @@ ul.popover-group-menu-member-list {
 
     #move_topic_to_stream_widget_wrapper {
         display: flex;
-        margin-bottom: 10px;
 
         .dropdown-widget-button {
             outline: none;
             /* 24px at 16px/1em */
             line-height: 1.5em;
-            width: auto;
+            width: 50%;
-            max-width: 206px;
         }
 
         .dropdown_widget_value {
@@ -917,12 +915,19 @@ ul.popover-group-menu-member-list {
     }
 
     .move_messages_edit_topic {
-        margin-bottom: 10px;
+        margin-bottom: unset;
+        box-sizing: border-box;
+        width: 100%;
+        height: auto;
+    }
+
+    .message_edit_topic_propagate {
+        width: 100%;
     }
 
     .topic_stream_edit_header {
         display: flex;
-        flex-wrap: wrap;
+        flex-flow: column wrap;
         justify-content: flex-start;
 
         #select_stream_id {

web/styles/zulip.css

@@ -935,12 +935,6 @@ div.focused-message-list {
     outline: none;
 }
 
-#move_topic_modal select {
-    width: auto;
-    margin-bottom: 10px;
-    max-width: 100%;
-}
-
 .topic_move_breadcrumb_messages {
     margin: 0 5px 5px 0;
     align-self: center;

web/templates/move_topic_to_stream.hbs

@@ -1,26 +1,50 @@
 {{#unless (or from_message_actions_popover only_topic_edit)}}
-<p class="white-space-preserve-wrap">{{#tr}}Move all messages in <strong>{topic_name}</strong>{{/tr}} to:</p>
+<p>
+    {{#tr}}
+    You are moving all messages from <z-stream></z-stream>
+    {{#*inline "z-stream"}}<b>{{> inline_decorated_stream_name stream=stream show_colored_icon=true}}</b>{{/inline}}
+    {{/tr}}
+    <i class="fa fa-angle-right" aria-hidden="true"></i>
+    {{#tr}}<b>{topic_name}.</b>{{/tr}}
+</p>
 {{/unless}}
 <form id="move_topic_form">
     {{#if only_topic_edit }}
     <p>{{t "Rename topic to:" }}</p>
     {{else if from_message_actions_popover}}
-    <p>{{t "Move messages to:" }}</p>
+    <p>
+        {{#tr}}
+        You are moving messages from <z-stream></z-stream>
+        {{#*inline "z-stream"}}<b>{{> inline_decorated_stream_name stream=stream show_colored_icon=true}}</b>{{/inline}}
+        {{/tr}}
+        <i class="fa fa-angle-right" aria-hidden="true"></i>
+        {{#tr}}<b>{topic_name}.</b>{{/tr}}
+    </p>
     {{/if}}
     <div class="topic_stream_edit_header">
         {{#unless only_topic_edit}}
-        {{> dropdown_widget_wrapper widget_name="move_topic_to_stream"}}
+        <div class="input-group">
-        <i class="fa fa-angle-right" aria-hidden="true"></i>
+            <label class="modal-field-label">New channel</label>
+            {{> dropdown_widget_wrapper widget_name="move_topic_to_stream"}}
+        </div>
         {{/unless}}
-        <input name="new_topic_name" type="text" class="move_messages_edit_topic modal_text_input" autocomplete="off" value="{{topic_name}}" {{#if disable_topic_input}}disabled{{/if}} />
+        <div class="input-group">
+            {{#unless only_topic_edit}}
+            <label for="move-topic-new-topic-name" class="modal-field-label">New topic</label>
+            {{/unless}}
+            <input id="move-topic-new-topic-name" name="new_topic_name" type="text" class="move_messages_edit_topic modal_text_input" autocomplete="off" value="{{topic_name}}" {{#if disable_topic_input}}disabled{{/if}} />
+        </div>
         <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">
+        <div class="input-group">
-            <option value="change_one" {{#if (eq message_placement "last")}}selected{{/if}}> {{t "Move only this message" }}</option>
+            <label for="move-topic-select-propagation-mode">{{t "Which messages should be moved?"}}</label>
-            <option value="change_later" {{#if (eq message_placement "intermediate")}}selected{{/if}}> {{t "Move this and all following messages in this topic" }}</option>
+            <select id="move-topic-select-propagation-mode" class="message_edit_topic_propagate modal_select bootstrap-focus-style">
-            <option value="change_all" {{#if (eq message_placement "first")}}selected{{/if}}> {{t "Move all messages in this topic" }}</option>
+                <option value="change_one" {{#if (eq message_placement "last")}}selected{{/if}}> {{t "Move only this message" }}</option>
-        </select>
+                <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>
+        </div>
         {{/if}}
         <div class="topic_move_breadcrumb_messages">
             <label class="checkbox">